xpl/pages/product/product.vue

<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots :circular="true" duration="400">
				<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
					<view class="image-wrapper"><image :src="item" class="loaded" mode="scaleToFill"></image></view>
				</swiper-item>
			</swiper>
		</view>

		<view class="introduce-section">
			<view class="price-box flex">
				<view class="flex_item">
					<view>
						<text class="price" v-if="wholesale == 1">{{ goodsObjact.wholesaler_price | parseFloatNum }}</text>
						<text class="price" v-else-if="userInfo.level > 0">{{ goodsObjact.vip_price | parseFloatNum }}</text>
						<text class="price" v-else>{{ goodsObjact.price | parseFloatNum }}</text>
					</view>
					<view class="vip_price">¥{{ goodsObjact.ot_price | parseFloatNum }}</view>
				</view>
				<!-- #ifdef H5 -->
				<view class="fenxiang" @click="open">
					<image class="fenxiang-img" src="https://tmp01.kktv6.com/img/share.png"></image>
				</view>
				<view class="mask" v-show="show"><image @click="onTap" src="https://tmp01.kktv6.com/img/shareimg.png"></image></view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<view class="fenxiang" @click="share">
					<image class="fenxiang-img" src="https://tmp01.kktv6.com/img/share.png"></image>
				</view>
				<!-- <button open-type="share" class="fenxiang" v-if="userInfo.level == 2">
					<image class="fenxiang-img" src="https://tmp01.kktv6.com/img/share.png"></image>
				</button> -->
				<!-- #endif -->
			</view>
			<view class="title">{{ goodsObjact.store_name }}</view>
			<!-- <view class="bot-row">
				<text>销量: {{ goodsObjact.sales + goodsObjact.ficti }}</text>
				<text>库存: {{ goodsObjact.stock - goodsObjact.ficti }}</text>
				<text>邮费: {{ goodsObjact.postage }}</text>
			</view> -->
		</view>
		<!-- <view class="quan" @click="openpop">
			<view class="quan-left">
				领券
			</view>
			<view class="img-box">
				<image src="https://tmp01.kktv6.com/img/quan.png" mode="" class="quan-img"></image>
			</view>
			<view class="quan-center">
				领券购物更优惠
			</view>
			<view class="quan-right">
				<text class="iconfont iconenter" style="color: #CCCCCC;"></text>
			</view>
		</view> -->
		
		<view class="eva-section" v-if="reply" @click="navTo('/pages/product/reply?id=' + goodsid)">
			<view class="e-header">
				<text class="tit">评价</text>
				<text>({{ list.replyCount }})</text>
				<text class="tip">好评率 {{ list.replyChance }}%</text>
				<text class="iconfont iconenter"></text>
			</view>
			<view class="eva-box">
				<image class="portrait" :src="reply.avatar || '/static/error/missing-face.png'" mode="aspectFill"></image>
				<view class="right">
					<text class="name">{{ reply.nickname }}</text>
					<text class="con">{{ reply.comment }}</text>
					<view class="con_box">
						<view class="con_image" v-for="item in reply.pics"><image :src="item"></image></view>
					</view>
					<view class="bot">
						<text class="attr"></text>
						<text class="time">{{ reply.add_time }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品详情图 -->
		<view class="detail-desc">
			<!-- @click="showoption" -->
			<view class="d-header"><text>商品详情</text></view>
			<rich-text :nodes="goodsObjact.description"></rich-text>
		</view>
		<!-- 热销推荐 -->
		<view v-if="!wholesale && store_id == 0">
			<view class="hotsheader" v-if="hotList.length != 0">
				热销推荐
			</view>
			<view class="hotgoods">
				<view class="hotgoods-item" v-for="item in hotList" :key = "item.id" @click="navToDetailPage(item)">
					<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
					<view class="title clamp margin-c-20">{{ item.store_name }}</view>
					<view class="hot-price">
						<view class="price">
							<text class="font-size-sm">￥</text>
							{{ item.price }}
						</view>
						<view class="cart-icon">
							<image src="https://zhibo.liuniu946.com/img/img002.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="page-bottom">
			<view class="action-btn-group pt-btn-group">
				<!-- <navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
					<text class="iconfont iconhomefill"></text>
					<text>首页</text>
				</navigator> -->
				<view class="p-b-btn" :class="{ active: goodsObjact.userCollect }" @click="toFavorite(goodsObjact)">
					<text class="iconfont iconlikefill"></text>
					<text>收藏</text>
				</view>
				<!-- <button v-if="!isaddCart" type="primary" class=" action-btn1 no-border buy-now-btn" @click="toggleSpec(2)">加入购物车</button> -->
				<button v-if="!wholesale && store_id == 0"type="primary" class=" action-btn1 no-border buy-now-btn" @click="toggleSpec(2)">加入购物车</button>

				<button type="primary" class=" action-btn1 no-border add-cart-btn" @click="toggleSpec(1)">立即购买</button>
			</view>
		</view>
		
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec()">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="actionImage"></image>
					<view class="right">
						<text class="name">{{ goodsObjact.store_name }}</text>
						<text class="price">¥{{ actionPrice * goodsNumber }}</text>
						<!-- <text class="stock">库存：{{ goodsStore }}件</text> -->
						<view class="selected" v-if="specList != ''">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem }}</text>
						</view>
					</view>
				</view>
				<view v-for="(item, index) in specList" :key="index" class="attr-list">
					<text>{{ item.attr_name }}</text>
					<view class="item-list">
						<text
							v-for="(childItem, childIndex) in item.attr_value"
							:key="childIndex"
							class="tit"
							:class="{ selected: childItem.check }"
							@click="selectSpec(childItem, item, index)"
						>
							{{ childItem.attr }}
						</text>
					</view>
				</view>
				<view class="attr-list">
					<text>购买数量</text>
					<view class="num-list">
						<uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax" @eventChange="numberChange"></uni-number-box>
					</view>
				</view>
				<button class="btn" @click.stop="buy" v-show="buys_show">完成</button>
				<button class="btn" style="background-color: #999999;" v-show="buys_shows">售罄</button>
			</view>
		</view>
		<view v-if="shareShow" class="Shraremask" @click="cancel">
			<view class="mask-content">
				<scroll-view class="view-content" scroll-y>
					<view class="share-header">分享到</view>
					<view class="share-list">
						<view class="share-item">
							<!-- 微信 -->
							<button class="wechat-box" open-type="share">
								<image class="itemImage" src="https://tmp01.kktv6.com/img/img001.png" mode=""></image>
								<text class="itemText">微信</text>
							</button>
							<!-- 朋友圈 -->
							<view class="wechat-box" @click="shareToFriend()">
								<image class="itemImage" src="https://tmp01.kktv6.com/img/img002.png" mode=""></image>
								<text class="itemText">朋友圈</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="bottomButtom b-t" @click="cancel">取消</view>
			</view>
		</view>
		
		<uni-popup ref="popup1" style="z-index: 998;" type="bottom">
			<view class="pop-box">
				<view class="pop-top">
					<view class="top-center">
						领取优惠券
					</view>
					<view class="top-right" @click="closepop">
						<image src="https://tmp01.kktv6.com/img/close.png" mode="" class="right-img"></image>
					</view>
				</view>
		
				<scroll-view class="scroll-h" scroll-y="true">
					<view class="pop-center">
						<view class="pop-item" v-for="(item,index) in quanlist" :key='index'>
							<view class="item-left">
								<view class="pic">
									¥<text style="font-size: 59rpx;">{{item.coupon_price}}</text>
								</view>
								<view class="pic-info">
									满{{item.use_min_price}}元使用
								</view>
							</view>
							<view class="item-right">
								<view class="right-left">
									<view class="top">
										{{item.title}}
									</view>
									<view class="center" v-if="item.type == 0">通用券</view>
									<view class="center" v-if="item.type == 2">商品券</view>
									<view class="foot">
										<text v-if="item.end_time !== '不限时'">有效期至{{item.end_time}}</text>
										<text v-if="item.end_time == '不限时'">不限时</text>
									</view>
								</view>
								<view class="right-right" @click="lingqu(item)" v-if="!item.used">
									立即领取
								</view>
								<view class="right-right" v-if="item.used || item.show">
									已领取
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		
		<!-- 分享弹出窗 -->
		<view class="pop-mask" v-if="backShare" @click="closeBack"><image class="share-img" :src="shareImage" mode="aspectFit" @longpress="saveImg()"></image></view>
	</view>
