applet/pages/seckill/list.vue

<template>
  <view class="time-limit">
    <uv-navbar title="限时秒杀" autoBack bgColor="#fa6138" placeholder leftIconColor="#ffffff" titleStyle="color: #ffffff"></uv-navbar>
    <view class="top">
      <view class="box">
        <scroll-view scroll-x="true">
          <view
            class="time"
            v-for="(item, index) in times"
            :key="index"
            @click="switeTime(item)"
          >
            <view class="number">
              <!-- {{ item.st + ":00" }} -->
              {{ item.startHour }}
            </view>
            <view
              :class="item.active ? 'font' : 'font-soon'"
              v-if="item.value == 0"
            >
              即将开始
            </view>

            <view
              :class="item.active ? 'font' : 'font-soon'"
              v-if="item.value == 1"
            >
              已开抢
            </view>
            <view
              :class="item.active ? 'font' : 'font-soon'"
              v-if="item.value == 2"
            >
              正在抢购
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="surplus">
        <view class="transverse"> </view>
        <view class="surplus-content" v-if="activeState == 1">
          <view class="lable"> 本场剩余 </view>
          <uv-count-down
            :time="remainingTime"
            format="HH:mm:ss"
          ></uv-count-down>
        </view>
        <view class="surplus-content" v-if="activeState == 0">
          <view class="lable">即将开始</view>
        </view>
        <view class="surplus-content" v-if="activeState == 2">
          <view class="lable">已开抢</view>
        </view>
        <view class="transverse"> </view>
      </view>
    </view>
    <swiper
      class="commodity"
      :current="currentItem"
      v-if="goodList && goodList.length > 0"
      :indicator-dots="false"
      :autoplay="false"
      @change="imgActiveFun"
    >
      <swiper-item
        class="commodity-item"
        v-for="(item, key) in goodList"
        :key="item.id"
        @click="goProductDetails('/pages/seckill/seckillGoods?id=' + item.id)"
      >
        <view
          :class="[activeBannerIndex == key ? 'active-back' : 'swiper-back']"
        >
          <!-- ?x-oss-process=style/w_350 -->
          <image
            :class="[
              activeBannerIndex == key ? 'current-item' : 'default-image',
            ]"
            :src="`${item.coverImage}`"
            mode=""
          >
          </image>
          <view class="bottom-back">
            <view
              :class="[
                activeBannerIndex == key ? 'active-name' : 'name',
                'u-text2',
              ]"
            >
              {{ item.title }}
            </view>
            <view class="content-number">
              <view class="large">
                <rich-text
                  :nodes="$mUtil.priceBigSmall(item.minPrice)"
                ></rich-text>
              </view>
              <view class="small">
                <rich-text
                  :nodes="$mUtil.priceBigSmall(item.minSalePrice)"
                ></rich-text>
              </view>
            </view>
            <view class="soon">
              <view class="soon-item">
                <view
                  class="orange"
                  :style="{ width: (15.3 * item.rate) / 10 + 'rpx' }"
                >
                </view>
              </view>
              <view class="complete"> 已抢{{ item.rate }}% </view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <view class="option" v-if="goodList && goodList.length > 0">
      <!-- <view class="option-item active">
				
			</view> -->
      <view
        class="option-item"
        :class="{ active: activeBannerIndex == index }"
        v-for="(item, index) in goodList"
        :key="index"
      >
      </view>
    </view>
    <view class="list">
      <view v-if="goodList.length > 0">
        <view
          class="item"
          v-for="(item, index) in goodList"
          :key="index"
          @click="goProductDetails('/pages/seckill/seckillGoods?id=' + item.id)"
        >
          <view class="item-left">
            <!-- ?x-oss-process=style/w_350 -->
            <image :src="`${item.coverImage}`" mode=""></image>
          </view>
          <view class="item-right">
            <view class="title">
              {{ item.title }}
            </view>
            <view class="list-soon">
              <view class="soon-item">
                <view
                  class="orange"
                  :style="{ width: (15.3 * item.rate) / 10 + 'rpx' }"
                >
                </view>
              </view>
              <view class="complete"> 已抢{{ item.rate }}% </view>
            </view>
            <view class="list-bottom">
              <view class="number">
                <view class="large">
                  <rich-text
                    :nodes="$mUtil.priceBigSmall(item.minPrice)"
                  ></rich-text>
                </view>
                <view class="small">
                  <rich-text
                    :nodes="$mUtil.priceBigSmall(item.minSalePrice)"
                  ></rich-text>
                </view>
              </view>
              <view class="no-button" v-if="activeState == 0">即将开始</view>
              <view class="no-button" v-if="activeState == 2">已结束 </view>
              <view class="button" v-if="activeState == 1 && ispay"
                >立即抢购
              </view>
            </view>
          </view>
        </view>
        <loadMore v-if="goodList.length > 0" :status="status"></loadMore>
      </view>
      <noData v-else :config="{ top: 20, content: '暂无商品~' }"></noData>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  onShow,
  onPullDownRefresh,
  onReachBottom,
  onLoad,
} from "@dcloudio/uni-app";
import {
  seckillTimeConfigList_Api,
  seckillActivityProductStartFlashSale_Api,
} from "@/api/seckill.js";

