applet/pages/tabtar/components/Seckill.vue

<template>
  <view
    class="seckill u-skeleton-fillet"
    v-if="(currSeckill && currSeckill.length > 0) || skeletonShow"
  >
    <view class="seckill-item">
      <view class="seckill-top" @click="goDetail('/pages/seckill/list')">
        <view class="left">限时秒杀</view>
        <view class="line" v-if="currTime"></view>
        <view class="time" v-if="currTime">{{ currTime }}点场 剩余</view>
        <view class="reciprocal" v-if="currTime">
          <uv-count-down
            :time="finishTime"
            format="HH:mm:ss"
            @change="onChange"
          >
            <view>
              <text class="time__item" v-if="timeData.hours != null"
                >{{
                  timeData.hours > 10 ? timeData.hours : "0" + timeData.hours
                }}:</text
              >
              <text class="time__item" v-if="timeData.minutes != null"
                >{{ timeData.minutes }}:</text
              >
              <text class="time__item" v-if="timeData.seconds != null">{{
                timeData.seconds
              }}</text>
            </view>
          </uv-count-down>
        </view>
      </view>
      <view
        class="option"
        v-if="(currSeckill && currSeckill.length > 0) || skeletonShow"
      >
        <swiper
          :indicator-dots="false"
          :autoplay="false"
          :display-multiple-items="itemsDis2"
          @change="imgActiveFun2"
          style="height: 220rpx"
          circular="true"
        >
          <swiper-item v-for="(item, key) in currSeckill" :key="key">
            <div class="fa-item">
              <view
                class="option-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="aspectFill"
                >
                </image>
                <view class="number">
                  <rich-text
                    :nodes="$mUtil.priceBigSmall(itemSon.minPrice)"
                  ></rich-text>
                </view>
              </view>
            </div>
          </swiper-item>
        </swiper>
        <view class="slide-box">
          <view class="dotBox" v-if="currSeckill.length > 1">
            <view
              class="dotBox_item"
              v-for="(v, i) in currSeckill"
              :key="i"
              :class="{ active_dotBox: activeBannerIndex2 == i }"
            ></view>
          </view>
        </view>
      </view>
      <noData v-else :config="{ top: 1, content: '暂无商品~' }"></noData>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { seckillActivityProductFlash_Api } from "@/api/seckill.js";

const props = defineProps({
  skeletonShow: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits([
  "goDetail",
  "overDown2",
  "imgActiveFun2",
  "goProductDetails",
]);
const timeData = ref({});
const currSeckill = ref([]); //秒杀
const currTime = ref(null);
const finishTime = ref(null);
const itemsDis2 = ref(1);
const activeBannerIndex2 = ref(0);

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

const goDetail = (url) => {
  emit("goDetail", url);
};

const imgActiveFun2 = (e) => {
  activeBannerIndex2.value = e.detail.current;
};

const goProductDetails = (url) => {
  emit("goProductDetails", url);
};

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

/**限时秒杀 */
const getSeckillList = () => {
  seckillActivityProductFlash_Api({ limit: 10 }).then((res) => {
    if (res && res.code == 200) {
      currTime.value = res.data.startHour;
      if (res.data.list) {
        currSeckill.value = oneArrToTwoArr(res.data.list);
      }
      if (res.data.finishTime) {
        finishTime.value = res.data.finishTime - new Date().getTime();
      }
    }
  });
};
onMounted(() => {
  getSeckillList();
});
defineExpose({
  init: getSeckillList,
});
</script>

<style scoped lang="scss">
.seckill {
  margin: 30rpx 30rpx 50rpx;
  border-radius: 10rpx;
  overflow: hidden;

  .seckill-item {
    border-radius: 16rpx;
    background-color: #ffffff;
    padding-bottom: 26rpx;

    .option {
      position: relative;
      margin-top: 20rpx;
      padding: 0 29rpx;

      .fa-item {
        display: flex;
      }

      .option-item:first-child {
        margin-left: 0;
      }

      .option-item {
        margin-left: 24rpx;

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

        .number {
          margin-top: 4rpx;
          text-align: center;
          font-size: 36rpx;
          font-weight: Bold;
          line-height: 24rpx;
          color: #333333;
          width: 140rpx;
        }
      }
    }

    .seckill-top {
      padding: 24rpx 26rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #f7f7f7;
      background: linear-gradient(180deg, #d4ecdf, rgba(204, 235, 217, 0));

      .left {
        font-size: 36rpx;
        font-weight: Bold;
        color: #1a1a1a;
        margin-right: 14rpx;
      }

      .line {
        width: 1rpx;
        height: 32rpx;
        background-color: #707070;
      }

      .time {
        margin-left: 16rpx;
        color: #666666;
        font-size: 24rpx;
        font-weight: Regular;
      }

      .reciprocal {
        color: #ffffff;
        padding: 0rpx 14rpx;
        background-color: #ff0000;
        font-size: 24rpx;
        font-weight: Bold;
        border-radius: 30rpx;
        margin-left: 30rpx;
      }
    }
  }
}

.time__item {
  color: #ffffff !important;
  font-size: 24rpx;
}

.slide-box {
  display: flex;
  justify-content: center;
}

.dotBox {
  height: 14rpx;
  overflow: hidden;
  border-radius: 14rpx;
  background-color: #ededed;
  display: flex;
  justify-content: center;

  .dotBox_item {
    width: 45rpx;
    height: 14rpx;
    border-radius: 2rpx;
    background-color: #ededed;
    transition: all 0.5s;
  }

  .active_dotBox {
    width: 45rpx;
    background: linear-gradient(109deg, #fb6b3e 20%, #feaf6b 85%);
    transition: all 0.5s;
  }
}
</style>