pay-customer/src/pages/index/components/EventList.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>