cgst/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="top_item_box">
				<view class="item_box">
					<view class="price_box">
						<view class="price_yuan">{{ goodsObjact.price | parseFloatNum }}</view>
						<view class="ot_price">￥{{ goodsObjact.ot_price | parseFloatNum }}</view>
						<view class="pink_tuan">4人团拼团价￥{{ goodsObjact.price }}</view>
					</view>
					<!-- <view class="tuiguang_num">
						4人团拼团价￥{{ goodsObjact.price }}
					</view> -->
				</view>
				<!-- #ifdef H5 -->
				<view class="ptsf_box" @click="open()">
					<image class="ptsf_img" src="../../static/img/sharejt.png"></image>
					<view class="ptfx_tit">拼团分享</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<!-- <button class="ptsf_box" open-type="share">
					<image class="ptsf_img" src="../../static/img/sharejt.png"></image>
					<view class="ptfx_tit">拼团分享</view>
				</button> -->
				<view class="ptsf_box" @click="shareToFriend()">
					<image class="ptsf_img" src="../../static/img/sharejt.png" mode=""></image>
					<view class="ptfx_tit">拼团分享</view>
				</view>
				<!-- #endif -->
			</view>
			<text class="title" v-if="goodsType == 2">{{ goodsObjact.title }}</text>
			<text class="title" v-else>{{ goodsObjact.store_name }}</text>
		</view>

		<view class="shop" v-if="storelist.length != 0" @click="navTo('/pages/index/shoplist')">
			<view class="shop-top flex">
				<view class="shop-top-left">适用门店(共{{ storelist.length }}家)</view>
				<view class="shop-top-right">
					<view class="shop-top-right-font">查看更多门店</view>
					<image src="../../static/img/shop2.png" mode=""></image>
				</view>
			</view>
			<view class="shop-bottom flex">
				<view class="shop-bottom-left">
					<image class="shop-bottom-left-icon" :src="storelist[0].image" mode=""></image>
					<view class="shop-bottom-left-info">
						<view class="shop-bottom-left-name">{{ storelist[0].name }}</view>
						<view class="shop-bottom-left-address">{{ storelist[0].detailed_address }}</view>
					</view>
				</view>
				<view class="shop-bottom-right">
					<image class="shop-bottom-right-item" style="margin-right: 14rpx;" src="../../static/icon/call.png" mode=""></image>
					<image class="shop-bottom-right-item" src="../../static/icon/dh.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="pink_xuzhi_box">
			<view class="pink_xuzhi_tit">购买须知</view>
			<view class="pink_xuzhi_text">购买后拥有{{ goodsObjact.use_times }}张券，有效时间{{ goodsObjact.valid_day }}天</view>
		</view>

		<view class="pink_xuzhi_box">
			<view class="pink_xuzhi_tit">拼团须知</view>
			<view class="pink_xuzhi_text">开团/参团-邀请好友-满员发货 ></view>
		</view>
		<!-- 商品详情图 -->
		<view class="detail-desc">
			<!-- @click="showoption" -->
			<view class="d-header"><text>商品详情</text></view>
			<rich-text :nodes="goodsObjact.description"></rich-text>
		</view>
		<view class="page-bottom">
			<view class="action-btn-group pt-btn-group">
				<view class="p-b-btn" :class="{ active: goodsObjact.userCollect }" @click="toFavorite(goodsObjact)">
					<text class="iconfont iconlikefill"></text>
					<text>收藏</text>
				</view>
				<button type="primary" class=" action-btn1 no-border buy-now-btn" @click="toggleSpec(1)">单独购买</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="popupshare" type="center">
			<view class="share-box"><image :src="shareImage" mode="" class="box-img" @longpress="saveImg()"></image></view>
		</uni-popup>
	</view>
