shicai/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" style="width: 100%;">
				<view class="title-box">
					<text class="price-tip">¥</text>
					<text class="price">{{ goodsObjact.price }}</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 seckill-box-title" v-if="goodsType == 2">
			<view class="title flex" style="width: 100%;">
				<view class="title-box flex_item">
					<view class="title-o">
						<view class="price-tip">¥<text class="price">1.9</text></view>
					</view>
					<view class="title-t">
						<view class="peice-out">原价￥9.9</view>
						<view class="num">10人起团</view>
					</view>
				</view>
				<view class="group flex">
					<image src="/static/img/img064.png"></image>
					<view class="text">达人团</view>
				</view>
				<view class="timeStop">
					<view class="timeStop-name">距离结束</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 clamp" v-if="goodsType == 2 ">111<text class="tip-o">截单后8小时到货</text></text>
			<text class="title clamp" v-if="goodsType == 0 ">{{ goodsObjact.store_name }}</text>
			<button open-type="share" class="shareDate">
				<image class="share-img" src="/static/img/img57.png"></image>
				好物推荐
			</button>
			<text class="title" v-if="goodsType == 1">{{ goodsObjact.title }}</text>
			<text class="info" v-if="goodsObjact.store_info">{{ goodsObjact.store_info }}</text>
			<view class="progress-box" v-if="goodsType == 0">
				<progress :percent="goodsObjact.percent | parseIntTo" activeColor="#F65527" font-size="10" show-info border-radius="5" stroke-width="9" />
				<view class="number">剩余{{ goodsObjact.percent | parseIntTo }}%</view>
			</view>
			<view class="price-box" v-if="goodsType == 0">
				<text class="price-tip">¥</text>
				<view class="price">
					{{ goodsObjact.price }}
					<text class="text">/份</text>
					<text class="m-price" v-if="goodsObjact.ot_price > goodsObjact.price">¥{{ goodsObjact.ot_price }}</text>
				</view>
			</view>
			<view class="price-green">
				￥{{ goodsObjact.ot_price }}
				<text>市场价</text>
			</view>
			<!-- <view class="green-card flex" v-if="userInfo != ''">
				<view class="card flex_item">
					<view class="card-img"><image src="/static/img/img20.png"></image></view>
					<view class="card_tpl" v-if="userInfo.level_info.grade > 99">
						美卡已节省<text>{{(goodsObjact.price - goodsObjact.ot_price).toFixed(2)}}</text>元
					</view>
					<view class="card_tpl" v-if="userInfo.level_info.grade < 100">开通美卡可节省<text>{{(goodsObjact.price - goodsObjact.ot_price).toFixed(2)}}</text>元</view>
				</view>
				<view class="card-more" @click="ToKaitong" v-if="userInfo.level_info.grade < 100">点击开通美卡<text class="iconfont iconenter"></text></view>
				<view class="card-more" @click="Tochakan" v-if="userInfo.level_info.grade > 99">查看我的美卡<text class="iconfont iconenter"></text></view>
			</view> -->
		</view>
		<view class="c-list">
			<view class="c-row b-b">
				<text class="tit">配送</text>
				<view class="bz-list con">立即下单 ，预计最快第二天8.30-9:30送达</view>
			</view>
			<view class="c-row b-b" @click="Getcoupon">
				<text class="tit">优惠券</text>
				<text class="con t-r red">领取优惠券</text>
				<text class="iconfont iconenter"></text>
			</view>
			<view class="c-row b-b">
				<text class="tit">服务</text>
				<view class="bz-list con">
					<text>食材质检 ·</text>
					<text>无接触配送到门口</text>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="guess-item">
			<view class="guess">猜你喜欢</view>
			<view class="guess-scroll flex_item" scroll-x>
				<view class="scroll-list" v-for="ls in good_list" @click="navToDetailPage(ls)">
					<view class="scoll-img"><image :src="ls.image"></image></view>
					<view class="scoll-name ellipsis">{{ ls.store_name }}</view>
					<view class="price-list flex">
						<view class="tpl">
							<view class="red-price">
								¥
								<text>{{ ls.price }}</text>
							</view>
							<view class="grey-price">¥{{ ls.ot_price }}</view>
						</view>
						<view class="img position-relative" @click.stop="Addcar(ls)">
							<image src="/static/img/img21.png"></image>
							<view class="corner" v-if="ls.cart_num > 0">
								<text>{{ ls.cart_num }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评价 -->
		<view class="eva-section" v-if="reply" @click="navTo('/pages/product/reply?id=' + goodsid)">
			<view class="e-header">
				<text class="tit">评价</text>
				<text>({{ list.replyCount }})</text>
				<text class="tip">好评率 {{ list.replyChance }}%</text>
				<text class="iconfont iconenter"></text>
			</view>
			<view class="eva-box">
				<image class="portrait" :src="reply.avatar" mode="aspectFill"></image>
				<view class="right">
					<text class="name">{{ reply.nickname }}</text>
					<text class="con">{{ reply.comment }}</text>
					<view class="con_box">
						<view class="con_image" v-for="item in reply.pics"><image :src="item"></image></view>
					</view>
					<view class="bot">
						<text class="attr"></text>
						<text class="time">{{ reply.add_time }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="c-list">
			<view class="c-row title b-b">规格</view>
			<view class="c-row b-b">
				<text class="tit">净含量</text>
				<text class="con t-r">{{ goodsObjact.net_quantity }}</text>
			</view>
			<view class="c-row b-b">
				<text class="tit">保存条件</text>
				<text class="con t-r">{{ goodsObjact.storage_condition }}</text>
			</view>
			<view class="c-row b-b">
				<text class="tit">保质期</text>
				<text class="con t-r">{{ goodsObjact.expiration_date }}</text>
			</view>
		</view>
		<view class="detail-desc">
			<view class="d-header"><text>图文详情</text></view>
			<rich-text class="detail-centent" :nodes="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 iconhomefill"></text>
				<text>首页</text>
			</navigator> -->
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn"><image src="/static/img/img23.png"></image></navigator>
			<!-- <view class="p-b-btn" :class="{ active: goodsObjact.userCollect }" @click="toFavorite(goodsObjact)">
				<text class="iconfont iconlikefill"></text>
				<text>收藏</text>
			</view> -->
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="buy(2)">加入购物车</button>
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy(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="buy(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-pinks">
				<!-- <view class="goods-pay-o">本单发起人奖金<text>2元</text></view>
				<view class="goods-pay-t">本单销售额佣金<text>？%</text></view> -->
			</view>
			<view class="goods-pay bg-danger" @click="buy(1)">
				<!-- <view class="goods-buttom-money">¥{{ goodsObjact.price }}</view> -->
				<view class="goods-buttom">一键开团</view>
			</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';
import { mapState } from 'vuex';
import store from '@/store/index.js';
import { saveUrl } from '@/utils/loginUtils.js';
// #ifdef H5
import { weixindata } from '@/utils/wxAuthorized';
// #endif
export default {
	components: {
		share,
		uniNumberBox,
		uniCountdown
	},
	data() {
		return {
			reply: '', //评论
			list: '', //商品详情的数据
			type: 1, //默认支付方式add为
			goodsNumber: 1, //购买数量
			goodsid: '', //商品id
			description: '', //商品描述
			specClass: 'none', //显示隐藏弹窗
			goodsObjact: {}, //保存商品数据
			//图片循环
			imgList: [],
			specList: [],
			// 对比对象
			productValue: [], //商品规格列表
			actionPrice: 0, //默认选中商品价格
			actionImage: '', //默认选中图片
			good_list: '', //猜你喜欢列表
			uniqueId: '', //选中的商品分类
			specSelected: [], //选中的分类
			specSelectedName: '', //选中分类名称
			goodsNumberMax: 0, //最大可购买数量
			system_store: {}, //商店信息
			shopId: '', //商店id
			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: '' //秒
			},
			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.spread) {
			// 存储邀请人
			uni.setStorageSync('spread', options.spread);
		}
		saveUrl();
		// 判断是否为秒杀商品
		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();
		}
		// 注册邀请信息
		// #ifdef H5
		let bool = uni.getStorageSync('weichatBrowser') || '';
		if (bool) {
			weixindata();
		}
		// #endif
	},
	computed: {
		...mapState(['weichatObj', 'baseURL', 'urlFile'])
	},
	methods: {
		navToProductGoods() {
			uni.redirectTo({
				url: '/pages/product/product?id=' + this.goodsObjact.product_id
			});
		},
		//领取优惠券
		Getcoupon() {
			uni.navigateTo({
				url: '/pages/coupon/getcoupon'
			});
		},
		//详情页
		navToDetailPage(item) {
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		},
		//开通美卡
		ToKaitong() {
			uni.showToast({
				title: '暂未开通',
				type: 'top',
				duration: 500,
				icon: 'none'
			});
			// uni.navigateTo({
			// 	url: '/pages/user/card'
			// });
		},
		//查看美卡
		Tochakan() {
			// uni.navigateTo({
			// 	url: '/pages/user/renew'
			// });
			uni.showToast({
				title: '暂未开通',
				type: 'top',
				duration: 500,
				icon: 'none'
			});
		},
		onShareAppMessage(options) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let url = currentPage.route; //当前页面url
			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
			let shareObj = {};
			console.log(this.userInfo.uid,55)
			if (this.goodsType == 0) {
				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 为详细失败信息
						}
					}
				};
			}
			if (this.goodsType == 1) {
				shareObj = {
					title: this.goodsObjact.title, // 默认是小程序的名称(可以写slogan等)
					path: url + '?id=' + item.id + '&type=' + item.type + '&stoptime=' + item.stoptime +'&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 为详细失败信息
						}
					}
				};
			} 
			console.log(shareObj)
			// 返回shareObj
			// 　　// 来自页面内的按钮的转发
			// 　　if( options.from == 'button' ){
			// 　　　　// 此处可以修改 shareObj 中的内容
			// 		if(this.goodsType == 0){
			// 			path: url+'?id='+item.id,   // 默认是当前页面，必须是以‘/’开头的完整路径
			// 			path: url+'?id='+item.id,
			// 		}
			// 		if(this.goodsType == 1){
			// 			path: url+'?id='+item.id+'&type='+item.type+'&stoptime='+item.stoptime,// 默认是当前页面，必须是以‘/’开头的完整路径
			// 			path: url+'?id='+item.id,
			// 		}
			//
			// 　　}
			return shareObj;
		},
		navTo(url) {
			uni.navigateTo({
				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;
			goodsDetail({}, this.goodsid).then(function({ data }) {
				obj.list = data;
				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; //保存分类列表
				obj.productValue = data.productValue; //保存分类查询数据
				obj.actionPrice = goods.price; //保存默认选中商品价格
				obj.actionImage = goods.image_base; //保存默认选中商品图片
				obj.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
				obj.shopId = data.mer_id; //保存商店id
				// #ifdef H5
				obj.$nextTick(function() {
					obj.shareDate();
				});
				// #endif
			});
		},
		// 获取拼团商品详情
		groupGoods() {
			let obj = this;
			groupGoods({}, this.goodsid).then(function({ data }) {
				obj.pink = data.pink[0]; //保存拼团信息
				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.images; //保存轮播图
				obj.specList = data.productAttr; //保存分类列表
				obj.productValue = data.productValue; //保存分类查询数据
				obj.actionPrice = goods.price; //保存默认选中商品价格
				obj.actionImage = goods.image_base; //保存默认选中商品图片
				obj.goodsNumberMax = 1; //保存默认选中最大可购买商品数量
				obj.shopId = data.mer_id; //保存商店id
				// #ifdef H5
				obj.shareDate();
				// #endif
			});
		},
		// 获取秒杀商品详情
		seckillGoods() {
			let obj = this;
			seckillGoods({}, this.goodsid).then(function({ data }) {
				let goods = data.storeInfo;
				obj.list = data;
				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; //保存分类列表
				obj.productValue = data.productValue; //保存分类查询数据
				obj.actionPrice = goods.price; //保存默认选中商品价格
				obj.actionImage = goods.image_base; //保存默认选中商品图片
				obj.goodsNumberMax = goods.num; //保存默认选中最大可购买商品数量
				obj.shopId = data.mer_id; //保存商店id
				// #ifdef H5
				obj.shareDate();
				// #endif
			});
		},
		// 计算倒计时时间
		timeComputed(da, ar) {
			let obj = ar;
			// 设置到期时间
			let time = new Date(da);
			// 获取当前时间
			let actTime = new Date();
			// 获取到期时间具体值
			let tH = time.getHours();
			let tM = time.getMinutes();
			let tS = time.getSeconds();
			// 获取当前时间具体值
			let aH = actTime.getHours();
			let aM = actTime.getMinutes();
			let aS = actTime.getSeconds();
			// 计算时间，保存需要多少时间到期
			obj.stopTimeH = tH - aH;
			obj.stopTimeM = tM - aM;
			obj.stopTimeS = tS - aS;
		},
		// #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(/[\?,&]{0,1}from=singlemessage/g, '');
				let data = {
					link: url, // 分享链接
					imgUrl: obj.goodsObjact.image, // 分享图标
					desc: obj.goodsObjact.store_info,
					title: obj.goodsObjact.store_name,
					success: function() {}
				};
				obj.weichatObj.updateAppMessageShareData(data);
				obj.weichatObj.updateTimelineShareData(data);
			}
		},
		// #endif
		// sharelist() {
		// 	let obj = this;
		// 	// 保存分享人id链接
		// 	let url = window.location.href + '&spread=' + this.userInfo.uid;
		// 	// 判断是否微信浏览器
		// 	let bool = uni.getStorageSync('weichatBrowser') || '';
		// 	if (bool) {
		// 		// 过滤微信强制添加的链接地址
		// 		url = url.replace(/[\?,&]{0,1}from=singlemessage/g, '');
		// 		console.log(url)
		// 		let data = {
		// 			link: url, // 分享链接
		// 			imgUrl: obj.goodsObjact.image, // 分享图标
		// 			desc: obj.goodsObjact.store_info,
		// 			title: obj.goodsObjact.store_name,
		// 			success: function() {}
		// 		};
		// 		console.log(data)
		// 		obj.weichatObj.updateAppMessageShareData(data);
		// 		obj.weichatObj.updateTimelineShareData(data);
		// 	}
		// },
		// #en
		// 购买数量变化
		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';
			}
			// 判断是否为数字
			if (typeof str == 'number') {
				// 保存当前购买类型
				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.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,
						icon: 'none'
					});
				});
			} else {
				collectAdd({ id: obj.goodsid, category: 'product' }).then(function(e) {
					uni.showToast({
						title: '成功加入收藏',
						type: 'top',
						duration: 1500,
						icon: 'none'
					});
				});
			}
		},
		// 立即购买
		buy(item) {
			let obj = this;
			obj.type = item;
			// 创建传值对象
			let data = {
				cartNum: obj.goodsNumber, //商品数量
				uniqueId: obj.uniqueId, //商品标签
				new: '1', //商品是否新增加到购物车1为不加入0为加入
				mer_id: obj.shopId
			};
			// 判断是否为加入购物车
			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(e) {
					let da = e.data;
					if (obj.type == 1) {
						// 跳转到支付页
						uni.navigateTo({
							url: '/pages/order/createOrder?id=' + da.cartId
						});
					}
					if (obj.type == 2) {
						uni.showToast({
							title: '成功加入购物车',
							type: 'top',
							duration: 2000,
							icon: 'none'
						});
						obj.goodsDetail();
						obj.toggleSpec();
					}
				})
				.catch(e => {
					console.log(e);
				});
		},
		// 阻止触发上级事件
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
page {
	background: #f0f0f0;
}
//秒杀、拼团底部高度
.contentBottomHeight {
	height: 110rpx;
}
//默认商品底部高度
.goodsBottom {
	height: 160rpx;
}
.iconenter {
	font-size: $font-base + 2rpx;
	color: #888;
}
.rich-img {
	width: 100% !important;
	height: auto;
}
.carousel {
	/* #ifdef APP-PLUS */
	padding-top: var(--status-bar-height);
	/* #endif */
	height: 750rpx;
	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%;
		}
	}
}
// 秒杀
.seckill-box-title {
	background: linear-gradient(90deg, rgba(239, 78, 81, 1) 0%, rgba(244, 113, 59, 1) 100%) !important;
	.price,
	.price-tip,
	.m-price {
		color: #ffffff !important;
		font-size: 24rpx;
	}
	.price-tip {
		font-size: $font-base;
	}
	.price {
		font-size: 45rpx !important;
		font-weight: bold;
	}
}
// 底部拼团、秒杀支付按钮
.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-o{
			background-color: #FF4434;
			padding: 5rpx 0rpx;
			text{
				padding: 5rpx 10rpx;
				background-color: #FEEEEE;
				color: #FF0919;
			}
		}
		.goods-pay-t{
			
		}
	}
	.bg-pinks{
		background-color:#FEEEEE;
	}
	.goods-pay-stop,
	.goods-pay {
		padding: 15rpx 0;
		height: 100%;
		width: 100%;
	}
	.goods-pay-stop {
		background: $color-gray;
		line-height: 70rpx;
	}
}
/* 标题简介 */
.introduce-section {
	position: relative;
	background: #fff;
	padding: 35rpx 0rpx;
	padding-left: 35rpx;
	.title {
		font-size: 32rpx;
		color: $font-color-dark;
		height: 50rpx;
		width: 70%;
		.tip-o{
			color: #FF3334;
			padding-left: 15rpx;
		}
	}
	.title-box{
		color: #FFFFFF;
		.title-o{
			line-height: 75rpx;
			.price{
				font-size: 70rpx !important;
			}
		}
		.title-t{
			padding-left: 20rpx;
			font-size: 24rpx !important;
			.peice-out{
				text-decoration: line-through;
			}
			.num{
				margin-top: 10rpx;
				background-color: #FFFFFF;
				color: #FF3A56;
				border-radius: 8rpx;
			}
		}
		
	}
	.group{
		color: #FFFFFF;
		image{
			width: 55rpx;
			height: 45rpx;
		}
		.text{
			font-size: 40rpx !important;
			padding-left: 10rpx;
		}
	}
	.timeStop{
		width: 30%;
		background-color: #FEEEEE;
		height: 120rpx;
		padding-left: 25rpx;
		.timeStop-name{
			padding-top: 15rpx;
			width: 100%;
			text-align: center;
			color: #FF3334;
			font-size: 20rpx;
		}
	}
	.shareDate {
		position: absolute;
		top: 25rpx;
		right: 25rpx;
		font-size: 26rpx;
		color: #3d3f46;
		border-radius: 15rpx;
		background-color: #ffffff;
		height: 60rpx;
		line-height: 60rpx;
	}
	.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: 26rpx;
		color: $uni-color-primary;
	}
	.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;
	}
	.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;
		}
	}
}
.green-card {
	width: 100%;
	margin-top: 35rpx;
	border-radius: 35rpx;
	background: #f5f5f5;
	padding: 15rpx 25rpx;
	font-size: 26rpx;
	.card {
		background: linear-gradient(-38deg, rgba(68, 84, 117, 1), rgba(68, 84, 117, 1));
		color: #ffffff;
		padding: 10rpx 15rpx;
		border-radius: 35rpx;
		.card-img {
			width: 32rpx;
			height: 28rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.card_tpl {
			margin-left: 10rpx;
			text {
				color: #f0c55f;
			}
		}
	}
	.card-more {
		color: #1a273d;
	}
}
.c-list {
	font-size: $font-sm + 2rpx;
	color: $font-color-base;
	background: #fff;
	.title {
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
	}
	.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: #fb6d24;
	}
}
//猜你喜欢
.guess-item {
	padding: 25rpx 25rpx;
	background: #ffffff;
	margin-bottom: 15rpx;
	padding-bottom: 45rpx !important;
	.guess {
		color: #000000;
		font-size: 35rpx;
		font-weight: 500;
		padding-bottom: 25rpx;
	}
	.guess-scroll {
		width: 100%;
		font-size: 24rpx;
		overflow: hidden;
		overflow-x: auto;
		justify-content: flex-start;
		.scroll-list {
			border: 2rpx solid #f0f0f0;
			border-radius: 25rpx;
			margin-right: 15rpx;
			.scoll-img {
				width: 227rpx;
				border-top-right-radius: 25rpx;
				border-top-left-radius: 25rpx;
				height: 227rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.scoll-name {
				height: 80rpx;
				width: 227rpx;
				font-size: 22rpx;
				padding: 15rpx 15rpx;
			}
			.price-list {
				padding: 25rpx 15rpx;
				padding-right: 25rpx;
				.tpl {
					.red-price {
						color: #f31d29;
						text {
							font-size: 35rpx !important;
							font-weight: bold;
						}
					}
					.grey-price {
						text-decoration: line-through;
						color: #999999;
						font-size: 10px !important;
					}
				}
				.img {
					width: 45rpx;
					height: 45rpx;
					image {
						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;
	/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;
			margin-top: -40rpx;
			border-radius: 8rpx;
		}
		.right {
			display: flex;
			flex-direction: column;
			padding-left: 24rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-base;
			line-height: 42rpx;
			.price {
				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;
		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: #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;
			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;
	bottom: 0rpx;
	z-index: 95;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	height: 120rpx;
	background-color: #ffffff;
	// 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: 96rpx;
		height: 80rpx;
		.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;
		}
		image {
			width: 56rpx;
			height: 58rpx;
		}
	}
	.action-btn-group {
		display: flex;
		height: 76rpx;
		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: 270rpx;
			height: 100%;
			font-size: $font-base;
			padding: 0;
			border-radius: 0;
			background: transparent;
			&.buy-now-btn {
				background-color: #303e49;
			}
			&.add-cart-btn {
				background-color: $base-color;
			}
		}
	}
}
</style>