H5_module/activity/bargain/index/index.vue

<template>
	<view>
		<!--activity/bargain/index/index.wxml-->
		<view class="banner">
			<image :src="picUrlss+'kjban.jpg'" mode="widthFix"></image>
		</view>
		<view class="con">
			<view class="title mbglinear dflex" v-if="pageMyList.length > 0">
				<icon class="icon iconfont icon-shandian-shi"></icon>我的砍价
			</view>
			<view class="list bgfff" v-if="pageMyList.length > 0">
				<block v-for="(item, index) in pageMyList" :key="index">
					<view class="li dflex" @tap="toDetail" :data-id="item.productId" :data-acid="item.id">
						<image :src="item.pic" lazy-load="true" mode="aspectFit" class="proimg"></image>
						<view class="flex">
							<view class="name">{{item.productName}}</view>
							<view class="kan-price dflex">
								<text class="tag mbglinear">砍价后</text>
								<view class="price"><text>￥</text>{{item.money}}</view>
								<text class="del"
									v-if="item.orPrice!=0&&item.orPrice>item.money">原价：￥{{item.orPrice}}</text>
							</view>
							<view class="kan-times dflex">
								<view class="kan-time" v-if="item.end">已结束</view>
								<block v-else>
									<view class="kan-time dflex" v-if="item.times.length==4">
										<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>
									</view>
									<view class="kan-time dflex" v-else>
										<text>{{item.times[0]}}</text>:
										<text>{{item.times[1]}}</text>:
										<text>{{item.times[2]}}</text>
										<view>后结束</view>
									</view>
								</block>
								<view class="kan-btn mbglinear" v-if="!item.end">继续砍价</view>
								<view class="kan-btn kan-guoqi" v-else>活动结束</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="title mbglinear dflex">全民砍价</view>
			<view class="list bgfff" v-if="pageList.length>0">
				<block v-for="(item, index) in pageList" :key="index">
					<view class="li dflex">
						<image :src="item.pic" mode="aspectFit" class="proimg" @tap="toDetail" :data-id="item.productId"
							:data-acid="item.id" lazy-load="true"></image>
						<view class="flex">
							<view class="name" @tap="toDetail" :data-id="item.productId" :data-acid="item.id">
								{{item.productName}}</view>
							<view class="kan-price dflex" @tap="toDetail" :data-id="item.productId"
								:data-acid="item.id">
								<text class="tag mbglinear">砍价后</text>
								<view class="price"><text>￥</text>{{item.money}}</view>
								<text class="del"
									v-if="item.orPrice!=0&&item.orPrice>item.money">原价：￥{{item.orPrice}}</text>
							</view>
							<view class="kan-times dflex">
								<view class="kan-time" v-if="item.end">已结束</view>
								<block v-else>
									<view class="kan-time dflex" v-if="item.times.length==4">
										<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>{{item.start==false&&item.end==false?'后开始':'后结束'}}</view>
									</view>
									<view class="kan-time dflex" v-else>
										<text>{{item.times[0]}}</text>:
										<text>{{item.times[1]}}</text>:
										<text>{{item.times[2]}}</text>
										<view>{{item.start==false&&item.end==false?'后开始':'后结束'}}</view>
									</view>
								</block>
								<view class="kan-btn mbglinear" v-if="item.end==false&&item.start==true" @tap="toDetail"
									:data-id="item.productId" :data-acid="item.id">立即砍价</view>
								<block v-else>
									<view class="remind mbggreen dflex" v-if="item.start==false&&item.isRemind"
										@tap="cancelActivityRemind" :data-index="index" data-type="2">取消预约</view>
									<view class="remind mbggreen dflex" v-if="item.start==false&&!item.isRemind"
										@tap="addActivityRemind" :data-index="index">
										<icon class="iconfont icon-yugao" data-type="2"></icon>预约提醒
									</view>
								</block>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="nodata nosp bgfff" v-if="pageList.length<=0">
				<image :src="picUrlss+'empty_sp.png'"></image>
				<text>暂无商品</text>
			</view>
		</view>
	</view>
</template>