const loading = ref(true);
const page = ref(1);
const limit = ref(10);
const activeState = ref(null);
const times = ref([]);
const curTime = ref(null);
const goodList = ref([]);
const httpCurTime = ref(null);
const status = ref("more");
const activeBannerIndex = ref(0);
const params = ref({});
const endTime = ref(null);
const ispay = ref(getApp().globalData.openPay);
const currentItem = ref(0);
const remainingTime = ref(0);

// 切换时间
const switeTime = (item) => {
  let stHour = item.startHour.split(":")[0];
  let etHour = item.endHour.split(":")[0];
  httpCurTime.value = item.startHour;
  if (etHour == "23") {
    endTime.value = "23:59";
  } else {
    endTime.value = item.endHour;
  }

  times.value.forEach((val) => {
    val.active = false;
  });
  item.active = true;

  goodList.value = [];
  page.value = 1;

  getList();
};

const goProductDetails = (url) => {
  if (activeState.value == 1) {
    uni.navigateTo({
      url: url,
    });
  } else if (activeState.value == 0) {
    uni.$uv.toast("该活动还未开始");
  } else {
    uni.$uv.toast("该活动已结束");
  }
};

const imgActiveFun = (e) => {
  activeBannerIndex.value = e.detail.current;
  // console.log(currentItem.value);
  // console.log(e.detail.current);
};

const getTime = async () => {
  curTime.value = new Date().getHours();
  await seckillTimeConfigList_Api().then((res) => {
    if (res.code == 200) {
      // times.value = res.data || [];
      if (res.data && res.data.length > 0) {
        times.value = res.data.map((val, index) => {
          let stHour = val.startHour.split(":")[0];
          let etHour = val.endHour.split(":")[0];

          // 活动正在进行中
          if (stHour <= curTime.value && curTime.value < etHour) {
            val.value = 2;
            httpCurTime.value = val.startHour;
            endTime.value = val.endHour;
            val.active = true;
          } else if (curTime.value < etHour) {
            // 活动即将开始
            val.value = 0;
            if (httpCurTime.value == null) {
              httpCurTime.value = val.startHour;
              endTime.value = val.endHour;
              val.active = true;
            }
          } else {
            val.value = 1;
          }

          return val;
        });
      }
    }
  });

  getList();
};

const getList = () => {
  loading.value = false;
  let objs = {
    startHour: httpCurTime.value,
    endHour: endTime.value,
    limit: limit.value,
    ...params.value,
  };
  seckillActivityProductStartFlashSale_Api(objs).then((res) => {
    if (res && res.code == 200) {
      activeState.value = res.data.activeState;
      remainingTime.value = res.data.finishTime - res.data.nowTime;
      goodList.value = goodList.value.concat(res.data.pageList?.rows || []);

      if (res.data.pageList?.total <= goodList.value.length) {
        status.value = "noMore";
      } else {
        status.value = "more";
      }
    }
  });
};

// 生命周期
onLoad((options) => {
  if (options.businessId) {
    params.value.businessId = options.businessId;
  }
  getTime();
});

onShow(() => {
  // this.goodList=[];
  //    this.getTime();
});

// 下拉刷新
onPullDownRefresh(() => {
  page.value = 1;
  goodList.value = [];
  times.value.forEach((item) => {
    item.active = false;
  });
  getTime();
  uni.stopPullDownRefresh();
});

// 上拉加载
onReachBottom(() => {
  if (status.value != "noMore") {
    page.value++;
    getList();
  }
});
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.no-button {
  color: #1e402e;
  font-size: 28rpx;
  font-weight: 500;
  padding: 12rpx 34rpx;
  border: 2rpx solid #1e402e;
  background-color: #ffffff;
  border-radius: 32rpx;
}

