MeiMeiZhuan/pages/product/product.vue

<template>
	<view class="container" v-if="showCard">
		<!-- 轮播图 -->
		<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="level_row" v-if="level_name != ''">
			<text class="level_name">{{ level_name }}折后</text>
			<text>￥</text>
			<text class="level_price">{{ level_price }}</text>
		</view>
		<view class="introduce-section">
			<view class="introduce-price flex1">
				<view class="price">
					<view class="price-left">
						<view class="left-1">¥</view>
						<view class="left-2">{{ actionPrice }}</view>
					</view>
					<view class="price-right" v-if="originPrice != '' && option.types != 'libao'">¥{{ originPrice }}</view>
					<view class="price-right" v-if="originPrice != '' && option.types == 'libao'">¥{{ ot_price }}</view>
				</view>
				<!-- #ifndef APP-PLUS -->
				<!-- <button class="top_img" open-type="share"><image class="share-img" src="../../static/label/share.png"></image></button> -->
				<!--<view class="share" @click="open"><image src="../../static/label/share.png"></image></view>
				<view class="mask" v-show="show"><image @click="onTap" src="../../static/img/shareimg.png"></image></view> -->
				<!-- #endif -->

				<!-- #ifdef APP-PLUS -->
				<!-- <view class="share" @click="shareEvent"><image src="../../static/label/share.png"></image></view> -->
				<!-- #endif -->
			</view>
			<view class="title">{{ goodsObjact.store_name }}</view>
			<view class="bot-row flex1">
				<view>快递：¥ {{ goodsObjact.postage }}</view>
				<view>剩余：{{ goodsObjact.stock }}件</view>
				<view>销量：{{ goodsObjact.fsales }}</view>
			</view>
		</view>
		<view class="shareDate" @click="share"><image src="https://xipin.liuniu946.com/img/share.png"></image></view>
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="share-section" @click="shareEvent">
			<view class="share-icon">
				<text class="iconfont iconfavorfill"></text>
				返
			</view>
			<text class="tit">该商品分享可领49减10红包</text>
			<text class="iconfont iconprompt"></text>
			<view class="share-btn">
				立即分享
				<text class="iconfont iconenter"></text>
			</view>
		</view> -->
		<!-- #endif -->
		<!-- 优惠 -->
		<view class="discount flex-start">
			<view class="discount-1 ">包邮</view>
			<view class="discount-2 flex-start">{{ temp.name }},不满足条件，邮费6元</view>
		</view>
		<!-- 规格 -->
		<view class="discount flex1" @click="toggleSpec()">
			<view class="flex-start">
				<view class="discount-1">选择</view>
				<view class="discount-2">请选择数量</view>
			</view>
			<text class="iconfont iconenter"></text>
		</view>

		<!-- 评价 -->
		<view class="eva-section" v-if="list.replyCount > 0" @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="eva-section"  @click="navTo('/pages/product/reply?id=' + goodsid)">
			<view class="e-header">
				<text class="tit">买家秀</text>
				<text>({{ list.replyCount }})</text>
				<text class="tip">查看全部</text>
				<text class="iconfont iconenter"></text>
			</view>
			<view class="eva-box">
				<image class="portrait" :src="reply.avatar" mode="aspectFill"></image>
			</view>
		</view> -->
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec()">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="actionImage"></image>
					<view class="right">
						<text class="name">{{ goodsObjact.store_name }}</text>
						<text class="price">
							¥
							<text class="price-1">{{ actionPrice }}</text>
						</text>
						<text class="stock">库存：{{ goodsNumberMax }}件</text>
						<view class="selected" v-if="specList != ''">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem }}</text>
						</view>
					</view>
					<view class="content-1" @click="toggleSpec()"><image src="../../static/label/delete.png"></image></view>
				</view>
				<view v-for="(item, index) in specList" :key="index" class="attr-list flex-column">
					<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 flex1">
					<view>购买数量</view>
					<view class="">
						<uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax" @eventChange="numberChange"></uni-number-box>
					</view>
				</view>
				<view class="buttom-two-box flex1">
					<view class="box-1 flex-center" @click="buy(2)"><view>加入购物车</view></view>
					<view class="box-2 flex-center" @click="buy(1)"><view>立即购买</view></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="detail-desc">
			<view class="desc-title flex-center">
				<view class="one"></view>
				商品详情
				<view class="two"></view>
			</view>
			<!-- <view class="d-header"><text>图文详情</text></view> -->
			<jyf-parser :html="description" ref="article"></jyf-parser>
			<!-- 底部高度撑开 -->
			<view :class="{ contentBottomHeight: goodsType == 1 || goodsType == 2, goodsBottom: goodsType == 0 }"></view>
		</view>
		<!-- 按钮 -->
		<view class="botton-row flex-start">
			<view class="botton-1 flex-center">
				<view class="botton-frame" @click="toFavorite(goodsObjact)">
					<view class="img-box" v-if="goodsObjact.userCollect == false"><image src="../../static/label/img02.png"></image></view>
					<view class="img-box" v-if="goodsObjact.userCollect == true"><image src="../../static/label/img08.png"></image></view>
					<view class="word" :class="{ active: goodsObjact.userCollect }">收藏</view>
				</view>
				<!-- #ifdef MP -->
				<button class="botton-frame kefu" open-type="contact">
					<view class="img-box" style="height: 45rpx;"><image style="height: 45rpx;" src="../../static/label/kefu.png"></image></view>
					<view class="word">客服</view>
				</button>
				<!-- #endif -->
			</view>
			<view class="botton-2 flex-center" @click="toggleSpec(2)"><view>加入购物车</view></view>
			<view class="botton-2 flex-center" @click="toggleSpec(1)"><view>立即购买</view></view>
		</view>
		<!-- 分享 -->
		<view v-if="shareShow" class="Shraremask" @click="cancel">
			<view class="mask-content">
				<scroll-view class="view-content" scroll-y>
					<view class="share-header">分享到</view>
					<view class="share-list">
						<view class="share-item">
							<!-- #ifdef MP -->
							<!-- 微信 -->
							<button class="wechat-box" open-type="share">
								<image class="itemImage" src="https://xipin.liuniu946.com/img/img001.png" mode=""></image>
								<text class="itemText">微信</text>
							</button>
							<!-- 朋友圈 -->
							<view class="wechat-box" @click="navTos()">
								<image class="itemImage" src="https://xipin.liuniu946.com/img/img002.png" mode=""></image>
								<text class="itemText">朋友圈</text>
							</view>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<view class="wechat-box" @click="copy()">
								<image class="itemImage" src="https://xipin.liuniu946.com/img/img001.png" mode=""></image>
								<text class="itemText">微信</text>
							</view>
							<!-- 朋友圈 -->
							<!-- <view class="wechat-box" @click="navTos()">
								<image class="itemImage" src="https://xipin.liuniu946.com/img/img002.png" mode=""></image>
								<text class="itemText">朋友圈</text>
							</view> -->
							<!-- #endif -->
						</view>
					</view>
				</scroll-view>
				<view class="bottomButtom b-t" @click="cancel">取消</view>
			</view>
		</view>
		<!-- 分享弹出窗 -->
		<!-- <view class="pop-mask" v-if="backShare" @click="closeBack"><image class="share-img" :src="shareImage" mode="aspectFit" @longpress="saveImg()"></image></view> -->
		<!-- 分享，把参数传过去 -->
		<!-- #ifdef APP-PLUS -->
		<!-- <popupshare ref="parPop" :opt="showShare" :option="option" :type="shareType"></popupshare> -->
		<!-- #endif -->
	</view>
