shicai/pages/product/productGroup.vue

<template>
	<view class="container">
		<!-- 轮播图 -->
		<top-swiper :imgList="imgList"></top-swiper>
		<!-- 拼团倒计时 -->
		<group-time :goodsObjact="goodsObjact" :key='goodsObjact.product_price' :seckillObj="seckillObj"></group-time>
		<!-- 拼团标题 -->
		<group-content :goodsObjact="goodsObjact"></group-content>
		<!-- 拼团到货时间及优惠 -->
		<discounts :mark='goodsObjact.mark' :Info="goodsObjact.info" @clickCoupon="Getcoupon" :showCoupon='false'></discounts>
		<!-- 规格信息 -->
		<!-- <fresh-detail :goodsObjact="goodsObjact"></fresh-detail> -->
		<!-- <view class="uni-padding-wrap pinklistbox" v-if="pinkTlist.length > 0">
			<view class="pinklist">
				<view v-for="(ls, ind) in showlist">
					<view class="flex pinklist_list">
						<view class="pink_img"><image :src="ls.avatar"></image></view>
						<view class="pink_name">{{ ls.nickname }}</view>
						<view class="pink_tpl">
							<view class="pink_people">
								还差
								<text>{{ ls.count }}</text>
								人拼团
							</view>
						</view>
						<view class="pint" @click="groupBooking(ls.id)">
							去拼团
							<text class="iconfont iconenter"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="More" @click="clickMore" v-if="more">查看更多</view>
		</view> -->
		<view class="ping-plan">
			<view class="participate-7 flex-between-center">
				<view class="participate-7-1">
					<text class="word" v-if="pink_type == 1">AA团</text>
					<text class="word" v-else>达人团</text>
					<text>玩法</text>
				</view>
				<view class="participate-7-1" @click="ToRule()">
					<text class="word1">详细规则</text>
					<image src="../../static/img/img74.png"></image>
				</view>
			</view>
			<view class="participate-8 flex-between-center">
				<view class="participate-8-1">
					<image class="img1" src="https://shicai.liuniu946.com/img/img76.png"></image>
					<view class="word-1">开团/参团</view>
					<view class="word-2">拼团享低价</view>
				</view>
				<image src="https://shicai.liuniu946.com/img/img75.png"></image>
				<view class="participate-8-1">
					<image class="img2" src="https://shicai.liuniu946.com/img/img77.png"></image>
					<view class="word-1">邀请邻里参团</view>
					<view class="word-2">分享优惠多</view>
				</view>
				<image src="https://shicai.liuniu946.com/img/img75.png"></image>
				<view class="participate-8-1">
					<image class="img3" src="https://shicai.liuniu946.com/img/img78.png"></image>
					<view class="word-1">人满发货</view>
					<view class="word-2">人不满退款</view>
				</view>
			</view>
		</view>
		
		<!-- 大家都在拼 达人团显示 -->
		<now-list v-if="pink_type == 2" :recommendedlist="recommendedlist"></now-list>
		
		
		<!-- 图文详情 -->
		<content-text :description="description"></content-text>

		<!-- 底部高度撑开 -->
		<view class="contentBottomHeight"></view>
		<!-- 底部操作菜单 -->
		<view v-if="show == false">
			<view v-if="goodsObjact.pink_type == 'AA团'">
				<group-bottom :peoplePrize='goodsObjact.people_prize' @buy="openPinkT" :seckillObj="seckillObj"></group-bottom>
			</view>
		</view>

		<!-- 返回按钮 -->
		<return-button></return-button>

	</view>
</template>

