fish-uniapp/pages/activity/GoodsSeckill/index.vue

<template>
  <view class="flash-sale" ref="container">
    <view class="header" v-if="headerImg">
      <image :src="headerImg" />
    </view>
    <vant-tabs
      :active="active"
      @change="setTime"
      :sticky="sticky"
      animated
      line-height="2"
      :ellipsis="false"
    >
      <vant-tab
        :ellipsis="false"
        :title="[title[index]]"
        v-for="(item, index) in timeList"
        :key="index"
      >
        <view slot="title" class="timeItem">
          <view class="time">{{ item.time }}</view>
          <view class="state">{{ item.state }}</view>
        </view>
        <view class="countDown font-color-red acea-row row-center-wrapper">
          <view v-if="item.status === 0" class="activity">活动已结束</view>
          <count-down
            :is-day="false"
            :tip-text="'距结束仅剩 '"
            :day-text="''"
            :hour-text="' : '"
            :minute-text="' : '"
            :second-text="''"
            :datatime="datatime"
            v-if="item.status === 1"
          ></count-down>
          <view v-if="item.status === 2" class="activity">活动即将开始</view>
        </view>
        <view class="list">
          <view
            class="item acea-row row-between-wrapper"
            v-for="(itemSeckill, indexSeckill) in seckillList"
            :key="indexSeckill"
          >
            <view class="pictrue">
              <image :src="itemSeckill.image" />
            </view>
            <view class="text acea-row row-column-around">
              <view class="line1" v-text="itemSeckill.title"></view>
              <view class="money">
                限时价
                <text class="num font-color-red" v-text="'￥' + itemSeckill.price"></text>
              </view>
              <view class="progress cart-color">
                <view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }"></view>
                <view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></view>
              </view>
            </view>
            <view
              class="grab bg-color-red"
              v-if="item.status === 1 && itemSeckill.stock > 0"
              @click="goDetail(itemSeckill.id)"
            >马上抢</view>
            <view class="grab" v-if="item.status === 1 && itemSeckill.stock <= 0">已售磬</view>
            <view class="grab bg-color-red" v-if="item.status === 2">即将开始</view>
            <view class="grab bg-color-red" v-if="item.status === 0">已结束</view>
          </view>
        </view>
        <view
          class="noCommodity"
          style="background-color: #fff;"
          v-if="seckillList.length === 0 && page > 1"
        >
          <view class="noPictrue">
            <image :src="$VUE_APP_RESOURCES_URL+'/images/noGood.png'" class="image" />
          </view>
        </view>
      </vant-tab>
    </vant-tabs>
  </view>
</template>
<script>
import { getSeckillConfig, getSeckillList } from "@/api/activity";
import CountDown from "@/components/CountDown";
// import { Tab, Tabs } from "vant-weapp";
import Loading from "@/components/Loading";

export default {
  name: "GoodsSeckill",
  components: {
    CountDown
  },
  props: {},
  data: function() {
    return {
      headerImg: "",
      timeList: [],
      sticky: false,
      loading: false,
      datatime: 0,
      active: 0,
      seckillList: [],
      status: false, //砍价列表是否获取完成 false 未完成 true 完成
      loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
      page: 1, //页码
      limit: 5, //数量
      title: []
    };
  },
  mounted: function() {
    this.mountedStart();
  },
  onReachBottom() {
    !this.loadingList && this.getSeckillList();
  },
  methods: {
    mountedStart: function() {
      var that = this;
      uni.showLoading();
      getSeckillConfig().then(res => {
        that.$set(that, "headerImg", res.data.lovely);
        that.$set(that, "timeList", res.data.seckillTime);
        that.$set(that, "active", res.data.seckillTimeIndex);

        let title = [];
        title = res.data.seckillTime.map((item, index) => {
          return {
            name: "div",
            attrs: {
              class: "timeItem"
            },
            children: [
              {
                name: "div",
                attrs: {
                  class: "time"
                },
                children: [
                  {
                    type: "text",
                    text: item.time
                  }
                ]
              },
              {
                name: "div",
                attrs: {
                  class: "state"
                },
                children: [
                  {
                    type: "text",
                    text: item.state
                  }
                ]
              }
            ]
          };
        });
        that.$set(that, "title", title);
        that.datatime = that.timeList[that.active].stop;
        that.getSeckillList();
        that.$nextTick(function() {
          that.sticky = true;
          uni.hideLoading();
        });
      });
    },
    setTime: function(event) {
      var that = this;
      that.active = event.mp.detail.index;
      that.datatime = that.timeList[that.active].stop;
      that.getSeckillList();
    },
    getSeckillList: function() {
      var that = this;
      if (that.loadingList) return;
      if (that.status) return;
      var time = that.timeList[that.active].id;
      getSeckillList(time, { page: that.page, limit: that.limit }).then(res => {
        that.status = res.data.length < that.limit;
        that.seckillList.push.apply(that.seckillList, res.data);
        that.page++;
        uni.hideLoading();
      });
    },
    goDetail: function(id) {
      var that = this;
      var time = that.timeList[that.active].stop;
      this.$yrouter.push({
        path: "/pages/activity/SeckillDetails/index",
        query: { id, time }
      });
    }
  }
};
</script>
<style scoped lang="less">
.timeItem {
  font-size: 0.22*100rpx;
  color: #282828;
  width: 100%;
  text-align: center;
  padding: 0.11*100rpx 0;
  height: 0.96*100rpx;
  background-color: #efc58f;
}
.timeItem .time {
  font-size: 0.32*100rpx;
  font-weight: bold;
  height: 0.37*100rpx;
  line-height: 0.37*100rpx;
}
.timeItem .state {
  height: 0.37*100rpx;
  line-height: 0.37*100rpx;
}
.activity {
  color: #333;
}
.flash-sale .list .item .grab {
  background-color: #999;
}
</style>