</template>
<script>
import { mapState } from 'vuex';
import { uniFav } from '@/components/uni-fav/uni-fav.vue';
import { goodsDetail, cartAdd, collectAdd, collectDel, productDetail,userSpread } from '@/api/product.js';
import { getCombinationPoster } from '@/api/details.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { userinfo } from '@/api/user.js';
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
import jyfParser from '@/components/jyf-parser/jyf-parser';
import uniRate from '@/components/uni-rate/uni-rate.vue';
import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue';
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
import popupshare from '@/components/uni-popup/uni-popup-share.vue';
import uniNumberBox from '@/components/uni-number-box.vue';

// #ifdef H5
import { weixindata } from '@/utils/wxAuthorized';
// #endif
export default {
	components: {
		uniRate,
		uniCountdown,
		uniNumberBox,
		jyfParser,
		uniFav,
		uniNoticeBar,
		popupshare
	},
	// #ifdef MP
	onShareAppMessage: function(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/' + page.route + '?';
			// 保存传值
			for (let i in page.options) {
				path += i + '=' + page.options[i] + '&';
			}
			// 保存邀请人
			path += 'spread=' + this.userInfo.uid;
			let data = {
				path: path,
				imageUrl: this.goodsObjact.image,
				title: this.goodsObjact.title
			};
			return data;
		}
	},
	// #endif
	data() {
		return {
			shareShow:false,//分享弹窗是否显示
			level_name: '',
			level_price: '',
			showShare: '',
			parPop: '',
			showCard: false, //数据加载完成在渲染界面
			replyCount: 0,
			showModal: true, //拼单遮罩层
			more: true, //查看更多按钮
			autoplay: true,
			vertical: true,
			interval: 3000,
			duration: 500,
			buys_show: true,
			buys_shows: false,
			circular: true,
			type: 2,
			specClass: 'none', //显示隐藏弹窗
			actionImage: '', //商品图片
			goodsid: '', //商品id
			actionPrice: '', //商品价格
			// specClass: 'none', //显示隐藏弹窗
			shareList: [], //分享列表
			goodsObjact: {}, //保存商品数据
			goodsNumberMax: 0, //商品库存
			//图片循环
			imgList: [], //商品轮播图
			specList: [],
			people: '', //拼团人数
			goodsNumber: 1, //购买数量（开团数量为1，整团数量为1*参团人数）
			carnumber: '', //整团购买商品数量
			reply: {}, //评论数据
			list: '', //详情数据
			temp: '', //邮费详情
			goodsType: 0, //商品类型1秒杀商品0为普通商品2为拼团商品3为新人礼包
			pinkTlist: '', //拼团数据
			count: 0, //点击查看更多
			showlist: [],
			showmore: true,
			pinkTlistnum: '',
			spread: '',
			chooseGoodsNumber: 1, //选择商品的数量
			specSelected: [], //选中的分类
			goodsStore: 0, //选中库存
			uniqueId: '',
			productValue: [],
			isCollect: '', //是否被收藏
			maskshow: false, //弹窗
			posturl: '',
			userCollect: false,
			favoriteList: [],
			option: '', //保存传值
			opt: '', //保存小程序传值
			show: true,
			originPrice: '',
			ot_price: '', //礼包的原价
			description: '' //商品描述
		};
	},
	onLoad(option) {
		this.option = option;
		console.log(this.option, 'this.option');
		if (option.scene) {
			if (typeof option.scene == 'string') {
				let scene = ('{' + option.scene + '}')
					.replace('qr%26', '')
					.replace(/%3D/g, ':')
					.replace(/%26/g, ',')
					.replace('pid', '"pid"')
					.replace('type', '"type"')
					.replace('id', '"id"');
				let opt = JSON.parse(scene);
				this.opt = opt;
				// 保存拼团订单id
				this.goodsid = opt.id;
				console.log(opt.id, 'opt.id');
				if (opt.pid) {
					// 存储邀请人
					this.spread = opt.pid;
					uni.setStorageSync('spread', opt.pid);
					if(this.userInfo.spread_uid == 0){
						userSpread({
							puid: uni.getStorageSync('spread')
						}).then(res => {
							uni.showToast({
								title:'邀请人添加成功1'
							})
						})
					}
				}
				if (opt.type) {
					this.goodsType = opt.type;
				}
			}
		} else {
			//保存商品id
			this.goodsid = option.id;
			console.log(option.id, 'option.id');
			//判断有无人邀请
			if (typeof(option.spread) !="undefined") {
				// 存储邀请人
				this.spread = option.spread;
				uni.setStorageSync('spread', option.spread);
				if(this.userInfo.spread_uid == 0){
					userSpread({
						puid: uni.getStorageSync('spread')
					}).then(res => {
						uni.showToast({
							title:'邀请人添加成功2'
						})
					})
				}
			}
			//判断是否是普通商品
			if (option.type) {
				console.log(option.type);
				this.goodsType = option.type;
			}
		}
		
		this.goodsDetail();
		// 保存当前页面
		saveUrl();
		if (!this.hasLogin) {
			uni.showModal({
				title: '登录',
				content: '您未登录，是否马上登陆?',
				success: e => {
					if (e.confirm) {
						interceptor();
					}
				},
				fail: e => {
					console.log(e);
				}
			});
			return;
		}
	},
	computed: {
		...mapState(['userInfo', 'baseURL', 'hasLogin']),
		shareType: function(value) {
			return this.goodsType > 0 ? (this.goodsType == 2 ? 1 : '') : 0;
		}
	},
	methods: {
		// 获取普通商品信息
		goodsDetail() {
			let obj = this;
			productDetail({}, obj.goodsid).then(({ data }) => {
				console.log(data, 112);

				if (data.reply) {
					obj.reply = data.reply;
				}
				obj.list = data;
				obj.temp = data.temp;
				// 取整
				obj.list.replyChance = parseInt(data.replyChance);
				let goods = data.storeInfo;
				obj.productValue = data.productValue;
				console.log(obj.productValue, 120);
				obj.goodsObjact = goods; //商品信息
				obj.imgList = goods.slider_image; //保存轮播图
				obj.specList = data.productAttr; //保存产品属性
				if (obj.goodsObjact.description != null) {
					obj.description = obj.goodsObjact.description.replace(/<img/g, "<img style='max-width:100% !important;height:auto !important;'");
				} //小程序商品详情图超出屏幕问题
				console.log(obj.description, 'obj.description');
				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.actionPrice = obj.productValue[str].price;
				let a = obj.productValue[str].level_price;
				obj.level = JSON.parse(a);
				console.log(obj.level, 'level');
				obj.goodsNumberMax = obj.productValue[str].stock;
				obj.originPrice = obj.productValue[str].originPrice;
				obj.ot_price = obj.productValue[str].ot_price;
				obj.actionImage = obj.productValue[str].image;
				obj.uniqueId = obj.productValue[str].unique;
				if (obj.goodsType == 2) {
					obj.goodsStore = obj.productValue[str].quota;
				} else {
					obj.goodsStore = obj.goodsObjact.stock;
				}
				obj.showCard = true;
				this.userinfo();
				// #ifdef H5
				obj.shareDate();
				// #endif
			});
		},
		copy() {
			let that = this;
			let url = 'https://mmz.liuniu946.com@pages/product/product?id=' + that.goodsid+'@0' + '@' + that.userInfo.uid
			console.log(url,'url')
			uniCopy({
				content: url,
				success: res => {
					console.log(res,'res')
					// uni.showToast({
					// 	title: res,
					// 	icon: 'none'
					// });
				},
				error: e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 3000
					});
				}
			});
		},
		userinfo() {
			let a;
			let obj = this;
			userinfo({}).then(({ data }) => {
				console.log(data, 666);
				if(data.level_info == null)
				{
					a = 1;
				}else{
					a = data.level_info.level_id;
					a = a + 1;
				}
				console.log(a, '9999999');
				if (a == 1) {
					obj.level_name = '会员';
					obj.level_price = obj.level.price_1;
				} else if (a == 2) {
					obj.level_name = '合伙人';
					obj.level_price = obj.level.price_2;
				} else {
					obj.show = false;
				}
			});
		},
		//分享
		share() {
			console.log('share')
			this.shareShow = true;
		},
		cancel(){
			this.shareShow = false;
		},
		shareData() {
			console.log(11);
			this.showShare = true;
		},
		numberChange(e) {
			//购买数量
			this.chooseGoodsNumber = e.number;
			// console.log(e.number)
			// console.log(this.chooseGoodsNumber,'chooseGoodsNumber')
		},
		// #ifdef APP-PLUS
		shareEvent() {
			this.$nextTick(() => {
				this.$refs['parPop'].open();
				this.$refs['parPop'].loadData();
			});
		},
		// #endif
		// 处理数组结构
		dataUpReturn(data) {
			//保存处理完毕数据
			let arr = [];
			// 保存临时数据
			let arr1 = [];
			// 设置每个小数组可以存放的数量
			let num = 2;
			if (data.length > 1) {
				for (let i = 0; i < data.length; i++) {
					// 保存数据到临时数组
					arr1.push(data[i]);
					if ((i + 1) % num === 0) {
						console.log(arr1, 2);
						// 添加数据到返回数组，用map方法解决物理指针问题导致的数据对象改变问题
						arr.push(
							arr1.map(e => {
								return e;
							})
						);
						// 清空临时数组重新开始计算
						arr1 = [];
					}
				}
			}
			// 判断是否为奇数
			if (data.length % num === 1) {
				arr.push([data[data.length - 1]]);
			}
			return arr;
		},
		//拼团列表数据分页
		setPinkList() {
			let obj = this;
			let showlist = new Array();
			for (let i = 0; i < obj.pinkTlist.length; i++) {
				if (i >= obj.count) {
					break;
				}
				showlist[i] = obj.pinkTlist[i];
			}
			obj.showlist = showlist;
		},
		//查看更多
		// clickMore() {
		// 	let obj = this;
		// 	obj.count += 2;
		// 	obj.setPinkList();
		// 	if (obj.count >= obj.pinkTlist.length) {
		// 		obj.showmore = false; //当次数大于拼团数据，查看更多隐藏
		// 	} else {
		// 		obj.showmore = true; //当次数大于拼团数据，查看更多隐藏
		// 	}
		// },
		clickMore() {
			this.showlist = this.pinkTlist;
			console.log(this.showlist, 22);
			this.more = false;
		},
		//规格弹窗开关
		toggleSpec(str) {
			if (this.specClass === 'show') {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			} else if (this.specClass === 'none') {
				this.specClass = 'show';
			}
			// 判断是否为数字
			if (typeof str == 'number') {
				// 保存当前购买类型
				this.type = str;
			}
			console.log(this.type, 113);
		}, //选择规格
		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(',');
			console.log(obj.productValue[str], 116);
			if (obj.productValue[str]) {
				obj.buys_show = true;
				obj.buys_shows = false;
				obj.actionPrice = obj.productValue[str].price;
				obj.goodsNumberMax = obj.productValue[str].stock;
				obj.actionImage = obj.productValue[str].image;
				obj.uniqueId = obj.productValue[str].unique;
				if (obj.goodsType == 2) {
					obj.goodsStore = obj.productValue[str].quota;
				} else {
					obj.goodsStore = obj.productValue[str].product_stock;
				}
			} else {
				(obj.buys_show = false), (obj.buys_shows = true);
			}

			obj.specSelected[ind] = item.attr;
			// console.log(obj.specList)
			// console.log(str)
			// if (obj.specList[str]) {
			// 	let data = obj.specList[str];
			// 	console.log(data)
			// 	obj.actionPrice = data.price;
			// 	if (obj.goodsType == 2) {
			// 		obj.goodsStore = obj.productValue[item.attr].quota;
			// 	} else {
			// 		obj.goodsStore = obj.goodsObjact.stock;
			// 	}
			// 	obj.goodsNumberMax = data.stock;
			// 	obj.actionImage = data.image;
			// 	obj.uniqueId = data.unique;
			// }
		},
		//显示弹窗
		open() {
			this.show = true;
		},
		//随意点击隐藏弹窗
		onTap() {
			if (!this.open) return;
			this.close();
		},
		close() {
			this.show = false;
		},
		//收藏
		toFavorite(item) {
			let obj = this;
			console.log(item.userCollect, 6666);
			item.userCollect = !item.userCollect;
			// 判断是否已经收藏
			if (!item.userCollect) {
				collectDel({
					id: item.id
				}).then(function(e) {
					obj.$api.msg('成功取消收藏!');
				});
			} else {
				collectAdd({
					id: item.id
				}).then(function(e) {
					obj.$api.msg('成功加入收藏!');
				});
			}
		},
		// #ifdef H5
		shareDate() {
			let obj = this;
			let url = window.location.href.replace(/[\?,&]{0,1}from=singlemessage/g, '') + '&spread=' + this.userInfo.uid;
			let bool = uni.getStorageSync('weichatBrowser') || '';
			// 判断是否微信浏览器
			if (bool) {
				let data;
				if (obj.goodsType == 0) {
					data = {
						link: url, // 分享链接
						imgUrl: obj.goodsObjact.image, // 分享图标
						desc: obj.goodsObjact.store_info,
						title: obj.goodsObjact.store_name,
						success: function() {}
					};
				}
				if (obj.goodsType == 2) {
					data = {
						link: url, // 分享链接
						imgUrl: obj.goodsObjact.image, // 分享图标
						title: obj.goodsObjact.title,
						desc: obj.goodsObjact.info,
						success: function() {}
					};
				}
				weixindata(data);
			}
		},
		// #endif
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		navTos(){
			console.log(this.goodsid,'this.goodsid')
			uni.navigateTo({
				url:'/pages/product/index?goodsid='+ this.goodsid
			});
		},
		// 立即购买
		buy(item) {
			let obj = this;
			// uni.showModal({
			// 	title: 'this.hasLogin',
			// 	content: obj.hasLogin
			// });
			//obj.toggleSpec();
			// this.specClass='show',
			// console.log(obj.list.productValue.默认.unique)
			// console.log(obj.chooseGoodsNumber,'chooseGoodsNumber')
			//return
			// 创建传值对象
			console.log(obj.list.productValue);
			console.log(obj.list);
			let data = {
				// cartNum: obj.goodsNumber, //商品数量
				cartNum: obj.chooseGoodsNumber, //商品数量
				uniqueId: obj.uniqueId, //商品标签
				new: 1 //商品是否新增加到购物车1为不加入0为加入
				//mer_id: obj.shopId
			};
			//console.log(obj.type,116);
			// 判断是否为加入购物车
			if (item == 2) {
				data.new = 0;
			}
			//console.log(data.new,115)
			// 判断是否为普通商品
			if (obj.goodsType == 0) {
				data.productId = obj.goodsid; //商品编号
			}
			// 判断是否为拼团商品
			if (obj.goodsType == 2) {
				data.combinationId = obj.goodsid; //拼团编号
				data.productId = obj.goodsObjact.product_id; //商品编号
				if (item == 1) {
					data.cartNum = obj.people;
				} else {
					data.cartNum = 1;
				}
				// if (obj.userInfo.level == 0) {
				// 	if (this.userInfo.level == 0) {
				// 		uni.showToast({
				// 			title: '新人消费满380元成为团长才能开团!',
				// 			type: 'top',
				// 			duration: 1500,
				// 			icon: 'none'
				// 		});

				// 		setTimeout(function() {
				// 			uni.navigateTo({
				// 				url: '/pages/user/vipup'
				// 			});
				// 		}, 1000);
				// 		return;
				// 	}
				// }
			}
			this.specClass = 'none';
			console.log(data, 115);
			cartAdd(data)
				.then(function(e) {
					let da = e.data;
					console.log(e);
					//obj.toggleSpec();

					if (item == 1) {
						// 跳转到支付页
						uni.navigateTo({
							url: '/pages/order/createOrder?id=' + da.cartId + '&type=' + '1'
						});
					}
					if (item == 2) {
						obj.$api.msg('成功加入购物车');
						//obj.toggleSpec();
					}
				})
				.catch(e => {
					console.log(e);
				});
		},
		// 阻止触发上级事件
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-bottom: 160rpx;
	line-height: 1;
}
.conter {
	width: 100%;
}
.shareDate {
	position: fixed;
	right: 0;
	bottom: 50%;
	z-index: 95;
	width: 140rpx;
	height: 140rpx;
	// color: #ffffff;
	// border-radius: 100%;
	// width: 120rpx;
	// height: 120rpx;
	// line-height: 120rpx;
	// background-color: $background-color;
	// text-align: center;
	// font-size: 30rpx;
	image {
		width: 140rpx;
		height: 140rpx;
	}
}
.Shraremask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 998;
	transition: 0.3s;
	background-color: rgba(51, 51, 51, 0.6);
	.bottomButtom {
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 90rpx;
		background: #fff;
		z-index: 9;
		font-size: $font-base + 2rpx;
		color: $font-color-dark;
	}
}
.mask-content {
	width: 100%;
	height: 380rpx;
	transition: 0.3s;
	background: #fff;
	&.has-bottom {
		padding-bottom: 90rpx;
	}
	.view-content {
		height: 100%;
	}
}
.share-header {
	height: 110rpx;
	font-size: $font-base + 2rpx;
	color: font-color-dark;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 10rpx;
	&:before,
	&:after {
		content: '';
		width: 240rpx;
		heighg: 0;
		border-top: 1px solid $border-color-base;
		transform: scaleY(0.5);
		margin-right: 30rpx;
	}
	&:after {
		margin-left: 30rpx;
		margin-right: 0;
	}
}
.share-list {
	display: flex;
	width: 80%;
	margin: 0rpx auto;
}
.share-item {
	min-width: 33.33%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 180rpx;
	width: 100%;
	.wechat-box {
		width: 50%;
		height: 100%;
		background: #ffffff;
		border: 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		&::after {
			border: 0;
		}
		.itemImage {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 16rpx;
		}
		.itemText {
			font-size: $font-base;
			color: $font-color-base;
			line-height: 2;
		}
	}
}
.level_row {
	width: 750rpx;
	height: 55rpx;
	background: #fc4141;
	font-size: 28rpx;
	line-height: 55rpx;
	color: #ffffff;
	padding-left: 20rpx;
	.level_name {
		font-size: 30rpx;
	}
	.level_price {
		font-size: 34rpx;
	}
}
.top_img {
	// width: 60rpx;
	// height: 60rpx;
	background-color: rgba(1, 11, 1, 0);
	position: absolute;
	right: 20rpx;

	.share-img {
		width: 30rpx;
		height: 35rpx;
		margin-left: -13px;
	}
	&::after {
		width: 100%;
		height: 100%;
		border: none;
	}
}

