H5_module/template/customers/customers.vue

<template>
	<view>
		<!--components/customers/customers.wxml-->
		<!-- 新客专享 -->
		<template name="New_customers">
			<view class="pdlr20">
				<view class="mt20 bgfff r10" v-if="customersList&&customersList.products.length > 0">

					<navigator hover-class="none" :url="'/activity/newbornZone/newbornZone' + url" class="head">
						<view class="titleNav pdlr20 dflex" v-if="customersTemplate.titleType==1">
							{{customersTemplate.titleCon}}
							<image src="/static/pages/images/more.png" class="more"></image>
						</view>
						<image lazy-load="true" v-if="customersTemplate.titleType==2"
							:src="customersTemplate.titleCon + '?x-oss-process=style/w750-auto'" mode="widthFix"
							class="imgtit"></image>
					</navigator>
					<goodsList :pageList="customersList" :about="about" :merchant="web" :type="'4'" :typeName="'新客'">
					</goodsList>
					<!-- <view class="pintuan pdlr20">
  <view v-for="(item, index) in customersList" :key="index" class="li">
    <view class="dflex">
      <view class="pinimgs" @tap="goUrl" :data-url="'activity/newbornDetails/newbornDetails?acid=' + item.id + '&id=' + item.productId + '' +web">
        <image :src="item.pic" mode="aspectFit" class="pinimg"></image>
      </view>
      <view class="pininfo flex ">
        <view class="proname" @tap="goUrl" :data-url="'activity/newbornDetails/newbornDetails?acid=' + item.id + '&id=' + item.productId + '' + web">
          {{item.productName}}</view>
        <view :class="'endtime ' + (item.start? '' : 'wei')">{{item.start ? '距结束': '距开始'}} {{item.times}}</view>
        <view class="del" v-if="item.marketPrice!=0&&item.marketPrice>item.money" @tap="goUrl" :data-url="'activity/newbornDetails/newbornDetails?acid=' + item.id + '&id=' + item.productId + '' + web">
          ￥{{item.marketPrice}}</view>
        <view class="operate dflex">
          <view class="price" @tap="goUrl" :data-url="'activity/newbornDetails/newbornDetails?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/newbornDetails/newbornDetails?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="5" :data-id="item.id">取消预约</view>
              <view class="remind mbggreen dflex" @tap="addActivityRemind" :data-index="index" data-type="5" :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/customers/customers.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 {};
		},

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

		},
		watch: {

		},
		methods: {
			getRqeDatas() {
				let that = this; // 新客

				let customers = that.homeTemplate.filter(it => it.module == that.templateType.module_customers);

				if (customers && customers.length > 0 && customers[0].state == 0) {
					that.setData({
						customersTemplate: customers[0]
					});
					this.customersListFun(customers[0]);
				}
			},

			//新客
			customersListFun(customersTemplate) {
				let _ts = this;

				_ts.clearAllTimer(4);

				if (this.merchant && this.merchant.type == 5 || this.shopId && this.merchantId) {
					let from = {
						page: this.page,
						limit: customersTemplate.number,
						type: 6,
						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({
							customersList: arrObjFilter
						});

						_ts.initGroupTimer(4);
					});
				}

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

						_ts.setData({
							customersList: arrObjFilter
						});

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

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

				let list = [];
				if (type == 4) list = this.customersList;

				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 == 4) data['customersList[' + i + '].end'] = true;
								clearInterval(timer);
							} else {
								let n = utils.formatDayTimes(times);
								if (type == 4) data['customersList[' + i + '].times'] = n;
							}

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

			clearAllTimer(type) {
				if (type == 4) this.customersList.forEach(it => clearInterval(it.timer));
			},

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

			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 == 5) data['customersList[' + 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 == 5) data['customersList[' + index + '].isRemind'] = true;
					this.setData(data);
				});
			}

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