mnsx/pages/product/product.vue

<template>
	<view class="container">
		<!-- 轮播图 -->
		<top-swiper :imgList="imgList"></top-swiper>
		<view class="sckill-top" v-if="isSckill">
			<view class="bg"><image src="https://zccy.liuniu946.com/static/img/base-sckill.png" mode=""></image></view>
			<view class="top-left">
				<view class="left-top">限时秒杀价</view>
				<view class="left-btm">
					￥
					<text class="now-pri">{{ goodsObjact.price }}</text>
					<text class="old-pri">￥{{ goodsObjact.ot_price }}</text>
				</view>
			</view>
			<view class="top-right">
				<view class="right-top">距离本场结束还剩</view>
				<uni-countdown
					class="timeBox"
					color="#901b21"
					background-color="#fff"
					splitor-color="#fff"
					:show-day="true"
					:hour="seckillObj.stopTimeH"
					:minute="seckillObj.stopTimeM"
					:second="seckillObj.stopTimeS"
				></uni-countdown>
			</view>
		</view>
		<!-- 标题 -->
		<view class="introduce-section" v-if="goodsType == 0">
			<button class="shareDate" style="border: none;" open-type="share"><image class="share-img" src="../../static/icon/share.png"></image></button>
			<view class="price-box">
				<text class="price-tip">¥</text>
				<view class="price">
					{{ actionPrice }}
					<text class="m-price" v-if="actionPrice * 1 < goodsObjact.ot_price * 1">¥{{ 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 == 3">
			<button class="shareDate" style="border: none;" open-type="share"><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;" open-type="share"><image class="share-img" src="../../static/icon/share.png"></image></button>
			<view class="price-box-jf">
				<text class="price-tip">¥</text>
				<view class="price">
					{{ goodsObjact.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 || goodsType == 3">
			<view class="title">{{ dhtitle }}</view>
			<view class="info" v-html="dhcontent"></view>
		</view> -->
		<!-- 评价 -->
		<!-- <estimate @navTo="navTo('/pages/product/reply?id=' + goodsObjact.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" :goodsType="goodsType"></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">{{ goodsObjact.title }}</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="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" 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 { getArticleDetail } from '@/api/index.js';
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 freshDetail from './common/freshDetail.vue';
// 图文详情
import contentText from './common/contentText.vue';
// 底部按钮
import productBottom from './common/productBottom.vue';
// 猜你喜欢
// import guessLike from './common/guessLike.vue';
// 评价
import { timeComputed } from '@/utils/rocessor.js';
import uniNumberBox from '@/components/uni-number-box.vue';
export default {
	components: {
		// guessLike,
		topSwiper,
		// productContent,
		// freshDetail,
		contentText,
		productBottom,
		uniNumberBox
	},
	data() {
		return {
			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：积分  3兑换券
			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: '',
			dhtitle: '', //兑换说明标题
			dhcontent: '' //兑换说明
		};
	},
	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;
		this.goodsType = options.type * 1 || 0;
		if (this.goodsType == 3) {
			//获取兑换券的兑换说明
			// this.getDhsm(2);
		} else if (this.goodsType == 2) {
			// this.getDhsm(1);
		}

		if (options.type == 1) {
			obj.isSckill = true;
		}
		if (options.scene) {
			// 存储小程序邀请人
			uni.setStorage({
				key: 'spread_code',
				data: options.scene
			});
		}
		// // 判断有无人邀请
		// if (options.scene) {
		// 	// 存储邀请人
		// 	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 name = this.goodsObjact.store_name || this.goodsObjact.title;
		let shareObj = {
			title: name + '   价格：' + this.actionPrice, // 默认是小程序的名称(可以写slogan等)
			path: url + '?id=' + item.id + '&scene=' + this.userInfo.uid + '&type=' + this.goodsType, // 默认是当前页面，必须是以‘/’开头的完整路径
			imageUrl: this.goodsObjact.image,
			success: function(res) {
				console.log(shareObj.path, 'path+++++++++++++++++++');
				// 转发成功之后的回调
				if (res.errMsg == 'shareAppMessage:ok') {
				}
			},
			fail: function() {
				// 转发失败之后的回调
				if (res.errMsg == 'shareAppMessage:fail cancel') {
					// 用户取消转发
				} else if (res.errMsg == 'shareAppMessage:fail') {
					// 转发失败，其中 detail message 为详细失败信息
				}
			}
		};

		return shareObj;
	},
	methods: {
		//获取兑换说明
		getDhsm(id) {
			getArticleDetail({}, id).then(({ data }) => {
				console.log(data);
				this.dhcontent = data.content;
				this.dhtitle = data.title;
			});
		},
		//选择规格
		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) {
			console.log(type, 'ddddddddddddddddddddddddddddddddddddddddd');
			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) {
					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 || obj.goodsType == 3) {
				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; //保存评论列表
					console.log(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;
						console.log(obj.actionPrice, 'obj.actionPrice');
						obj.goodsNumberMax = obj.productValue[str].stock;
						if (obj.goodsType == 3) {
							obj.goodsNumberMax = 1;
						}
						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; //保存默认选中最大可购买商品数量
						if (obj.goodsType == 3) {
							obj.goodsNumberMax = 1;
						}
						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 == 2) {
				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: 0,
				secKillId: '',
				integralId: '',
				free_check: 0
			};
			if (obj.type == 2) {
				console.log('加入购物车');
				data.new = 0;
			} else if (obj.type == 1) {
				data.new = 1;
			}
			console.log(obj.goodsType, 'obj.goodsType77777777777777777777');
			if (obj.goodsType == 1) {
				data.secKillId = obj.goodsObjact.id;
				data.new = 1;
			}
			if (obj.goodsType == 2) {
				data.new = 1;
				data.integralId = obj.goodsObjact.id;
			}
			if (obj.goodsType == 3) {
				data.new = 1;
				data.free_check = 1;
			}
			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;
		}
	}
};
</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: 35vh;
		border-radius: 10rpx 10rpx 0 0;
		background-color: #fff;

		.btn {
			height: 66rpx;
			line-height: 66rpx;
			border-radius: 100rpx;
			background: #901b21;
			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;
		}

		.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: #901b21;
				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: $font-color-dark;
		}

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

//默认商品底部高度
.goodsBottom {
	height: 160rpx;
}
page {
	background: #f0f0f0;
}
//秒杀、拼团底部高度
.contentBottomHeight {
	height: 130rpx;
}
//默认商品底部高度
.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;
		}
	}
}
.sckill-top {
	width: 750rpx;
	height: 165rpx;
	position: relative;
	top: -40rpx;
	margin-bottom: -40rpx;
	display: flex;
	justify-content: space-between;
	.bg {
		width: 750rpx;
		height: 165rpx;
		position: absolute;
		left: 0;
		top: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.top-left {
		position: relative;
		z-index: 10;
		line-height: 1;
		.left-top {
			padding: 35rpx 0 23rpx 22rpx;
			font-size: 44rpx;
			font-weight: 500;
			color: #ffffff;
			line-height: 1;
		}
		.left-btm {
			line-height: 1;
			font-size: 30rpx;
			font-weight: 500;
			padding-left: 25rpx;
			// text-decoration: line-through;
			color: #ffffff;
			.now-pri {
				display: inline-block;
				padding-right: 8rpx;
				font-size: 44rpx;
				font-weight: 800;
				color: #ffffff;
			}
			.old-pri {
				text-decoration: line-through;
			}
		}
	}
	.top-right {
		position: relative;
		z-index: 10;
		padding: 67rpx 20rpx 18rpx 0;
		.right-top {
			font-size: 22rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 1;
			padding-bottom: 8rpx;
		}
	}
}
.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: #ef041f;
	}
	.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 50rpx 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: #901b21;
	.price {
		font-size: 50rpx;
	}
	image {
		height: 30rpx;
		width: 30rpx;
	}
	.jf {
		font-size: 30rpx;
	}
}
.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>