96 lines
2.5 KiB
Vue
96 lines
2.5 KiB
Vue
<template>
|
||
<view>
|
||
<view class="event_content">
|
||
<view
|
||
class="event_item"
|
||
v-for="(i, index) in props?.data"
|
||
:key="`item_${index}`"
|
||
@click="toDetaile(i)"
|
||
>
|
||
<view class="event_item_img">
|
||
<image v-if="i?.cover_image?.length" :src="i?.cover_image[0]?.url" mode="aspectFill" />
|
||
<view v-else class="event_item_img_default">
|
||
<uni-icons type="images" size="60" color="#eee"></uni-icons>
|
||
</view>
|
||
<view :class="`event_item_status event_item_status_${i?.status}`">
|
||
<hs-enum-tag :value="i?.status" :Enums="ActivitiesStatusEnum" />
|
||
</view>
|
||
</view>
|
||
<view class="event_item_name"> {{ i?.title }} </view>
|
||
<view class="event_item_data">
|
||
活动时间：{{ showDay(i?.start_time) }} 至 {{ showDay(i?.end_time) }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
const props = defineProps(['data'])
|
||
import { ActivitiesStatusEnum } from '@/gen/Enums'
|
||
import { showDay } from '@/common/libraries/day'
|
||
import { getIsInRangeInclusive } from '@/common/libraries/day'
|
||
import { gotoEventToPage } from '@/common/libraries/naviHelper'
|
||
const toDetaile = (e: { id: string }) => {
|
||
uni.navigateTo({
|
||
url: `/INDEX/activities_show/index?id=${e.id}`
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.event_content {
|
||
padding: 0 30rpx;
|
||
.event_item {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
margin-top: 30rpx;
|
||
.event_item_img {
|
||
height: 306rpx;
|
||
position: relative;
|
||
text-align: center;
|
||
.event_item_img_default {
|
||
padding-top: 15%;
|
||
}
|
||
.event_item_status {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
color: #fff;
|
||
border-top-left-radius: 20rpx;
|
||
border-bottom-right-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
}
|
||
.event_item_status_NotStarted {
|
||
background-color: #ffa100;
|
||
}
|
||
.event_item_status_InProgress {
|
||
background-color: #4096ff;
|
||
}
|
||
.event_item_status_Finished {
|
||
background-color: #939393;
|
||
}
|
||
}
|
||
image {
|
||
width: 100%;
|
||
height: 306rpx;
|
||
border-top-left-radius: 20rpx;
|
||
border-top-right-radius: 20rpx;
|
||
}
|
||
.event_item_name {
|
||
padding: 15rpx 30rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
.event_item_data {
|
||
padding: 0 30rpx 20rpx 30rpx;
|
||
color: #666666;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|