H5_module/template/joingroup/joingroup.vue

<template>
<view>
<!--components/joingroup/joingroup.wxml-->
<!-- 拼团 -->
<template name="joingroup">
  <view class="pdlr20">
    <view class="mt20 bgfff r10 " v-if="joingroupList&&joingroupList.products.length > 0">

      <navigator hover-class="none" :url="'/activity/group/index/index' + url" class="head">
        <view class="titleNav pdlr20 dflex" v-if="joingroupTemplate.titleType==1">
          {{joingroupTemplate.titleCon}}
          <image src="/static/pages/images/more.png" class="more"></image>
        </view>
        <image lazy-load="true" v-if="joingroupTemplate.titleType==2" :src="joingroupTemplate.titleCon + '?x-oss-process=style/w750-auto'" mode="widthFix" class="imgtit">
        </image>
      </navigator>
	  <goodsList :pageList="joingroupList" :about="about" :merchant="web" :type="'3'" :typeName="'拼团'"></goodsList>
<!--      <view class="pintuan pdlr20">
        <view v-for="(item, index) in joingroupList" :key="index" class="li">
          <view class="dflex">
            <view class="pinimgs" @tap="goUrl" :data-url="'activity/group/detail/detail?acid=' + item.id + '&id=' + item.productId + '' + web">
              <image :src="item.pic" mode="aspectFit" class="pinimg"></image>
              <view class="tuan">
                <image src="/static/pages/images/tagbg.png"></image>
                <text>{{item.activityMainEntity.numberPeople}}人团</text>
              </view>
            </view>
            <view class="pininfo flex ">
              <view class="proname" @tap="goUrl" :data-url="'activity/group/detail/detail?acid=' + item.id + '&id=' + item.productId + '' + web">
                {{item.productName}}</view>
              <view :class="'endtime ' + (item.start? '' : 'wei')">{{item.start ? '距结束': '距开始'}} {{item.times}}</view>
              <view v-if="item.marketPrice!=0&&item.marketPrice>item.money" class="del" @tap="goUrl" :data-url="'activity/group/detail/detail?acid=' + item.id + '&id=' + item.productId + '' + web">
                ￥{{item.marketPrice}}
              </view>
              <view class="operate dflex">
                <view class="price" @tap="goUrl" :data-url="'activity/group/detail/detail?acid=' + item.id + '&id=' + item.productId + '' + web">
                  拼团价￥<text>{{item.money}}</text></view>
                <view class="add-cart">
                  <view class="remind mbglinear dflex" v-if="item.start" @tap="goUrl" :data-url="'activity/group/detail/detail?acid=' + item.id + '&id=' + item.productId + '' + web">
                    立即开团</view>
                  <block v-else>
                    <view class="remind mbggreen dflex" v-if="item.isRemind" @tap="cancelActivityRemind" :data-index="index" data-type="2" :data-id="item.id">取消预约</view>
                    <view class="remind mbggreen dflex" @tap="addActivityRemind" :data-index="index" data-type="2" :data-id="item.id" v-else>
                      <icon class="iconfont icon-yugao"></icon>预约提醒
                    </view>
                  </block>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view> -->
    </view>
  </view>
</template>
</view>
</template>

