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">
				<view class="two_1">
					<view class="img">
						<image class="image" :src="info.goods.file&&info.goods.file.length>0?info.goods.file[0].url:''" mode=""></image>
					</view>
				</view>
				<view class="two_2">
					<view class="name">
						{{info.goods.name}}
					</view>
					<view class="money">
						¥{{info.goodsSpec.group_config.money}}元
					</view>
					<view class="brief">
						{{info.goods.shot_brief||''}}
					</view>
				</view>
			</view>
			<view class="thr">
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="list-scroll-view">
						<view class="thr_1">
							<view class="list" v-for="(item,index) in info.persons" :key="index">
								<view class="img">
									<image class="image" :src="item.icon&&item.icon.length>0?item.icon[0].url:''" mode=""></image>
								</view>
								<view class="name">
									{{item.name}}
								</view>
							</view>
							<view class="list list_1" v-if="info.person_limit>info.persons.length">
								<button type="default" size="mini" @tap.stop="toOpen">参团</button>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" type="bottom">
			<view class="content">
				<view class="one">
					<text>数量</text>
					<view class="count">
						<uni-number-box :min="1" :max="info.goodsSpec.num" v-model="num" @change="toCount">
						</uni-number-box>
					</view>
					<text>库存{{info.goodsSpec.num||0}}</text>
				</view>
				<view class="btn">
					<text @click="onSubmit" class="button">确认参团</text>
				</view>
			</view>
		</uni-popup>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				// 系统设置
				config: {},
				user: {},
				id: '',
				info: {},
				num: 1,
			};
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e.id || '');
			await that.watchLogin();
			await that.searchConfig();
			await that.search();
			await that.configShare();
		},
		onShow: function() {},
		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: function(res) {
						let user = that.$jwt(res.data);
						if (user) that.$set(that, `user`, user)
					}
				})
				uni
			},
			// 查询系统设置
			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 = await that.$api(`/group/${that.id}`, `GET`);
					if (res.errcode == '0') {
						if (res.data.status != '-1') {
							res.data.persons = res.data.persons.filter(i => i.status == '0')
						}
						that.$set(that, `info`, res.data);
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				}
			},
			// 参团
			toOpen() {
				const that = this;
				that.$refs.popup.open();
			},
			// 确认开团 立即参团
			async onSubmit() {
				const that = this;
				let user = that.user;
				if (user._id) {
					let data = {
						customer: user._id,
						shop: that.info.shop,
						goods: that.info.goods._id,
						goodsSpec: that.info.goodsSpec._id,
						num: that.num,
						type: '1',
						group: that.id
					}
					let arr = await that.$api(`/util/checkCanBuy`, 'POST', data)
					if (arr.errcode == '0') {
						if (arr.data.result == true) {
							if (that.id) {
								uni.navigateTo({
									url: `/pagesHome/order/order?key=${arr.data.key}&group_id=${that.id}`
								})
							} else {
								uni.navigateTo({
									url: `/pagesHome/order/order?key=${arr.data.key}`
								})
							}
						} else {
							uni.showToast({
								title: arr.data.msg,
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: arr.errmsg,
							icon: 'none'
						})
					}
				} else {
					uni.navigateTo({
						url: `/pages/login/index`
					})
				}
			},
			// 计数器
			toCount(e) {
				const that = this;
				that.num = e;
			},
			// 配置分享内容
			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}`,
					imageUrl: config?.config?.share[0]?.url
				}
			},
		}
	}
</script>

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

		.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 {
			background-color: #D9FDEF;
			margin: 2vw;
			border-radius: 10px;
			padding: 2vw;
			display: flex;

			.two_1 {
				display: flex;

				.img {
					.image {
						width: 100px;
						height: 100px;
						border-radius: 90px;
					}
				}
			}

			.two_2 {
				padding: 0 0 0 2vw;

				.name {
					font-size: 20px;
					font-weight: bold;
					margin: 0 0 2vw 0;
					color: #357846;
				}

				.money {
					font-size: 18px;
					color: #ff0000;
					font-weight: bold;
					margin: 0 0 2vw 0;
				}

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

		.thr {
			position: relative;
			flex-grow: 1;
			margin: 0 2vw 2vw 2vw;
			width: 94vw;
			border-radius: 10px;
			border: 3px solid #D9FDEF;

			.thr_1 {
				padding: 2vw;
				display: flex;
				flex-wrap: wrap;

				.list {
					width: 20vw;
					text-align: center;
					margin: 0 3vw 2vw 0;

					.img {
						.image {
							width: 16vw;
							height: 16vw;
							border-radius: 90px;
						}
					}

					.name {
						font-size: 14px;
						font-weight: bold;
					}
				}

				.list:nth-child(4n) {
					margin: 0 0 2vw 0;
				}

				.list_1 {
					button {
						padding: 0;
						border-radius: 90px;
						width: 16vw;
						height: 16vw;
						text-align: center;
						line-height: 16vw;
						background-color: #ffffff5f;
						font-size: 16px;
						font-weight: bold;
						color: #fff;
					}
				}
			}



		}
	}

	.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);
			}
		}
	}
</style>