zhongwin/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 seckill-box-title" v-if="goodsType == 1">
			<view class="title flex">
				<view class="title-box">
					<text class="price-tip">¥</text>
					<text class="price">{{ goodsObjact.price }}</text>
					<!-- <text class="m-price" v-if="goodsObjact.ot_price > goodsObjact.price">¥{{ goodsObjact.ot_price }}</text> -->
					<!-- <text class="coupon-tip">7折</text> -->
				</view>
				<view class="flex timeStop">
					<view>距离结束</view>
					<uni-countdown color="#ffffff" background-color="#D65B3F" splitor-color="#FFFFFF" :show-day="false"
						:hour="seckillObj.stopTimeH" :minute="seckillObj.stopTimeM" :second="seckillObj.stopTimeS">
					</uni-countdown>
				</view>
			</view>
		</view>

		<view class="introduce-section">
			<text class="title" v-if="goodsType == 1">{{ goodsObjact.title }}</text>
			<view class="price-box" v-if="goodsType == 0">
				<text class="price-tip">¥</text>
				<text class="price">{{ goodsObjact.price }}</text>
				<text class="m-price" v-if="goodsObjact.ot_price > goodsObjact.price">¥{{ goodsObjact.ot_price }}</text>
				<!-- <text class="coupon-tip">7折</text> -->
			</view>
			<text class="title" v-if="goodsType == 0">{{ goodsObjact.store_name }}</text>
			<view class="bot-row">
				<text>快递: {{ goodsObjact.postage }}</text>
				<text style="text-align: center;">销量: {{ goodsObjact.sales }}</text>
				<text style="text-align: right;">{{ storeObjact.address | address }}</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>({{ details.replyCount }})</text>
				<text class="tip">好评率 {{ details.replyChance }}%</text>
				<text class="iconfont iconenter"></text>
			</view>
			<view class="eva-box">
				<image class="portrait" :src="reply.avatar" 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 class="eva-boxs" v-if="reply.merchant_reply_content">
				<view class="right">
					<text class="con">
						<text style="color: #FD5B23;margin-right: 8rpx;">商家回复 :</text>
						{{ reply.merchant_reply_content }}
					</text>
					<view class="bot">
						<text class="attr"></text>
						<text class="time">{{ reply.merchant_reply_time }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="c-list">
			<view class="c-row b-b" @click="toggleSpec">
				<text class="tit">购买数量</text>
				<view class="con">
					<text class="selected-text">{{ goodsNumber }}</text>
				</view>
				<text class="iconfont iconenter"></text>
			</view>
			<view class="c-row b-b" v-if="goodsType == 1">
				<text class="tit">限购数量</text>
				<view class="con">
					<text class="selected-text">{{ goodsObjact.num + goodsObjact.unit_name }}</text>
				</view>
			</view>
			<!-- <view class="c-row b-b">
				<text class="tit">优惠券</text>
				<text class="con t-r red">领取优惠券</text>
				<text class="iconfont iconenter"></text>
			</view> -->
			<view class="c-row b-b" v-if="goodsObjact.is_integral == 1 && goodsType == 0">
				<text class="tit">积分</text>
				<view class="bz-list con">
					<text>最高抵扣￥{{ moneyNum(goodsObjact.use_max_integral) == 0 ? moneyNum(goodsObjact.price) : moneyNum(goodsObjact.use_max_integral) }}</text>
				</view>
			</view>
		</view>
		<view class="shop-box flex" v-if="goodsType == 0 && shopId > 0">
			<view class="flex">
				<image :src="shopInfo.logo" mode=" aspectFit" class="shop-img"></image>
				<text class="font-size-lg">{{ shopInfo.title }}</text>
			</view>
			<navigator :url="'/pages/shoping/index?merid=' + shopId">
				<view class="shop-button">进店逛逛</view>
			</navigator>
		</view>
		<view class="detail-desc">
			<view class="d-header"><text>图文详情</text></view>
			<rich-text class="detail-centent" :nodes="goodsObjact.description"></rich-text>
			<view :class="{ contentBottomHeight: goodsType == 1 || goodsType == 2, goodsBottom: goodsType == 0 }">
			</view>
		</view>
		<!-- 底部操作菜单 -->
		<view class="page-bottom" v-if="goodsType == 0">
			<!-- <navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="iconfont iconhome"></text>
				<text>首页</text>
			</navigator>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
				<text class="iconfont iconcart"></text>
				<text>购物车</text>
			</navigator> -->
			<view class="p-b-btn" :class="{ active: goodsObjact.userCollect }" @click="toFavorite(goodsObjact)">
				<text class="iconfont "
					:class="{ iconlike: !goodsObjact.userCollect, iconlikefill: goodsObjact.userCollect }"></text>
				<text>收藏</text>
			</view>

			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="toggleSpec(2)">加入购物车</button>
				<button type="primary" class=" action-btn no-border  add-cart-btn" @click="toggleSpec(1)">立即购买</button>
			</view>
		</view>
		<!-- 秒杀商品购买 -->
		<view class="goods-pay-box flex" :class="{ stop: seckillObj.stop }" v-if="goodsType == 1">
			<view class="goods-pay bgLine" v-if="!seckillObj.stop" @click="toggleSpec(1)"><text>立即购买</text></view>
			<view class="goods-pay-stop" v-else>活动已结束</view>
		</view>
		<!-- 拼团商品购买 -->
		<view class="goods-pay-box flex" v-if="goodsType == 2">
			<view class="goods-pay bg-warning" @click="navToProductGoods">
				<view class="goods-buttom-money">¥{{ goodsObjact.product_price }}</view>
				<view class="goods-buttom">单独购买</view>
			</view>
			<view class="goods-pay bg-danger" @click="toggleSpec(1)">
				<view class="goods-buttom-money">¥{{ goodsObjact.price }}</view>
				<view class="goods-buttom">我要拼团</view>
			</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">
						<view class="good-name clamp">{{ goodsObjact.store_name }}</view>
						<text class="price">¥{{ actionPrice }}</text>
						<br />
						<text class="stock" v-if="goodsObjact.can_up_level==1">等级：{{levelName}}</text>
						<!-- <text class="stock">库存：{{ goodsObjact.stock }}件</text> -->
						<!-- <view class="selected" v-if="goodsType == 0">
							已选：
							<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" v-if="goodsObjact.can_up_level!=1">
					<text>购买数量</text>
					<view class="item-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">完成</button>
			</view>
		</view>
		<view :class="{ seckillBottom: goodsType == 1, goodsBottom: goodsType == 0 }"></view>
		<!-- 分享 -->
		<!-- <share ref="share" :contentHeight="580" :shareList="shareList"></share> -->
	</view>
</template>

<script>
	// import share from '@/components/share';
	import uniNumberBox from '@/components/uni-number-box.vue';
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
	import {
		goodsDetail,
		cartAdd,
		collectAdd,
		collectDel,
		seckillGoods,
		groupGoods
	} from '@/api/product.js';
	// #ifdef H5
	import {
		weixindata,
		shareLoad
	} from '@/utils/wxAuthorized';
	import {
		mapState
	} from 'vuex';
	import weixinObj from '@/plugin/jweixin-module/index.js';
	// #endif
	export default {
		components: {
			uniNumberBox,
			uniCountdown
		},
		filters: {
			address(val) {
				let str = '';
				if (val) {
					str = val[0] + ' ' + val[1];
				}
				return str;
			}
		},
		data() {
			return {
				details: '',
				reply: '', //评论
				type: 1, //默认支付方式add为
				goodsNumber: 1, //购买数量
				goodsid: '', //商品id
				specClass: 'none', //显示隐藏弹窗
				shareList: [], //分享列表
				goodsObjact: {}, //保存商品数据
				storeObjact: {}, //保存店铺数据
				//图片循环
				imgList: [],
				specList: [],
				// 对比对象
				productValue: [],
				actionPrice: 0, //默认选中商品价格
				levelName: '', //当前选中的等级
				actionImage: '', //默认选中图片
				uniqueId: '', //选中的商品分类
				specSelected: [], //选中的分类
				specSelectedName: '', //选中分类名称
				goodsNumberMax: 0, //最大可购买数量
				shopId: '', //商店id
				//商店信息
				shopInfo: {
					logo: '',
					title: ''
				}, //商店信息
				goodsType: 0, //商品类型1秒杀商品0为普通商品2为拼团商品
				// 秒杀数据保存
				seckillObj: {
					stopTime: 0, //结束时间
					stop: false, //是否结束
					stopTimeH: 0, //小时
					stopTimeM: 0, //分钟
					stopTimeS: 0 //秒钟
				},
				// 拼团数据保存
				pink: {
					id: '', //拼团编号
					uid: '', //用户编号
					people: '', //拼团人数
					price: '', //拼团价格
					stop_time: '', //拼团结束时间
					nickname: '', //团长昵称
					avatar: '', //团长头像
					count: '', //拼团剩余人数
					h: '', //时
					i: '', //分
					s: '' //秒
				}
			};
		},
		async onLoad(options) {
			let obj = this;
			//保存商品id
			this.goodsid = options.id;
			// 判断有无人邀请
			if (options.spread) {
				// 存储邀请人
				uni.setStorageSync('spread', options.spread);
			}
			// 判断是否为秒杀商品
			if (options.type == 1) {
				// 保存商品类型
				this.goodsType = 1;
				// 保存结束时间
				this.seckillObj.stopTime = options.stoptime;
				// 获取当前时间毫秒数
				let stoptime = options.stoptime * 1000;
				// 获取当前时间
				let acitonTime = new Date();
				// 判断当前时间是否大于结束时间
				if (acitonTime.getTime() > stoptime) {
					// 当前秒杀时间已经结束
					this.seckillObj.stop = true;
				} else {
					// 计算倒计时
					this.timeComputed(stoptime, this.seckillObj);
				}
				this.seckillGoods();
				return;
			}
			if (options.type == 2) {
				// 保存当前拼团商品类型
				this.goodsType = 2;
				// 家在数据
				this.groupGoods();
				return;
			}
			if (this.goodsType == 0) {
				// 加载普通商品详情
				this.goodsDetail();
			}
		},
		computed: {
			// #ifdef H5
			...mapState(['weichatObj', 'baseURL', 'urlFile']),
			...mapState('user', ['userInfo'])
			// #endif
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			// 转换字符串为数字
			moneyNum: function(value) {
				return +value;
			},
			navToProductGoods() {
				uni.redirectTo({
					url: '/pages/product/product?id=' + this.goodsObjact.product_id
				});
			},
			// 获取商品信息
			goodsDetail() {
				let obj = this;
				goodsDetail({}, this.goodsid).then(function({
					data
				}) {
					obj.details = data;
					let goods = data.storeInfo;
					let store_info = data.system_store; // 保存店铺信息
					console.log(store_info);
					obj.storeObjact = store_info;
					obj.goodsObjact = goods;
					//商品详情图超出屏幕问题
					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>'
					}
					obj.reply = data.reply; //保存评论列表
					obj.imgList = goods.slider_image; //保存轮播图
					obj.specList = data.productAttr; //保存分类列表
					console.log(data.productAttr);
					obj.productValue = data.productValue; //保存分类查询数据
					obj.actionPrice = goods.price; //保存默认选中商品价格
					obj.actionImage = goods.image_base; //保存默认选中商品价格
					obj.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
					obj.shopId = data.mer_id; //保存商店id
					// 保存默认选中的对象
					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(',');
					// 设置默认值
					obj.actionImage = obj.productValue[str].image;
					obj.uniqueId = obj.productValue[str].unique;
					obj.levelName = obj.productValue[str].level_name;; //保存默认等级名称
					// #ifdef H5
					obj.shareDate();
					// #endif
				});
			},
			// #ifdef H5
			// 加载微信html5页面分享方法
			shareDate() {
				let obj = this;
				// 保存分享人id链接
				let url = window.location.href + '&spread=' + this.userInfo.uid;
				// 判断是否微信浏览器
				let bool = uni.getStorageSync('weichatBrowser') || '';
				if (bool) {
					// 过滤微信强制添加的链接地址
					url = url.replace(/[\?,&]from=singlemessage/g, '');
					let data = {
						link: url, // 分享链接
						imgUrl: obj.goodsObjact.image, // 分享图标
						desc: obj.goodsObjact.store_info,
						title: obj.goodsObjact.store_name,
						success: function(e) {
							console.log(e);
						}
					};
					shareLoad(data);
				}
			},
			// #endif


			// 购买数量变化
			numberChange(e) {
				this.goodsNumber = e.number;
			},
			//规格弹窗开关
			toggleSpec(str) {
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
				// 保存当前购买类型
				this.type = str;
			},
			//选择规格
			selectSpec(item, arr, ind) {
				arr.attr_value.forEach(function(e) {
					e.check = false;
				});
				item.check = true;
				this.specSelected[ind] = item.attr;
				let str = this.specSelected.join(',');
				this.specSelectedName = this.specSelected.join(' ');
				if (this.productValue[str]) {
					let data = this.productValue[str];
					this.actionPrice = data.price;
					this.levelName = data.level_name;
					this.goodsNumberMax = data.stock;
					this.actionImage = data.image;
					this.uniqueId = data.unique;
				}
			},
			//分享
			share() {
				this.$refs.share.toggleMask();
			},
			//收藏
			toFavorite(item) {
				let obj = this;
				item.userCollect = !item.userCollect;
				if (!item.userCollect) {
					collectDel({
						id: obj.goodsid,
						category: 'product'
					}).then(function(e) {
						uni.showToast({
							title: '成功取消收藏',
							type: 'top',
							duration: 1500
						});
					});
				} else {
					collectAdd({
						id: obj.goodsid,
						category: 'product'
					}).then(function(e) {
						uni.showToast({
							title: '成功加入收藏',
							type: 'top',
							duration: 1500
						});
					});
				}
			},
			// 立即购买
			buy() {
				let obj = this;
				let data = {
					cartNum: obj.goodsNumber, //商品数量
					uniqueId: obj.uniqueId, //商品标签
					new: '1', //商品是否新增加到购物车1为不加入0为加入
					mer_id: obj.shopId
					// type: 0,//0为余额支付  1为消费券支付 2为积分支付
				};
				if (obj.type == 2) {
					data.new = 0;
				}
				if (obj.goodsType == 0) {
					data.productId = obj.goodsid; //商品编号
				}
				// 判断是否为秒杀商品
				if (obj.goodsType == 1) {
					data.secKillId = obj.goodsid; //秒杀商品编号
					data.productId = obj.goodsObjact.product_id; //商品编号
					// 判断是否秒杀已经结束
					if (obj.seckillObj.stop) {
						uni.showModal({
							title: '提示',
							content: '当前活动已经结束',
							showCancel: false
						});
						return;
					}
				}
				// 判断是否为拼团商品
				if (obj.goodsType == 2) {
					data.combinationId = obj.goodsid; //拼团编号
					data.productId = obj.goodsObjact.product_id; //商品编号
				}
				cartAdd(data)
					.then(function({
						data
					}) {
						if (obj.type == 1) {
							let url = '/pages/order/createOrder?id=' + data.cartId + '&goodsType=' + obj.goodsType +
								'&goodsUpLevel=' + obj.goodsObjact.can_up_level;
							// 跳转到支付页
							uni.navigateTo({
								url
							});
						}
						if (obj.type == 2) {
							uni.showToast({
								title: '成功加入购物车',
								type: 'top',
								duration: 2000
							});
							obj.toggleSpec();
						}
					})
					.catch(e => {
						console.log(e);
					});
			},
			stopPrevent() {}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	//秒杀底部高度
	.seckillBottom {
		height: 110rpx;
	}

	// 文章页底部高度撑开
	.contentBottomHeight {
		height: 110rpx;
	}

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

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

	.carousel {
		/* #ifdef APP-PLUS */
		padding-top: var(--status-bar-height);
		/* #endif */
		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;
			height: 710rpx;
			overflow: hidden;

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

	// 秒杀
	.seckill-box-title {
		background: linear-gradient(90deg, rgba(239, 78, 81, 1) 0%, rgba(244, 113, 59, 1) 100%) !important;

		.price,
		.price-tip,
		.timeStop,
		.m-price {
			color: #ffffff !important;
		}

		.price-tip {
			font-size: $font-base;
		}

		.price {
			font-size: 45rpx !important;
			font-weight: bold;
		}

		.timeStop {}
	}

	// 底部拼团、秒杀支付按钮
	.goods-pay-box {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 95;
		width: 750rpx;
		height: 100rpx;
		line-height: 1;
		color: #ffffff;
		text-align: center;
		font-size: $font-lg;

		.bgLine {
			background: linear-gradient(90deg, rgba(239, 78, 81, 1) 0%, rgba(244, 113, 59, 1) 100%);
		}

		// 拼团支付按钮
		.goods-pay {
			display: flex;
			align-content: center;
			flex-wrap: wrap;
			justify-content: center;

			.goods-buttom,
			.goods-buttom-money {
				width: 100%;
			}

			.goods-buttom-money {
				font-size: $font-base;
			}
		}

		.goods-pay-stop,
		.goods-pay {
			padding: 15rpx 0;
			height: 100%;
			width: 100%;
		}

		.goods-pay-stop {
			background: $color-gray;
			line-height: 70rpx;
		}
	}

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

		.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;
		}

		.price {
			font-size: $font-lg + 2rpx;
		}

		.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;
			}
		}
	}

	/* 分享 */
	.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 {
		margin-top: 20rpx;
		font-size: $font-sm + 2rpx;
		color: $font-color-base;
		background: #fff;

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

		.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;
		}
	}

	/* 评价 */
	.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;
			}
		}
	}

	.eva-boxs {
		width: 100%;
		overflow: hidden;
		padding: 10px 28rpx;
		background: #f4f4f4;
		border-radius: 12rpx;
		font-size: $font-sm + 2rpx;
		color: #333;

		.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;

			.con {
				font-size: $font-base;
				color: $font-color-dark;
			}

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

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16rpx;

		/deep/ img {
			max-width: 100% !important;
			display: inline !important;
		}

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

		.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;
			}
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10rpx 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;

				.good-name {
					padding-top: 20rpx;
					max-width: 320rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1d2023;
					line-height: 42rpx;
					margin-bottom: 15rpx;
				}

				.price {
					font-size: 60rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ff6f0f;
					// font-size: $font-lg;
					// color: $uni-color-primary;
					// margin-bottom: 10rpx;
				}

				.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;

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

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

	/*  弹出层 */
	.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;
			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: 30vh;
			border-radius: 10rpx 10rpx 0 0;
			background-color: #fff;

			.btn {
				height: 66rpx;
				line-height: 66rpx;
				border-radius: 100rpx;
				// background: $uni-color-primary;
				background: #52C696;
				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%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 98rpx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);

		// border-radius: 16rpx;
		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 100rpx;
			height: 98rpx;

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

			&.active,
			&.active .iconfont {
				color: $uni-color-primary;
			}

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

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

		.action-btn-group {
			display: flex;
			height: 98rpx;
			// border-radius: 100px;
			overflow: hidden;
			// margin-left: 20rpx;
			position: relative;

			// &: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: 375rpx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				// background: transparent;
				background: #ffb238;

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

				&.add-cart-btn {

					background: #52C696;
				}
			}
		}
	}

	// 商店头
	.shop-box {
		background-color: #ffffff;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		padding: 20rpx;

		.shop-img {
			border-radius: 300rpx;
			height: 80rpx;
			width: 80rpx;
			margin-right: 20rpx;
		}

		.shop-button {
			border-radius: 100rpx;
			padding: 10rpx 20rpx;
			color: $color-red;
			border: 1px solid $color-red;
			font-size: $font-lg;
			line-height: 1;
		}
	}

	/* #ifdef MP */
	.rich-img {
		width: 100% !important;
		height: auto;
	}

	/* #endif */
	/deep/ .rich-img {
		width: 100% !important;
		height: auto;
	}
</style>