.bottom-back {
  background-color: #ffffff;
  border-bottom-left-radius: 18rpx;
  border-bottom-right-radius: 18rpx;
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: -1;
  bottom: 30rpx;
  padding-top: 20rpx;

  .soon {
    padding: 0 20rpx;
    display: flex;
    margin-bottom: 6rpx;
    align-items: center;

    .soon-item {
      width: 153rpx;
      height: 10rpx;
      border-radius: 6rpx;
      border: 2rpx solid #fa6138;
      margin-right: 10rpx;

      .orange {
        width: 50rpx;
        height: 10rpx;
        border-radius: 5rpx;
        background-color: #fa6138;
      }
    }

    .complete {
      font-size: 20rpx;
      color: #fa6138;
      line-height: 24rpx;
      font-weight: 500;
    }
  }

  .name {
    padding: 0 20rpx 0 10rpx;
    // margin: 20rpx 0 0 10rpx;
    width: 380rpx;
    box-sizing: border-box;
    line-height: 36rpx;
    height: 72rpx;
    color: #181818;
    font-weight: 400;
    overflow: hidden;
    // text-overflow: ellipsis;
  }

  .active-name {
    padding: 0 20rpx 0 10rpx;
    // margin: 20rpx 0 0 10rpx;
    width: 420rpx;
    box-sizing: border-box;
    line-height: 36rpx;
    height: 72rpx;
    color: #181818;
    font-weight: 400;
    overflow: hidden;
    transition: all 0.5s;
  }

  .content-number {
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    margin: 15rpx 0;

    .large {
      font-size: 36rpx;
      color: #fa6138;
      font-weight: bold;

      text {
        font-size: 36rpx;
      }
    }

    .small {
      font-size: 22rpx;
      color: #cccccc;
      font-weight: 500;
      margin-left: 16rpx;
      text-decoration: line-through;
    }
  }
}

.commodity {
  margin-top: -139rpx;
  width: 720rpx;
  // padding: 0 30rpx;
  // margin-left: 30rpx;
  // margin-right: 30rpx;
  height: 650rpx;
  margin-left: 30rpx;
  overflow: hidden;

  ::v-deep swiper-item {
    width: 450rpx !important;
  }

  ::v-deep .uni-swiper-slide-frame {
    width: 420rpx !important;
  }

  .commodity-item {
    //background-color: #FFFFFF;
    // margin-right: 30rpx;
    border-radius: 16rpx;
    // padding: 18rpx;
    padding-top: 0;
    // text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    .swiper-back {
      border-radius: 16rpx;
      overflow: hidden;
      // background-color: #FFFFFF;
      width: 380rpx;
      // padding-top: 40rpx;
      height: 610rpx;
      margin-top: 40rpx;
    }

    .active-back {
      // padding-top: 0;
      // background-color: #FFFFFF;
      width: 420rpx;
      height: 650rpx;
      border-radius: 16rpx;
      position: relative;
      transition: all 0.5s;
    }

    .default-image {
      width: 380rpx;
      height: 380rpx;
      border-radius: 16rpx;
      position: relative;
    }

    .current-item {
      width: 420rpx;
      height: 420rpx;
      border-radius: 16rpx;
      transition: all 0.5s;
    }

    .completed {
      font-size: 22rpx;
      margin-top: 2rpx;
      font-weight: 400;
      color: #333333;

      text {
        color: #fa6138;
      }
    }

    .number {
      margin-top: 20rpx;
      font-size: 22rpx;
      color: #333333;
      font-weight: 500;
      display: flex;
      align-items: center;

      .zero {
        margin-left: 20rpx;
        font-size: 22rpx;
        color: #fa6138;
        font-weight: 500;
      }

      .one {
        color: #fa6138;
        font-size: 34rpx;
        font-weight: 700;
      }

      .two {
        color: #fa6138;
        font-size: 18rpx;
        font-weight: 700;
      }
    }
  }
}

.option {
  margin: 30rpx 0;
  display: flex;
  justify-content: center;

  .option-item {
    background-color: #d9d9d9;
    margin: 0 8rpx;
    width: 14rpx;
    height: 14rpx;
    border-radius: 7rpx;
  }

  .active {
    background-color: #fa6138;
    width: 35rpx;
    height: 14rpx;
    border-radius: 7rpx;
  }
}

.list {
  margin: 0 30rpx 26rpx 30rpx;

  .item {
    padding: 20rpx;
    background-color: #ffffff;
    border-radius: 18rpx;
    display: flex;
    margin-bottom: 25rpx;

    .item-left {
      image {
        width: 187rpx;
        height: 187rpx;
        border-radius: 18rpx;
      }
    }

    .item-right {
      margin-left: 30rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        font-size: 28rpx;
        font-weight: 400;
        color: #181818;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal !important;
      }

      .list-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .number {
          display: flex;
          align-items: center;

          .large {
            font-size: 36rpx;
            color: #fa6138;
            font-weight: Bold;
            margin-right: 17rpx;

            text {
              font-size: 36rpx;
            }
          }

          .small {
            font-size: 22rpx;
            color: #cccccc;
            font-weight: 500;
            text-decoration: line-through;
          }
        }

        .button {
          color: #ffffff;
          font-size: 28rpx;
          font-weight: 500;
          padding: 12rpx 34rpx;
          background-color: #fa6138;
          border-radius: 32rpx;
        }
      }

      .list-soon {
        display: flex;
        align-items: center;
        margin-top: 12rpx;

        .soon-item {
          width: 153rpx;
          height: 10rpx;
          border: 2rpx solid #fa6138;
          border-radius: 6rpx;
          margin-right: 10rpx;

          .orange {
            width: 50rpx;
            height: 10rpx;
            background-color: #fa6138;
            border-radius: 5rpx;
          }
        }

        .complete {
          font-size: 20rpx;
          color: #fa6138;
          font-weight: 500;
        }
      }
    }
  }
}

