zhengyi/pages/product/product.vue

<template>
	<view class="container">
		<!-- 轮播图 -->
		<top-swiper :imgList="imgList"></top-swiper>
		<!-- 标题 -->
		<view class="introduce-section" v-if="goodsType == 0">
			<button class="shareDate" style="border: none;" @click="callf()">
				<image class="share-img" src="../../static/icon/share.png"></image>
			</button>
			<view class="price-box">
				<text class="price-tip">¥</text>
				<view class="price">
					{{ goodsObjact.price }}
					<text class="m-price">¥{{ goodsObjact.ot_price }}</text>
				</view>
			</view>
			<text class="title clamp2" v-if="goodsObjact.title">{{ goodsObjact.title }}</text>
			<text class="title clamp2" v-else>{{ goodsObjact.store_name }}</text>
		</view>
		<view class="introduce-section" v-if="goodsType == 2">
			<button class="shareDate" style="border: none;" @click="callf()">
				<image class="share-img" src="../../static/icon/share.png"></image>
			</button>
			<view class="price-box-jf">
				<!-- <text class="price-tip">¥</text> -->
				<view class="price">
					<image src="../../static/icon/jf.png" mode=""></image>
					<text>{{goodsObjact.integral}}</text><text class="jf">积分</text>
					<text class="m-price">¥{{ goodsObjact.ot_price }}</text>
				</view>
			</view>
			<text class="title clamp2" v-if="goodsObjact.title">{{ goodsObjact.title }}</text>
			<text class="title clamp2" v-else>{{ goodsObjact.store_name }}</text>
		</view>
		<!-- <product-content :goodsObjact="goodsObjact" v-if="!isSckill "></product-content> -->
		<view class="good-title " v-if="isSckill">{{ goodsObjact.title }}</view>
		<!-- 兑换说明 -->
		<view class="dhsm" v-if="goodsType == 2">
			<view class="title">
				兑换说明
			</view>
			<view class="info">
				兑换说明详细介绍兑换说明详细介绍兑换兑换说明详细介绍兑换说明详细介绍兑换兑换说明详细介绍兑换说明
			</view>
		</view>
		<!-- 评价 -->
		<estimate @navTo="navTo('/pages/product/reply?id=' + goodsObjact.product_id)" v-if="reply" :reply="reply"
			:list="list"></estimate>
		<!-- 规格信息 -->
		<!-- <fresh-detail :goodsObjact="goodsObjact"></fresh-detail> -->
		<!-- 图文详情 -->
		<content-text :description="description"></content-text>
		<!-- 底部高度撑开 -->
		<view class="contentBottomHeight"></view>
		<!-- 底部操作菜单 -->
		<product-bottom @buy="buy" :goodsid="goodsid" @specOPne="specOPne" :showAdd="showAdd"></product-bottom>
		<!-- 规格-模态层弹窗 -->
		<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 clamp">{{ goodsObjact.store_name }}</text>
						<view class="price">
							<text>¥</text>
							{{ actionPrice * goodsNumber }}
						</view>
						<image src="../../static/icon/del.png" mode="" class="right-img" @click="closes()"></image>
					</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="mun-box">
					<text>购买数量</text>
					<view class="num">
						<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 class="mask" v-if="show">
			<image @click="onTap" src="../../static/img/shareimg.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		goodsDetail,
		cartAdd,
		seckillGoods,
		getIntegraDetail
	} from '@/api/product.js';
	import {
		mapState
	} from 'vuex';
	import store from '@/store/index.js';
	import {
		saveUrl
	} from '@/utils/loginUtils.js';
	// #ifdef H5
	import {
		weixindata
	} from '@/utils/wxAuthorized';
	// #endif
	// 头部轮播图
	import topSwiper from './common/topSwiper.vue';
	// 标题
	import productContent from './common/productContent.vue';
	// 到货时间及优惠
	import discounts from './common/discounts.vue';
	// 规格信息
	import freshDetail from './common/freshDetail.vue';
	// 图文详情
	import contentText from './common/contentText.vue';
	// 底部按钮
	import productBottom from './common/productBottom.vue';
	// 猜你喜欢
	import guessLike from './common/guessLike.vue';
	// 评价
	import estimate from './common/estimate.vue';
	import {
		timeComputed
	} from '@/utils/rocessor.js';
	import uniNumberBox from '@/components/uni-number-box.vue'
	export default {
		components: {
			guessLike,
			topSwiper,
			productContent,
			discounts,
			freshDetail,
			contentText,
			productBottom,
			estimate,
			uniNumberBox
		},
		data() {
			return {
				showAdd: true, //是否显示加入购物车
				show: false,
				isSckill: false, //是否为秒杀
				goodsStore: 0, //选中库存
				specList: [],
				buys_show: true,
				buys_shows: false,
				specSelected: [], //选中的分类
				specClass: 'none', //显示隐藏弹窗
				many: 1, //1是单规格  2是多规格
				reply: '', //评论
				list: '', //商品详情的数据
				type: 1, //默认支付方式add为
				goodsType: 0, //商品类型 0：普通，1：秒杀 ，2：积分
				goodsNumber: 1, //购买数量
				goodsid: '', //商品id
				description: '', //商品描述
				goodsObjact: {
					percent: 1
				}, //保存商品数据
				//图片循环
				imgList: [],
				// 对比对象
				actionPrice: 0, //默认选中商品价格
				actionImage: '', //默认选中图片
				good_list: '', //猜你喜欢列表
				goodsNumberMax: 0, //最大可购买数量
				goodsNumberMin: 0, //最小可购买数量
				// 倒计时数据保存
				seckillObj: {
					stopTime: 0, //结束时间
					stop: false, //是否结束
					stopTimeH: 0, //小时
					stopTimeM: 0, //分钟
					stopTimeS: 0, //秒钟
					stopTimeD: 0, //天
					upTime: 0 //更新组件内部组件用
				},
				// 拼团数据保存
				pink: {
					id: '', //拼团编号
					uid: '', //用户编号
					people: '', //拼团人数
					price: '', //拼团价格
					stop_time: '', //拼团结束时间
					nickname: '', //团长昵称
					avatar: '', //团长头像
					count: '', //拼团剩余人数
					h: '', //时
					i: '', //分
					s: '' //秒
				},
				userInfo: ''
			};
		},
		filters: {
			parseIntTo(percent) {
				percent = +percent * 100;
				if (percent % 1 === 0) {
					return percent;
				} else {
					percent = percent.toFixed(1);
					return percent;
				}
			}
		},
		async onLoad(options) {
			let obj = this;
			obj.userInfo = uni.getStorageSync('userInfo');
			//保存商品id
			this.goodsid = options.id;
			if(options.type) {
				this.goodsType = options.type * 1;
			}
			
			if (this.goodsType == 2) {
				this.showAdd = false
				console.log('不显示', this.showAdd)
			}
			console.log(this.goodsType, 'this.goodsTypethis.goodsTypethis.goodsTypethis.goodsType')
			if (options.type == 1) {
				obj.isSckill = true
			}
			// 判断有无人邀请
			if (options.spread) {
				// 存储邀请人
				uni.setStorageSync('spread', options.spread);
			}
			saveUrl();
			this.goodsDetail();
			// 注册邀请信息
			// #ifdef H5
			let bool = uni.getStorageSync('weichatBrowser') || '';
			if (bool) {
				weixindata();
			}
			// #endif
		},
		computed: {
			...mapState(['weichatObj', 'baseURL', 'urlFile'])
		},
		// 分享
		onShareAppMessage(options) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let url = currentPage.route; //当前页面url
			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
			let shareObj = {
				title: this.goodsObjact.store_name + '   价格：' + this.goodsObjact.price, // 默认是小程序的名称(可以写slogan等)
				path: url + '?id=' + item.id + '&spread=' + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: this.goodsObjact.image,
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};

			return shareObj;
		},
		methods: {
			//选择规格
			selectSpec(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(',');
				// 获取当前选中的对象
				if (obj.productValue[str]) {
					obj.buys_show = true;
					obj.buys_shows = false;
					obj.actionPrice = obj.productValue[str].price;
					// obj.goodsNumberMax = obj.productValue[str].quota;
					obj.actionImage = obj.productValue[str].image;
					obj.uniqueId = obj.productValue[str].unique;
					obj.goodsStore = obj.productValue[str].stock;
				} else {
					(obj.buys_show = false), (obj.buys_shows = true);
				}
				if (obj.goodsStore == 0) {
					obj.buys_show = false;
					obj.buys_shows = true;
				}
				obj.specSelected[ind] = item.attr;
			},
			// 打開彈窗
			specOPne(type = 1) {
				let obj = this;
				obj.specClass = 'show';
				obj.type = type
			},
			//规格弹窗开关
			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;
			},
			//领取优惠券
			Getcoupon() {
				uni.navigateTo({
					url: '/pages/coupon/getcoupon'
				});
			},
			//详情页
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: '/pages/product/product?id=' + id
				});
			},
			// 跳转页面
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			//加入购物车
			Addcar(item) {
				let obj = this;
				cartAdd({
						cartNum: '1', //商品数量
						uniqueId: '', //商品标签
						new: 0, //商品是否新增加到购物车1为不加入0为加入
						mer_id: '',
						productId: item.id //商品编号
					})
					.then(function(e) {
						console.log(e,'ddddddddddddddd')
						uni.showToast({
							title: '成功加入购物车',
							type: 'top',
							duration: 500,
							icon: 'none'
						});

						obj.goodsDetail();
					})
					.catch(e => {
						console.log(e);
					});
			},
			goodsDetail() {
				let obj = this;
				// 获取普通商品信息
				console.log('获取商品信息++++++++++++++')
				console.log(obj.goodsType)
				if (obj.goodsType == 0) {
					console.log('获取普通商品信息++++++++++++++')
					goodsDetail({}, this.goodsid).then(function({
						data
					}) {
						obj.list = data;
						console.log(obj.list, '普通商品数据')
						obj.good_list = data.good_list; //保存猜你喜欢列表
						obj.reply = data.reply; //保存评论列表
						let goods = data.storeInfo;
						obj.goodsObjact = goods;
						if (obj.goodsObjact.description != null) {
							obj.description = obj.goodsObjact.description.replace(/\<img/gi,
								'<img class="rich-img"');
						} //小程序商品详情图超出屏幕问题
						obj.imgList = goods.slider_image; //保存轮播图
						obj.specList = data.productAttr; //保存分类列表
						if (Array.isArray(data.productValue) != true) {
							obj.many = 2;
							obj.specList = data.productAttr; //保存产品属性
							obj.productValue = data.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(',');
							console.log(str, 'str');
							// 设置默认值
							obj.actionPrice = obj.productValue[str].price;
							obj.goodsNumberMax = obj.productValue[str].stock;
							obj.actionImage = obj.productValue[str].image;
							obj.uniqueId = obj.productValue[str].unique;
							obj.goodsStore = obj.productValue[str].stock;
						} else {
							obj.many = 1;
							obj.productValue = data.productValue; //保存分类查询数据
							obj.actionPrice = goods.price; //保存默认选中商品价格
							obj.actionImage = goods.image_base; //保存默认选中商品图片
							obj.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
							obj.shopId = data.mer_id; //保存商店id
						}

					});
				}
				if (obj.goodsType == 1) {
					seckillGoods({}, this.goodsid).then(({
						data
					}) => {
						obj.list = data;
						console.log(obj.list, '秒杀商品数据++++++++++')
						// obj.good_list = data.good_list; //保存猜你喜欢列表
						obj.reply = data.reply; //保存评论列表
						let goods = data.storeInfo;
						obj.goodsNumberMax = goods.num
						// console.log('obj.goodsNumberMin+++++++++',obj.goodsNumberMin)
						const time = timeComputed(goods.stop_time * 1000);
						obj.seckillObj = {
							stop: time.tpye, //是否结束
							stopTimeH: time.hours + time.day * 24, //小时
							stopTimeM: time.minutes, //分钟
							stopTimeS: time.seconds, //秒钟
						}

						console.log(obj.seckillObj, '数据');
						// console.log(obj.seckillObj,'obj.seckillObj++++++++++++++++++++++')
						obj.goodsObjact = goods;
						if (obj.goodsObjact.description != null) {
							obj.description = obj.goodsObjact.description.replace(/\<img/gi,
								'<img class="rich-img"');
						} //小程序商品详情图超出屏幕问题
						obj.imgList = goods.images; //保存轮播图
						obj.specList = data.productAttr; //保存分类列表
						if (Array.isArray(data.productValue) != true) {
							console.log('多规格+++++++++++++')
							obj.many = 2;
							obj.specList = data.productAttr; //保存产品属性
							obj.productValue = data.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(',');
							console.log(str, 'str');
							// 设置默认值
							obj.actionPrice = obj.productValue[str].price;
							// obj.goodsNumberMax = obj.productValue[str].quota;
							// console.log(obj.goodsNumberMax,'obj.goodsNumberMax++++++++++++')
							obj.actionImage = obj.productValue[str].image;
							obj.uniqueId = obj.productValue[str].unique;
							obj.goodsStore = obj.productValue[str].stock;
						} else {
							console.log('单规格+++++++++++++')
							obj.many = 1;
							obj.productValue = data.productValue; //保存分类查询数据
							obj.actionPrice = goods.price; //保存默认选中商品价格
							obj.actionImage = goods.image_base; //保存默认选中商品图片
							// obj.goodsNumberMax = goods.quota; //保存默认选中最大可购买商品数量
							console.log(obj.goodsNumberMax, 'obj.goodsNumberMax---------------')
							obj.shopId = data.mer_id; //保存商店id
						}

					})
				}
				if (obj.goodsType == 3) {
					getIntegraDetail({}, this.goodsid).then(({
						data
					}) => {
						obj.list = data;
						console.log(obj.list, '积分商品数据++++++++++')
						// obj.good_list = data.good_list; //保存猜你喜欢列表
						obj.reply = data.reply; //保存评论列表
						let goods = data.storeInfo;
						obj.goodsNumberMax = goods.num
						// console.log('obj.goodsNumberMin+++++++++',obj.goodsNumberMin)
						// obj.seckillObj = timeComputed( goods.stop_time*1000);

						// console.log(obj.seckillObj,'obj.seckillObj++++++++++++++++++++++')
						obj.goodsObjact = goods;
						if (obj.goodsObjact.description != null) {
							obj.description = obj.goodsObjact.description.replace(/\<img/gi,
								'<img class="rich-img"');
						} //小程序商品详情图超出屏幕问题
						obj.imgList = goods.images; //保存轮播图
						obj.specList = data.productAttr; //保存分类列表
						if (Array.isArray(data.productValue) != true) {
							obj.many = 2;
							obj.specList = data.productAttr; //保存产品属性
							obj.productValue = data.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(',');
							console.log(str, 'str');
							// 设置默认值
							obj.actionPrice = obj.productValue[str].price;
							// obj.goodsNumberMax = obj.productValue[str].quota;
							// console.log(obj.goodsNumberMax,'obj.goodsNumberMax++++++++++++')
							obj.actionImage = obj.productValue[str].image;
							obj.uniqueId = obj.productValue[str].unique;
							obj.goodsStore = obj.productValue[str].stock;
						} else {
							obj.many = 1;
							obj.productValue = data.productValue; //保存分类查询数据
							obj.actionPrice = goods.price; //保存默认选中商品价格
							obj.actionImage = goods.image_base; //保存默认选中商品图片
							// obj.goodsNumberMax = goods.quota; //保存默认选中最大可购买商品数量
							console.log(obj.goodsNumberMax, 'obj.goodsNumberMax---------------')
							obj.shopId = data.mer_id; //保存商店id
						}
					})
				}

			},
			// 立即购买
			buy() {
				let obj = this;
				// 创建传值对象
				let data = {
					productId: obj.goodsid, //商品编号
					cartNum: obj.goodsNumber, //商品数量
					uniqueId: obj.uniqueId, //分类编号
					new: 1,
					secKillId: '',
					integralId: '',
				};
				console.log(obj.goodsType, 'obj.goodsType77777777777777777777')
				if(obj.type == 2) {
					data.new = 0
				}
				cartAdd(data)
					.then(function(e) {
						let da = e.data;
						if (obj.type == 1) {
							// 跳转到支付页
							console.log(obj.goodsType, 'this.goodsType456444444444444444')
							uni.navigateTo({
								url: '/pages/order/createOrder?id=' + da.cartId + '&goodsType=' + obj.goodsType
							});
						}
						if (obj.type == 2) {
							uni.showToast({
								title: '成功加入购物车',
								type: 'top',
								duration: 2000,
								icon: 'none'
							});
							obj.goodsDetail();
						}
						obj.toggleSpec()
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 阻止触发上级事件
			stopPrevent() {},
			//选择数量
			numberChange(e) {
				console.log(e)
				this.goodsNumber = e.number
			},
			callf() {
				this.show = true;
			},
			onTap() {
				console.log(this.callf);

				if (!this.callf) return;
				this.close();
			},
			close() {
				this.show = false;
			},
			closes() {
				this.specClass = 'none';
			},
		}
	};
</script>

<style lang="scss" scoped>
	/*  弹出层 */
	.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: 20vh;
			border-radius: 10rpx 10rpx 0 0;
			background-color: #fff;

			.btn {
				height: 66rpx;
				line-height: 66rpx;
				border-radius: 100rpx;
				background: #6EAB4E;
				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%);
			}
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 25rpx 30rpx;
	
		.a-t {
			display: flex;
	
			image {
				width: 170rpx;
				height: 170rpx;
				flex-shrink: 0;
				border-radius: 8rpx;
				background-color: #eee;
			}
	
			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24rpx;
				font-size: $font-sm + 2rpx;
				color: $font-color-base;
				line-height: 42rpx;
				width: 75%;
				position: relative;
				.right-img {
					width: 37rpx;
					height: 37rpx;
					position: absolute;
					right: 0;
					top: 20rpx;
					// background-color: red;
				}
				.price {
					position: absolute;
					bottom: 0;
					font-size: $font-lg;
					color: $uni-color-primary;
					margin: 10rpx 0rpx;
					font-size: 60rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ef041f;
					text {
						font-size: 30rpx;
					}
				}
	
				.name {
					width: 350rpx;
					font-size: 32rpx;
					color: $font-color-dark;
					height: 50rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: block;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1d2023;
				}
	
				.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: 10rpx;
				min-width: 60rpx;
				height: 60rpx;
				padding: 0 20rpx;
				font-size: $font-base;
				color: $font-color-dark;
			}
	
			.selected {
				background: #fceff1;
				color: #f35768;
				border: 1px solid #f35768;
			}
		}
	}

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

	page {
		background: #f0f0f0;
	}

	//秒杀、拼团底部高度
	.contentBottomHeight {
		height: 120rpx;
	}

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

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

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

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

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

	.cho-num {
		margin: 20rpx 0;
		width: 750rpx;
		height: 83rpx;
		background: #ffffff;
		padding: 29rpx 24rpx 30rpx 25rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #606972;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30rpx;
		height: 110rpx;
		background: #fff;

		.refund {
			font-size: 30rpx;
			color: $font-color-dark;
			padding-left: 128rpx;
		}

		.noRefund {
			font-size: 30rpx;
			color: $font-color-light;
			padding-left: 128rpx;
		}

		.tit {
			flex-shrink: 0;
			width: 120rpx;
			font-size: 30rpx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
			padding-left: 128rpx;

			&.payColor {
				color: $color-red;
			}
		}

		.iconlocation {
			font-size: 36rpx;
			color: $font-color-light;
		}
	}

	.shop-info {
		width: 750rpx;
		height: 140rpx;
		margin: 20rpx 0;
		padding: 28rpx 24rpx 22rpx 16rpx;
		background-color: #fff;
		display: flex;
		position: relative;

		.shop-logo {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;

			// background-color: red;
			// overflow: hidden;
			image {
				width: 90rpx;
				height: 90rpx;
			}
		}

		.shop-base {
			padding-left: 15rpx;
			// width: 376rpx;
			width: 100%;
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			line-height: 1;

			.base-name {
				padding-top: 14rpx;
				font-size: 30rpx;
				padding-bottom: 16rpx;
				font-weight: 500;
				color: #333333;
			}
		}

		.shop-dis {
			padding-top: 31rpx;
			position: absolute;
			font-size: 24rpx;
			font-weight: 500;
			color: #901b21;
			// line-height: 140rpx;
			right: 24rpx;

			image {
				padding-right: 5rpx;
				width: 21rpx;
				height: 21rpx;
			}
		}
	}

	.good-title {
		background-color: #fff;
		// height: 142rpx;
		padding: 24rpx 19rpx 24rpx 34rpx;
		line-height: 1.5;
		font-size: 36rpx;
		font-weight: 800;
		color: #333333;
	}

	.introduce-section {
		position: relative;
		background: #fff;
		padding: 35rpx 0rpx;
		padding-left: 20rpx;

		.title {
			font-size: 32rpx;
			color: $font-color-dark;
			padding-right: 34rpx;

			.tip-o {
				color: #ff3334;
				padding-left: 15rpx;
			}
		}

		.shareDate {
			position: absolute;
			top: 25rpx;
			right: 10rpx;
			font-size: 26rpx;
			color: #3d3f46;
			border-radius: 15rpx;
			background-color: #ffffff;
			height: 60rpx;
			line-height: 60rpx;

			&::after {
				border: none;
			}
		}

		.share-img {
			width: 30rpx;
			height: 30rpx;
			position: relative;
			top: 5rpx;
			left: 0;
			margin-right: 10rpx;
		}

		.info {
			color: #999999;
			font-size: 26rpx;
			padding-bottom: 15rpx;
		}

		.progress-box {
			width: 260rpx;
			position: relative;
			margin-top: 15rpx;
			line-height: 10px;

			.number {
				font-size: 17rpx;
				position: absolute;
				z-index: 999;
				top: 3rpx;
				left: 15rpx;
				color: #ffffff;
			}
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64rpx;
			padding: 10rpx 0;
			font-size: 27rpx;
			color: #FF0000;
		}

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

			.text {
				padding-left: 5rpx;
				color: #b0b0b0;
				font-size: 22rpx !important;
			}
		}

		.price-green {
			color: #2dbd59;
			font-size: 28rpx !important;

			text {
				background: #2dbd59;
				color: #ffffff;
				padding: 0rpx 10rpx;
				border-radius: 5rpx;
				font-size: 22rpx !important;
				margin-left: 15rpx;
			}
		}

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

	.dhsm {
		display: flex;
		margin: 20rpx 0;
		background-color: #fff;
		padding: 34rpx 104rpx 30rpx 24rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-right: 32rpx;
			flex-shrink: 0;
		}

		.info {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #8A8A8A;
			line-height: 38rpx;
		}
	}

	.price-box-jf {
		color: #901b21;
		display: flex;
		align-items: baseline;
		height: 64rpx;
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FF0000;

		.price {
			font-size: 50rpx;
		}

		image {
			height: 30rpx;
			width: 30rpx;
		}

		.jf {
			font-size: 30rpx;

		}
	}
	.mun-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.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;
		}
	}
</style>