<script>
	import { nowPinkLst } from '@/api/order.js';
	import {
		goodsDetail,
		cartAdd,
		collectAdd,
		collectDel,
		seckillGoods,
		groupGoods
	} from '@/api/product.js';
	import {
		mapState
	} from 'vuex';
	import store from '@/store/index.js';
	import {
		saveUrl
	} from '@/utils/loginUtils.js';
	import {
		timeComputed
	} from '@/utils/rocessor.js';
	// #ifdef H5
	import {
		weixindata
	} from '@/utils/wxAuthorized';
	// #endif
	// 头部轮播图
	import topSwiper from './common/topSwiper.vue';
	// 拼团倒计时
	import groupTime from './common/groupTime.vue';
	// 拼团标题
	import groupContent from './common/groupContent.vue';
	// 拼团到货时间及优惠
	import discounts from './common/discounts.vue';
	// 规格信息
	import freshDetail from './common/freshDetail.vue';
	// 图文详情
	import contentText from './common/contentText.vue';
	// 底部按钮
	import groupBottom from './common/groupBottom.vue';
	// 返回按钮
	import returnButton from '@/pages/return/returnButton.vue';
	// 大家还在拼
	import NowList from '../groupBooking/common/nowList.vue';
	export default {
		components: {
			topSwiper,
			groupTime,
			groupContent,
			discounts,
			freshDetail,
			contentText,
			groupBottom,
			returnButton,
			NowList
		},
		data() {
			return {
				reply: '', //评论
				list: '', //商品详情的数据
				type: 1, //默认支付方式add为
				goodsNumber: 1, //购买数量
				goodsid: '', //商品id
				description: '', //商品描述
				goodsObjact: {}, //保存商品数据
				//图片循环
				imgList: [],
				// 对比对象
				actionPrice: 0, //默认选中商品价格
				actionImage: '', //默认选中图片
				good_list: '', //猜你喜欢列表
				goodsNumberMax: 0, //最大可购买数量
				// 倒计时数据保存
				seckillObj: {
					stopTime: 0, //结束时间
					stop: false, //是否结束
					stopTimeH: 0, //小时
					stopTimeM: 0, //分钟
					stopTimeS: 0, //秒钟
					stopTimeD: 0, //天
					upTime: 0 //更新组件内部组件用
				},
				// 拼团数据保存
				pink: {
					id: '', //拼团编号
					uid: '', //用户编号
					people: '', //拼团人数
					price: '', //拼团价格
					stop_time: '', //拼团结束时间
					nickname: '', //团长昵称
					avatar: '', //团长头像
					count: '', //拼团剩余人数
					h: '', //时
					i: '', //分
					s: '' //秒
				},
				userInfo: '',
				pinkTlist: '', //拼团数据
				more: true, //查看更多按钮
				showlist: [],
				pink_type: 1, //拼团类别
				show: false, // 是否显示底部按钮
				recommendedlist:[],	// 大家都在拼
			};

		},
		filters: {
			parseIntTo(percent) {
				percent = +percent * 100;
				if (percent % 1 === 0) {
					return percent;
				} else {
					percent = percent.toFixed(1);
					return percent;
				}
			}
		},
		async onLoad(options) {
			let obj = this;
			obj.userInfo = uni.getStorageSync('userInfo');
			//保存商品id
			this.goodsid = options.id;
			if (options.show) {
				this.show = options.show;
			}
			console.log(this.show, 5656)
			// 判断有无人邀请
			if (options.spread) {
				// 存储邀请人
				uni.setStorageSync('spread', options.spread);
			}
			saveUrl();
			// 家在数据
			this.groupGoods();
			return;
			
			// 注册邀请信息
			// #ifdef H5
			let bool = uni.getStorageSync('weichatBrowser') || '';
			if (bool) {
				weixindata();
			}
			// #endif
		},
		computed: {
			...mapState(['weichatObj', 'baseURL', 'urlFile'])
		},
		// 分享
		// onShareAppMessage(options) {
		// 	// 设置菜单中的转发按钮触发转发事件时的转发内容
		// 	let pages = getCurrentPages(); //获取加载的页面
		// 	let currentPage = pages[pages.length - 1]; //获取当前页面的对象
		// 	let url = currentPage.route; //当前页面url
		// 	let item = currentPage.options; //如果要获取url中所带的参数可以查看options
		// 	let shareObj = {
		// 		title: this.goodsObjact.title + '   价格：' + this.goodsObjact.price, // 默认是小程序的名称(可以写slogan等)
		// 		path: url + '?id=' + item.id + '&spread=' + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
		// 		imageUrl: this.goodsObjact.image,
		// 		success: function(res) {
		// 			// 转发成功之后的回调
		// 			if (res.errMsg == 'shareAppMessage:ok') {}
		// 		},
		// 		fail: function() {
		// 			// 转发失败之后的回调
		// 			if (res.errMsg == 'shareAppMessage:fail cancel') {
		// 				// 用户取消转发
		// 			} else if (res.errMsg == 'shareAppMessage:fail') {
		// 				// 转发失败，其中 detail message 为详细失败信息
		// 			}
		// 		}
		// 	};
		// 	return shareObj;
		// },
		methods: {
			// 跳转详细规则
			ToRule() {
				if( this.pink_type == 1 ) {
					// AA团
					uni.navigateTo({
						url: '/pages/rule/AArule'
					})
				} else {
					// 达人团
					uni.navigateTo({
						url: '/pages/rule/DaRrule'
					})
				}
			},
			// 去开团
			ToKaiTuan(item) {
				let id = item.id;
				uni.navigateTo({
					url: '/pages/product/productGroup?id=' + id
				});
			},
			
			// 跳转页面
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			// 查看更多
			clickMore() {
				this.showlist = this.pinkTlist;
				console.log(this.showlist, 22);
				this.more = false;
			},
			//去拼团
			groupBooking(item) {
				uni.navigateTo({
					url: '/pages/groupBooking/groupdetails?id=' + item
				});
			},
			// 获取拼团商品详情
			groupGoods() {
				let obj = this;
				
				// 大家还在拼
				nowPinkLst({}).then(({data}) => {
					this.recommendedlist = data;
				})
				
				groupGoods({}, this.goodsid).then(function({
					data
				}) {
					let goods = data.storeInfo;
					obj.goodsObjact = goods;
					console.log(obj.goodsObjact, 88)
					if (obj.goodsObjact.description != null) {
						obj.description = obj.goodsObjact.description.replace(/\<img/gi, '<img class="rich-img"');
					}
					obj.imgList = goods.images; //保存轮播图
					obj.actionPrice = goods.price; //保存默认选中商品价格
					obj.actionImage = goods.image_base; //保存默认选中商品图片
					obj.goodsNumberMax = 1; //保存默认选中最大可购买商品数量
					if (obj.goodsObjact.pink_type == 'AA团') {
						obj.pink_type = 1;
					} else {
						obj.pink_type = 2;
					}
					obj.pinkTlist = data.pink;
					obj.showlist = obj.pinkTlist.slice(0, 2);
					if (obj.pinkTlist.length <= 2) {
						obj.more = false;
					}

					// 保存结束时间
					obj.seckillObj.stopTime = goods.stop_time * 1000;
					// 获取当前时间
					let acitonTime = new Date();
					// 判断当前时间是否大于结束时间
					if (acitonTime.getTime() > obj.seckillObj.stopTime) {
						// 当前秒杀时间已经结束
						obj.seckillObj.stop = true;
					} else {
						// 计算倒计时
						let time = timeComputed(obj.seckillObj.stopTime)
						// 倒计时数据保存
						obj.seckillObj = {
							stopTime: goods.stop_time * 1000, //结束时间
							stop: false, //是否结束
							stopTimeD: time.day, //天
							stopTimeH: time.hours, //小时
							stopTimeM: time.minutes, //分钟
							stopTimeS: time.seconds, //秒钟
							upTime: (new Date()).getTime()
						}
					}
				});
			},
			// 立即购买
			// buy(item) {
			// 	let obj = this;
			// 	obj.type = item;
			// 	// 创建传值对象
			// 	let data = {
			// 		cartNum: obj.goodsNumber, //商品数量
			// 		new: 1, //商品是否新增加到购物车1为不加入0为加入
			// 		combinationId: obj.goodsid,
			// 		productId: obj.goodsObjact.product_id
			// 	};
			// 	cartAdd(data)
			// 		.then(function(e) {
			// 			let da = e.data;
			// 			if (obj.type == 1) {
			// 				// 跳转到支付页
			// 				uni.navigateTo({
			// 					url: '/pages/order/createOrderKai?id=' + da.cartId+'&goodsType=2'
			// 				});
			// 			}
			// 		})
			// 		.catch(e => {
			// 			console.log(e);
			// 		});
			// },

			// 一键开团
			openPinkT() {
				uni.navigateTo({
					url: '/pages/product/groupdetails?id=' + this.goodsid
				})
			},
			// 阻止触发上级事件
			stopPrevent() {}
		}
	};
