yicangzongtai_app_240321/pages/research/nearby/timeLimit.vue

<template>
  <view class="time-limit">
    <navbar :config="config" backColor="#fff"></navbar>
    <view class="top">
      <view class="box">
        <view class="time" v-for="(item, index) in times" :key="index" @click="switeTime(item)">
          <view class="number">
            {{ item.st + ":00" }}
          </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>
      </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="'#FF0000'" :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" 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" 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>
  let app = getApp()
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: "限时秒杀",
          color: "#fff",
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, '#FA6138'],
        },
        loading: true,
        page: 1,
        limit: 10,
        activeState: null,
        times: [{
            st: "9",
            et: "12",
          },
          {
            st: "13",
            et: "15",
          },
          {
            st: "16",
            et: "18",
          },
          {
            st: "19",
            et: "21",
          },
          {
            st: "22",
            et: "23",
          },
        ],
        countDown: true,
        curTime: null,
        goodList: [],
        time2: [0, 0, 0, 0], //秒杀倒计时
        httpCurTime: null,
        status: "more",
        activeBannerIndex: 0,
        params: {},
        endTime: null,
        ispay: app.globalData.openPay,
        currentItem: 0
      };
    },
    onLoad(options) {

      if (options.shopid) {
        this.params.shop_id = options.shopid

      }
    },
    //  onShow() {
    // this.goodList=[];
    //    this.getTime();
    //  },
    onLoad() {
      this.getTime();
    },
    onPullDownRefresh() {
      this.page = 1;
      this.goodList = [];
      this.times.active = false
      this.times.forEach((item) => {
        item.active = false
      })
      this.getTime();
      uni.stopPullDownRefresh();
    },
    onReachBottom() {
      this.page++;
      this.getList();
    },
    methods: {
      //切换时间
      switeTime(item) {
        this.countDown = false
        this.time2 = [0, 0, 0, 0]
        this.$nextTick(function() {
          this.countDown = true
        })
        // this.loading = true
        //this.countDown = false
        this.httpCurTime = item.st + ":00"
        if (item.et == "23") {
          this.endTime = item.et + ":59"
        } else {
          this.endTime = item.et + ":00"
        }

        this.times.forEach((val, index) => {
          val.active = false
        })
        item.active = true

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

        this.getList()

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

      },
      imgActiveFun(e) {
        this.activeBannerIndex = e.detail.current;
        console.log(this.currentItem)
        console.log(e.detail.current)
      },
      getTime() {
        this.curTime = new Date().getHours();
        this.times.forEach((val, index) => {
          // console.log("时间111" + JSON.stringify(val) + this.curTime);
          // 活动正在进行中
          if (val.st <= this.curTime && this.curTime < val.et) {
            val.value = 2;
            this.httpCurTime = val.st + ":00";
            this.endTime = val.et + ":00";

            val.active = true;

          } else if (this.curTime < val.st) {
            //   活动即将开始
            val.value = 0;

            if (this.httpCurTime == null) {
              this.httpCurTime = val.st + ":00";
              this.endTime = val.et + ":00";
              val.active = true;
            }
          } else if (
            this.curTime >= val.et && this.curTime > this.times[index + 1] < val.st

          ) {
            //   活动已过期
            val.value = 1;
          }
        });
        this.getList();
      },
      getList() {
        this.loading = false
        this.$http
          .get(
            `/marketing/seckillActivityGoods/start-flash-sale`, {
              start_hour: this.httpCurTime,
              end_hour: this.endTime,
              page: this.page,
              limit: this.limit,
              ...this.params
            },
            false
          )

          .then((res) => {

            if (res && res.code == 200) {
              this.activeState = res.data.active_state
              this.time2 = this.$mUtil
                .countDown(Math.floor(res.data.finish_time / 1000), res.data.now_time)
                .split(":")
                .map((val) => Number(val));
              this.goodList = this.goodList.concat(res.data.page.list);

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


            }
          });
      },
    },
  };
</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 #fe9000;
        margin-right: 10rpx;

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

      .complete {
        font-size: 20rpx;
        color: #fe9000;
        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: #ff0000;
        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;

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

    /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: #ff0000;
        }
      }

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

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

        .two {
          color: #ff0000;
          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: #ff0000;
              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 #fe9000;
            border-radius: 6rpx;
            margin-right: 10rpx;

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

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

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

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

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

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

    /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: #ff0000;
        padding: 1rpx 4rpx;
        background-color: #dccda4;
        border-radius: 4rpx;
        margin: 0 6rpx 0 14rpx;
      }
    }

    .lable {
      margin-right: 8rpx;
    }

    /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 {
      display: flex;
      justify-content: space-around;

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