point-app/pagesHome/group/share.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<view class="one_1">
					<text>超值拼团</text>
				</view>
				<view class="one_2">
					<text class="iconfont icon-qianggou"></text>
					<text>快叫上伙伴一起抢</text>
					<text class="iconfont icon-qianggou"></text>
				</view>
			</view>
			<view class="two">
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="list-scroll-view">
						<view class="two_1" v-if="info.goods">
							<swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff"
								indicator-active-color="#FB1438" :interval="3000" :duration="1000">
								<swiper-item class="list" v-for="(item,index) in info.goods.file" :key="index">
									<image class="image"
										v-if="item.url.indexOf('gif') != -1 || item.url.indexOf('jpg') != -1 || item.url.indexOf('png') != -1 || item.url.indexOf('jpeg') !=-1"
										:src="item.url" mode="aspectFit"></image>
									<video class="image" :autoplay='false' :show-fullscreen-btn="false" :loop="false"
										controls v-else :src="item.url"></video>
								</swiper-item>
							</swiper>
							<!-- 是否关注商品 -->
							<view class="goodsColect">
								<text @tap="toGoodscolect"
									:class="['iconfont',goodsColect?'icon-yduishoucangshixin-copy':'icon-yduishoucangkongxin']"></text>
							</view>
						</view>
						<view class="two_2">
							<text class="money"><text>团购价¥</text>{{infospecs.price||0}}</text>
						</view>
						<view class="two_3">
							<view class="name">
								{{info.goods.name}}
							</view>
							<view class="brief">
								{{info.goods.shot_brief||''}}
							</view>
							<view class="money">
								<text>{{info.goods.send_time}}内发货</text>
							</view>
						</view>
						<view class="two_4" @tap="toEvaluate">
							<view class="l">
								<text>{{evaluate_num>0?`商品评价(${evaluate_num})`:`暂无评价`}}</text>
							</view>
							<view class="r">
								<text class="iconfont icon-jiantouyou"></text>
							</view>
						</view>
						<view class="two_5">
							<view class="two_5_1">
								<view class="shop_1">
									<image class="image"
										:src="info.shop&&info.shop.logo&&info.shop.logo.length>0?info.shop.logo[0].url:''"
										mode="aspectFit"></image>
								</view>
								<view class="shop_2">
									<view class="name">{{info.shop.name}}</view>
									<view class="num"><text>宝贝数：</text>{{info.shop.goods_num||0}}</view>
								</view>
							</view>
							<view class="two_5_2">
								<view class="score_1">
									<text>商品：</text>
									<text>{{info.shop.goods_score||5}}</text>
									<text>|</text>
								</view>
								<view class="score_1">
									<text>发货：</text>
									<text>{{info.shop.send_score||5}}</text>
									<text>|</text>
								</view>
								<view class="score_1">
									<text>服务：</text>
									<text>{{info.shop.service_score||5}}</text>
								</view>
							</view>
							<view class="two_5_3">
								<view class="btn">
									<button size="mini" @tap="toShop">进入店铺</button>
								</view>
								<view class="btn">
									<button size="mini" @tap="toShopcolect">{{shopColect==true?'已关注':'关注'}}</button>
								</view>
							</view>
						</view>
						<view class="two_6">
							<rich-text :nodes="info.goods.brief"></rich-text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="foot">
				<uni-goods-nav :options="[]" :buttonGroup="buttonGroup" @buttonClick="buttonClick" />
			</view>
		</view>
		<!-- 规格 -->
		<uni-popup ref="specShow" background-color="#fff" type="bottom" :is-mask-click="false">
			<view class="popup">
				<view class="close">
					<text @click="toClose" class="iconfont icon-shanchu"></text>
				</view>
				<view class="info_1" v-if="popupShow=='1'">
					<view class="info_1">
						<scroll-view scroll-y="true" class="scroll-view">
							<view class="list-scroll-view">
								<view class="one">
									<view class="one_1">
										<view class="l">
											<image class="image"
												:src="specsInfo.file&&specsInfo.file.length>0?specsInfo.file[0].url:info.goods.file[0].url"
												mode="aspectFill" @tap="diaView"></image>
										</view>
										<view class="r">
											<view class="money">
												<text class="money_1"><text>团购价¥</text>{{specsInfo.price||0}}</text>
											</view>
											<view class="other_1">
												<text>已选：</text>
												<text>{{specsInfo.name}}</text>
											</view>
											<view class="other_1">
												<text>运费：</text>
												<text>{{specsInfo.freight===0?'包邮':specsInfo.freight+'元'}}</text>
											</view>
										</view>
									</view>
									<view class="one_2">
										<view class="one_2_1">
											规格
										</view>
										<view class="one_2_2">
											<view
												:class="['list',is_specs!=index&&item.num>0?'list':is_specs!=index&&item.num<=0?'huilist':is_specs==index&&item.num>0?'redlist':is_specs==index&&item.num<=0?'huiilist':'list']"
												v-for="(item,index) in info.specs" :key="index" @tap="toSpecs(item)">
												<text>{{item.name}}</text>
											</view>
										</view>
									</view>
									<view class="one_3">
										<view class="one_3_1">
											<text>数量</text>
										</view>
										<view class="one_3_1">
											<uni-number-box v-model="buy_num" @change="toCount" :min="1"
												:max="specsInfo.num">
											</uni-number-box>
										</view>
										<view class="one_3_1">
											<text>库存{{specsInfo.num||0}}</text>
											<text class="limit"
												v-if="specsInfo.limit_num">({{specsInfo.buy_name||'暂无'}}{{specsInfo.limit_num||0}}个)</text>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="info_2">
						<view class="btn">
							<button :disabled="is_zero" :class="[is_zero?'btncolor':'']" @tap="toBuy">立即购买</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="dialog" v-if="dialog.show==true" @tap="dialogClose">
			<view class="dialog_1" v-if="dialog.type=='1'">
				<swiper class="swiper" circular @change="diaSpecs" :current="is_specs">
					<swiper-item class="list" v-for="(item,index) in info.specs" :key="index">
						<view class="list_1">
							<image class="image" :src="item.file.length>0?item.file[0].url:info.goods.file[0].url"
								mode="aspectFit"></image>
						</view>
						<view class="name">
							<text>{{item.name}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				// 系统设置
				config: {},
				user: {},
				// 商品id
				id: '',
				// 团id
				group: '',
				info: {},
				buttonGroup: [{
					text: '参加团购',
					backgroundColor: 'linear-gradient(90deg, #23B67A, #23B67A)',
					color: '#fff',
				}],
				// 规格
				is_specs: 0,
				specsInfo: {},
				infospecs: {},
				// 限制说明
				buyList: [],
				// 购买数量
				buy_num: 1,
				// 是否零库存
				is_zero: false,
				// 评价数
				evaluate_num: 0,
				// 是否关注商品
				goodsColect: false,
				// 是否关注店铺
				shopColect: false,
				// 规格弹出框
				dialog: {
					show: false,
					type: '1'
				},
				// 规格弹框
				popupShow: '1',
			};
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e.id || '');
			that.$set(that, `group`, e.group || '');
			await that.searchConfig();
			await that.search();
			await that.configShare();
		},
		onShow: async function() {
			const that = this;
			await that.watchLogin();
		},
		onUnload: function() {
			// 页面卸载,重新部署分享内容
			const that = this;
			if (that.config) {
				// 赋值默认值
				that.$config.share = {
					title: that.config.title,
					path: '/pages/index/index',
					imageUrl: that.config.config.share[0].url
				}
			}
		},
		methods: {
			watchLogin() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: async function(res) {
						let user = that.$jwt(res.data);
						if (user) that.$set(that, `user`, user);
					}
				})
			},
			// 查询系统设置
			searchConfig() {
				const that = this;
				uni.getStorage({
					key: 'config',
					success: function(res) {
						let data = res.data;
						that.$set(that, `config`, data);
					}
				})
			},
			async search() {
				const that = this;
				if (that.id) {
					let res;
					res = await that.$api(`/view/goodsDetail`, `POST`, {
						id: that.id,
						group: that.group
					}, 'group');
					if (res.errcode == '0') {
						let data = res.data;
						if (data.goods.brief) data.goods.brief = data.goods.brief.replace(/\<img/gi,
							'<img class="rich-img"');
						// 显示最低价格的规格信息,不考虑库存问题
						if (data.specs && data.specs.length > 0) {
							// 规格排序
							let indexSpecs = data.specs.sort(function(a, b) {
								return a.price - b.price;
							})
							that.$set(that, `infospecs`, indexSpecs[0])
						}
						that.$set(that, `info`, data);
						// 查询其他
						await that.searchOther();
						// 查询规格
						that.searchSpecs(data.specs);
						// 查询评价数
						that.searchRate(data);
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				}
			},
			// 查询规格
			searchSpecs(e) {
				const that = this;
				if (e.length > 0) {
					let data = e.find(i => i.num > 0);
					let dataIndex = e.findIndex(i => i._id == data._id);
					if (data) {
						let limit = that.buyList.find((i) => i.value == data.buy_limit);
						if (limit) data.buy_name = limit.label
						that.$set(that, `specsInfo`, data);
						that.$set(that, `is_specs`, dataIndex);
					}
				}
			},
			// 查询评价数
			async searchRate(e) {
				const that = this;
				let res = await that.$api(`/goodsRate`, `GET`, {
					goods: e.goods._id
				})
				if (res.errcode == '0') that.$set(that, `evaluate_num`, res.total);
			},
			// 关注商品
			async toGoodscolect() {
				const that = this;
				let user = that.user;
				if (user && user._id) {
					let res = await that.$api(`/storeGoods`, `POST`, {
						customer: user._id,
						goods: that.id
					});
					if (res.errcode == '0') {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						that.$set(that, `goodsColect`, res.data.result)
					}
				} else {
					uni.showToast({
						title: '暂无账号，无法收藏商品',
						icon: 'none'
					})
				}
			},
			// 关注店铺
			async toShopcolect() {
				const that = this;
				let user = that.user;
				if (user && user._id) {
					let res = await that.$api(`/storeShop`, `POST`, {
						customer: user._id,
						shop: that?.info?.shop._id
					});
					if (res.errcode == '0') {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						that.$set(that, `shopColect`, res.data.result)
					}
				} else {
					uni.showToast({
						title: '暂无账号，无法关注商铺',
						icon: 'none'
					})
				}
			},
			// 评价
			toEvaluate() {
				const that = this;
				uni.navigateTo({
					url: `/pagesHome/order/appraise?id=${that.info.goods._id}`
				})
			},
			// 进入店铺
			toShop() {
				const that = this;
				let info = that.info;
				uni.navigateTo({
					url: `/pagesHome/shop/index?id=${info.shop._id}`
				})
			},
			// 规格预览
			diaView() {
				const that = this;
				that.$set(that, `dialog`, {
					show: true,
					type: '1'
				})
			},
			// 选择规格
			toSpecs(e) {
				const that = this;
				let specs = that.info.specs;
				let dataIndex = specs.findIndex(i => i._id == e._id);
				let limit = that.buyList.find((i) => i.value == e.buy_limit);
				if (limit) e.buy_name = limit.label
				that.$set(that, `is_specs`, dataIndex);
				that.$set(that, `specsInfo`, e)
				that.$set(that, `buy_num`, 1);
				if (e.num <= 0) that.$set(that, `is_zero`, true)
				else that.$set(that, `is_zero`, false)
			},
			//立即参团
			buttonClick(e) {
				const that = this;
				this.$set(that, `popupShow`, '1')
				that.$refs.specShow.open();
			},
			// 关闭弹框
			toClose() {
				const that = this;
				that.$refs.specShow.close();
			},
			// 弹框选择规格
			diaSpecs(e) {
				const that = this;
				let specs = that.info.specs;
				let index = e.detail.current;
				let data = specs[index];
				that.$set(that, `is_specs`, index);
				that.$set(that, `specsInfo`, data);
				that.$set(that, `buy_num`, 1);
				if (data.num <= 0) that.$set(that, `is_zero`, true)
				else that.$set(that, `is_zero`, false)
			},
			// 关闭弹框
			dialogClose() {
				const that = this;
				that.$set(that, `dialog`, {
					show: false,
					type: '1'
				})
			},
			// 确认开团 立即参团
			async toBuy() {
				const that = this;
				let user = that.user;
				if (user._id) {
					let data = {
						shop: that.info.shop._id,
						goods: that.info.goods._id,
						goodsSpec: that.specsInfo._id,
						num: that.buy_num,
						group: that.group
					}
					let arr = await that.$api(`/groupOrder/checkCanBuy`, 'POST', data, 'group')
					if (arr.errcode == '0') {
						uni.navigateTo({
							url: `/pagesHome/group/order?key=${arr.data}`
						})
					} else {
						uni.showToast({
							title: arr.errmsg,
							icon: 'none'
						})
					}
				} else {
					uni.navigateTo({
						url: `/pages/login/index`
					})
				}
			},
			// 计数器
			toCount(e) {
				const that = this;
				that.num = e;
			},
			// 查询其他信息
			async searchOther() {
				const that = this;
				let user = that.user;
				let res;
				// 是否关注商品
				res = await that.$api(`/storeGoods/check`, `GET`, {
					customer: user._id,
					goods: that.id
				});
				if (res.errcode == '0') that.$set(that, `goodsColect`, res.data);
				// 是否关注店铺
				res = await that.$api(`/storeShop/check`, `GET`, {
					customer: user._id,
					shop: that.info?.shop?._id
				});
				if (res.errcode == '0') that.$set(that, `shopColect`, res.data)
				// 限制说明
				res = await that.$api(`/dictData`, 'GET', {
					code: "buy_limit"
				});
				if (res.errcode == '0') that.$set(that, `buyList`, res.data)
			},
			// 配置分享内容
			configShare() {
				const that = this;
				let id = that.id;
				let info = that.info;
				let config = that.config;
				that.$config.share = {
					title: info?.goods?.name,
					path: `/pagesHome/group/share?id=${that.id}&group=${that.group}`,
					imageUrl: info?.goods?.file[0].url
				}
			},
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			background-color: #D9FDEF;
			margin: 2vw 6vw;
			border-radius: 10px;
			padding: 2vw;

			.one_1 {
				text-align: center;
				border-bottom: 1px dashed #085623;
				margin: 0 0 2vw 0;
				padding: 0 0 1vw 0;

				text {
					font-size: 61px;
					font-weight: bold;
					color: #357846;
					font-family: cursive;
				}
			}

			.one_2 {
				text-align: center;

				text {
					padding: 0 5px;
				}

				text:nth-child(2) {
					font-size: 18px;
					letter-spacing: 5px;
					font-weight: bold;
					color: #357846;
				}
			}
		}

		.two {
			position: relative;
			flex-grow: 1;

			.two_1 {
				border-bottom: 0.5vw solid var(--f9Color);

				swiper {
					height: 44vh !important;
				}

				.list {
					border-radius: 5px;

					.image {
						width: 100%;
						height: 100%;
						border-radius: 5px;
						background-color: #fff;
					}
				}

				.goodsColect {
					position: fixed;
					top: 2vw;
					right: 3vw;
					z-index: 99;
					background-color: #858585;
					border-radius: 90px;

					text {
						font-size: 30px;
					}
				}
			}

			.two_2 {
				border-bottom: 0.5vw solid var(--f9Color);
				padding: 2vw;

				.money {
					font-size: 20px;
					padding: 0 1vw 0 0;
					color: var(--fFB1Color);
					font-weight: bold;

					text {
						font-size: 14px;
					}
				}
			}

			.two_3 {
				border-bottom: 0.5vw solid var(--f9Color);
				padding: 2vw;

				.name {
					font-size: 17px;
					font-weight: bold;
					margin: 0 0 2vw 0;
				}

				.brief {
					font-size: 14px;
					color: #858585;
					margin: 0 0 1vw 0;
				}

				.money {
					font-size: 13px;
					color: #858585;

					text {
						padding: 0 2vw 0 0;
					}
				}
			}

			.two_4 {
				display: flex;
				justify-content: space-between;
				padding: 2vw;
				border-bottom: 0.5vw solid var(--f9Color);
				font-size: 14px;
			}

			.two_5 {
				padding: 2vw;
				border-bottom: 0.5vw solid var(--f9Color);

				.two_5_1 {
					margin: 0 0 1vw 0;
					display: flex;

					.shop_1 {
						width: 15vw;
						height: 15vw;
						border: 1px solid #f1f1f1;

						.image {
							width: 100%;
							height: 100%;
						}
					}

					.shop_2 {
						width: 78vw;
						padding: 0 0 0 2vw;

						.name {
							font-size: 14px;
							margin: 0 0 1vw 0;
						}

						.num {
							font-size: 12px;
							color: #858585;

							text:last-child {
								color: #000;
							}
						}
					}
				}

				.two_5_2 {
					margin: 0 0 2vw 0;
					display: flex;
					justify-content: space-between;
					padding: 2vw 0;

					.score_1 {
						width: 33vw;
						text-align: center;
						font-size: 14px;
						color: #858585;

						text:nth-child(2) {
							color: var(--fFB1Color);
						}

						text:nth-child(3) {
							float: right;
						}
					}
				}

				.two_5_3 {
					display: flex;
					justify-content: space-around;

					.btn {
						width: 40vw;

						button {
							width: 100%;
							font-size: 15px;

						}
					}
				}
			}

			.two_6 {
				padding: 2vw;

				.rich-img {
					width: 100% !important;
					display: block;
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}

	.content {
		height: 60vw;

		.one {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 0 2vw;
			padding: 2vw 0;

			text {
				margin: 0 2vw 0 0;
			}

			text:last-child {
				margin: 0 0 0 2vw;
				font-size: var(--font12Size);
				color: var(--f85Color);
			}
		}

		.btn {
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 0;

			.button {
				width: 100vw;
				padding: 4vw 0;
				background-color: var(--fFB1Color);
				text-align: center;
				font-size: var(--font18Szie);
				color: var(--mainColor);
			}
		}
	}

	.uni-tab__cart-sub-left {
		padding: 0 !important;
	}

	.uni-popup {
		z-index: 9999 !important;
	}

	.popup {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 60vh;

		.close {
			text-align: right;
			padding: 2vw;
		}

		.info_1 {
			position: relative;
			display: flex;
			flex-direction: column;
			height: 54vh;

			.info_1 {
				position: relative;
				flex-grow: 1;

				.one {
					padding: 2vw;

					.one_1 {
						display: flex;
						margin: 0 0 2vw 0;
						padding: 0 0 2vw 0;
						border-bottom: 0.5vw solid var(--f9Color);

						.l {
							width: 25vw;
							height: 25vw;

							.image {
								width: 100%;
								height: 100%;
								border-radius: 5px;
							}
						}

						.r {
							width: 70vw;
							padding: 0 0 0 2vw;

							.money {

								margin: 0 0 2vw 0;

								.money_1 {
									font-size: 20px;
									color: var(--fFB1Color);
									padding: 0 2vw 0 0;

									text {
										font-size: 14px;
									}
								}
							}

							.other_1 {
								font-size: 15px;
								color: #858585;

								text:last-child {
									color: #000000;
								}
							}
						}
					}

					.one_2 {
						margin: 0 0 2vw 0;
						border-bottom: 0.5vw solid var(--f9Color);

						.one_2_1 {
							font-size: 14px;
							margin: 0 0 2vw 0;
						}

						.one_2_2 {
							display: flex;
							flex-wrap: wrap;

							.list {
								background-color: #F5F5F5;
								margin: 0 2vw 2vw 0;
								padding: 0.5vw 1vw;
								border-radius: 5px;

								text {
									font-size: 14px;
									color: #000;
								}
							}

							.huilist {
								background-color: #DCDCDC;

								text {
									color: #858585;
								}
							}

							.redlist {
								background-color: var(--fFB1Color);

								text {
									color: #ffffff;
								}
							}

							.huiilist {
								background-color: #808080;

								text {
									color: #cccccc;
								}
							}
						}
					}

					.one_3 {
						display: flex;

						.one_3_1 {
							margin: 0 2vw 0 0;

							text {
								font-size: 14px;
								color: #858585;
							}

							.limit {
								color: var(--fFB1Color);
								padding: 0 0 0 2vw;
							}
						}
					}
				}
			}

			.info_2 {
				display: flex;
				text-align: center;
				justify-content: space-between;

				.btn {
					width: 100vw;
				}

				button {
					width: 100%;
					border-radius: 0;
					background-color: #23B67A;
					color: #fff;
					border: 1px solid #f1f1f1;
				}

				.btncolor {
					background: #f1f1f1;
					color: #858585;
				}
			}
		}

		.info_3 {
			position: relative;
			flex-grow: 1;

			.list {
				margin: 0 2vw 2vw 2vw;
				border-radius: 10px;
				background-color: #FFF8DC;

				.list_1 {
					padding: 2vw;
					font-size: 14px;

					.title_1 {
						display: flex;
						justify-content: space-between;
						margin: 1vw 0;

						.l {
							text {
								margin: 0 1vw 0 0;
								font-size: 12px;
								border-radius: 5px;
								border: 0.5px solid var(--fFB1Color);
								color: var(--fFB1Color);
							}
						}

					}

					.title_2 {
						.specList {
							.name {
								margin: 0 0 1vw 0;
							}

							.giftList {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin: 0 0 1vw 0;
								border: 0.5px solid var(--f9Color);
								border-radius: 10px;

								.left {
									width: 85vw;
								}
							}
						}

						.text {
							color: var(--fFB1Color);
						}
					}
				}
			}
		}
	}

	.dialog {
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: #000000;
		z-index: 99999;
		display: flex;
		flex-direction: column;
		justify-content: center;

		swiper {
			height: 60vh;
		}

		.list {
			.list_1 {
				padding: 2vw;
				margin: 0 0 5vw 0;

				.image {
					width: 100%;
					height: 40vh;
				}
			}

			.name {
				text-align: center;
				margin: 0 10vw;
				background-color: #6666669f;
				border-radius: 25px;
				padding: 2vw;

				text {
					color: #fff;
					font-size: 15px;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					word-break: break-all;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}

		}
	}
</style>