/* 分享 */
.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;
	}
}

// 处理图片间白色间距问题
/deep/ .pHeight {
	line-height: 0;
}

/deep/ div,
/deep/ table {
	max-width: 100% !important;
}
// 处理图片间白色间距问题
.pHeight {
	line-height: 0;
}

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

.pinklist_list {
	margin-bottom: 25rpx;
}

/* 轮播图 */
.carousel {
	height: 722rpx;
	position: relative;

	swiper {
		height: 100%;
	}

	.image-wrapper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 750rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}
}
/* 标题简介 */
.introduce-section {
	background: #fff;
	padding: 15rpx 25rpx 30rpx 25rpx;
	.introduce-price {
		width: 100%;
		overflow: hidden;
		.price {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.price-left {
				display: flex;
				align-items: flex-end;
				color: #fc4141;
				margin-right: 20rpx;
				.left-1 {
					margin-right: 5rpx;
					font-size: 28rpx;
				}
				.left-2 {
					font-size: 48rpx;
				}
			}
			.price-right {
				font-size: 28rpx;
				text-decoration: line-through;
				color: #333333;
				opacity: 0.61;
			}
		}
		.share {
			image {
				width: 30rpx;
				height: 35rpx;
			}
		}
	}
	.title {
		margin-top: 30rpx;
		font-size: 32rpx;
		color: #1d2023;
		line-height: 40rpx;
		font-weight: 600;
	}
	.bot-row {
		margin-top: 20rpx;
		overflow: hidden;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}
}
/* 优惠/规格 */
.discount {
	margin-top: 20rpx;
	padding: 0 25rpx;
	height: 90rpx;
	line-height: 90rpx;
	background-color: #ffffff;
}
.discount-1 {
	font-size: 26rpx;
	font-weight: 500;
	color: #666666;
	margin-right: 35rpx;
}
.discount-2 {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 26rpx;
	font-weight: 500;
	color: #333333;
	.red {
		color: #fd7344;
	}
}
.mask {
	z-index: 999;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
	image {
		width: 100%;
		height: 100%;
		opacity: 0.8;
	}
}
/*  弹出层 */
.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);
	}
	.price {
		display: flex;
		align-items: flex-end;
		justify-content: flex-start;
	}
	.layer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		border-radius: 10rpx 10rpx 0 0;
		background-color: #fff;
		overflow: hidden;
		.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%);
		}
	}
}

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