</template>
<script>
import { mapState } from 'vuex';
import uniNumberBox from '@/components/uni-number-box.vue';
import { uniFav } from '@/components/uni-fav/uni-fav.vue';
import { getProducts, goodsDetail, cartAdd, collectAdd, collectDel, productDetail, poster } from '@/api/product.js';
import { saveUrl } from '@/utils/loginUtils.js';
// import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { store_list } 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: '',
			storelist: [], //店铺列表
			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.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
			});
		},
		// 加载普通商品信息
		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;
			store_list({ page: 1, limit: 1000 }).then(({ data }) => {
				obj.storelist = data.list;
			});
		},
		// 长按保存图片
		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() {
			let obj = this;
			uni.showLoading({
				title: 'Loading...',
				mask: true
			});
			// #ifdef H5
			let fromname = 'wechat';
			// #endif
			// #ifdef MP
			let fromname = 'routine';
			// #endif
			console.log(obj.goodsid, 'id');
			poster({
				productId: obj.goodsid,
				from: fromname
			})
				.then(({ data }) => {
					obj.shareImage = data.url;
					console.log(obj.shareImage, '123456');
					uni.hideLoading();
					this.$refs.popupshare.open();
				})
				.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) {
			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: 0 30rpx 20rpx;

	.top_item_box {
		line-height: 1;
		border-radius: 10rpx;
		display: flex;
		margin-top: -90rpx;
		position: relative;
		box-shadow: 0px 4rpx 24rpx 0px rgba(85, 94, 111, 0.6);
		margin-bottom: 20rpx;
		.item_box {
			background: linear-gradient(-90deg, #ff6a48, #ed4046);
			border-radius: 10rpx 0 0 10rpx;
			width: 550rpx;
			height: 121rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 20rpx;
			.price_box {
				display: flex;
				align-items: center;
				.price_yuan {
					font-size: 42rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					&::before {
						content: '￥';
						font-size: 24rpx;
					}
				}
				.ot_price {
					margin: 0 10rpx 0 10rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: bold;
					text-decoration: line-through;
					color: #ffffff;
				}
				.pink_tuan {
					background: linear-gradient(270deg, #fff4e9, #fbdbb2);
					border-radius: 16rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #303131;
					padding: 6rpx 12rpx;
				}
			}
			.tuiguang_num {
				margin-top: 14rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
		.ptsf_box {
			width: 144rpx;
			height: 121rpx;
			background: #ffffff;
			border-radius: 0px 10rpx 10rpx 0px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0;
			margin: 0;
			&::after {
				border: none;
			}
			.ptsf_img {
				width: 42rpx;
				height: 42rpx;
				display: block;
			}
			.ptfx_tit {
				margin-top: 15rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #262a35;
				line-height: 1;
			}
		}
	}

	.pink_price_box {
		margin: -70rpx 0 34rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 1;
		box-shadow: 3px 4px 10px #fe8119;
		border-radius: 15rpx;
		background: #ffffff;
		.pink_price_frame {
			width: 80%;
			background: #fe8119;
			padding: 26rpx;
			border-radius: 15rpx 0 0 15rpx;
			.pink_price_item {
				display: flex;
				align-items: center;
				.pink_price {
					font-size: 42rpx;
					font-family: SourceHanSansCN;
					font-weight: bold;
					color: #ffffff;
					&::before {
						content: '￥';
						font-size: 24rpx;
					}
				}
				.pink_tuan {
					margin-left: 12rpx;
					padding: 6rpx 12rpx;
					background: rgba($color: #f6f6f8, $alpha: 0.56);
					border-radius: 16rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
			}
			.pink_jifen {
				margin-top: 13rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
		.fengxiang_box {
			padding: 0;
			margin: 0;
			background: #ffffff;
			display: flex;
			&::after {
				border: none;
			}
		}
		.pink_share_box {
			width: 20%;
			height: 100%;
			// padding: 26rpx 0;
			background: #ffffff;
			border-radius: 0 15rpx 15rpx 0;
			display: flex;
			align-items: center;
			flex-direction: column;
			.pink_share_img {
				width: 42rpx;
				height: 42rpx;
			}
			.pink_share_text {
				margin-top: 12rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fe8119;
			}
		}
	}

	.title {
		font-size: 32rpx;
		color: $font-color-dark;
		height: 50rpx;
		line-height: 50rpx;
	}

	.price-box {
		display: flex;
		align-items: baseline;
		// height: 64rpx;
		padding: 10rpx 0;
		font-size: 26rpx;
		color: $uni-color-primary;
	}
	.jifen-box {
		display: flex;
		align-items: flex-end;
		.jifen-icon {
			width: 20rpx;
			height: 22rpx;
			margin-bottom: 4rpx;
		}
		.jifen-price {
			line-height: 1;
			font-size: 42rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ff9900;
			margin: 0 6rpx;
		}
		.jifen-text {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ff9900;
		}
	}

	.price {
		font-size: $font-lg + 2rpx;
		color: #ff0000 !important;
	}

	.vip_price {
		font-size: $font-lg + 2rpx;
		color: $uni-color-primary;
		padding-left: 15rpx;
	}

	.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: linear-gradient(270deg, #ff6848, #ed4046);
			}
			&.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;
			}

			&.add-cart-btn {
				background: linear-gradient(270deg, #ff6848, #ed4046);
			}
		}
	}
}

//拼团列表
.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;
		}
	}
}

.pink_xuzhi_box {
	margin-top: 15rpx;
	padding: 36rpx 36rpx 36rpx 30rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.pink_xuzhi_tit {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #3b3b3b;
	}
	.pink_xuzhi_text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #8a8a8a;
	}
}
.share-box {
	width: 600rpx;
	height: 1000rpx;
	background: red;
	.box-img {
		width: 600rpx;
		height: 1000rpx;
	}
}
.shop {
	background: #fff;
	margin-top: 20rpx;
	.shop-top {
		padding: 22rpx 30rpx;
		border-bottom: 1px solid #eaeced;
		.shop-top-left {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.shop-top-right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.shop-top-right-font {
				margin-right: 10rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
			image {
				width: 12rpx;
				height: 20rpx;
			}
		}
	}
	.shop-bottom {
		padding: 20rpx 30rpx;
		.shop-bottom-left {
			display: flex;
			align-items: center;
			.shop-bottom-left-icon {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
			.shop-bottom-left-info {
				margin-left: 16rpx;
				line-height: 1;
				.shop-bottom-left-name {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.shop-bottom-left-address {
					margin-top: 14rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
		.shop-bottom-right {
			display: flex;
			justify-content: flex-end;
			.shop-bottom-right-item {
				width: 46rpx;
				height: 46rpx;
				border-radius: 50%;
			}
		}
	}
}
</style>