<script>
	// activity/bargain/index/index.js
	const app = getApp();
	const req = require("../../../utils/request.js");
	const utils = require("../../../utils/util.js");
	const requsetmessage = require("../../../utils/requestmessage.js");

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

		components: {},
		props: {},

		onLoad(options) {
			this.query = options;
			// console.log(options); // this.getData();
			// this.getList();
		},

		onShow() {
			this.isLoad = true, this.form.page = 1;
			this.setData({
				pageList: [],
				pageMyList: []
			});
			this.getData();
			this.getList();
		},

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

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

		onHide() {
			this.clearAllTimer(1);
			this.clearAllTimer(2);
		},

		methods: {
			getList() {
				//砍价
				let that = this;
				if (!that.isLoad) return false;
				that.isLoad = false;
				that.form.type = '5';

				if (this.query.merchantId) {
					that.form.merchantId = this.query.merchantId;
				} else if (req.getStorage('MERCHANT')) {
					that.form.merchantId = req.getStorage('MERCHANT').id;
				}

				req.getRequest('/api/activity/listNew', that.form, data => {
					if (data.list && data.list.length == 10) {
						that.isLoad = true;
					}

					data = that.pageList.concat(data.list);

					if (data) {
						data = data.map(it => {
							it.isRemind = it.remindId;
							return it;
						}); // let arrObjFilter = data.filter(ele => ele.end == false)

						that.setData({
							pageList: data
						});
						that.clearAllTimer(2);
						that.initGroupTimer();
					}
				});
			},

			getData() {
				//我的砍价
				let that = this; // that.clearAllTimer(2);
				if (req.getStorage("userInfo")) {
					req.postRequest('/api/activity/userActivityData', {
						state: 0,
						type: 5
					}, data => {
						if (data) {
							data = that.pageMyList.concat(
							data); // let arrObjFilter = data.filter(ele => ele.end == false)

							that.setData({
								pageMyList: data
							});
							that.clearAllTimer(1);
							that.initGroupTimer();
						}
					});
				}
			},

			initGroupTimer() {
				//社区拼图定时器
				let _ts = this;
				// console.log(this.pageList)
				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);
						// console.log(fs)
					}
				}
				if (this.pageMyList && this.pageMyList.length > 0) {
					let pageMyList = this.pageMyList;

					for (let i = 0, len = pageMyList.length; i < len; i++) {
						let group = pageMyList[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['pageMyList[' + i + '].end'] = true;
								clearInterval(timer);
							} else {
								let n = utils.formatDayTimes(times);
								data['pageMyList[' + i + '].times'] = n.split(/:|天/g);
							}

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

						_ts.setData(fs);
					}
				}
			},

			clearAllTimer(type) {
				if (type == 1) this.pageList.forEach(it => clearInterval(it.timer));
				else this.pageMyList.forEach(it => clearInterval(it.timer));
			},

			cancelActivityRemind(event) {
				const index = event.currentTarget.dataset.index;
				const page = this.pageList[index];
				if (req.header.appId == 'ZQ1VK5oc17I387E') {

				} else {
					req.postRequest('/api/activity/cancel/remind', {
						id: page.id
					}, res => {
						req.msg('取消提醒成功');
						let data = {};
						data['pageList[' + index + '].isRemind'] = false;
						this.setData(data);
					});
				}
			},

			toDetail(event) {
				let id = event.currentTarget.dataset.id;
				let acid = event.currentTarget.dataset.acid;
				let url='activity/bargain/detail/detail?id=' + id + '&acid=' + acid
				if(!this.query.merchantId){
					
				}else{
					url+='&merchantId='+this.query.merchantId
				}
				app.globalData.openPage(url);
			},

			addActivityRemind(event) {
				const index = event.currentTarget.dataset.index;
				const page = this.pageList[index]; // 订阅调用


				req.postRequest('/api/activity/remind', {
					activityId: page.id
				}, res => {
					requsetmessage.remind();
					req.msg('订阅提醒成功');
					let data = {};
					data['pageList[' + index + '].isRemind'] = true;
					this.setData(data);
				});
			},


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