deming/pageB/sdetails/index.vue

<template>
    <view class="sdetails">
        <u-swiper :list="list" height="500" border-radius="0" mode="dot" @click="viewImage"></u-swiper>
		<view class="spike-view" v-if="type == 3">
			<view class="left">
				<view class="price">
					<view class="now-price">￥{{ groupbuyInfo.groupbuy_price || '0.00' }}</view>
					<view class="origin-price">￥{{ groupbuyInfo.goods_price || '0.00' }}</view>
				</view>
				<view class="num">剩余数量{{ groupbuyInfo.inventory - groupbuyInfo.groupbuy_buy_quantity || '0' }}件</view>
			</view>
			<view class="right" v-if="!isSrartSpike || !isEndSpike">
				<view class="title">{{ isSrartSpike ? '结束倒计时' : '秒杀倒计时' }}</view>
				<view class="time">{{ spikeTime }}</view>
			</view>
			<view class="right" v-else>
				<view class="title">时间已结束</view>
			</view>
		</view>
        <view class="info">
            <view class="title u-line-2">
                <text class="store-name" @click="toStorePage(goodsInfo.store_id)">{{ goodsInfo.store_name }}</text>
				<text class="goods-name">{{ goodsInfo.goods_name }}</text>
            </view>
            <view class="price-collect">
				<view class="pic" v-if="type == 2">
					<text>￥{{ goodsInfo.pintuan_price || '0.00' }}</text>
					<s>￥{{ goodsInfo.goods_price || '0.00' }}</s>
				</view>
				<view class="pic" v-else-if="type == 1">
					<text>￥{{ goodsInfo.goods_price || '0.00' }}</text>
					<s>￥{{ goodsInfo.goods_marketprice || '0.00' }}</s>
				</view>
				<view class="collect" @click="switchCollect(goodsInfo.is_collect)">
					<u-icon name="star-fill" color="#FF7807" size="28" v-if="goodsInfo.is_collect == 1"></u-icon>
					<u-icon name="star" color="#474747" size="28" v-else></u-icon>
					<text>{{ goodsInfo.is_collect == 1 ? '已收藏' : '收藏' }}</text>
				</view>
			</view>
			<view class="shuliang">
				<text>历史销售数量：{{goodsInfo.goods_salenum}}</text>
				<text>库存仅剩数量：{{goodsInfo.goods_storage}}</text>
			</view>
        </view>
        <view class="hr"></view>
		<!-- <navs :value="领券"></navs> -->
        <navs :value="'产品规格'" @click.native="showSpec=true"></navs>
		<!-- <navs :value="'产品颜色'"></navs> -->
		<!-- <navs :value="'选择尺码'"></navs> -->
		<view class="comment">
			<view class="title">
				<view class="left">商品评价（{{ evaluate.evaluate_num || '0' }}）</view>
				<view class="right" @click="viewComment">
					<text>查看全部</text>
					<image src="/static/image/common/1.png"></image>
				</view>
			</view>
			<comment :reply="false" :content="evaluate" v-if="evaluate.evaluate_num"></comment>
			<view class="comment-none" v-else>暂无评价</view>
		</view>
		<view class="hr"></view>
		<view class="group-user" v-if="groupUser.length">
			<view class="top">
				<view class="title">{{ groupUser.length }}人正在拼团，可直接参与</view>
				<view class="view-more" @click="showGroupUser=true">
					<text>查看全部</text>
					<image src="/static/image/common/1.png"></image>
				</view>
			</view>
			<view class="bottom">
				<view class="left" @click="showGroupUser=true" v-if="user_suc.length">
					<view class="avatar">
						<image v-for="(user, i) in user_suc" :src="user[0].member_avatar" :key="i"></image>
					</view>
					<view class="all" @click="showGroupUser=true">
						<text>查看全部</text>
						<image src="/static/image/common/1.png"></image>
					</view>
				</view>
				<view class="right">
					<view class="launch-user" @click="showGroupUser=true">
						<image :src="groupUser[0][0].member_avatar"></image>
						<text class="u-line-1">{{ groupUser[0][0].member_nickname }}</text>
					</view>
					<view class="involvement-user">
						<view class="item" v-for="(user, i) in groupUser.slice(1, 5)" :key="i" @click="showGroupUser=true">
							<image :src="user[0].member_avatar"></image>
							<text class="u-line-1">{{ user[0].member_nickname }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showGroupUser" mode="center" z-index="10078">
			<view class="launch-container">
				<view class="title u-line-1">正在拼团</view>
				<scroll-view class="launch-view">
					<view class="launch-user">
						<view class="item" v-for="(user, i) in groupUser" :src="user[0].member_avatar" :key="i" @click="involvemenGroup(user)">
							<image class="avatar" :src="user[0].member_avatar"></image>
							<view class="name u-line-1">{{ user[0].member_nickname }}</view>
						</view>
						<view class="pintuan-none" v-if="!groupUser.length">暂无拼团</view>
					</view>
				</scroll-view>
				<image class="close" src="/static/image/common/17.png" @click="showGroupUser=false"></image>
			</view>
		</u-popup>
		<u-popup v-model="showInvolvementUser" mode="center" z-index="10078">
			<view class="involvement-container" v-if="involvemenGroupInfo.length">
				<view class="title">参与<text class="user-name u-line-1">{{ involvemenGroupInfo[0].member_nickname }}</text>的拼团</view>
				<view class="involvement-view">
					<view class="item" v-for="(user, i) in involvemenGroupInfo" :key="i">
						<image class="avatar" :src="user.member_avatar"></image>
						<view class="name u-line-1">{{ user.member_nickname }}</view>
					</view>
				</view>
				<view class="involvement-btn" @click="settlementOrder({ type: 'involvement' })">参与拼团</view>
				<image class="close" src="/static/image/common/17.png" @click="showInvolvementUser=false"></image>
			</view>
		</u-popup>
        <view class="xiangqing">
            <view class="heng"></view>
            <view class="title">商品详情</view>
            <view class="heng"></view>
        </view>
		<view class="rich">
			<view class="goods-video" v-if="list.length && goodsInfo.video" @click="playVideo">
				<image class="video-play" src="/static/videoPlay.png"></image>
				<view class="blacks"></view>
				<image class="video-img" :src="list[0].image" mode="aspectFill"></image>
			</view>
			<rich-text :nodes="goodsInfo.mobile_body"></rich-text>
		</view>
		<!-- 选择规格数量 -->
		<u-popup v-model="showSpec" mode="bottom">
			<scroll-view scroll-y="true" class="spec-popup">
				<view>
					<view class="head">
						<image class="image" :src="goodsInfo.goods_image"></image>
						<view class="info">
							<view class="goods-name u-line-2">{{goodsInfo.goods_name}}</view>
							<text v-if="type == 1">￥{{ goodsInfo.goods_price }}</text>
							<text v-else-if="type == 2">￥{{ goodsInfo.pintuan_price }}</text>
							<text v-else-if="type == 3">￥{{ groupbuyInfo.groupbuy_price }}</text>
						</view>
					</view>
					<guige @sel="self" ref="guige" v-for="(item,index) in goodsInfo.spec_value" :key="index" :title="goodsInfo.spec_name[index]" :item="item" :default="goodsInfo.goods_spec"></guige>
					<view class="num">
						<text>购买数量</text>
						<u-number-box v-model="goodsNumber" :min="1"></u-number-box>
					</view>
					<!-- <view style="height:100rpx"></view> -->
				</view>
			</scroll-view>
        </u-popup>
		<!-- 普通商品 tool -->
        <view class="tloos" v-if="type == 1">
           <view class="navs" @click="toOthersPage('pageC/merchant/index?id=' + storeInfo.store_id)" v-if="!showSpec">
                <image src="/static/image/common/18.png"></image>
                店铺
            </view>
            <view class="navs" style="margin-right:30rpx" v-if="!showSpec"  @click="customers()">
                <image src="/static/image/common/19.png"></image>
                客服
            </view> 
            <view class="button" style="background:rgba(253,211,96,0.6);" v-if="goodsInfo.goods_try == 1" @click="tryDress">试穿试送</view>
            <view class="button" style="background:rgba(253,211,96,1);" @click="addCart">加入购物车</view>
            <view class="button" style="background:rgba(255,120,15,1);" @click="settlementOrder">立即购买</view>
        </view>
		<!-- 拼团 tool -->
		<view class="group-tool" v-if="type==2">
			<view class="launch" @click="settlementOrder">发起拼团</view>
			<view class="involvement" @click="showGroupUser=true">参与拼团</view>
		</view>
		<!-- 秒杀 tool -->
		<view class="spike-tool" v-if="type==3">
			<view class="left" v-if="!showSpec">
				<view @click="toOthersPage('pageC/merchant/index?id=' + storeInfo.store_id)">
					<image src="/static/image/common/18.png"></image>
					<text>店铺</text>
				</view>
				<view @click="customers()">
					<image src="/static/image/common/19.png"></image>
					<text>客服</text>
				</view>
			</view>
			<!-- <view class="btn" v-if="isSrartSpike && !isEndSpike && groupbuyInfo.inventory > groupbuyInfo.groupbuy_buy_quantity" @click="spikeGoods">立即秒杀</view> -->
			<view class="btn cannot" v-if="!isSrartSpike">秒杀未开始</view>
			<view class="btn cannot" v-else-if="isEndSpike">时间已结束</view>
			<view class="btn cannot" v-else-if="groupbuyInfo.inventory == groupbuyInfo.groupbuy_buy_quantity">已售空</view>
			<view class="btn" v-else @click="spikeGoods">立即秒杀</view>
		</view>
        <!-- <tloos @buy="buy" @xuanze="xuanze" :id="id" :info="goodsInfo" :type="type"></tloos> -->
        <u-toast ref="uToast" :z-index='200000' />
    </view>
</template>
<script>
import comment from "@/components/comment/index";
import navs from "../components/sdetails/navs";
import guige from "../components/sdetails/guige"
import tloos from "../components/sdetails/tloos";
export default {
    name: "sdetails",
    data() {
        return {
            list: [],　// 轮播图列表
			goodsInfo: {}, // 商品信息
			storeInfo: {}, // 店铺信息
            glist: [], // 规格列表
			id: 0, // 商品id
			type: '', // 商品类型 商品详情 1普通 2拼团 3秒杀 4优惠券
			groupUser: [], // 拼团用户
			user_suc: [], // 拼团成功用户
			showGroupUser: false, // 拼团
			showInvolvementUser: false, // 参团
			involvemenGroupInfo: [], // 参团的人
			groupbuyInfo: {}, // 秒杀详情
			spikeTime: '00:00:00', // 秒杀倒计时(距离开始/距离结束)
			isSrartSpike: false, // 是否开始秒杀
			isEndSpike: false, // 是否超过秒杀时间
			timer: '', // 秒杀时间定时器
			spec_id: '', // 规格 id, 下单用的
			evaluate: {}, // 评价内容
			showSpec: false, // 是否显示选择规格
			goodsNumber: 1, // 购买商品数量
			sel: "", // 拼接的规格
			quanxuan: false, // 规格是否选择
			debounce: true, // 防止多次提交订单
			storeid:0, // 店铺 id
			pintuan_id: '', // 拼团 id
			groupbuy_id: '', // 秒杀 id
        }
	},
    components: {
		comment,
        navs,
		tloos,
		guige,
	},
	watch: {
		sel(value){
			this.xuanze(value);
		},
		showSpec(value) {
			if(!value) {
				this.quanxuan = false;
			}
		}
	},
	onLoad(option) {
		// this.init();
		// console.log(option);
		// this.type = Number(option.type);
		// this.type = 1;
		this.id = option.id;
		// 先请求普通商品详情获取商品类型再渲染页面
		this.ordinaryDetails();
	},
	onShow() {
		this.debounce = true;
		this.showSpec = false;
		this.showGroupUser = false;
		this.showInvolvementUser = false;
		this.getGoodsDetails(this.id);
	},
	onNavigationBarButtonTap(e) {
		if(e.index == 0) this.$u.route('/pageC/cart/index');
	},
	beforeDestroy() {
		clearInterval(this.timer);
	},
	methods: {
		customers(){
			console.log(this.$store.state.hasLogin)
			if(!this.$store.state.hasLogin){
				this.$refs.uToast.show({
					title: "请先登录",
					type: 'warning'
				})
			}else{
				function Friend(uuid, name, avatar,time = "", text = "",date = "") {
					this.uuid = uuid;
					this.name = name;
					this.avatar = avatar;
					this.online = false;
					this.unReadMessage = 0;
					this.text = text;
					this.time = time;
					this.date = date
				}
				// console.log(123)
				this.$u.api.getAtwillUserInfo({
					id:this.storeid
				}).then((res)=>{
					console.log(res)
					let user = new Friend(res.data.member_id,res.data.store_name,res.data.member_avatar)
					this.$u.route({
						url:"/pageD/privateChat/privateChat",
						params:{
							id:JSON.stringify(user)
						}
						
					})
				}).catch((err)=>{
					console.log(err)
				})
			}
			
		},
		setSwiperList(list) {
			let img = [];
			list.forEach(item => {
				let temp = {
					image: item[1]
				}
				img.push(temp);
			})
			this.list = img;
		},
		spikeGoods() {
			this.settlementOrder()
		},
		setSpikeTime() {
			const startTime = this.groupbuyInfo.groupbuy_starttime;
			const endTime = this.groupbuyInfo.groupbuy_endtime;
			let time = startTime;

			this.timer = setInterval(() => {
				// 秒杀是否开始 秒杀开始后开始结束时间的倒计时
				if(startTime * 1000 - new Date().getTime() > 0) {
					this.isSrartSpike = false;
				}　else {
					this.isSrartSpike = true;
					time = endTime;
				}
				
				// 秒杀是否结束
				if(endTime * 1000 - new Date().getTime() <= 0) {
					this.isEndSpike = true;
				}

				let spikeTime = time * 1000 - new Date().getTime();
				// 计算天数
				const days = Math.floor(spikeTime/(24*3600*1000));
				//计算出小时数
				const leave1 = spikeTime % (24*3600*1000) // 计算天数后剩余的毫秒数
				let hours = Math.floor(leave1/(3600*1000));
				//计算相差分钟数
				const leave2 = leave1 % (3600*1000) // 计算小时数后剩余的毫秒数
				const minutes = Math.floor(leave2 / (60*1000))
				//计算相差秒数
				const leave3 = leave2 % (60*1000) // 计算分钟数后剩余的毫秒数
				const seconds = Math.round(leave3 / 1000)
				// 把天数算在小时里
				hours = days * 24 + hours;
				this.spikeTime = hours + ':' + minutes + ':' + seconds;
				// console.log(this.spikeTime);
			}, 1000)
		},
		addCart() {
			if(!this.showSpec) {
				this.showSpec = true;
				return false;
			}
			// 如果没有规格设规格已全选
			if(this.goodsInfo.spec_value == null) {
				this.quanxuan = true;
			}
			if(!this.quanxuan) {
				this.$refs.uToast.show({
					title: '请选择规格'
				})
				return false;
			}
			this.$u.api.addCart({
				goods_id: this.id,
				quantity: this.goodsNumber,
			}).then(res => {
				this.$refs.uToast.show({
					title: res.message,
					duration: 1000,
					callback: () => {
						if(res.errCode == 0) {
							this.showSpec = false;
						}
					}
				})
			})
		},
		purchase() {
			this.settlementOrder();
		},
		getGoodsDetails() {
			switch (this.type) {
				case 1:
					this.ordinaryDetails();
					break;
				case 2:
					this.pinTuanDetails();
					break;
				case 3:
					this.spikeGoodsDetails();
					break;
				default:
					break;
			}
		},
		// 普通商品详情
		ordinaryDetails() {
			this.$u.api.getGoodsDetails({ id: this.id }).then(res => {
				if (res.errCode == 0) {
					this.evaluate = res.data.goods_evaluate_info;
					this.goodsInfo = res.data.goods;
					this.storeInfo = res.data.store;
					this.setSwiperList(res.data.goods_image);
					this.glist = res.data.spec_list;
					this.storeid = res.data.store.store_id;
					this.type = res.data.view_type;
					this.setTitle();
					if(this.type == 1) {
						this.id = res.data.goods.goods_id;
					} else if(this.type == 2) {
						this.id = res.data.goods.goods_id;
						this.pintuan_id = res.data.goods.pintuan_id;
						this.getGoodsDetails();
					} else if(this.type == 3) {
						this.id = res.data.goods.goods_id;
						this.groupbuy_id = res.data.groupbuy_id;
						this.getGoodsDetails();
					}
				}
			})
		},
		// 拼团详情
		pinTuanDetails() {
			// console.log(this.id);
			this.$u.api.getPinTuanDetails({
				pintuan_id: this.pintuan_id,
				goods_id: this.id,
			}).then(res => {
				if(res.errCode == 0) {
					this.evaluate = res.data.data.goods_evaluate_info;
					this.goodsInfo = res.data.data.goods;
					this.pintuan_id = res.data.data.pintuan_id;
					this.setSwiperList(res.data.data.goods_image);
					this.glist = res.data.data.spec_list;
					this.user_suc = res.data.data.user_suc;
					this.groupUser =res.data.data.user;
					// console.log(this.groupUser);
				}
			})
		},
		// 秒杀详情
		spikeGoodsDetails() {
			this.$u.api.getSpikeInfo({
				groupbuy_id: this.groupbuy_id,
				goods_id: this.id,
			}).then(res => {
				if(res.errCode == 0) {
					this.groupbuyInfo = res.data.groupbuyInfo;
					this.groupbuy_id = res.data.groupbuyInfo.groupbuy_id;
					this.evaluate = res.data.goodsInfo.goods_evaluate_info;
					this.goodsInfo = res.data.goodsInfo.goods;
					this.setSwiperList(res.data.goodsInfo.goods_image);
					this.setSpikeTime();
				}
			})
		},
		// 试穿
		tryDress() {
			if(!this.showSpec) {
				this.showSpec = true;
				return false;
			}
			this.$u.route({
				url: '/pageB/triedDress/index',
				params: {
					id: this.goodsInfo.goods_id,
				}
			})
		},
		// 验证能否拼团
		async pintuanVerify({ pintuan_id, pintuangroup_headid }) {
			const res = await this.$u.api.pintuanVerify({
				pintuan_id: pintuan_id,
				pintuangroup_headid: pintuangroup_headid,
			})
			if(res.errCode != 0) {
				this.$refs.uToast.show({ 
					title: res.message,
				});
			}
			return res.errCode;
		},
		/*
		* @description 下单 订单步骤1：展示结算数据
		* @params {Number} type involvement 拼团或者 默认开团
		* @params {Number} num 数量
		* @params {Number} ifcart 结算方式 1:购物车 0:直接结算（立即购买/拼团/秒杀）
		**/
		async settlementOrder({type, num = this.goodsNumber, ifcart = 0} = {}) {
			if(type != 'involvement') {
				if(!this.showSpec) {
					this.showSpec = true;
					return false;
				}
				if(!this.showSpec) {
					this.showSpec = true;
					return false;
				}
				// 如果没有规格设规格已全选
				if(this.goodsInfo.spec_value == null) {
					this.quanxuan = true;
				}
				if(!this.quanxuan) {
					this.$refs.uToast.show({
						title: '请选择规格'
					})
					return false;
				}
			}
			if(!this.debounce) return;
			let params = {
				ifcart: ifcart, 
				cart_id: [this.goodsInfo.goods_id + '|' + num],
			}
			if(this.type == 2) {
				if(type == 'involvement') {
					// 验证能否拼团
					const whether = await this.pintuanVerify({
						pintuan_id: this.pintuan_id,
						pintuangroup_headid: this.involvemenGroupInfo[0].user_id
					}).then(status => {
						if(status != 0) return true;
						else return false;
					})
					if(whether) return false;
					this.$store.commit('setGroupHeadId', this.involvemenGroupInfo[0].user_id);
					Object.assign(params, {
						pintuan_id: this.pintuan_id, 
						pintuangroup_id: this.involvemenGroupInfo[0].pintuangroup_id,
					})
				} else {
					Object.assign(params, {
						pintuan_id: this.pintuan_id,
					})
				}
			}
			this.debounce = false;
			this.$u.api.settlementOrder(params).then(res => {
				if(res.errCode == 0) {
					// console.log('type' + this.type);
					this.$store.commit('setOrderType', this.type);
					this.$store.commit('updateOrderInfo', res.data)
					this.$u.route({
						url: '/pageC/cart/ConfirmOrder'
					})
				} else {
					this.$refs.uToast.show({ 
						title: res.message,
					});
					this.debounce = true;
				}
			})
		},
		// 参团
		involvemenGroup(user) {
			this.involvemenGroupInfo = user;
			this.showGroupUser = false;
			this.showInvolvementUser = true;
			// console.log(this.involvemenGroupInfo);
		},
        self(){
            // console.log(this.$refs.guige)
            let index = 0;
            let arr = [];
            for(let i in this.goodsInfo.spec_value){
                // console.log(i)
                // console.log(this.$refs.guige[index++].select)
                // index++;
                let sel = this.$refs.guige[index++].select
                if(sel != 0){
                    arr.push(sel)
                }
			}
			// console.log(arr)
			// 后台的 spec 是按升序排的
			arr.sort((a, b) => a - b); 
            // console.log(arr)
            if(arr.length == index){
                this.sel = arr.join("|")
                this.quanxuan = true;
                // console.log(this.sel)
			}
			// console.log(this.quanxuan);
        },
        xuanze(id){
			// console.log(id)
			// 选择完规格后设商品type = 1
			// this.type = 1;
			// 改变 goods_id
			// console.log(this.glist);
			this.id = this.glist[id];
			// console.log(this.id);
            this.getGoodsDetails();
		},
		// 设置页面标题
		setTitle() {
			let title = '';
			switch (this.type) {
				case 1:
					title = '商品详情';
					break;
				case 2:
					title = '拼团商品详情';
					break;
				case 3:
					title = '秒杀商品详情';
					break;
				default:
					title = '商品详情';
					break;
			}
			uni.setNavigationBarTitle({
				title: title
			});
		},
		toOthersPage(url) {
			this.$u.route(url);
		},
		viewComment() {
			this.$u.route({
				url: 'pageB/comment/index',
				params: {
					id: this.goodsInfo.goods_id
				}
			})
		},
        // 查看轮播图
        viewImage(index) {
            let arr = [];
            this.list.forEach(item => {
            	arr.push(item.image);
            })
            uni.previewImage({
                urls: arr,
                current: arr[index]
            })
		},
		switchCollect(status = 0) {
			if(status == 1) {
				this.removeFavorite();
			} else {
				this.addFavoriteGoods();
			}
		},
		addFavoriteGoods() {
			// // 尝试登录
			// if (!this.$store.state.hasLogin) {
			// 	uni.navigateTo({
			// 		url: "pageA/login/login"
			// 	})
			// 	return false;
			// }
			this.$u.api.addFavoriteGoods({ fid: this.goodsInfo.goods_id }).then(res => {
				if(res.errCode == 0) {
					this.getGoodsDetails(this.id);
				} else {
					this.$u.toast(res.message);
				}
			})
		},
		removeFavorite() {
			this.$u.api.removeFavorite({ fid: this.goodsInfo.goods_id, type: 'goods' }).then(res => {
				if(res.errCode == 0) {
					this.getGoodsDetails(this.id);
				} else {
					this.$u.toast(res.message);
				}
			})
		},
		toStorePage(id) {
			this.$u.route('pageC/merchant/index', {
				id: id
			});
		},
		playVideo() {
			console.log(this.goodsInfo.video);
			this.$u.route('/pageB/playVideo/index', {
				url: this.goodsInfo.video
			});
		}
	},
}
</script>
<style lang="scss" scoped>
.sdetails {
	padding-bottom: 98rpx;
	position: relative;
	background-color: #EEEBEE;
	.spike-view {
		position: absolute;
		top: 400rpx;
		left: 0;
		width: 100%;
		height: 104rpx;
		background: rgba(255,120,15,1);
		opacity: 0.96;
		color:rgba(255,255,255,1);
		display: flex;
		align-items: center;
		.left {
			height: 104rpx;
			flex: 1;
			padding-left: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.price {
				margin-bottom: 22rpx;
				display: flex;
				align-items: center;
				.now-price {
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 16rpx;
				}
				.origin-price {
					font-size: 26rpx;
					text-decoration: line-through;
				}
			}
			.num {
				font-size: 22rpx;
				font-weight: 500;
			}
		}
		.right {
			height: 104rpx;
			width: 232rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			&::before {
				position: absolute;
				left: 0;
				content: "";
				width: 2rpx;
				height: 104rpx;
				background:rgba(255,255,255,1);
			}
			font-size: 26rpx;
			font-weight: 500;
			.time {
				margin-top: 18rpx;
			}
		}
	}
    .info {
		background:rgba(255,255,255,1);
        padding: 30rpx;
		margin-bottom: 20rpx;
        .title{
            flex-wrap: wrap;
			margin-bottom: 30rpx;
			.store-name {
				display: inline-block;
                padding: 8rpx 10rpx;
                margin: 0 10rpx 4rpx 0;
				vertical-align: middle;
                font-size: 20rpx;
                color: #fff;
                border-radius: 30rpx;
				background-color: #FF780F;
				margin-bottom: 10rpx;
			}
			.goods-name {
				line-height: 1.5;
			}
			
        }
		.shuliang{
				padding-top: 33rpx;
				font-size: 24rpx;
				color:#656565;
				display: flex;
				justify-content: space-between;
			}
		.price-collect {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.pic{
				>text{
					font-size: 32rpx;
					color: #FF3131;
				}
				>s{
					font-size: 26rpx;
					color: #999;
					display: inline-block;
					margin-left: 30rpx;
				}
			}
			.collect {
				margin-left: auto;
				display: flex;
				align-items: center;
				> text {
					margin-left: 12rpx;
				}
			}
		}
    }
	.comment {
		margin-top: 20rpx;
		background:rgba(255,255,255,1);
		padding: 30rpx;
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			.left {
				font-size: 30rpx;
				color: rgba(51,51,51,1);
			}
			.right {
				font-size: 24rpx;
				color: rgba(153,153,153,1);
				> image {
					width: 8rpx;
					height: 16rpx;
					margin-left: 10rpx;
				}
			}
		}
		.comment-none {
			font-size: 26rpx;
			text-align: center;
			margin-top: 30rpx;
		}
	}
    .hr {
        width: 100%;
        height: 20rpx;
        background-color: #ececec;
    }
	.group-user {
		background: rgba(255,255,255,1);
		padding: 30rpx;
		.top {
			margin-bottom: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title {
				font-size: 30rpx;
				color: rgba(51,51,51,1);
			}
			.view-more {
				font-size: 24rpx;
				color: rgba(153,153,153,1);
				> image {
					margin-left: 10rpx;
					width: 8rpx;
					height: 16rpx;
				}
			}
		}
		.bottom {
			display: flex;
			align-items: center;
			font-size: 22rpx;
			color: rgba(153,153,153,1);
			.left {
				margin-right: 40rpx;
				.avatar {
					width: 120rpx;
					height: 60rpx;
					margin-bottom: 16rpx;
					position: relative;
					@mixin avatar($left, $index) {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						position: absolute;
						top: 0;
						left: $left;
						z-index: $index;
					}
					> image {
						&:first-child {
							background-color: aliceblue;
							@include avatar($left: 0rpx, $index: 7);
						}
						&:nth-child(2) {
							background-color: aquamarine;
							@include avatar($left: 30rpx, $index: 8);
						}
						&:nth-child(3) {
							background-color: antiquewhite;
							@include avatar($left: 60rpx, $index: 9);
						}
					}
				}
				.all {
					> image {
						margin-left: 10rpx;
						width: 8rpx;
						height: 16rpx;
					}
				}
			}
			.right {
				display: flex;
				image {
					background-color: aquamarine;
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 15rpx;
					border-radius: 50%;
				}
				.launch-user {
					margin-right: 40rpx;
					text-align: center;
					> text {
						width: 98rpx;
						display: block;
					}
				}
				.involvement-user {
					display: flex;
					align-items: center;
					.item {
						text-align: center;
						> text {
							display: block;
							width: 72rpx;
						}
						&:not(:last-child) {
							margin-right: 30rpx;
						}
					}
				}
			}
		}
	}
	.launch-container {
		width: 558rpx;
		height: 655rpx;
		background: rgba(255,255,255,1);
		border-radius: 20rpx;
		position: relative;
		overflow: hidden;
		.title {
			text-align: center;
			padding: 40rpx 0;
			font-size: 32rpx;
			color: rgba(51,51,51,1);
			position: relative;
			&::after {
				content: '';
				position: absolute;
				width: 558rpx;
				height: 2rpx;
				background: rgba(234,234,234,1);
				bottom: 0;
				left: 0;
			}
		}
		.launch-view {
			height: 500rpx;
			box-sizing: border-box;
			padding: 30rpx 50rpx;
			.launch-user {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: flex-start;
				justify-content: flex-start;
				.item {
					width: 96rpx;
					height: 96rpx;
					text-align: center;
					margin-bottom: 30rpx;
					.avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-bottom: 15rpx;
					}
					.name {
						font-size: 22rpx;
						color: rgba(153,153,153,1);
					}
					&:not(:nth-child(3n)) {
						margin-right: 80rpx;
					}
				}
				.pintuan-none {
					font-size: 36rpx;
					color: #333;
					margin: 100rpx auto 0;
				}
			}
			
		}
		.close {
			position: absolute;
			width: 47rpx;
			height: 47rpx;
			top: 10rpx;
			right: 20rpx;
			border-radius: 50%;
		}
	}
	.involvement-container {
		width: 558rpx;
		height: 486rpx;
		background: rgba(255,255,255,1);
		border-radius: 20rpx;
		position: relative;
		overflow: hidden;
		.title {
			text-align: center;
			padding: 40rpx 0;
			font-size: 32rpx;
			color: rgba(51,51,51,1);
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			.user-name {
				display: inline-block;
				max-width: 200rpx;
			}
			&::after {
				content: '';
				position: absolute;
				width: 558rpx;
				height: 2rpx;
				background: rgba(234,234,234,1);
				bottom: 0;
				left: 0;
			}
		}
		.involvement-view {
			display: flex;
			justify-content: center;
			margin: 40rpx 0 70rpx;
			.item {
				width: 100rpx;
				text-align: center;
				margin-right: 10rpx;
				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-bottom: 15rpx;
				}
				.name {
					font-size: 22rpx;
					color: rgba(153,153,153,1);
				}
			}
		}
		.involvement-btn {
			width: 400rpx;
			height: 88rpx;
			background: rgba(255,120,15,1);
			border-radius: 44rpx;
			font-size: 30rpx;
			color:rgba(255,255,255,1);
			text-align: center;
			line-height: 88rpx;
			margin: 0 auto;
		}
		.close {
			position: absolute;
			width: 47rpx;
			height: 47rpx;
			top: 10rpx;
			right: 20rpx;
			border-radius: 50%;
		}
	}
    .xiangqing{
        display: flex;
        height: 85rpx;
        background-color: #ececec;
        align-items: center;
        justify-content: center;
        .heng{
            width: 79rpx;
            height: 2rpx;
            background-color: #a9a9a9;

        }
        font-size: 28rpx;
        color: #999;
        .title{
            margin: 0 20rpx;
        }
    }
	.rich {
		width: 100%;
		.goods-video {
			position: relative;
			.video-img {
				width: 100%;
			}
			.blacks {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.35);
				z-index: 8;
			}
			.video-play {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100rpx;
				height: 100rpx;
				z-index: 9;
			}
		}
	}
	.group-tool {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 98rpx;
		display: flex;
		font-size: 32rpx;
		color: rgba(255,255,255,1);
		z-index: 10076;
		background-color: #FFFFFF;
		.launch {
			flex: 1;
			background: rgba(253,211,96,1);
			line-height: 98rpx;
			text-align: center;
		}
		.involvement {
			flex: 1;
			background: rgba(255,120,15,1);
			line-height: 98rpx;
			text-align: center;
		}
	}
	.spike-tool {
		z-index: 10076;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		.left {
			width: 190rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			> view {
				text-align: center;
				> image {
					width: 35rpx;
					height: 35rpx;
					margin-bottom: 15rpx;
				}
				> text {
					display: block;
					font-size: 24rpx;
					color: rgba(102,102,102,1);
				}
			}
		}
		.btn {
			flex: 1;
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			font-size: 32rpx;
			color: rgba(255,255,255,1);
			background: rgba(255,120,15,1);
		}
		.cannot {
			background: rgba(221,221,221,1);
		}
	}
	.tloos{
		background-color: #fff;
		display: flex;
		position: fixed;
		width: 100%;
		bottom: 0;
        left: 0;
        padding-bottom: env(safe-area-inset-bottom);
		// border-top: 1rpx solid #ececec;
		z-index: 10076;
		.navs{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #666;
			flex-shrink: 0;
			margin-left: 30rpx;
			>image{
				width: 35rpx;
				height: 35rpx;
				margin-bottom: 15rpx;
			}
			

		}
		.button{
			width: 100%;
			height: 100%;
			line-height: 98rpx;
			text-align: center;
			color: #fff;

		}
	}
	.spec-popup {
		padding: 30rpx;
		margin-bottom: 130rpx;
		box-sizing: border-box;
		// height: 600rpx;
		max-height: 60vh;
		.head {
			display: flex;
			margin-bottom: 30rpx;
			.image{
				width: 195rpx;
				height: 195rpx;
				border-radius: 10rpx;
				flex-shrink: 0;
			}
			.info{
				display: flex;
				padding: 21rpx 0;
				justify-content: space-between;
				margin-left: 27rpx;
				flex-direction: column;
				.goods-name {
					height: 76rpx;
					line-height: 38rpx;
					font-size: 28rpx;
					color: #333;
				}
				> text:last-child {
					font-size: 30rpx;
					color: #ff3131;
				}
			
			}
		}
		.num {
			height: 84rpx;
			display: flex;
			border-bottom: #ececec solid 2rpx;
			justify-content: space-between;
			align-items: center;
			> text {
				font-size: 26rpx;
				color: #666;
			}
		}
	}
}
</style>