H5_module/mine/remind/remind.vue

<template>
<view>
<!--mine/remind/remind.wxml-->
<view class="list" v-if="pageList.length > 0">
	<view v-for="(item, index) in pageList" :key="index" class="li">
		<navigator :url="'/product/groupDetail/groupDetail?acid=' + item.id + '&id=' + item.productId" hover-class="none" class="lis">
			<image :src="item.pic" mode="aspectFit" class="cimg"></image>
			<view class="zhinfo">
				<view class="zhtit">{{item.productName}}</view>
				<!-- <view class="guige">规格：15g</view> -->
				<view class="jiage">
					<view class="zhjia">￥<text>{{item.money}}</text></view>
				</view>
			</view>
		</navigator>
		<view class="operate dflex">
			<view class="time dflex">
				<view>距{{item.start ? '结束' : '开始'}}还有</view>
				<block v-if="item.times[0] !==0"><text>{{item.times[0]}}</text>天</block>
				<text>{{item.times[1]}}</text>:
				<text>{{item.times[2]}}</text>:
				<text>{{item.times[3]}}</text>
			</view>
			<view class="btn" :data-index="index" @tap="cancelRemind">取消预约</view>
		</view>
	</view>
</view>

<view class="nodata" v-if="ishow">
  <image :src="picUrlss+'empty_kt.png'"></image>
  <text>没有开团提醒哦</text>
</view>
</view>
</template>

<script>
const req = require("../../utils/request.js");
const utils = require("../../utils/util.js");

export default {
  data() {
    return {
		picUrlss: req.public.picUrls,
      form: {
        page: 1,
        limit: 10
      },
      pageList: [],
      isLoad: true,
      ishow: false
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.loadFootprint();
  },

  onReachBottom() {
    this.form.page++;
    this.loadFootprint();
  },

  onUnload() {
    this.clearAllTimer();
  },

  methods: {
    loadFootprint() {
      let isShowLoading = false;

      if (this.form.page == 1 && !isShowLoading) {
        req.loadIng('加载中');
        isShowLoading = true;
      }

      if (!this.isLoad) return false;
      this.isLoad = false;
      let that = this;
      req.getRequest('/api/activity/remind/list', this.form, data => {
        if (data && data.length == 10) this.isLoad = true;
        if (that.form.page > 1) data = that.pageList.concat(data);
        that.setData({
          pageList: data
        });

        if (data.length <= 0) {
          that.setData({
            ishow: true
          });
        } else {
          that.setData({
            ishow: false
          });
        }

        if (isShowLoading) {
          uni.hideLoading();
          isShowLoading = false;
        }

        that.initGroupTimer();
      });
    },

    initGroupTimer() {
      //社区拼图定时器
      let _ts = this;

      if (this.pageList && this.pageList.length > 0) {
        let pageList = this.pageList;
        const initPage = (parseInt(this.form.page) - 1) * 10;

        for (let i = initPage, len = pageList.length; i < len; i++) {
          let group = pageList[i];
          let nowTime = new Date(group.nowTime.replace(/-/g, '/')).getTime();
          let startTime = new Date(group.startTime.replace(/-/g, '/')).getTime();
          let endTime = new Date(group.endTime.replace(/-/g, '/')).getTime();
          if (!group.start) endTime = startTime;
          let times = parseInt((endTime - nowTime) / 1000);
          let timer = setInterval(() => {
            times--;
            let data = {};

            if (times === 0) {
              //重新加载列表
              data['pageList[' + i + '].end'] = true;
              clearInterval(timer);
            } else {
              let n = utils.formatDayTimes(times);
              data['pageList[' + i + '].times'] = n.split(/:|天/g);
            }

            _ts.setData(data);
          }, 1000);
          let fs = [];
          fs['pageList[' + i + '].timer'] = timer;

          _ts.setData(fs);
        }
      }
    },

    clearAllTimer() {
      this.pageList.forEach(it => clearInterval(it.timer));
    },

    cancelRemind(event) {
      const index = event.currentTarget.dataset.index;
      const page = this.pageList[index];

      let _ts = this;

      req.postRequest('/api/activity/cancel/remind', {
        id: page.id
      }, data => {
        clearInterval(page.timer);

        _ts.pageList.splice(index, 1);

        _ts.setData({
          pageList: _ts.pageList
        });
      });
    }

  }
};
</script>
<style>
@import "./remind.css";
</style>