hwnc/pagesD/pages/mall/group_cart.vue

<template>
	<view :class="[AppTheme]" v-if="cache && data">
		<swiper class="carousel" :indicator-dots="true" :indicator-active-color="primary">
			<swiper-item v-for="(item, index) in appalbum" :key="index" class="carousel-item">
				<image @click="previewImage(index)" class="s-img" :src=" item" />
			</swiper-item>
		</swiper>

		<view class="title-text">
			<p>{{ cache.name }}</p>
		</view>
		<view class="title-text-cnent">
			<span class="text-neutral">
				价格:¥ {{ cache.price }}
				<span class="money">¥{{ cache.oprice }}</span>
			</span>
			<span>单位: {{ cache.unit }}</span>
			<span>
				已成团
				<span class="text-primary">{{ cache.sells }}</span>
				件
				<span class="people text-primary">{{ cache.peoplenum }}</span>
				人成团
			</span>
		</view>
		<view class="title-text-cnent" style="color: #999999;" v-if="cache.score<=0">本次活动不赠送积分</view>
		<view class="title-text-cnent" style="color: #999999;" v-else>本次活动赠送 {{cache.score}} 积分</view>
		<view class="tuan" v-show="grouplist">
			<view class="tuan-t">{{ data.groupCount }}人待成团</view>
			<view style="height: 1rpx;background-color: #e5e5e5;width: 100%;"></view>
			<view class="tuan-b" v-for="item in grouplist" :key="item.id">
				<image :src="item.headimgurl"></image>
				<view class="center">
					<p>{{ item.nickname }}</p>
					<p>
						还差
						<span class="text-primary">{{item.left}}</span>
						人,剩余
						<u-count-down :time="(item.rtime > timestamp ? item.rtime - timestamp : 0)*1000"
							format="DD:HH:mm:ss" autoStart millisecond :color="primary" font-size="28"
							@change="onChange">
							<view class="time">
								<text class="time__item">{{ timeData.days }}&nbsp;天</text>
								<text
									class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
								<text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
								<text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
							</view>
						</u-count-down>
					</p>
				</view>
				<navigator :url="'./joinGroup?id=' + item.id" class="right border-primary text-primary">去参团</navigator>
			</view>
		</view>
		<view class="bottom_img">
			<p class="subtitle">商品详情</p>

			<view class="content-box">
				<!-- <rich-text :nodes="content"></rich-text> -->
				<u-parse :content="content" :lazy-load="true" :show-with-animation="true"></u-parse>
			</view>
		</view>

		<view class="bottom_but">
			<view @click="go1">
				<u-icon :color="primary" labelSize="12" color="#909399" label="首页" labelPos="bottom"
					labelColor="#909399" size="25" name="home-fill"></u-icon>
			</view>
			<view @click="fastbuy(0)">
				<span>¥{{cache.oprice}}</span>
				<span class="text">单独购买</span>
			</view>
			<view class="bg-linear-gradient" @click="fastbuy(1)">
				<span>¥{{cache.price}}</span>
				<span class="text">一键开团</span>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<nologin ref="nologin" v-on:loginback="loginback"></nologin>
		<!-- #endif -->
		<!-- 站位 -->
		<view style="height: 150rpx;"></view>
	</view>
</template>

