point-app/pagesHome/group/share.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<view class="one_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 class="info">
						<view class="name">
							{{info.goods.name}}
						</view>
						<view class="other">
							<view class="other_1">
								<text>价格：</text>
								<text>¥{{info.goods.sell_money}}元</text>
							</view>
							<view class="other_1">
								<text></text>
								<text>{{info.goods.brief}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="two">
				<view class="list" v-for="(item,index) in info.persons" :key="index">
					<view class="img">
						<image class="image" src="../../static/logo.png" mode=""></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>
				<view class="list list_1" v-if="info.group_persons>info.persons.length">
					<text class="iconfont icon-cantuan"></text>
					<button type="default" size="mini" @tap.stop="toOpen">参团</button>
				</view>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				user: {},
				info: {
					group_persons: 6,
					goods: {
						file: [ //
							{
								url: this.$config.logoUrl
							}
						],
						name: '测试商品',
						sell_money: 10,
						brief: '信息简介'
					},
					persons: [ //
						{
							file: [ //
								{
									url: this.$config.logoUrl
								}
							],
							name: '顾红伟'
						},
						{
							file: [ //
								{
									url: this.$config.logoUrl
								}
							],
							name: '顾红伟'
						},
						{
							file: [ //
								{
									url: this.$config.logoUrl
								}
							],
							name: '顾红伟'
						},
						{
							file: [ //
								{
									url: this.$config.logoUrl
								}
							],
							name: '顾红伟'
						},
						{
							file: [ //
								{
									url: this.$config.logoUrl
								}
							],
							name: '顾红伟'
						},
					]
				},
				// 分享
				share: {
					title: '天恩活泉',
					path: `/pages/index/index`,
					imageUrl: this.$config.shareUrl,
				}
			};
		},
		onLoad: function(e) {
			const that = this;
			that.$set(that, `id`, e.id || '63437e3ba163596194c3e830');
		},
		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;

		.one {
			padding: 2vw;

			.one_1 {
				display: flex;

				.img {
					width: 30vw;

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

					}
				}

				.info {
					width: 66vw;
					padding: 0 0 0 2vw;

					.name {
						font-size: 16px;
						font-weight: bold;
						margin: 0 0 1vw 0;
					}

					.other {
						.other_1 {
							font-size: 14px;
							margin: 0 0 1vw 0;

							text:nth-child(2) {
								color: #858585;
							}
						}

						.other_1:nth-child(1) {
							text:last-child {
								color: #ff0000;
							}
						}

						.other_1:nth-child(2) {
							text:last-child {
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-line-clamp: 2;
								word-break: break-all;
								display: -webkit-box;
								-webkit-box-orient: vertical;
							}
						}
					}
				}
			}
		}

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

			.list {
				width: 18vw;
				text-align: center;
				padding: 2vw;
				border-radius: 10px;
				margin: 0 2.5vw 2vw 0;
				box-shadow: 0 0 3px #858585;

				.img {
					.image {
						width: 18vw;
						height: 11vh;
						border-radius: 90px;
					}
				}

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

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

			.list_1 {
				text {
					font-size: 45px;
					margin: 1vw 0 2vw 0;
					display: inline-block;
				}

				button {
					background-color: #ff0000;
					color: #fff;
				}
			}
		}
	}
</style>