H5_module/activity/group/index/index.vue

<template>
	<view>
		<!--group/index/index.wxml-->
		<view class="banner">
			<image :src="picUrlss+'ptban.jpg'" mode="widthFix"></image>
		</view>
		<view class="con">
			<view class="tab dflex">
				<view :class="'li dflex ' + (tabIndex==1?'on':'')" data-index="1" @tap="clickTab">
					<icon class="icon iconfont icon-hot"></icon>
					<text>今日拼团</text>
				</view>
				<view :class="'li dflex ' + (tabIndex==2?'on':'')" data-index="2" @tap="clickTab">
					<icon class="icon iconfont icon-yugao"></icon>
					<text>明日预告</text>
				</view>
				<view :class="'li dflex ' + (tabIndex==3?'on':'')" data-index="3" @tap="clickTab">
					<icon class="icon iconfont icon-yugao"></icon>
					<text>全部</text>
				</view>
			</view>
			<view class="pintuan pdlr20 bgfff" v-if="pageList.length>0">
				<view v-for="(item, index) in pageList" :key="index" class="li">
					<view class="dflex" :data-index="index">
						<view class="pinimgs" @tap="toGroupRemind" :data-index="index">
							<image :src="item.pic" mode="aspectFit" class="pinimg" lazy-load="true"></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="toGroupRemind" :data-index="index">{{item.productName}}</view>
							
								<view :class="[item.start==false||item.end==true? 'wei' : '',item.times?'endtime':'endtimes']" @tap="toGroupRemind"
									:data-index="index">
									<block v-if="item.times">
										{{item.start==false? '距开始': item.end==false?'距结束':'已结束'}}
										{{item.times?item.times:''}}
									</block>
								</view>
							<view class="del" @tap="toGroupRemind" :data-index="index"
								v-if="item.marketPrice<item.money&&item.marketPrice!=0">￥{{item.marketPrice}}</view>
							<view class="operate dflex">
								<view class="price" @tap="toGroupRemind" :data-index="index">
									拼团价￥<text>{{item.money}}</text></view>
								<view class="add-cart">
									<view class="remind mbglinear dflex" v-if="item.start==true&&item.end==false"
										@tap="toGroupRemind" :data-index="index">立即开团</view>
									<block v-else>
										<view class="remind mbggreen dflex"
											v-if="item.start==false&&item.end==false&&item.isRemind"
											@tap="cancelActivityRemind" :data-index="index">取消预约</view>
										<view class="remind mbggreen dflex"
											v-if="item.start==false&&item.end==false&&!item.isRemind"
											@tap="addActivityRemind" :data-index="index">
											<icon class="iconfont icon-yugao"></icon>预约提醒
										</view>
									</block>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nodata nosp bgfff" v-if="ishow">
				<image :src="picUrlss+'empty_sp.png'"></image>
				<text>暂无商品</text>
			</view>
		</view>
	</view>
</template>

<script>
	// group/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: [],
				isLoad: true,
				hasmore: true,
				tabIndex: 1,
				ishow: false
			};
		},

		components: {},
		props: {},

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

		onShow: function() {
			this.isLoad = true, this.form.page = 1;
			this.setData({
				pageList: []
			});
			this.getList(this.tabIndex); // console.log("=======================")
		},
		onReachBottom: function() {
			// console.log(this.data.pageList.length)
			// if (this.data.pageList.length >= 10) {
			// console.log("111111111111")
			this.form.page++;
			this.getList(this.tabIndex); // }
		},

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

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

		methods: {
			clickTab(event) {
				const index = event.currentTarget.dataset.index;
				this.setData({
					tabIndex: index,
					'form.page': 1
				});
				this.isLoad = true,
					this.getList(index);
				this.clearAllTimer();
			},

			getList(dayType) {
				let isShowLoading = false;

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

				// console.log(this.isLoad);
				let that = this;
				if (!this.isLoad) return false;
				this.isLoad = false;
				that.form.dayType = dayType;
				if (dayType == 3) {
					delete that.form.dayType
				}
				if (this.query.merchantId) {
					that.form.merchantId = this.query.merchantId;
				} else if (req.getStorage('MERCHANT')) {
					that.form.merchantId = req.getStorage('MERCHANT').id;
				} // if (this.query.type == 4) {
				// 	that.data.form.type = '4'
				// 	req.getRequest('/api/shopProduct/list', that.data.form, data => {
				// 		// console.log(data,data.length)
				// 		if (data && data.list.length >= 10) that.data.isLoad = true;
				// 		if (that.data.form.page > 1) data.list = that.data.pageList.concat(data.list);
				// 		data = data.list.map(it => {
				// 			it.isRemind = it.remindId;
				// 			return it
				// 		});
				// 		console.log(data);
				// 		let arrObjFilter = data.filter(ele => ele.end == false)
				// 		that.setData({
				// 			pageList: arrObjFilter
				// 		})
				// 		console.log(that.data.pageList)
				// 		if (this.data.pageList.length <= 0) {
				// 			that.setData({
				// 				ishow: true
				// 			})
				// 		} else {
				// 			that.setData({
				// 				ishow: false
				// 			})
				// 		}
				// 		if (isShowLoading) {
				// 			wx.hideLoading()
				// 			isShowLoading = false;
				// 		}
				// 		that.initGroupTimer();
				// 	})
				// } else {


				that.form.type = '3';
				req.getRequest('/api/activity/listNew', that.form, data => {
					// console.log(data,data.length)
					if (data && data.list.length >= 10) that.isLoad = true;
					// console.log(that.form.page);
					if (that.form.page > 1) data.list = that.pageList.concat(data.list);
					data = data.list.map(it => {
						it.isRemind = it.remindId;
						return it;
					});
					// console.log(data); // let arrObjFilter = data.filter(ele => ele.end==false)
					// let res=arrObjFilter.filter(it=>it.id)

					// console.log(data);
					that.setData({
						pageList: data
					});
					// console.log(that.pageList);

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

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

					that.initGroupTimer();
				}); // }

				// console.log(that.isLoad);
			},

			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 data = {}; //判断是否已开始

						if (nowTime - startTime > 0) {
							//开始了
							data['pageList[' + i + '].isStates'] = 1;
						} else {
							//未开始
							data['pageList[' + i + '].isStates'] = 0;
						}

						_ts.setData(data); //判断是否为负数，为负数则表示已经结束


						if (times > 0) {
							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;
								}

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

							_ts.setData(fs);
						} else {
							//已经结束
							data['pageList[' + i + '].times'] = group.endTime;
							data['pageList[' + i + '].isStates'] = 2;

							_ts.setData(data);
						}
					}
				}
			},

			toGroupRemind(event) {
				const index = event.currentTarget.dataset.index;
				const activity = this.pageList[index];
				let merchantId;

				if (this.query.merchantId) {
					merchantId = this.query.merchantId;
				} else if (req.getStorage('MERCHANT')) {
					merchantId = req.getStorage('MERCHANT').id;
				}
				let url='activity/group/detail/detail?acid=' + activity.id + "&id=" + activity
						.productId
				if(!merchantId){
					
				}else{
					url+="&merchantId=" + merchantId
				}
				
				if (this.query.type == 4) {
					app.globalData.openPage('activity/group/detail/detail?acid=' + activity.id + "&id=" + activity
						.productId +
						'&hideShop=' + false);
				} else {
					app.globalData.openPage(url);
				}
			},

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

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

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

			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);
					});
				}
			}

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