mnsx/pages/product/groupBooking/detail.vue

<template>
	<view class="box">
		<!-- 拼团 -->
		<view class="lyy-a">
			<view class="lyy-a-p">
				<view class="lyy-a-f">
					<view>
						<image :src="goods.image" class="lyy-a-tu" />
					</view>
					<view class="lyy-a-z">
						<view class="lyy-a-word lyy-a-word2">{{ goods.title }}</view>
						<view class="flex money-box">
							<view class="lyy-a-f lyy-a-word margin-r-20">
								<view class="lyy-a-word3">￥{{ goods.price }}</view>
							</view>
							<view class="lyy-a-tu2 lyy-a-f padding-c-20 border-radius-all">
								<view class="lyy-a-tu4 flex-shrink-false">{{ goods.people }}人拼</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lyy-hx"></view>
		<!-- 第二部分 -->
		<view class="lyy-b padding-t-20">
			<view class="lyy-b-p">
				<view class="lyy-b-jz flex">
					<view class="image1">
						<view class="lyy-b-word">剩余时间</view>
					</view>
				</view>
				<view class="lyy-b-jz flex">
					<uni-countdowns v-if="pinkBool == 0" color="#FFFFFF" splitor-color="#901b21"
						background-color="#901b21" border-color="#901b21" :show-day="false" :hour="stopTime.stopTimeH"
						:minute="stopTime.stopTimeM" :second="stopTime.stopTimeS"></uni-countdowns>
				</view>
				<view class="lyy-b-jz flex">
					<span class="lyy-b-word2">{{ pinkT.people }}</span>
					<span class="lyy-b-word3">人成团，还差{{ peopleNub }}人</span>
				</view>
				<view class="lyy-b-jz flex">
					<view class="cmy-user-box">
						<view class="user-list">
							<view class="lyy-y bg-gray">
								<image :src="pinkT.avatar" class="user-list-img" />
							</view>
							<view class="lyy-y-word clamp">{{ pinkT.nickname }}</view>
						</view>
						<view class="user-list" v-for="(item , i) in people" :key='i'>
							<view class="lyy-y bg-gray">
								<image :src="item.avatar" class="user-list-img" />
							</view>
							<view class="lyy-y-word clamp">{{ item.nickname }}</view>
						</view>
						<view class="user-list" v-for="(l, i) in peopleNub" :key="i">
							<view class="lyy-y bg-gray"></view>
							<view class="lyy-y-word clamp">待邀请</view>
						</view>
					</view>
				</view>
				<view class="lyy-b-jz flex">
					<view class="lyy-b-but" v-if="status == 1 && pinkBool == 0" @click="invitation">邀请好友参团</view>
					<view class="lyy-b-but" v-if="status == 0&&pinkBool==0" @click="goBuy">立即加入</view>
					<!-- <view class="lyy-b-but" @click="goBuy">立即加入</view> -->
					<view class="lyy-b-but bg-gray" v-if="pinkBool == -1">拼团失败</view>
					<view class="lyy-b-but" v-if="pinkBool == 1">拼团成功</view>
				</view>
			</view>
		</view>
		<view class="lyy-hx"></view>
		<!-- 第三部分 -->
		<view class="lyy-c">
			<view class="lyy-c-p">
				<view class="lyy-c-word">
					<view>拼团规则：</view>
					<view>1.点击商品进入商品详情，通过拼团进入订单支付 页，用户付款成功后，按页面提示分享给好友。</view>
					<view>2.好友通过分享，加入拼团，完成订单支付，待达成 拼团人数后，拼团成功。</view>
					<view class="">
						{{scene}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCountdowns from '@/components/uni-countdown/uni-countdowns.vue';
	import {
		getCombinationLisPink
	} from '@/api/product.js';
	import {
		groupGoods
	} from '@/api/product.js';
	import {
		timeComputed
	} from '@/utils/rocessor.js';
	import {
		mapState
	} from 'vuex';
	// 倒计时
	export default {
		// #ifdef MP
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				let pages = getCurrentPages();
				// 获取当前页面
				let page = pages[pages.length - 1];
				let path = '/' + page.route + '?';
				// 保存传值
				for (let i in page.options) {
					path += i + '=' + page.options[i] + '&';
				}
				// 保存邀请人
				path += 'spread=' + this.userInfo.uid;
				let data = {
					path: path,
					imageUrl: this.goods.image,
					title: '万水千山总是情，一起来拼行不行' //this.goods.title
				};
				return data;
			} else {
				// 来自页面内分享按钮
				let pages = getCurrentPages();
				// 获取当前页面
				let page = pages[pages.length - 1];
				let path = '/' + page.route + '?';
				// 保存传值
				for (let i in page.options) {
					path += i + '=' + page.options[i] + '&';
				}
				// 保存邀请人
				path += 'spread=' + this.userInfo.uid;
				let data = {
					path: path,
					imageUrl: this.goods.image,
					title: '万水千山总是情，一起来拼行不行' //this.goods.title
				};
				return data;
			}
		},
		// #endif
		data() {
			return {
				gp_id: 0, //拼团商品id
				goods: {}, //商品信息
				pinkT: {}, //拼团团长信息
				people: [], //拼团成员信息
				status: 0, //判断是否为团长
				gid: 0,
				user_info: {}, //当前用户信息
				// 倒计时
				stopTime: {
					stopTimeH: 0,
					stopTimeM: 0,
					stopTimeS: 0
				},
				pinkBool: 0, //拼团状态0为待拼团 -1为拼团失败 1为拼团成功
				userBool: 0, //判断用户是否已经参与拼团 0未参加 1为已参加
				spread: '', //默认没有邀请人
				userInfo: {}, //当前用户信息
				peopleNub: 0,
				scene: ''
			};
		},
		onLoad(option) {
			if (option.scene) {
				// this.scene = option.scene
				// uni.showModal({
				// 	title: 'scene',
				// 	content: option.scene
				// })
				if (typeof option.scene == 'string') {
					// let scene = ('{' + option.scene + "}").replace('qr%26', '').replace(/%3D/g, ':').replace(/%26/g, ',')
					// 	.replace('id', '\"id\"').replace('pid', '\"pid\"');
					 let scene = ('{' + option.scene + "}").replace('qr%26', '').replace(/%3D/g, ':').replace(/%26/g, ',')
					            .replace('id', '\"id\"').replace('pid', '\"pid\"').replace(/=/g,':').replace(/&/g,',');
					console.log(scene,'scene')
					let opt = JSON.parse(scene);
					console.log(opt)
					// 保存拼团订单id
					this.gp_id = opt.id;
					if (opt.pid) {
						// 存储邀请人
						this.spread = opt.pid;
						uni.setStorageSync('spread', opt.pid);
					}
				}
			} else {
				// 保存拼团订单id
				this.gp_id = option.id;
				if (option.spread) {
					// 存储邀请人
					this.spread = option.spread;
					uni.setStorageSync('spread', option.spread);
				}
			}
			// 判断是否有拼团
			if (option.unique) {
				this.unique = option.unique
			}
			this.getData();
			// // 保存拼团订单id
			// this.gp_id = e.id;
			// // 判断是否有人邀请
			// if (e.spread) {
			// 	// 存储邀请人
			// 	this.spread = e.spread;
			// 	uni.setStorageSync('spread', option.spread);
			// }
		},
		onShow() {
			// this.getData();
		},
		components: {
			uniCountdowns
		},
		methods: {
			//前往参团
			goBuy() {
				let _self = this;
				uni.navigateTo({
					url: '/pages/order/createOrder?pinkId=' + this.gp_id + '&type=pink' + '&pid=' + this.goods
						.product_id + '&gid=' + this.goods.id + '&merid=' + this.goods.mer_id +'&unique=' + this.goods.productValue[this.goods.productAttr[0].attr_values[0]].unique
				});
			},
			//邀请参团
			invitation() {
				let obj = this;
				// 判断拼团是否已经结束
				if (obj.userBool == 0) {
					uni.showModal({
						title: '提示',
						content: '该拼团已经结束！',
						showCancel: false,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/product/groupBooking/inviteImg?id=' + this.pinkT.id + '&spread=' + this.userInfo
						.uid,
					success: res => {},
					fail: e => {
						console.log(e);
					},
					complete: () => {}
				});
			},
			// #ifdef H5
			// 加载微信html5页面分享方法
			shareDate() {
				let obj = this;
				// 判断是否微信浏览器
				let bool = uni.getStorageSync('weichatBrowser') || '';
				if (bool) {
					// 过滤微信强制添加的链接地址
					url = url.replace('?from=singlemessage', '');
					let data = {
						link: url, // 分享链接
						imgUrl: obj.goodsObjact.image, // 分享图标
						desc: obj.goodsObjact.store_info,
						title: obj.goodsObjact.store_name,
						success: function() {}
					};
					obj.weichatObj.updateAppMessageShareData(data);
					obj.weichatObj.updateTimelineShareData(data);
				}
			},
			// #endif
			// 获取拼团信息
			getData() {
				let obj = this;
				// let data = {gp_id:_self.gp_id},
				getCombinationLisPink({}, this.gp_id).then(e => {
					let r = e.data;
					// 保存拼团商品详细
					obj.goods = r.store_combination;
					// 保存团长信息
					obj.pinkT = r.pinkT;
					/* 计算倒计时 */
					obj.timeComputed(obj.pinkT.stop_time * 1000);
					// 获取拼团用户列表
					obj.people = r.pinkAll;
					// 获取当前是否已参与过这个拼团
					obj.userBool = r.userBool;
					// 判断当前用户是否为团长
					if (r.pinkT.uid == r.userInfo.uid) {
						// 显示邀请好用选项
						obj.status = 1;
					}
					// 保存当前登录用户信息
					obj.userInfo = r.userInfo;
					// 获取拼团是否已经过期
					obj.pinkBool = r.pinkBool;
					obj.peopleNub = obj.pinkT.people - 1 - obj.people.length;
					// #ifdef H5
					// 加载微信分享配置
					this.shareDate();
					// #endif
				});
			},
			// 计算倒计时时间
			timeComputed(da) {
				let obj = this;
				let stopTime = timeComputed(da);
				obj.stopTime.stopTimeH = stopTime.hours;
				obj.stopTime.stopTimeM = stopTime.minutes;
				obj.stopTime.stopTimeS = stopTime.seconds;
			}
		}
	};