</template>
<script>
	import { getProducts } from '@/api/product.js';
import { mapState } from 'vuex';
import uniNumberBox from '@/components/uni-number-box.vue';
// 11
// import { uniFav } from '@/components/uni-fav/uni-fav.vue';
import { goodsDetail, cartAdd, collectAdd, collectDel, productDetail, productCode } from '@/api/product.js';
import { saveUrl } from '@/utils/loginUtils.js';
// 111
// import { couponslist, setCoupons } from '@/api/coupon.js'
// import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
// #ifdef H5
import { weixindata } from '@/utils/wxAuthorized';
// #endif
export default {
	filters: {
		// 去处小数点后的0
		parseFloatNum(clock) {
			return parseFloat(clock);
		},
	},
	components: {
		uniNumberBox,
		uniFav,
		uniNoticeBar,
		uniPopup
	},
	// #ifdef MP
	onShareAppMessage: function(res) {
			// 来自页面内分享按钮
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/' + page.route + '?';
			// 保存传值
			for (let i in page.options) {
				path += i + '=' + page.options[i] + '&';
			}
			// 保存邀请人
			path += 'spread=' + this.userInfo.uid;
			console.log(path);
			let data = {
				path: path,
				imageUrl: this.goodsObjact.image,
				title: this.goodsObjact.store_name
			};
			console.log(data);
			return data;
	},
	// #endif
	data() {
		return {
			wholesale:'',  
			one_num:0,
			is_integral: '', // 是否是积分
			use_integral:0, // 可用积分
			integral:0,
			is_vip: '', // 是否是vip
			is_repurchase: '',  // 是否是复购
			isaddCart:0,
			shareShow: false, //分享
			backShare: false, // 分享遮罩层
			show: false,
			showModal: true, //拼单遮罩层
			more: true, //查看更多按钮
			autoplay: true,
			vertical: true,
			interval: 3000,
			duration: 500,
			buys_show: true,
			buys_shows: false,
			circular: true,
			type: 1, //默认支付方式add为
			specClass: 'none', //显示隐藏弹窗
			actionImage: '', //商品图片
			goodsid: '', //商品id
			store_id: '', //小店id
			actionPrice: '', //商品价格
			// specClass: 'none', //显示隐藏弹窗
			goodsObjact: {}, //保存商品数据
			goodsNumberMax: 0, //商品库存
			//图片循环
			imgList: [], //商品轮播图
			specList: [], //保存规格列表
			people: '', //拼团人数
			goodsNumber: 1, //购买数量（开团数量为1，整团数量为1*参团人数）
			carnumber: '', //整团购买商品数量
			reply: '', //商品数据
			list: '', //详情数据
			goodsType: 0, //商品类型1秒杀商品0为普通商品2为拼团商品3为新人礼包
			pinkTlist: '', //拼团数据
			count: 0, //点击查看更多
			showlist: [],
			showmore: true,
			pinkTlistnum: '',
			spread: '',
			chooseGoodsNumber: 1, //选择商品的数量
			specSelected: [], //选中的分类
			goodsStore: 0, //选中库存
			uniqueId: '', //选中的规格id
			productValue: '', //保存属性值对象
			isCollect: '', //是否被收藏
			maskshow: false, //弹窗
			posturl: '',
			shareImage: '', // 获取的分享海报
			option: '', //保存传值
			opt: '', //保存小程序传值
			// 保存普通商品详细
			goodsData: {
				specSelected: [], //选中的分类
				productValue: '', //保存属性值对象
				specList: [], //保存规格列表
				goodsStore: 0, //选中库存
				actionImage: '', //商品图片
				actionPrice: '', //商品价格
				goodsNumber: 1, //购买数量（开团数量为1，整团数量为1*参团人数）
				goodsObjact: {}, //商品对象数据
				uniqueId: '', //选中的规格id
				goodsType: 0, //商品类型1秒杀商品0为普通商品2为拼团商品3为新人礼包
				list: '' //报
			},
			goodsDataType: 0, //判断是否为团队的商品
			//保存拼团商品信息
			pinkGoodsData: {
				specSelected: [], //选中的分类
				productValue: '', //保存属性值对象
				specList: [], //保存规格列表
				goodsStore: 0, //选中库存
				actionImage: '', //商品图片
				actionPrice: '', //商品价格
				goodsNumber: 1, //购买数量（开团数量为1，整团数量为1*参团人数）
				goodsObjact: {}, //商品对象数据
				uniqueId: '', //选中的规格id
				goodsType: 2 //商品类型1秒杀商品0为普通商品2为拼团商品3为新人礼包
			},
			PinkShow: {},	// 显示拼团
			AutopinkList: [],	// 谁购买了商品
			AutoList: '',
			quanlist: [], //优惠券列表
			tuanzhangPrice: '',	// 团长立省
			many: 1, //1是单规格  2是多规格
			hotList:[],//热销推荐产品
		};
	},
	computed: {
		...mapState(['userInfo']),
	},
	onLoad(option) {
		console.log('option',option);
		this.wholesale = option.wholesale
		this.use_integral = option.use_integral
		console.log('可用积分',this.use_integral );
		this.option = option;
		if (option.scene) {
			if (typeof option.scene == 'string') {
				let scene = ('{' + option.scene + '}')
					.replace('qr%26', '')
					.replace(/%3D/g, ':')
					.replace(/%26/g, ',')
					.replace('pid', '"pid"')
					.replace('type', '"type"')
					.replace('id', '"id"')
					.replace('sid', '"sid"');
				let opt = JSON.parse(scene);
				this.opt = opt;
				// 保存拼团订单id
				this.goodsid = opt.id;
				if (opt.pid) {
					// 存储邀请人
					this.spread = opt.pid;
					uni.setStorageSync('spread', opt.pid);
				}
				if (opt.type) {
					this.goodsType = opt.type;
				}
			}
		} else {
			//保存商品id
			this.goodsid = option.id;
			//保存店铺id
			this.store_id = option.sid;
			console.log("店铺id",this.store_id)
			//判断有无人邀请
			if (option.spread) {
				// 存储邀请人
				this.spread = option.spread;
				uni.setStorageSync('spread', option.spread);
			}
			//判断是否是普通商品
			if (option.type) {
				console.log(option.type);
				this.goodsType = option.type;
			}
		}
		// 保存当前页面
		saveUrl();
	},
	onShow() {
		let obj = this;
		obj.gethot();
		obj.more = true;
		obj.productDetail();
		obj.loadCoupon();
		// combination({}, obj.goodsid).then()
	},
	computed: {
		...mapState(['userInfo', 'baseURL'])
	},
	methods: {
		// 跳转普通商品
		navToDetailPage(item) {
			uni.navigateTo({
				url: '/pages/product/product?id=' + item.id
			})
		},
		//获取热销推荐
		gethot(){
			getProducts({
				page: 1,
				limit: 10,
				sid: 29
			}).then(({data}) => {
				console.log(data);
				this.hotList = data;
			})
		},
		// 加载普通商品信息
		productDetail(type = false) {
			let obj = this;
			let id = obj.goodsid;
			// 获取普通商品信息
			productDetail({}, id).then(function({ data }) {
				console.log('-----',data)
				// is_integral,is_vip,is_repurchase
				// 判断是否在拼团商品中
				obj.imgList = data.storeInfo.slider_image; //保存轮播图
				obj.one_num = data.storeInfo.one_num
				obj.goodsDataProcessing(data, obj); //保存默认
				// #ifdef H5
				obj.shareDate();
				// #endif
			});
			return;
		},
		
		// 基础数据处理
		goodsDataProcessing(data, obj) {
			console.log('基础数据处理data',data)
			let goods = data.storeInfo;
			if (data.reply) {
				obj.reply = data.reply;
			}
			//
			obj.list = data;
			obj.goodsObjact = goods;
			console.log(obj.goodsObjact,'93985')
			let tzshen = '', tzPrice = '';
			// 计算价格
			console.log('obj.userInfo',obj.userInfo);
			// if ( obj.userInfo.level_info.list.length > 0 ) {
			// 	tzshen = obj.userInfo.level_info.list[1].discount / 100;
			// 	tzPrice = (obj.goodsObjact.price * 100) - (obj.goodsObjact.price * tzshen * 100);
			// } else {
			// 	tzPrice = (obj.goodsObjact.price * 100) - (obj.goodsObjact.vip_price * 100);
			// }
			
			obj.tuanzhangPrice =( obj.goodsObjact.price -obj.goodsObjact.cost )*obj.goodsObjact.level3_common_rate/100 //(tzPrice / 100).toFixed(2);
			console.log(tzPrice, obj.tuanzhangPrice, '团长省');
			
			//商品详情图超出屏幕问题
			if (obj.goodsObjact.description != null) {
				obj.goodsObjact.description = obj.goodsObjact.description.replace(/<img/g, '<img class="rich-img"').replace(/<p>\s*<img/g, '<p class="pHeight"><img');
			}
			if ( obj.goodsObjact.rule != null ) {
				obj.goodsObjact.rule ='<p>' + obj.goodsObjact.rule.replace(/\n/g, '</p><p>').trim() + '</p>'
			}
			
			
			if (data.productAttr) {
				let productValueArr = {}; //保存循环数据结果
				// 循环获取用于判断是否显示分类的数组
				for (let i in data.productValue) {
					//判断该分类是否可以选择
					let arr = i.split(',');
					for (let j = 0; j < arr.length; j++) {
						//判断是否已经保存该对象不存在则保存
						if (!productValueArr[arr[j]]) {
							productValueArr[arr[j]] = true;
						}
					}
				}
				console.log(productValueArr,"循环")
				// 循环获取分类数据并过滤保存
				obj.specList = data.productAttr.map(e => {
					let attr_value = [];
					let attr_values = [];
					// 循环获取判断是否存在相对应的数据
					e.attr_value.forEach(s => {
						// 判断是否存在对应的数据
						if (productValueArr[s.attr]) {
							attr_value.push(s);
							attr_values.push(s.attr);
							return;
						}
					});
					//
					e.attr_value = attr_value;
					e.attr_values = attr_values;
					// 判断该分类下是否有数据
					if (attr_value.length > 0) {
						return e;
					}
				}); //保存分类列表
			}

			//保存属性值
				obj.productValue = data.productValue;
			// obj.productValue = data.productValue.默认;
			console.log('obj.productValue ',obj.productValue )
			// 保存默认选中的对象
			obj.specSelected = []; //初始化默认选择对象
			for (let i = 0; i < obj.specList.length; i++) {
				// 设置默认数据
				let attrValue = obj.specList[i].attr_value[0];
				attrValue.check = true;
				obj.specSelected.push(attrValue.attr);
			
			}

			//保存默认选中的对象字符串名称
			let str = obj.specSelected.join(',');
			// 设置默认值
			if(obj.wholesale == 1){
				obj.actionPrice = obj.productValue[str].wholesaler_price;
			}else {
				obj.actionPrice = obj.productValue[str].price;
			}
			obj.goodsNumberMax = obj.productValue[str].stock;
			obj.actionImage = obj.productValue[str].image;
			obj.uniqueId = obj.productValue[str].unique;
			console.log('---999data.storeInfo',data.storeInfo)
			// obj.goodsStore = obj.goodsObjact[str].stock;
		},
		// 数据根据分类保存保存
		loadCoupon() {
			let obj = this;
			couponslist({
				page: 1,
				limit: 100
			}).then(({ data }) => {
				obj.quanlist = data;
				obj.quanlist.map(e => {
					e.coupon_price = parseInt(e.coupon_price);
					e.use_min_price = parseInt(e.use_min_price);
					e.show = false
				})
				couponslist({
					page: 1,
					limit: 100,
					product_id: obj.goodsid,
					type: 1
				}).then(({ data }) => {
					let shopList = data;
					shopList.map(e => {
						e.coupon_price = parseInt(e.coupon_price);
						e.use_min_price = parseInt(e.use_min_price);
						e.show = false
					})
					obj.quanlist = obj.quanlist.concat(shopList)
				})
			})
		},
		lingqu(item) {
			setCoupons({
				couponId: item.id
			}).then((data) => {
				console.log(data);
				if (data.status == 200) {
					this.$api.msg('领取成功')
					item.show = true;
					this.$refs.popup1.close();
					this.loadCoupon();
				}
			})
		},
		//分享
		share() {
			this.shareShow = true;
		},
		//取消分享
		cancel() {
			this.shareShow = false;
			if (!this.share) return;
			this.close();
		},
		// 分享海报关闭按钮
		closeBack() {
			this.backShare = false;
		},
		// 长按保存图片
		saveImg(w) {
			console.log(w);
			let obj = this;
			uni.downloadFile({
				//下载图片
				url: obj.shareImage,
				success: res => {
					console.log(res.tempFilePath);
					uni.saveImageToPhotosAlbum({
						//将图片保存在手机
						filePath: res.tempFilePath, //保存的位置
						success: res => {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							});
						}
					});
				}
			});
		},
		// 具体分享
		shareToFriend(item) {
			let obj = this;
			uni.showLoading({
				title: 'Loading...',
				mask: true
			})
			// #ifdef H5
			let url = location.href;
			// #endif
			productCode({
				id: obj.goodsid,
				type: 1,
				// #ifdef MP-WEIXIN
				user_type: 'routine', //来源
				// #endif
				// #ifdef H5
				user_type: 'wechat', //来源
				// #endif
				// #ifdef H5
				qurl: url
				// #endif
			}).then(({ data }) => {
				this.backShare = true;
				this.shareImage = data.url;
				uni.hideLoading();
				console.log(data);
			}).catch(e=> {
				uni.hideLoading()
			})
		},
		
		closepop() {
			this.$refs.popup1.close();
		},
		openpop() {
			if (this.quanlist.length == 0) {
				this.$api.msg('暂无优惠券')
			} else {
				this.$refs.popup1.open();
			}
		},
		//防止冒泡和滚动穿透
		stopPrevent() {},
		numberChange(e) {
			//购买数量
			this.chooseGoodsNumber = e.number;
		},
		// 拼团发起拼单
		specOPne() {
			this.goodsDataType = 0;
			//显示弹出框
			this.specClass = 'show';
			// 拼团
			this.productDataUp(this.pinkGoodsData);
		},
		
		// 一键拼团
		// PinkAuto() {
		// 	console.log(11111)
		// 	this.goodsDataType = 2;
		// 	//显示弹出框
		// 	this.specClass = 'show';
		// 	// 拼团
		// 	this.productDataUp(this.pinkGoodsData);
		// },
		
		// 处理数组结构
		dataUpReturn(data) {
			//保存处理完毕数据
			let arr = [];
			// 保存临时数据
			let arr1 = [];
			// 设置每个小数组可以存放的数量
			let num = 2;
			if (data.length > 1) {
				for (let i = 0; i < data.length; i++) {
					// 保存数据到临时数组
					arr1.push(data[i]);
					if ((i + 1) % num === 0) {
						console.log(arr1, 2);
						// 添加数据到返回数组，用map方法解决物理指针问题导致的数据对象改变问题
						arr.push(
							arr1.map(e => {
								return e;
							})
						);
						// 清空临时数组重新开始计算
						arr1 = [];
					}
				}
			}
			// 判断是否为奇数
			if (data.length % num === 1) {
				arr.push([data[data.length - 1]]);
			}
			return arr;
		},
		//拼团列表数据分页
		setPinkList() {
			let obj = this;
			let showlist = new Array();
			for (let i = 0; i < obj.pinkTlist.length; i++) {
				if (i >= obj.count) {
					break;
				}
				showlist[i] = obj.pinkTlist[i];
			}
			obj.showlist = showlist;
		},
		//查看更多
		// clickMore() {
		// 	let obj = this;
		// 	obj.count += 2;
		// 	obj.setPinkList();
		// 	if (obj.count >= obj.pinkTlist.length) {
		// 		obj.showmore = false; //当次数大于拼团数据，查看更多隐藏
		// 	} else {
		// 		obj.showmore = true; //当次数大于拼团数据，查看更多隐藏
		// 	}
		// },
		clickMore() {
			this.showlist = this.pinkTlist;
			console.log(this.showlist, 22);
			this.more = false;
		},
		//规格弹窗开关
		toggleSpec(str) {
			// console.log('是否是登录状态',this.hasLogin)
			// if (!this.hasLogin) {
			// 	uni.showModal({
			// 		title: '登录',
			// 		content: '您未登录，是否马上登陆?',
			// 		success: e => {
			// 			if (e.confirm) {
			// 				interceptor();
			// 			}
			// 		},
			// 		fail: e => {
			// 			console.log(e);
			// 		}
			// 	});
			// 	return;
			// }
			// uni.navigateTo({
			// 	url
			// });
			if (this.specClass === 'show') {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			} else if (this.specClass === 'none') {
				this.specClass = 'show';
			}
			// 判断是否为数字
			if (typeof str == 'number') {
				// 保存当前购买类型
				this.type = str;
			}
		},
		//选择规格
		selectSpec(item, arr, ind) {
			console.log('--999--',item, arr, ind);
			arr.attr_value.forEach(function(e) {
				e.check = false;
			});
			item.check = true;
			let obj = this;
			obj.specSelected[ind] = item.attr;
			let str = obj.specSelected.join(',');
			console.log(str);
			// 获取当前选中的对象
			if (obj.productValue[str]) {
				console.log(obj.productValue[str],'当前选中对象')
				obj.buys_show = true;
				obj.buys_shows = false;
				if(obj.wholesale == 1){
					obj.actionPrice = obj.productValue[str].wholesaler_price;
				}else {
					obj.actionPrice = obj.productValue[str].price;
				}
				obj.goodsNumberMax = obj.productValue[str].stock;
				obj.actionImage = obj.productValue[str].image;
				obj.uniqueId = obj.productValue[str].unique;
				console.log('--9090---',obj.uniqueId )
				obj.goodsStore = obj.productValue[str].stock;
			} else {
				(obj.buys_show = false), (obj.buys_shows = true);
			}

			obj.specSelected[ind] = item.attr;
			// console.log(obj.specList)
			// console.log(str)
			if (obj.specList[str]) {
				let data = obj.specList[str];
				console.log(data)
				if(obj.wholesale == 1){
					obj.actionPrice = data.wholesaler_price;
				}else {
					obj.actionPrice = data.price;
				}
				if (obj.goodsType == 2) {
					obj.goodsStore = obj.productValue[item.attr].quota;
				} else {
					obj.goodsStore = obj.goodsObjact.stock;
				}
				obj.goodsNumberMax = data.stock;
				obj.actionImage = data.image;
				obj.uniqueId = data.unique;
			}
		},
		//显示弹窗
		open() {
			console.log('1');
			this.show = true;
		},
		//随意点击隐藏弹窗
		onTap() {
			if (!this.open) return;
			this.close();
		},
		close() {
			this.show = false;
		},
		//收藏
		toFavorite(item) {
			let obj = this;

			item.userCollect = !item.userCollect;
			// 判断是否已经收藏
			if (!item.userCollect) {
				collectDel({
					id: item.id,
					category: 'product'
				}).then(function(e) {
					obj.$api.msg('成功取消收藏!');
				});
			} else {
				collectAdd({
					id: item.id,
					category: 'product'
				}).then(function(e) {
					obj.$api.msg('成功加入收藏!');
				});
			}
		},
		//去拼团
		groupBooking(item, unique) {
			uni.navigateTo({
				url: '/pages/product/details?pink_id=' + item + '&unique=' + unique
			});
		},
		// #ifdef H5
		shareDate() {
			let obj = this;
			let url = window.location.href.replace(/[\?,&]{0,1}from=singlemessage/g, '') + '&spread=' + this.userInfo.uid;
			let bool = uni.getStorageSync('weichatBrowser') || '';
			// 判断是否微信浏览器
			if (bool) {
				let data;
					data = {
						link: url, // 分享链接
						imgUrl: obj.goodsObjact.image, // 分享图标
						desc: obj.goodsObjact.store_info,
						title: obj.goodsObjact.store_name,
						success: function() {}
					};
				weixindata(data);
			}
		},
		// #endif

		// 单独购买
		goProduct(item) {
			//显示弹出框
			this.goodsDataType = 1;
			this.specClass = 'show';
			this.productDataUp(this.goodsData);
		},
		/* 弹窗数据更新 */
		productDataUp(data) {
			console.log('--弹窗数据更新data---',data)
			let obj = this;
			obj.specSelected = data.specSelected; //选中的分类
			obj.productValue = data.productValue; //保存属性值对象
			obj.specList = data.specList; //保存规格列表
			obj.goodsStore = data.goodsStore; //选中库存
			obj.actionImage = data.actionImage; //商品图片
			obj.actionPrice = data.actionPrice; //商品价格
			obj.goodsNumber = data.goodsNumber; //购买数量（开团数量为1，整团数量为1*参团人数）
			obj.uniqueId = data.uniqueId; //选中的规格id
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		// 确定
		comfim() {
			this.buyInfo();
		},
		// 立即购买
		buy(item) {
			console.log(this.goodsDataType,777)
			let obj = this;
			console.log('900---009',item)
			obj.buyInfo(item);
			
		},
		// 购买流程
		async buyInfo(item) {
			console.log('99999',item)
			let obj = this;
			
			// 创建传值对象
			let data = {
				wholesale:this.wholesale || '',
				cartNum: obj.chooseGoodsNumber, //商品数量
				uniqueId: obj.uniqueId, //商品标签
				new: 1, //商品是否新增加到购物车1为不加入0为加入
				mer_id: obj.shopId,
				storeId: this.store_id,
			};
			console.log('--123--',data);
			// 判断是否为加入购物车
			if (obj.type == 2) {
				data.new = 0;
			}
			// 判断是否为普通商品
				data.productId = obj.goodsid; //商品编号
				// data.is_gift = 1; // 是否为礼包 0 不是 1是
			
			this.specClass = 'none';
			cartAdd(data)
				.then(function(e) {
					let da = e.data;
					console.log(e);
					if (obj.type == 1) {
						// 跳转到支付页
						uni.navigateTo({
							url: '/pages/order/createOrder?id=' + da.cartId + '&is_wholesale=' + obj.wholesale + '&integral=' + obj.integral + '&use_integral=' + obj.use_integral + '&sid=' + obj.store_id
						});
					}
					if (obj.type == 2) {
						obj.$api.msg('成功加入购物车');
					}
				})
				.catch(e => {
					console.log(e);
				});
		},
		// 阻止触发上级事件
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
/* #ifdef MP || APP-PLUS */
.barHeight {
	height: var(--status-bar-height);
}
/* #endif */
page {
	background: $page-color-base;
	padding-bottom: 160rpx;
}
// 处理图片间白色间距问题
/deep/ .pHeight {
	line-height: 0;
}
/deep/ .rich-img {
	width: 100% !important;
	height: auto;
}

/deep/ div,
/deep/ table {
	max-width: 100% !important;
}

/* #ifdef MP */
.rich-img {
	width: 100% !important;
	height: auto;
}
// 处理图片间白色间距问题
.pHeight {
	line-height: 0;
}
/* #endif */
.list-row {
	position: fixed;
	top: 450rpx;
	left: 86rpx;

	.row {
		position: relative;
		width: 578rpx;
		height: 700rpx;
		background: #ffffff;
		border-radius: 20rpx;

		.row-1 {
			flex: 1;
			text-align: center;
			padding: 26rpx 223rpx;
			border-bottom: 2rpx solid #eeeeee;

			.row-1-1 {
				font-size: $font-lg;
				font-weight: bold;
				color: #333333;
			}
		}

		.row-2 {
			padding: 0 23rpx;

			.pinklist_list1 {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-bottom: 1px solid #eeeeee;

				.left {
					width: 74rpx;
					height: 74rpx;
					background-color: #e3e3e3;
					border-radius: 50%;
				}

				.center {
					display: flex;
					flex-wrap: wrap;
					margin-left: 17rpx;

					.center-1 {
						display: flex;
						align-items: center;
						letter-spacing: 3rpx;

						.center-1-1 {
							font-size: $font-base;
							font-weight: 500;
							color: #333333;
						}

						.center-1-2 {
							font-size: $font-base - 2rpx;
							font-weight: 500;
							color: #333333;
						}
					}
				}

				.right {
					width: 134rpx;
					height: 59rpx;
					background: $base-color;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.right-word {
						font-size: 26rpx;
						font-weight: 500;
						color: #ffffff;
					}
				}
			}
		}

		.row-3 {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			top: -28rpx;
			right: -28rpx;
		}
	}
}

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

.pinklist_list {
	margin-bottom: 25rpx;
}

.kf {
	width: 146rpx;
	height: 146rpx;
	position: fixed;
	right: 0;
	top: 710rpx;
	z-index: 99;
	image {
		width: 100%;
		height: 100%;
	}
}

.fuli {
	position: fixed;
	right: 24rpx;
	bottom: 400rpx;
	width: 136rpx;
	height: 136rpx;
	z-index: 99;
	image {
		width: 100%;
		height: 100%;
	}
}

.fuli-box {
	position: fixed;
	right: 24rpx;
	bottom: 390rpx;
	width: 136rpx;
	height: 136rpx;
	z-index: 99;
	image {
		width: 100%;
		height: 100%;
	}
}


@keyframes rowup {
    0% {
        // -webkit-transform: translate3d(0, 0, 0);
        // transform: translate3d(0, 0, 0);
			opacity:0
    }
    100% {
        // -webkit-transform: translate3d(0, -106rpx, 0);
        // transform: translate3d(0, -106rpx, 0);
			opacity:1;
			display: none;
    }
}
.pt-box {
	// width: 380rpx;
	height: 70rpx;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 10rpx;
	position: absolute;
	top: 106rpx;
	left: 24rpx;
	padding: 0 15rpx;
	display: flex;
	align-items: center;
	overflow: hidden;
	-webkit-animation: 3s rowup linear infinite normal;
	animation: 3s rowup linear infinite normal;
	
	.pt-frame {
		display: flex;
		align-items: center;
	}
	.pt-img {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	.pt-text {
		font-size: $font-base;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		.pt-name {
			// display: inline-block;
			// width: 200rpx;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: nowrap;
		}
	}
}

.carousel {
	height: 722rpx;
	position: relative;

	swiper {
		height: 100%;
	}

	.image-wrapper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 750rpx;
		overflow: hidden;

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

/* 标题简介 */
.introduce-section {
	background: #fff;
	padding: 20rpx 30rpx;

	.title {
		width: 100%;
		font-size: 32rpx;
		color: $font-color-dark;
		// height: 50rpx;
		line-height: 50rpx;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.price-box {
		display: flex;
		// align-items: baseline;
		// height: 64rpx;
		padding: 10rpx 0;
		font-size: 26rpx;
		color: #ff0000;
		.fenxiang {
			width: 36rpx;
			height: 36rpx;
			padding: 0;
			margin: 0;
			border-radius: 0;
			background: #FFFFFF;
			display: flex;
			&::after {
				border: none;
			}
			.fenxiang-img {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.price {
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FF0000;
		&::before {
			content: '￥';
			font-size: 26rpx;
		}
	}

	.vip_price {
		// font-size: $font-lg + 2rpx;
		// color: $uni-color-primary;
		// padding-left: 15rpx;
		margin-left: 15rpx;
		font-size: $font-lg;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: line-through;
		color: #333333;
		opacity: 0.61;
	}
	.tz_box {
		margin-left: 15rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #303131;
		line-height: 1;
		padding: 6rpx 10rpx;
		background: linear-gradient(90deg, #FFF4E9, #FBDBB2);
		border-radius: 16rpx;
	}

	.m-price {
		margin: 0 12rpx;
		color: $font-color-light;
		text-decoration: line-through;
	}

	.coupon-tip {
		align-items: center;
		padding: 4rpx 10rpx;
		background: $uni-color-primary;
		font-size: $font-sm;
		color: #fff;
		border-radius: 6rpx;
		line-height: 1;
		transform: translateY(-4rpx);
	}

	.bot-row {
		display: flex;
		align-items: center;
		height: 50rpx;
		font-size: $font-sm;
		color: $font-color-light;

		text {
			flex: 1;
		}
	}

	.people {
		border-radius: 10rpx;
		height: 35rpx !important;
		position: relative;
		width: 116rpx;
		height: 35rpx;
		// border: 2rpx solid #db1935;
		
		.people_image {
			// background-color: #db1935;
			width: 100%;
			height: 100%;
			text-align: center;
			border-top-left-radius: 20%;
			border-bottom-left-radius: 20%;

			image {
				width: 100%;
				height: 100%;
				// margin-bottom: 5rpx;
			}
		}

		.people_number {
			position: absolute;
			top: 0;
			right: 8rpx;
			font-size: 22rpx;
			line-height: 35rpx;
			// padding: 5rpx 10rpx;
		}
	}
}

/* 分享 */
.share-section {
	display: flex;
	align-items: center;
	color: $font-color-base;
	background: linear-gradient(left, #fdf5f6, #fbebf6);
	padding: 12rpx 30rpx;

	.share-icon {
		display: flex;
		align-items: center;
		width: 70rpx;
		height: 30rpx;
		line-height: 1;
		border: 1px solid $uni-color-primary;
		border-radius: 4rpx;
		position: relative;
		overflow: hidden;
		font-size: 22rpx;
		color: $uni-color-primary;

		&:after {
			content: '';
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			left: -20rpx;
			top: -12rpx;
			position: absolute;
			background: $uni-color-primary;
		}
	}

	.iconfavorfill {
		position: relative;
		z-index: 1;
		font-size: 24rpx;
		margin-left: 2rpx;
		margin-right: 10rpx;
		color: #fff;
		line-height: 1;
	}

	.tit {
		font-size: $font-base;
		margin-left: 10rpx;
	}

	.iconprompt {
		padding: 10rpx;
		font-size: 30rpx;
		line-height: 1;
	}

	.share-btn {
		flex: 1;
		text-align: right;
		font-size: $font-sm;
		color: $uni-color-primary;
	}

	.iconenter {
		font-size: $font-sm;
		margin-left: 4rpx;
		color: $uni-color-primary;
	}
}

.c-list {
	font-size: $font-sm + 2rpx;
	color: #303133;
	margin-top: 20rpx;
	background: #fff;

	.c-row {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;

		.c-text {
			text {
				padding-left: 25rpx;
				padding-right: 25rpx;
			}
		}
	}

	.tit {
		width: 140rpx;
	}

	.con {
		flex: 1;
		color: $font-color-dark;

		.selected-text {
			margin-right: 10rpx;
		}
	}

	.bz-list {
		height: 40rpx;
		font-size: $font-sm + 2rpx;
		color: $font-color-dark;

		text {
			display: inline-block;
			margin-right: 30rpx;
		}
	}

	.con-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: $font-color-dark;
		line-height: 40rpx;
	}

	.red {
		color: $uni-color-primary;
	}
}


// 谁购买了商品
.autoPink-box {
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	.auto-img {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		border: 1px solid #FFFFFF;
		margin-left: -10rpx;
		&:first-of-type {
			margin-left: 0;
		}
	}
	.shenlue {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		border: 1px solid #FFFFFF;
		background: #9d9fa6;
		margin-left: -10rpx;
	}
	.auto-text {
		color: #9f9f9f;
		font-size: $font-base - 2rpx;
		margin-left: 10rpx;
	}
}

.quan {
	width: 750rpx;
	height: 83rpx;
	background-color: #FFFFFF;
	padding: 0 24rpx;
	margin: 15rpx 0;
	display: flex;
	align-items: center;

	.quan-left {
		font-size: 26rpx;
		font-weight: 500;
		color: #606972;
		margin-right: 33rpx;
	}

	.img-box {
		width: 90rpx;
		height: 30rpx;
		margin-right: 10rpx;

		.quan-img {
			width: 90rpx;
			height: 30rpx;
		}
	}

	.quan-center {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		flex: 1;
	}

	.quan-right {
		// width: 40rpx;
		// height: 40rpx;

		.right-next {
			width: 100%;
			height: 100%;
		}
	}
}

/* 评价 */
.eva-section {
	display: flex;
	flex-direction: column;
	padding: 20rpx 30rpx;
	background: #fff;
	margin-top: 16rpx;

	.e-header {
		display: flex;
		align-items: center;
		height: 70rpx;
		font-size: $font-sm + 2rpx;
		color: $font-color-light;

		.tit {
			font-size: $font-base + 2rpx;
			color: $font-color-dark;
			margin-right: 4rpx;
		}

		.tip {
			flex: 1;
			text-align: right;
		}

		.iconenter {
			margin-left: 10rpx;
		}
	}
}

.eva-box {
	display: flex;
	padding: 20rpx 0;

	.portrait {
		flex-shrink: 0;
		width: 80rpx;
		height: 80rpx;
		border-radius: 100px;
	}

	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: $font-base;
		color: $font-color-base;
		padding-left: 26rpx;

		.con {
			font-size: $font-base;
			color: $font-color-dark;
			padding: 20rpx 0;
		}

		.bot {
			display: flex;
			justify-content: space-between;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
}

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

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

/*  详情 */
.detail-desc {
	background: #fff;
	margin-top: 16rpx;
	p {
		line-height: 1;
	}
	img {
		max-width: 100%;
	}

	.d-header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		font-size: $font-base + 2rpx;
		color: $font-color-dark;
		position: relative;

		text {
			padding: 0 20rpx;
			background: #fff;
			position: relative;
			z-index: 1;
		}

		&:after {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
			width: 300rpx;
			height: 0;
			content: '';
			border-bottom: 1px solid #ccc;
		}
	}
}
.hotgoods{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 0 32rpx 108rpx;
		
		.hotgoods-item{
			width: 48%;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			margin-bottom: 24rpx;
			&:nth-child(2n + 1){
				margin-right: 24rpx;
			}
			.image-wrapper {
				width: 100%;
				height: 330rpx;
				border-radius: 3px;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
					opacity: 1;
					border-radius: 12rpx 12rpx 0 0;
				}
			}
			.title {
				font-size: $font-base;
				color: $font-color-dark;
				font-weight: bold;
				line-height: 80rpx;
			}
			.hot-price{
				display: flex;
				justify-content: space-between;
				padding: 0 16rpx 12rpx;
				
				.price{
					font-size: 40rpx;
					color: #FF0000;
					font-weight: 500;
				}
				.cart-icon{
					image{
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
		}
	}
.hotsheader{
	text-align: center;
	color: #FF0000;
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 32rpx 0 24rpx;
}


/* 规格选择弹窗 */
.attr-content {
	padding: 25rpx 30rpx;

	.a-t {
		display: flex;

		image {
			width: 170rpx;
			height: 170rpx;
			flex-shrink: 0;
			border-radius: 8rpx;
		}

		.right {
			display: flex;
			flex-direction: column;
			padding-left: 24rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-base;
			line-height: 42rpx;
			width: 75%;

			.price {
				font-size: $font-lg;
				color: $uni-color-primary;
				margin: 10rpx 0rpx;
			}

			.name {
				font-size: 32rpx;
				color: $font-color-dark;
				height: 50rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
			}

			.selected-text {
				margin-right: 10rpx;
			}
		}
	}

	.attr-list {
		display: flex;
		flex-direction: column;
		font-size: $font-base + 2rpx;
		color: $font-color-base;
		padding-top: 30rpx;
		padding-left: 10rpx;
	}

	.item-list {
		padding: 20rpx 0 0;
		display: flex;
		flex-wrap: wrap;

		text {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #eee;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 100rpx;
			min-width: 60rpx;
			height: 60rpx;
			padding: 0 20rpx;
			font-size: $font-base;
			color: #ff0000;
		}

		.selected {
			background: #fbebee;
			color: $uni-color-primary;
		}
	}

	.num-list {
		padding: 20rpx 0 0;
		display: flex;
		flex-wrap: wrap;

		text {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100rpx;
			min-width: 60rpx;
			height: 60rpx;
			padding: 0 20rpx;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}
}

/*  弹出层 */
.popup {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;

	&.show {
		display: block;

		.mask {
			animation: showPopup 0.2s linear both;
		}

		.layer {
			animation: showLayer 0.2s linear both;
		}
	}

	&.hide {
		.mask {
			animation: hidePopup 0.2s linear both;
		}

		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}

	&.none {
		display: none;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.layer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		min-height: 35vh;
		border-radius: 10rpx 10rpx 0 0;
		background-color: #fff;

		.btn {
			height: 66rpx;
			line-height: 66rpx;
			border-radius: 100rpx;
			background: #FF0000;
			font-size: $font-base + 2rpx;
			color: #fff;
			margin: 30rpx auto 20rpx;
		}
	}

	@keyframes showPopup {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes hidePopup {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}

		100% {
			transform: translateY(0%);
		}
	}

	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(120%);
		}
	}
}
//分享
.btn_fenxiang {
	position: fixed;
	// right: 20rpx;
	right: 0;
	bottom: 50%;
	z-index: 95;
	width: 140rpx;
	height: 140rpx;
	// width: 100rpx;
	// color: #ffffff;
	// border-radius: 100%;
	// background-color: $background-color;
	// line-height: 100rpx;
	// text-align: center;
	// font-size: 30rpx;
	image {
		width: 140rpx;
		height: 140rpx;
	}
}

.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.4);
	image {
		width: 100%;
		height: 100%;
		opacity: 0.8;
	}
}

// 拼团协议弹窗
.xieyi-box {
	position: fixed;
	z-index: 998;
	right: 0;
	bottom: 0;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.4);
	padding: 30rpx;
	display: flex;
	align-items: center;
	.xieyi-frame {
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 15rpx 0 0;
		.xieyi-tit {
			font-size: 40rpx;
			font-weight: bold;
			text-align: center;
		}
		.xieyi-text {
			padding: 20rpx 30rpx;
			font-size: 30rpx;
		}
		.xieyi-btn-box {
			margin-top: 20rpx;
			display: flex;
			.xieyi-btn {
				width: 50%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom-left-radius: 15rpx;
				background: #ffaa00;
				color: #FFFFFF;
			}
			.queding {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 15rpx;
				background: #03A9F4;
			}
		}
	}
}

// 分享遮罩层
.pop-mask {
	position: fixed;
	z-index: 9999;
	right: 0;
	bottom: 0;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.4);
	padding: 60rpx;
	.share-img {
		width: 100%;
		height: 100%;
	}
}

.shareDate {
	position: fixed;
	right: 0;
	bottom: 50%;
	z-index: 95;
	width: 140rpx;
	height: 140rpx;
	// color: #ffffff;
	// border-radius: 100%;
	// width: 120rpx;
	// height: 120rpx;
	// line-height: 120rpx;
	// background-color: $background-color;
	// text-align: center;
	// font-size: 30rpx;
	image {
		width: 140rpx;
		height: 140rpx;
	}
}
/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 95;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100rpx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
	// border-radius: 16rpx;

	.kefu-mp {
		padding: 0;
		background: 0;
		&::after {
			border: 0;
		}
	}
	
	.p-b-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font-sm;
		color: $font-color-base;
		width: 180rpx;
		height: 100rpx;
		// padding-left: 15rpx;

		.kefu-btn {
			width: 36rpx;
			height: 35rpx;
			margin-bottom: 8rpx;
		}

		.iconfont {
			font-size: 40rpx;
			line-height: 48rpx;
			color: $font-color-light;
		}

		&.active,
		&.active .iconfont {
			color: #ff0000;
		}

		.icon-fenxiang2 {
			font-size: 42rpx;
			transform: translateY(-2rpx);
		}

		.iconlikefill {
			font-size: 46rpx;
		}
	}

	.gobuy {
		width: 100%;
		background: #db1935;
		height: 100%;
		color: #ffffff;
		text-align: center;
		padding-top: 25rpx;
		// border-radius: 15rpx;
	}
	
	.primary-text {
		display: flex;
		height: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		line-height: 1.7;
	}
	.pt-btn-group {
		margin-left: 0 !important;
		width: 100%;
	}
	.action-btn-group {
		display: flex;
		height: 100%;
		overflow: hidden;
		margin-left: 20rpx;
		position: relative;
		// border-top-right-radius: 15rpx;
		// border-bottom-right-radius: 15rpx;

		&:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 50%;
			transform: translateY(-50%);
			height: 28rpx;
			width: 0;
			// border-right: 1px solid rgba(255, 255, 255, 0.5);
		}

		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 540rpx;
			height: 100%;
			font-size: $font-base;
			padding: 0;
			border-radius: 0;
			background: transparent;

			&.buy-now-btn {
				background-color: #ffb238;
			}

			&.add-cart-btn {
				background-color: #DF3525;
			}
			&.btn-favorites-btn {
				background-color: rgba(24, 179, 255, 1);
			}
		}

		.action-btn1 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 580rpx;
			height: 100%;
			font-size: $font-base;
			padding: 0;
			border-radius: 0;
			background: transparent;

			&.buy-now-btn {
				// background-color: #ffb238;
				background: linear-gradient(90deg, #454545, #666666);
			}

			&.add-cart-btn {
				background-color: #FF0000;
				// background: linear-gradient(90deg, #FE8119, #FF4E00);
			}
		}
	}
}

//拼团列表
.pinklistbox1 {
	padding: 15rpx 15rpx;
	background: #ffffff;
	text-align: center;
	font-size: 26rpx;
	margin-top: 25rpx;
}

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

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

.pint {
	// background: -webkit-linear-gradient(left, #ff1f4f, #ff0409);
	background: #DF3525;
	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;
}

.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: #DF3525;
	font-size: $font-lg;
	margin: 0 auto;
	text-align: center;
	color: #ffffff;
	// border-radius: 50rpx;
}
.Shraremask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 998;
	transition: 0.3s;
	background-color: rgba(51, 51, 51, 0.6);
	.bottomButtom {
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 90rpx;
		background: #fff;
		z-index: 9;
		font-size: $font-base + 2rpx;
		color: $font-color-dark;
	}
}
.mask-content {
	width: 100%;
	height: 380rpx;
	transition: 0.3s;
	background: #fff;
	&.has-bottom {
		padding-bottom: 90rpx;
	}
	.view-content {
		height: 100%;
	}
}
.share-header {
	height: 110rpx;
	font-size: $font-base + 2rpx;
	color: font-color-dark;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 10rpx;
	&:before,
	&:after {
		content: '';
		width: 240rpx;
		heighg: 0;
		border-top: 1px solid $border-color-base;
		transform: scaleY(0.5);
		margin-right: 30rpx;
	}
	&:after {
		margin-left: 30rpx;
		margin-right: 0;
	}
}
.share-list {
	display: flex;
	width: 80%;
	margin: 0rpx auto;
}
.share-item {
	min-width: 33.33%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 180rpx;
	width: 100%;
	.wechat-box {
		width: 50%;
		height: 100%;
		background: #ffffff;
		border: 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		&::after {
			border: 0;
		}
		.itemImage {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 16rpx;
		}
		.itemText {
			font-size: $font-base;
			color: $font-color-base;
			line-height: 2;
		}
	}
}