/* 规格选择弹窗 */
.attr-content {
	padding-top: 25rpx;
	.a-t {
		display: flex;
		padding: 0 30rpx;
		image {
			flex: 1;
			width: 170rpx;
			height: 170rpx;
			flex-shrink: 0;
			border-radius: 8rpx;
		}
		.content-1 {
			width: 35rpx;
			height: 35rpx;
			image {
				width: 35rpx;
				height: 35rpx;
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			padding-left: 24rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-base;
			width: 70%;

			.price {
				font-size: $font-lg - 2rpx;
				color: $base-color;
				margin: 10rpx 0rpx;
				.price-1 {
					display: inline-block;
					font-size: $font-lg + 28rpx;
					color: $base-color;
				}
			}
			.selected {
				margin-top: 20rpx;
			}

			.name {
				font-size: 32rpx;
				color: $font-color-dark;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
			}

			.selected-text {
				margin-right: 10rpx;
			}
		}
	}

	.attr-list {
		font-size: $font-base + 2rpx;
		color: #333333;
		padding: 30rpx;
	}
	.flex-column {
		display: flex;
		flex-direction: column;
	}
	.buttom-two-box {
		.box-1 {
			height: 100rpx;
			flex: 1;
			background: #ffb238;
			font-size: 32rpx;
			color: #ffffff;
		}
		.box-2 {
			height: 100rpx;
			flex: 1;
			background: #fc4141;
			font-size: 32rpx;
			color: #ffffff;
		}
	}
	.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: #666666;
		}

		.selected {
			background: #fbebee;
			color: #fa2740;
			border: 1px solid #fa2740;
		}
	}
}