<script>
// components/joingroup/joingroup.js
const route = require("../../utils/route.js");
const utils = require("../../utils/util.js");
const mes = require("../../utils/requestmessage.js");
const req = require("../../utils/request.js");
const app = getApp();
import goodsList from "../../components/goodsList/goodsList";
export default {
  data() {
    return {
      // templateType: {
      //   module_joingroup: 'joingroup' //拼团

      // },
      // joingroupList: [] //拼团
      // ,
      // joingroupTemplate: ""
    };
  },

  components: {goodsList},
  props: {
	  joingroupTemplate:Object, //{backgroundColor:背景颜色,displayStyle: 样式模板,lineNumber:每行几个,products:产品列表}
	  joingroupList:Object, //拼团后台模板配置
	  web:String,//跳转地址
	  url:String,//跳转地址
	about:Object //参数配置

  },
  watch: {
  },
  mounted() {
  	// console.log(this.joingroupList)
  	// this.loadGroup(this.groupTemplate)	
  },
  methods: {
    getRqeDatas() {
      let that = this; //拼团

      let joingroup = that.homeTemplate.filter(it => it.module == that.templateType.module_joingroup);

      if (joingroup && joingroup.length > 0 && joingroup[0].state == 0) {
        that.setData({
          joingroupTemplate: joingroup[0]
        });
        this.joingroupListFun(joingroup[0]);
      }
    },

    //拼团商品
    joingroupListFun(joingroupTemplate) {
      let _ts = this;

      _ts.clearAllTimer(2);

      if (this.merchant && this.merchant.type == 5 || this.shopId && this.merchantId) {
        let from = {
          page: this.page,
          limit: joingroupTemplate.number,
          type: 4,
          merchantId: this.merchant.merchantDTO.id,
          sid: this.merchant.id
        };
        if (this.shopId && this.merchantId) from.merchantId = this.merchantId, from.sid = this.shopId;
        route.getShopeList(from, res => {
          res = res.list.map(it => {
            it.isRemind = it.remindId;
            return it;
          });
          let arrObjFilter = res.filter(ele => ele.end == false);
          this.setData({
            joingroupList: arrObjFilter
          });

          _ts.initGroupTimer(2);
        });
      }

      if (this.merchant && this.merchant.type != 5) {
        route.getAcitveNew({
          page: 1,
          limit: joingroupTemplate.number,
          type: 3,
          dayType: 1,
          tag: 'home'
        }, data => {
          data = data.list.map(it => {
            it.isRemind = it.remindId;
            return it;
          });
          let arrObjFilter = data.filter(ele => ele.end == false);

          _ts.setData({
            joingroupList: arrObjFilter.slice(0, joingroupTemplate.number)
          });

          _ts.initGroupTimer(2);
        });
      }
    },

    //1为社区团购，2为拼团,3为砍价
    initGroupTimer(type) {
      //社区拼图定时器
      let _ts = this;

      let list = [];
      if (type == 2) list = this.joingroupList;

      if (list && list.length > 0) {
        // let activityGroup = this.data.activityGroup;
        for (let i = 0, len = list.length; i < len; i++) {
          let group = list[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) {
              //重新加载列表
              if (type == 2) data['joingroupList[' + i + '].end'] = true;
              clearInterval(timer);
            } else {
              let n = utils.formatDayTimes(times);
              if (type == 2) data['joingroupList[' + i + '].times'] = n;
            }

            _ts.setData(data);
          }, 1000);
          if (type == 2) this.joingroupList[i]['timer'] = timer; // let fs = [];
          // fs['activityGroup[' + i + '].timer'] = timer;
          // _ts.setData(fs);
        }
      }
    },

    clearAllTimer(type) {
      // console.log(this.activityGroup, this.joingroupList, this.bargainList, this.customersList);
      if (type == 2) this.joingroupList.forEach(it => clearInterval(it.timer));
    },

    cancelActivityRemind(event) {
      const index = event.currentTarget.dataset.index;
      const id = event.currentTarget.dataset.id;
      const type = event.currentTarget.dataset.type;
	  if(req.header.appId=='ZQ1VK5oc17I387E'){
	  		  
	  }else{
		route.cancelActivityRemind({
		  id: id
		}, res => {
		  req.msg('取消提醒成功');
		  let data = {};
		  if (type == 2) data['joingroupList[' + index + '].isRemind'] = false;
		  this.setData(data);
		});  
	  }
    },

    addActivityRemind(event) {
      const index = event.currentTarget.dataset.index;
      const id = event.currentTarget.dataset.id;
      const type = event.currentTarget.dataset.type;
      
      route.addActivityRemind({
        activityId: id
      }, res => {
		  mes.remind().then(res => res);
        // mes.remind().then(res=>res)
        // mes.requsetmessage()
        req.msg('订阅提醒成功');
        let data = {};
        if (type == 2) data['joingroupList[' + index + '].isRemind'] = true;
        this.setData(data);
      });
    },

    goUrl(event) {
      //跳转链接
      let url = event.currentTarget.dataset.url;
      app.globalData.openPage(url);
    }

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