.pop-box {
	width: 750rpx;
	background: #F8F6F6;
	z-index: 999;
	border-radius: 10rpx 10rpx 0px 0px;

	.pop-top {
		display: flex;
		align-items: center;
		padding: 35rpx 30rpx 45rpx 60rpx;

		.top-center {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
			flex: 1;
		}

		.top-right {
			width: 30rpx;
			height: 30rpx;

			.right-img {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.scroll-h {
		max-height: 956rpx;
	}

	.pop-center {

		padding-bottom: 20rpx;

		.pop-item {
			width: 693rpx;
			height: 170rpx;
			background: #FFFFFF;
			border: 1px solid #DFEDE4;
			border-radius: 10rpx;
			margin: 0rpx auto 20rpx;
			display: flex;

			&:last-of-type {
				margin: 0rpx auto 0rpx;
			}

			.item-left {
				width: 195rpx;
				height: 170rpx;
				background: #FDEFEF;
				border-right: 1px solid #FFD8D8;
				text-align: center;
				padding-top: 28rpx;

				.pic {

					font-size: 28rpx;
					font-weight: bold;
					color: #FC6168;
				}

				.pic-info {
					font-size: 22rpx;
					font-weight: 500;
					color: #FC6168;
				}
			}

			.item-right {
				flex: 1;
				display: flex;
				// align-items: center;
				padding-right: 20rpx;

				.right-left {
					padding: 33rpx 0rpx 0 18rpx;
					flex: 1;

					.top {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 5rpx;
					}

					.center {
						font-size: 22rpx;
						font-weight: 500;
						color: #999999;
						margin-bottom: 5rpx;
					}

					.foot {
						font-size: 22rpx;
						font-weight: 500;
						color: #999999;
					}
				}

				.right-right {
					width: 120rpx;
					height: 46rpx;
					background: #FC6168;
					border-radius: 23rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: auto;
				}
			}
		}
	}
}
</style>