yshop-pro-uniapp/pages/discount/discount.vue

<template>
  <layout>
    <uv-sticky customNavHeight="0">
      <uv-navbar
          :fixed="false"
          :safeAreaInsetTop="true"
          autoBack
          title="折扣专区"
      />
    </uv-sticky>
    <view class="swiper">
      <image class="image" :src="discountBg" mode="widthFix" />
    </view>
    <view class="time-bar">
      <div class="time-bar-item" v-for="(item,index) in timesList" :key="index" :class="activeIndex === index && 'on'" @tap="timeChange(item,index)">
        <div class="time">{{item.time}}</div>
        <div class="status">
          <text v-if="item.status === 0">已结束</text>
          <text v-if="item.status === 1">抢购中</text>
          <text v-if="item.status === 2">未开始</text>
        </div>
        <div
            class="countdown"
            v-if="item.status === 1"
        >
          <text>已结束</text>
          <uv-count-down :time="item.countdown" format="HH:mm:ss" @finish="countDownFinish"></uv-count-down>
        </div>
      </div>
    </view>
    <view
        class="product-box"
        v-if="!listEmpty"
    >
      <template
          v-for="(item,index) in dataList"
          :key="item.id"
      >
        <view class="product-item" :class="index === 0 && 'isFirst'">
          <goods
              link
              :hasFirst="index === 0"
              :data="item"
              :price="item.price"
              :buyProgress="index === 0"
              :original="true"
              :total="index !== 0"
          >
          </goods>
        </view>
      </template>
    </view>
    <Empty
        v-else
        :iconSrc="emptyCollectIcon"
    >
      这里空空如也~
    </Empty>
    <!-- 加载中 -->
    <ListLoadLoading v-if="loading" />
    <!-- 加载完毕-->
    <ListLoadOver v-if="loadend" />
  </layout>
</template>


<script setup>
import { computed, ref } from 'vue'
import {getActivityProList, getProductList} from '@/api/product'
import { onLoad } from '@dcloudio/uni-app'
import { useActivity } from '@/hooks/useActivity'
import ListLoadOver from "@/components/ListLoadOver/index.vue";
import ListLoadLoading from "@/components/ListLoadLoading/index.vue";
import {emptyCollectIcon} from "@/utils/images";
import Empty from "@/components/Empty/index.vue";
import { discountBg } from "@/utils/images";
import LazyImage from '@/components/LazyImage/index.vue'

const { refresh, dataList, loading, loadend, listEmpty, otherQuery, activeIndex, timesList, timeChange, countDownFinish, handleGetTimeList} = useActivity(getActivityProList)

onLoad(async (option) => {
  otherQuery.value = {
    type:3
  }
  await handleGetTimeList()
})

</script>

<style lang="scss">
.swiper {
  width: 100%;

  .image {
    width: 100%;
    display: block;
  }
}

.product-box {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .product-item {
    background: #FFFFFF;
    width: calc((100% - 20rpx) / 2);
    margin-bottom: 20rpx;
    border-radius: 15rpx;
    &.isFirst{
      width: 100%;
    }
  }
}
</style>