applet/pages/seckill/list.vue

<template>
  <view class="time-limit">
    <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.start_hour }}
            </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>
          <uni-countdown
            v-if="countDown"
            :backgroundColor="'#DCCDA4'"
            :color="'#00bf5a'"
            :splitorColor="'#fff'"
            :show-day="time2[0] > 0"
            :day="time2[0]"
            :hour="time2[1]"
            :minute="time2[2]"
            :second="time2[3]"
          >
          </uni-countdown>
        </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/product/goods/seckillGoods?id=' + item.id)
        "
      >
        <view
          :class="[activeBannerIndex == key ? 'active-back' : 'swiper-back']"
        >
          <image
            :class="[
              activeBannerIndex == key ? 'current-item' : 'default-image',
            ]"
            :src="`${item.cover}?x-oss-process=style/w_350`"
            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.min_price)"
                ></rich-text>
              </view>
              <view class="small">
                <rich-text
                  :nodes="$mUtil.priceBigSmall(item.min_sale_price)"
                ></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/product/goods/seckillGoods?id=' + item.id)
          "
        >
          <view class="item-left">
            <image
              :src="`${item.cover}?x-oss-process=style/w_350`"
              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.min_price)"
                  ></rich-text>
                </view>
                <view class="small">
                  <rich-text
                    :nodes="$mUtil.priceBigSmall(item.min_sale_price)"
                  ></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>
    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
// import { getAllKillConfig } from "@/api/home";

const $http = uni.$http;
const $mUtil = uni.$mUtil;

const loading = ref(true);
const page = ref(1);
const limit = ref(10);
const activeState = ref(null);
const times = ref([]);
const countDown = ref(true);
const curTime = ref(null);
const goodList = ref([]);
const time2 = ref([0, 0, 0, 0]); // 秒杀倒计时
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 initParams = (options) => {
  if (options.shopid) {
    params.value.shop_id = options.shopid;
  }
};

// 切换时间
const switeTime = (item) => {
  let st_hour = item.start_hour.split(":")[0];
  let et_hour = item.end_hour.split(":")[0];
  console.log(item, 1111);
  countDown.value = false;
  time2.value = [0, 0, 0, 0];

  setTimeout(() => {
    countDown.value = true;
  }, 0);

  httpCurTime.value = item.start_hour;
  if (et_hour == "23") {
    endTime.value = "23:59";
  } else {
    endTime.value = item.end_hour;
  }

  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) {
    $mUtil.toast("该活动还未开始");
  } else {
    $mUtil.toast("该活动已结束");
  }
};

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

const getTime = async () => {
	return
  curTime.value = new Date().getHours();
  times.value = await getAllKillConfig();

  if (times.value && times.value.length > 0) {
    times.value.forEach((val, index) => {
      let st_hour = val.start_hour.split(":")[0];
      let et_hour = val.end_hour.split(":")[0];

      // 活动正在进行中
      if (st_hour <= curTime.value && curTime.value < et_hour) {
        val.value = 2;
        httpCurTime.value = val.start_hour;
        endTime.value = val.end_hour;
        val.active = true;
      } else if (curTime.value < et_hour) {
        // 活动即将开始
        val.value = 0;
        if (httpCurTime.value == null) {
          httpCurTime.value = val.start_hour;
          endTime.value = val.end_hour;
          val.active = true;
        }
      } else if (
        curTime.value >= et_hour &&
        curTime.value > times.value[index + 1]?.start_hour
      ) {
        // 活动已过期
        val.value = 1;
      }
    });
  }
  getList();
};

const getList = () => {
  loading.value = false;
  $http
    .get(
      "/marketing/seckillActivityGoods/start-flash-sale",
      {
        start_hour: httpCurTime.value,
        end_hour: endTime.value,
        page: page.value,
        limit: limit.value,
        ...params.value,
      },
      false
    )
    .then((res) => {
      if (res && res.code == 200) {
        activeState.value = res.data.active_state;
        time2.value = $mUtil
          .countDown(Math.floor(res.data.finish_time / 1000), res.data.now_time)
          .split(":")
          .map((val) => Number(val));
        goodList.value = goodList.value.concat(res.data.page.list);

        if (res.data.page.totalPage <= res.data.page.currPage) {
          status.value = "noMore";
        } else {
          status.value = "more";
        }
      }
    });
};

// 生命周期
onLoad((options) => {
  initParams(options);
  //   getTime();
});

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

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

// 上拉加载
onReachBottom(() => {
  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 #00bf5a;
      margin-right: 10rpx;

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

    .complete {
      font-size: 20rpx;
      color: #00bf5a;
      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: #00bf5a;
      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: #00bf5a;
      }
    }

    .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: #00bf5a;
        font-weight: 500;
      }

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

      .two {
        color: #00bf5a;
        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: #00bf5a;
    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: #00bf5a;
            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: #00bf5a;
          border-radius: 32rpx;
        }
      }

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

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

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

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

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

  .spot-item {
    width: 35rpx;
    height: 14rpx;
    background-color: #00bf5a;
    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: #00bf5a;
      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 #00bf5a;
    margin-right: 10rpx;

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

  .two-complete {
    font-size: 20rpx;
    color: #00bf5a;
    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 {
      color: #00bf5a;
      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: #00bf5a;

  .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>