hwnc/pagesD/pages/mall/groupShare.vue

<template>
	<view :class="[AppTheme]" v-if="data">
		<div id="shareit" v-if="show" @click="position">
			<image :src="settingFile.root_img+'/static/app/imgs/mine/share.png'" mode=""></image>
		</div>
		<view class="time">
			<u-count-down :time="data.group.rtime > timestamp ? data.group.rtime - timestamp : 0" font-size="28">
			</u-count-down>
		</view>
		<view class="message" v-if="group.status == 0">
			还差
			<span style="color: #FF0000;">{{ group.left }}</span>
			人,赶紧邀请好友来参团吧~
		</view>
		<view class="message" v-else-if="group.status == 1">恭喜您，拼团成功，我们将尽快为您发货~</view>
		<view class="message" v-else>很遗憾，拼团失败~K</view>
		<view class="box_button bg-linear-gradient" v-if="group.status == 0" @click="position">立即参团</view>
		<view class="box_button bg-linear-gradient" @click="goback">回到首页</view>
		<view class="my_team">
			<view class="member captain">
				<span class="bg-primary">团长</span>
				<image :src="data.vip.headimgurl" mode=""></image>
			</view>
			<view class="member" v-if="data.member" v-for="item in data.member" :key="item.headimgurl">
				<image :src="item.headimgurl" mode=""></image>
			</view>
			<view class="member" v-if="data.group.left != 0">
				<image :src="settingFile.root_img+'/static/app/cart/6.png'" mode=""></image>
			</view>
		</view>
		<u-cell-group class="cell">
			<u-cell class="cellitem" title="商品名" :value="data.cache.name"></u-cell>
			<u-cell title="参团时间" :value="$u.timeFormat(data.activity.time, 'yyyy/mm/dd hh:MM')"></u-cell>
			<u-cell title="拼团须知" value="好友参团·人满发货·人不满退款"></u-cell>
		</u-cell-group>
	</view>
</template>
<script>
	import mall from '@/api/mall/index.js';
	export default {
		data() {
			return {
				primary:this.$theme.primary,
				data: '',
				group: '',
				timestamp: '',
				settingFile: getApp().globalData.siteinfo,
				show: false,
				option: ''
			};
		},
		onShow() {

		},
		onLoad(options) {
			this.option = options;
			this.$bindid.getbindid(options, this.$store);
			this.timestamp = Date.parse(new Date()) / 1000;
			this.getting(options.id);
		},
		methods: {
			//回到首页
			goback() {
				uni.switchTab({
					url: "/pages/mall/mall"
				})
			},
			getting(id) {
				/* 这里先写死*/
				let data = {
					id
				};
				mall.groupShare(data).then(res => {
					if (res.status == 200) {
						this.data = res.data;
						this.group = res.data.group;
					}
				});
			},
			position() {
				this.show = !this.show;
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}

	#shareit {
		position: fixed;
		z-index: 999999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);

		image {
			margin-left: 50rpx;
		}
	}

	.time {
		width: 200rpx;
		height: 45rpx;
		margin: 50rpx auto 0;
		padding: 5rpx 20rpx;
		background: #eee;
		font-size: 24rpx;
	}

	.message {
		margin: 80rpx 0;
		text-align: center;
		font-size: 30rpx;
	}

	.box_button {
		margin: 20rpx auto 0;
		width: 400rpx;
		text-align: center;
		color: #fff;
		border-radius: 30rpx;
		line-height: 2;
	}

	.my_team {
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;

		.member {
			margin: 0 10rpx;
			width: 120rpx;
			height: 120rpx;
			position: relative;

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

		.captain {
			span {
				position: absolute;
				font-size: 24rpx;
				border-radius: 30rpx;
				padding: 0 10rpx;
				border: 4rpx solid #fff;
				line-height: 1.4;
				color: #666;
				z-index: 10;
			}
		}
	}

	.cell {
		margin-top: 50rpx;
		width: 100%;
		.cellitem{
			width: 100%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}
</style>