applet/pages/shop/components/SeckillGood.vue

<template>
  <view class="limitCard" v-if="currSeckill && currSeckill.length > 0">
    <view class="limitCard_top">
      <view class="limitCard_top_title">限时秒杀</view>
      <view class="limitCard_top_lab">{{ currTime }}点场 剩余</view>
      <!-- <view class="limitCard_top_time">3天 17 : 26 : 35</view> -->
      <view class="limitCard_top_time" v-if="finishTime">
        <uv-count-down
          :time="finishTime"
          format="DD:HH:mm:ss"
          autoStart
          millisecond
          @change="onChange"
          @finish="onFinish"
        >
          <view class="time">
            <text class="time__item" v-if="timeData.days"
              >{{ timeData.days }}天</text
            >
            <text class="time__item"
              >{{
                timeData.hours > 10 ? timeData.hours : "0" + timeData.hours
              }}:</text
            >
            <text class="time__item"
              >{{
                timeData.minutes > 10
                  ? timeData.minutes
                  : "0" + timeData.minutes
              }}:</text
            >
            <text class="time__item">{{ timeData.seconds }}</text>
          </view>
        </uv-count-down>
      </view>
    </view>
    <swiper
      class="swiper"
      indicator-color="#EDEDED"
      indicator-active-color="#3775F6"
      circular
      :indicator-dots="true"
      :autoplay="false"
      :interval="2000"
      :duration="500"
    >
      <swiper-item v-for="(item, key) in currSeckill" :key="key">
        <view class="listBox">
          <view
            class="listBox_item"
            v-for="itemSon in item"
            @click="
              goProductDetails('/pages/seckill/seckillGoods?id=' + itemSon.id)
            "
            :key="itemSon.id"
          >
            <!-- ?x-oss-process=style/w_350 -->
            <image
              v-if="itemSon && itemSon.coverImage"
              :src="`${itemSon.coverImage}`"
              mode=""
            >
            </image>
            <!-- <view>¥<text>64.</text>20</view> -->
            <view class="">
              <rich-text
                :nodes="$mUtil.priceBigSmall(itemSon.minPrice)"
              ></rich-text>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { seckillActivityProductFlash_Api } from "@/api/seckill.js";
const props = defineProps({
  businessId: {
    type: [Number, String],
    default: "",
  },
});
const currSeckill = ref([]);
const currTime = ref(0);
const timeData = ref({});
const finishTime = ref(0);

const onChange = (e) => {
  timeData.value = e;
};

const onFinish = () => {
  seckillActivityProductFlash();
};

// 一维数组转二维数组
const oneArrToTwoArr = (data = []) => {
  let newData = [];
  let zyf = 4; //一维数组转二维数组长度(此处是二维数组每一个长度控制)
  for (let i = 0; i < Math.ceil(data.length / zyf); i++) {
    newData[i] = [];
    newData[i].push(data[i * zyf]);
    for (let j = 1; j < zyf; j++) {
      if (data[i * zyf + j] == undefined) {
        //超出长度控住
        return newData;
      } else {
        newData[i].push(data[i * zyf + j]);
      }
    }
  }
  return newData;
};

const seckillActivityProductFlash = () => {
  seckillActivityProductFlash_Api({
    businessId: props.businessId,
    limit: 10,
  }).then((res) => {
    // console.log(res);
    if (res.code == 200) {
      currSeckill.value = res.data.list ? oneArrToTwoArr(res.data.list || []) : [];
      currTime.value = res.data.startHour;
      // finishTime.value = res.data.finishTime;
      if (res.data.finishTime) {
        finishTime.value = res.data.finishTime - new Date().getTime();
      }else{
        finishTime.value = 0;
      }
    }
  });
};
const goProductDetails = (url) => {
  uni.navigateTo({
    url,
  });
};

onMounted(() => {
  seckillActivityProductFlash();
});

defineExpose({
  init: seckillActivityProductFlash,
});
</script>

<style lang="scss" scoped>
.limitCard {
  margin: auto;
  //   width: 720rpx;
  height: 410rpx;
  padding: 0 30rpx;
  // background: url("/static/convenienceService/cardBg.png") 0 0 no-repeat;
  background-size: 720rpx 410rpx;
  box-sizing: border-box;

  .limitCard_top {
    display: flex;
    padding: 35rpx 30rpx 20rpx 30rpx;
    align-items: center;
    border-bottom: 1rpx solid #e6e6e6;

    .limitCard_top_title {
      font-size: 36rpx;
      color: #1a1a1a;
      font-weight: 700;
      display: flex;
      align-items: center;
      position: relative;
      padding-right: 15rpx;

      &::after {
        display: block;
        content: "";
        width: 1rpx;
        height: 33rpx;
        background: #707070;
        position: absolute;
        right: 0;
        top: 10rpx;
      }
    }

    .limitCard_top_lab {
      font-size: 24rpx;
      color: #666666;
      margin: 0 30rpx 0 15rpx;
    }

    .limitCard_top_time {
      border-radius: 17rpx;
      background: #ff0000;
      font-size: 24rpx;
      color: #fff;
      font-weight: 700;
      padding: 0 15rpx;
    }
  }

  .swiper {
    height: 280rpx;

    .listBox {
      padding: 25rpx 20rpx;
      display: flex;
      box-sizing: border-box;

      .listBox_item {
        margin-right: 20rpx;

        image {
          width: 140rpx;
          height: 140rpx;
        }

        > view {
          width: 140rpx;
          font-size: 20rpx;
          color: #333333;
          text-align: center;

          text {
            font-size: 28rpx;
            font-weight: 600;
            display: inline-block;
            margin-left: 10rpx;
          }
        }

        &:last-child {
          margin-right: 0 !important;
        }
      }
    }
  }
}
</style>