</script>

<style lang="scss">
	.box {
		/* #ifdef APP-PLUS | MP */
		padding-top: var(--status-bar-height);
		/* #endif */
	}

	.lyy-c {
		width: 100%;
		background: rgba(255, 255, 255, 1);

		.lyy-c-word {
			font-size: 28rpx;
			color: rgba(102, 102, 102, 1);
			line-height: 50rpx;
		}

		.lyy-c-p {
			padding: 39rpx 30rpx;
		}
	}

	.lyy-wrap {
		background-color: #f4f4f4;
	}

	.lyy-hx {
		height: 14rpx;
	}

	.image1 {
		width: 200rpx;
		height: 33rpx;
		background-size: 200rpx auto;
	}

	.lyy-b {
		width: 100%;
		background-color: white;

		.lyy-b-p {
			padding: 30rpx 45rpx;

			.lyy-b-word2,
			.lyy-b-word3 {
				font-size: 28rpx;
				font-weight: bold;
			}

			.lyy-b-word2 {
				color: #901b21;
			}

			.lyy-b-word3 {
				color: #1d2023;
			}

			.lyy-b-jz {
				width: 100%;
				justify-content: center;
				margin-bottom: 20rpx;

				.lyy-y {
					width: 80rpx;
					height: 80rpx;
					margin: 0px 15rpx;
					border-radius: 40rpx;
					overflow: hidden;

					.user-list-img {
						width: 100%;
						height: 100%;
					}
				}

				.lyy-y-word {
					margin-top: 10rpx;
					font-size: 28rpx;
					text-align: center;
					width: 110rpx;
				}

				.lyy-b-but {
					width: 550rpx;
					height: 80rpx;
					background: #901b21;
					border-radius: 100rpx;
					text-align: center;
					color: white;
					line-height: 80rpx;
					font-size: 32rpx;
				}

				.cmy-user-box {
					.user-list {
						display: inline-block;
						line-height: 1;
					}
				}
			}

			.lyy-b-word {
				text-align: center;
				font-size: 26rpx;
				color: rgba(29, 32, 35, 1);
			}
		}
	}

	// 商品列表样式
	.lyy-a {
		width: 100%;
		background-color: white;

		.lyy-a-p {
			padding: 22rpx 30rpx;

			.lyy-a-f {
				display: flex;
				align-items: center;

				.lyy-a-f2 {
					flex: 1;
				}

				.lyy-a-tu {
					width: 122rpx;
					height: 122rpx;
				}

				.lyy-a-z {
					padding-left: 30rpx;
					flex-grow: 1;

					.money-box {
						justify-content: flex-start;

						.lyy-a-tu2 {
							background: rgba(255, 255, 255, 1);
							border: 1rpx solid #901b21;

							.lyy-a-tu3 {
								background-color: #901b21;
								padding: 2px 4px 0px 4px;
								text-align: center;
								height: 26rpx;

								.lyy-a-tu5 {
									width: 20rpx;
									height: 20rpx;
									display: block;
								}
							}

							.lyy-a-tu4 {
								margin-left: 2px;
								font-size: 10px;
								color: #901b21;
								padding: 0px 10rpx;
								text-align: center;
							}
						}
					}

					.lyy-a-word {
						line-height: 56rpx;

						.lyy-a-word3 {
							font-size: 28rpx;
							font-weight: bold;
							color: #901b21;
						}
					}

					.lyy-a-word2 {
						font-size: 30rpx;
						color: rgba(29, 32, 35, 1);
					}
				}
			}
		}
	}
</style>