</script>

<style lang="scss">
	//默认商品底部高度
	.goodsBottom {
		height: 160rpx;
	}

	page {
		background: #f0f0f0;
	}

	//秒杀、拼团底部高度
	.contentBottomHeight {
		height: 110rpx;
		// background-color: #FFFFFF;
	}

	//默认商品底部高度
	.goodsBottom {
		height: 160rpx;
	}

	/deep/ .iconenter {
		font-size: $font-base + 2rpx;
		color: #888;
	}

	/deep/ .con_image {
		width: 130rpx;
		height: 130rpx;
		display: inline-block;
		padding: 15rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	/* 商品详情中限制图片大小 */
	/deep/ .rich-img {
		width: 100% !important;
		height: auto;
	}

	.pinklistbox {
		background: #ffffff;
		margin-top: 25rpx;
		overflow: hidden;
	}

	.pink_num {
		background: -webkit-linear-gradient(left, #fdf5f6, #fbebf6);
		padding: 15rpx 25rpx;
		font-size: 26rpx;
		color: #dd524d;
	}

	.pint {
		background: -webkit-linear-gradient(left, #ff1f4f, #ff0409);
		padding: 10rpx 25rpx;
		color: #ffffff;
		font-size: 24rpx;
		border-radius: 25rpx;

		.iconenter {
			font-size: 15px;
			color: #ffffff;
		}
	}

	.pinklist {
		padding: 0rpx 25rpx;
		padding-top: 45rpx !important;
	}

	.pinklist_list {
		margin-bottom: 10rpx;
	}

	.pink_img {
		width: 100rpx;
		height: 100rpx;

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

	.pink_people {
		font-size: 28rpx;

		text {
			color: #dd524d;
		}
	}

	.pink_time {
		font-size: 26rpx;
		color: #909399;
	}

	.pink_name {
		width: 200rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding-left: 10rpx;
		// background: #FC2A3F;
		// height: 50rpx;
	}

	.More {
		width: 100%;
		line-height: 2;
		background-color: #fc2a3f;
		font-size: $font-lg;
		margin: 0 auto;
		text-align: center;
		color: #ffffff;
		// border-radius: 50rpx;
	}

	.ping-plan {
		background-color: #FFFFFF;
		padding: 25rpx 35rpx;
		border-top: 15rpx solid #F3F3F4;
		border-bottom: 15rpx solid #F3F3F4;
	}

	.participate-7 {
		color: #000000;
		font-size: 29rpx;
		font-weight: 500;
		padding-bottom: 25rpx;

		.participate-7-1 {
			.word {
				color: #ff0a1a;
			}

			.word1 {
				font-size: 25rpx;
				color: #989aa0;
			}

			image {
				width: 10rpx;
				height: 20rpx;
				margin-left: 15rpx;
			}
		}
	}

	//左右顶格加上下居中
	.flex-between-center {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.participate-8 {
		image {
			width: 26rpx;
			height: 12rpx;
		}

		.participate-8-1 {
			text-align: center;

			.img1 {
				width: 43rpx;
				height: 50rpx;
			}

			.img2 {
				width: 43rpx;
				height: 42rpx;
			}

			.img3 {
				width: 60rpx;
				height: 46rpx;
			}

			.word-1 {
				font-size: 23rpx;
				color: #000000;
				line-height: 34rpx;
			}

			.word-2 {
				font-size: 21rpx;
				color: #91949B;
				line-height: 34rpx;
			}
		}
	}
</style>