.spot {
  display: flex;
  justify-content: center;
  margin: 27rpx 0 40rpx 0;

  .spot-item {
    width: 35rpx;
    height: 14rpx;
    background-color: #fa6138;
    margin-right: 16rpx;
  }

  .radius {
    width: 14rpx;
    height: 14rpx;
    background-color: #d9d9d9;
    border-radius: 7rpx;
    margin-right: 16rpx;
  }
}

.two-comtent-item {
  margin: 0 30rpx;
  background-color: #ffffff;
  border-radius: 18rpx;

  .two-image {
    overflow: hidden;

    image {
      width: 380rpx;
      height: 380rpx;
      border-radius: 18rpx;
    }
  }

  .two-content-number {
    padding: 0 30rpx;
    display: flex;
    align-items: baseline;

    .two-large {
      font-size: 20rpx;
      color: #fa6138;
      font-weight: bold;

      text {
        font-size: 36rpx;
      }
    }

    .two-small {
      font-size: 22rpx;
      color: #cccccc;
      font-weight: 500;
      margin-left: 16rpx;
      text-decoration: line-through;
    }
  }

  .two-name {
    padding: 0 20rpx;
    width: 368rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal !important;
  }
}

.two-soon {
  padding: 0 30rpx;
  display: flex;
  align-items: center;

  .two-soon-item {
    width: 153rpx;
    height: 10rpx;
    border-radius: 6rpx;
    border: 1rpx solid #fa6138;
    margin-right: 10rpx;

    .two-orange {
      width: 50rpx;
      height: 10rpx;
      border-radius: 5rpx;
      background-color: #fa6138;
    }
  }

  .two-complete {
    font-size: 20rpx;
    color: #fa6138;
    line-height: 24rpx;
    font-weight: 500;
  }
}

.content {
  //   align-items: center;
  //   overflow: scroll;
  //   white-space: nowrap;
  // height: 300rpx;
  // background-color: red;
  margin-top: -139rpx;
  //   display: flex;
  margin-left: 30rpx;
  height: 607rpx;

  ::v-deep .uni-swiper-slide-frame {
    width: 402rpx !important;
    padding-right: 30rpx;
  }

  .comtent-item {
    margin-right: 30rpx;
    // padding: 0 30rpx;
    background-color: #ffffff;
    border-radius: 18rpx;

    // width: 420rpx;

    image {
      width: 420rpx;
      height: 420rpx;
      border-radius: 18rpx;
    }
  }
}

.surplus {
  margin-top: 43rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 168rpx;

  .surplus-content {
    color: #ffffff;
    font-size: 20rpx;
    font-weight: 500;
    display: flex;
    align-items: center;

    text,
    &:deep(.uv-count-down__text) {
      color: #fa6138;
      padding: 1rpx 4rpx;
      background-color: #dccda4;
      border-radius: 4rpx;
      margin: 0 6rpx 0 14rpx;
    }
  }

  .lable {
    margin-right: 8rpx;
  }

  ::v-deep .uni-countdown__number {
    padding: 2rpx 8rpx;
    border-radius: 8rpx;
  }

  .transverse {
    width: 210rpx;
    height: 1rpx;
    opacity: 0.2;
    background-color: #ffffff;
  }
}

.top {
  background-color: #fa6138;

  .box {
    padding: 0 30rpx;
    white-space: nowrap;
    // display: flex;
    // justify-content: space-around;

    .time {
      display: inline-block;
      margin-right: 30rpx;
      text-align: center;

      .number {
        font-size: 42rpx;
        font-weight: 700;
        color: #ffffff;
      }

      .font {
        font-size: 22rpx;
        font-weight: 500;
        color: #053420;
        padding: 2rpx 12rpx;
        border-radius: 20rpx;
        background-color: #dccda4;
      }

      .font-soon {
        font-size: 22rpx;
        font-weight: 500;
        color: #f5f5f5;
      }
    }
  }
}

.time-limit {
  background-color: #f6f6f6;
}
</style>