<script>
	import mall from '@/api/mall/index.js';
	import nologin from '@/components/nologin/nologin.vue';
	export default {
		components: {
			nologin
		},
		data() {
			return {
				primary: this.$theme.primary,
				data: '',
				appalbum: [],
				cache: [],
				grouplist: '',
				timestamp: '',
				settingFile: getApp().globalData.siteinfo,
				content: '',
				timeData: {},
			};
		},
		onLoad(options) {
			this.$bindid.getbindid(options, this.$store);
			this.timestamp = Date.parse(new Date()) / 1000;
			if (options && options.id) {
				this.actgoods(options.id);
			}
		},
		onShow() {

		},
		methods: {
			loginback() {
				//登录回调
			},
			previewImage(index) { //预览商品详情轮播图片
				uni.previewImage({
					current: index,
					urls: this.appalbum,
					indicator: 'number'
				})
			},
			go1() {
				uni.switchTab({
					url: '/pages/mall/mall'
				})
			},
			go() {
				uni.navigateTo({
					url: '../order/createOrder'
				});
			},
			onChange(e) {
				this.timeData = e
			},
			fastbuy(flag) {
				let that = this;
				// #ifdef MP-WEIXIN
				if (that.$store.state.islogin()) {
					that.fastbuy2(flag)
				} else {
					that.$refs.nologin.open();
				}
				// #endif
				// #ifdef H5 || APP-PLUS
				that.fastbuy2(flag)
				// #endif
			},
			fastbuy2(flag) {
				// //订阅模板消息
				let that = this
				let tmplIdsone = that.$config.temlist;
				if (tmplIdsone) {
					that.$until.requestSubscribeMessage([tmplIdsone['noticeSuccess']], tmplIdsone, function() {
						that.callback(flag)
					});
				} else {
					that.callback(flag)
				}
			},
			callback(flag) {
				var dt, orderurl;
				if (flag == 1) {
					dt = {
						sid: 0,
						goodsid: this.cache.id,
						vipid: uni.getStorageSync('userInfo').id,
						num: 1,
						isact: 1,
						groupid: 0,
						goodstype: this.cache.type
					};
					orderurl = {
						goodstype: this.cache.type,
						sid: 0,
						lasturl: this.data.lasturl,
						isact: 1,
						goodsid: this.data.cache.id
					}
				} else {
					dt = {
						sid: 0,
						goodsid: this.cache.id,
						goodstype: this.cache.type,
						vipid: uni.getStorageSync('userInfo').id,
						num: 1,
						goodstype: this.cache.type
					};
					orderurl = {
						sid: 0,
						goodstype: this.cache.type,
						lasturl: this.data.lasturl,
						goodsid: this.data.cache.id
					}
				}

				mall.fastbuys(dt).then(res => {

					if (res.status == 200) {
						uni.showToast({
							icon: 'loading',
							title: '生成订单',
							duration: 2000
						});
						setTimeout(() => {
							this.$u.route('/pagesD/pages/order/createOrder', orderurl);
						}, 2000);
					} else {
						this.$api.msg(res.msg);
					}
				});
			},
			actgoods(id) {
				mall.actgoods({
					id: id
				}).then(res => {

					if (res.status == 200) {
						this.data = res.data
						this.appalbum = res.data.appalbum;
						this.cache = res.data.cache;
						// 这里有问题
						this.grouplist = res.data.grouplist;
						/* 处理富文本*/
						this.content = this.cache.content.replace(/\<img src="/gi,
							`<img style='width:100%;display:block' src="${this.settingFile.root_rich_img}`);
					} else {
						this.$api.msg(res.msg);
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.carousel {
		height: 375rpx * 2;
	}

	.carousel-item {
		width: 100%;

		.s-img {
			width: 100%;
			height: 100%;
		}

		.swiper-dots {
			left: 45rpx;
			bottom: 40rpx;
		}
	}

	.title-text {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		min-height: 90rpx;
		line-height: 45rpx;
		width: 97%;
		margin: 10rpx auto;
		background-color: #fff;

		p:nth-child(1) {
			font-size: 30rpx;
		}

		p:nth-child(2) {
			font-size: 32rpx;
			color: red;

			span {
				text-decoration: line-through;
				margin: 0 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.title-text-cnent {
		padding: 30rpx;
		box-sizing: border-box;
		height: 90rpx;
		width: 97%;
		margin: 10rpx auto;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;

		.money {
			color: #999999;
			margin-left: 15rpx;
			text-decoration: line-through;
		}

		.people {
			margin-left: 15rpx;
		}
	}

	.tuan {
		padding: 30rpx;
		box-sizing: border-box;

		width: 97%;
		margin: 10rpx auto;
		background-color: #fff;
		font-size: 24rpx;

		.tuan-t {
			padding: 10rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}

		.tuan-b {
			margin-top: 20rpx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			align-items: center;

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

			.center {
				width: 400rpx;

				p {
					padding: 0 20rpx;
					height: 40rpx;
					font-size: 30rpx;
					line-height: 40rpx;

					&:nth-child(2) {
						color: #999999;
						font-size: 26rpx;
					}
				}
			}

			.right {
				width: 64rpx * 2;
				height: 25rpx * 2;
				margin-left: 15rpx;
				border-width: 1rpx;
				border-style: solid;
				border-radius: 10rpx;
				text-align: center;
				line-height: 25rpx * 2;
				margin-top: 10rpx;
			}
		}
	}

	.detriment {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.bottom_img {
		width: 97%;
		margin: 10rpx auto;
		background-color: #fff;
		padding-bottom: 20rpx;
		padding: 0 15rpx;

		.content-box {
			padding-bottom: 50rpx;
			line-height: 41rpx;
		}
	}

	.subtitle {
		position: relative;
		font-size: 0.24rem;
		color: #999999;
		height: 45px;
		line-height: 45px;
		text-align: center;
		font-size: 14px;

		&:before {
			content: '';
			position: absolute;
			width: 10%;
			height: 1px;
			top: 50%;
			background-color: #999999;
			left: 25%;
		}

		&:after {
			content: '';
			position: absolute;
			width: 10%;
			height: 1px;
			top: 50%;
			background-color: #999999;
			right: 25%;
		}
	}

	.bottom_but {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: red;
		display: flex;

		.home {
			margin-top: -20rpx;
		}

		.icon {
			margin-top: -18rpx;
		}

		.text {
			margin-top: -35rpx;
		}

		view {
			font-size: 24rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: column;
		}

		view:nth-child(1) {
			width: 200rpx;
		}

		view:nth-child(2) {
			flex: 1;
			color: #ffffff;
			background-color: #fa436a;
			font-size: 28rpx;
		}

		view:nth-child(3) {
			flex: 1;
			color: #ffffff;
			font-size: 28rpx;
		}
	}
</style>