/*  详情 */
.detail-desc {
	background: #fff;
	/deep/ img {
		max-width: 100% !important;
		display: inline !important;
	}
	/deep/ div {
		max-width: 100% !important;
	}
	.desc-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #1d2023;
		padding: 25rpx 0;
		.one {
			width: 77rpx;
			height: 1px;
			background: linear-gradient(to right, rgba(204, 204, 204, 0), rgba(204, 204, 204, 1));
			margin-right: 10rpx;
		}
		.two {
			margin-left: 10rpx;
			width: 77rpx;
			height: 1px;
			background: linear-gradient(to left, rgba(204, 204, 204, 0), rgba(204, 204, 204, 1));
		}
	}
	.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: 0;
		}
		&:after {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
			width: 300rpx;
			height: 0;
			content: '';
			border-bottom: 1px solid #ccc;
		}
	}
}
/* 按钮 */
.botton-row {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	font-size: 32rpx;
	color: #ffffff;
	.botton-1 {
		width: 200rpx;
		height: 100rpx;
		background-color: #ffffff;
		.botton-frame {
			width: 100rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			.img-box {
				width: 45rpx;
				height: 40rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.kefu {
			background: 0;
			line-height: 0;
			padding: 0;
			height: 68rpx;
			margin-top: -6rpx;
			&::after {
				border: 0;
			}
			.word {
				margin-top: 5rpx;
				line-height: 1;
			}
		}
		.word {
			margin-top: 6rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #666666;
			&.active {
				color: $uni-color-primary;
			}
		}
	}
	.botton-2 {
		color: #ffffff;
		flex: 1;
		height: 100rpx;
		background-color: #ffb238;
	}
	.botton-2:last-child {
		background-color: #fc4141;
	}
}
</style>