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.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" v-if="item.status==0">
									<image class="image" :src="item.icon&&item.icon.length>0?item.icon[0].url:''"
										mode=""></image>
								</view>
								<view class="name" v-if="item.status==0">
									{{item.name}}
								</view>
							</view>
							<view class="list list_1" v-if="info.group_persons>info.persons.length">
								<button type="default" size="mini" @tap.stop="toOpen">参团</button>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				user: {},
				info: {},
				// 分享
				share: {
					title: '测试商品',
					path: `/pagesHome/group/share`,
					imageUrl: '',
				}
			};
		},
		onLoad: function(e) {
			const that = this;
			that.$set(that, `id`, e.id || '');
		},
		onShow: function() {
			const that = this;
			that.watchLogin();
			that.search();
		},
		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)
					}
				})
			},
			async search() {
				const that = this;
				if (that.id) {
					let res = await that.$api(`/group/${that.id}`, `GET`);
					if (res.errcode == '0') {
						that.$set(that, `info`, res.data);
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				}
			},
			// 参团
			toOpen() {
				const that = this;
				console.log(that.info);
			}
		}
	}
</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;
		}
	}
</style>