sct/pagesT/unit/itemdetail.vue

<template>
	<view :class="['qn-page-' + theme]">
		<u-navbar :is-back="false" title-color="#000000" :title-bold="true" title-size="36" :title="goods_detail.title">
			<view class="back-icon ibonfont ibonfanhui" @click="back"></view>
		</u-navbar>
		<!-- <block v-if="goods_detail.id"> -->
		<block>
			<!-- 底部菜单 -->
			<view class="footer">
				<view class="icons">
					<view class="box" @click="goPage('/pages/index/index', 'switchTab')">
						<view class="icon ibonfont ibonhome"></view>
						<view class="text">首页</view>
					</view>
					<view class="box" @click="goPage('/pages/cart/cart', 'switchTab')">
						<u-badge v-if="cartNum > 0" type="error" :offset="[-18, -24]" :count="cartNum"></u-badge>
						<view class="icon ibonfont iboncart"></view>
						<view class="text">购物车</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="box" @click="shareGoods">
						<view class="icon ibonfont ibonfenxiang2"></view>
						<view class="text">分享</view>
					</view>
					<!-- #endif -->
				</view>
<!-- 				<block v-if="goods_detail.isDistribution === 4 && goods_detail.inventorTotal <= 0">
					<view v-if="!(goods_detail.inventorTotal - 0) || goods_detail.inventorTotal - 0 <= 0" class="btn">
						<view class="buy primary-bg" style="background-color: #666666 !important;">补货中</view>
					</view>
				</block> -->
				<view class="btn">
					<view class="buy primary-fu-bg" @click="openaddcartPop('btn')">立即购买</view>
					<!-- <view class="buy primary-bg" @click="openaddcartPop('btn')">加入购物车</view> -->
				</view>
			</view>
			<!-- 商品主图轮播 -->
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="(item, index) in imgList" :key="index">
						<image :src="item" mode="aspectFit" @click="previewImage(index)"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">{{ currentSwiper + 1 }}/{{ imgList.length }}</view>
			</view>
			<!-- 标题 价格 -->
			<view class="goods-info">
				<!-- 商品信息 -->
				<view class="price-view primary-bg clearfix">
					<view class="price-out">
						<view style="display: inline-block;">
							<text class="rmb-ic">¥</text>
							<view style="display: inline-block;">
								{{goods_detail.price}}
							</view>
						</view>
						<view class="market-price">￥{{ goods_detail.ot_price }}</view>
					</view>
					<view class="right-view">
						<view class="goods-num">
							<view class="num-li">
								已售{{ goods_detail.sold }}</view>
						</view>
					</view>
				</view>
				<view class="goods-info-main">
					<view class="clearfix top-title">
						<view class="title float_left ellipsis">
							{{ goods_detail.name || '' }}
						</view>
					</view>
				</view>
			</view>
			<!--规则选择 -->
			<view class="info-box" style="margin-top: 0;">
				<view class="row" v-if="goods_detail.unitData.length > 1">
					<view class="text">换算</view>
					<view class="content">
						<block v-for="(item, index) in goods_detail.unitData" :key="index">
							<view v-if="item.isMaster === 4" class="conversion">
								<text
									v-if="goods_detail.isEq === 5">1{{ item.unitName }}≈{{ item.conversion }}{{ goods_detail.unitName }}</text>
								<text
									v-else>1{{ item.unitName }}={{ item.conversion }}{{ goods_detail.unitName }}</text>
							</view>
						</block>
					</view>
				</view>
				
			</view>
			<!-- 详情 -->
			<view class="description">
				<view class="title">———— 商品详情 ————</view>
				<view class="content">
					<u-parse :html="goods_detail.result"></u-parse>
				</view>
			</view>
		</block>
		<u-popup mode="bottom" v-model="sharePop" >
			<view class="share-tit">分享</view>
			<view class="share-ul">
				<!-- #ifdef MP -->
				<view class="share-li">
					<button class="share-btn" open-type="share">
						<view class="icon-view">
							<u-icon name="weixin-fill" top="12" color="#ffffff" size="60"></u-icon>
						</view>
						<view class="share-btn-label">分享给好友</view>
					</button>
				</view>
				<!-- #endif -->
				<!-- <view class="share-li" @click="generatePoster">
					<button class="share-btn">
						<view class="icon-view">
							<u-icon name="photo-fill" top="12" color="#ffffff" size="60"></u-icon>
						</view>
						<view class="share-btn-label">生成分享海报</view>
					</button>
				</view> -->
			</view>
			<view class="share-cancel" @click="cancelPop">取消分享</view>
		</u-popup>
		<!-- 海报 -->
		<u-popup class="no-pop-bg" v-model="canvasPop" mode="center" :border-radius="12" :mask-close-able="false">
			<view v-if="imgList.length && QrSrc && is_poster">
				<wm-poster :Width="600" :imgSrc="imgList[0]" :QrSrc="QrSrc" :Title="goods_detail.title"
					:PriceTxt="!showGoodsPrice ? '¥' + goods_detail.salePrice : ''"
					:OriginalTxt="!showGoodsPrice ? '¥' + goods_detail.marketPrice : ''" @saveImage="saveImage"
					@cancelImg="cancelImg"></wm-poster>
			</view>
		</u-popup>
		<!-- 加载动画 -->

		<!-- 加入购物车弹窗 -->
		<!-- <AddCardModel :isList="false" :selAddress="now_sel_address" @buyNumchange="buyNumchange" @skuChange="skuChange"
			@close="is_add_show = false" @change="closeaddcartPop" :skuId="skuId" :isShow="is_add_show"
			:goodsId="goods_id" />
		<setMealMore :goods_id="goods_id" :shopId="goods_detail.shopId" :isShow="is_setMeal_show"
			@close="is_setMeal_show = false" /> -->
			<u-popup v-model="payPop" mode="bottom" :border-radius="12">
				<view class="pay-pop-view">
					<view class="pay-sel-title clearfix">
						<text class="float_left">付款方式</text>
						<text class="float_right ibonfont ibonguanbi" @click="closePayPop"></text>
					</view>
					<view class="pay-ul">
						<view class="pay-li"  @click="pay_type = 1">
							<text class="ibonfont ibonhuodaofukuan"></text>
							<view class="pay-name clearfix"
								:class="[goods_detail.price*1 > Number(userInfo.memberBalance) ? 'balance-pay-name' : '']">
								<view class="float_left">
									<text>余额</text>
									<text class="balace-num">（余额:¥{{ Number(userInfo.memberBalance) }}）</text>
								</view>
								<text  class="float_right ibonfont  ibonxuanze1" v-if="pay_type == 1"></text>
								<text  class="float_right ibonfont  ibonxuanze1" style="color: #CCCCCC;" v-else></text>
							</view>
						</view>
						<view class="pay-li" @click="pay_type = 2" v-if="goods_detail.price*1 > 0">
							<text class="ibonfont ibonweixinzhifu"></text>
							<view class="pay-name clearfix ">
								<view class="float_left">
									<text>微信</text>
								</view>
								<text class="float_right ibonfont ibonxuanze1" v-if="pay_type == 2"></text>
								<text class="float_right ibonfont ibonxuanze1" style="color: #CCCCCC;" v-else></text>
							</view>
						</view>
					</view>
					<view class="pay-btn primary-btn" @click="submit">
						<text>确定</text>
					</view>
				</view>
			</u-popup>
	</view>
</template>

<script>
	import wmPoster from '../components/wm-poster/wm-poster.vue';
	import webUrl from '../../config.js';
	import AddCardModel from '@/components/AddCardModel';
	import setMealMore from '@/components/setMealMore';
	export default {
		components: {
			wmPoster,
			AddCardModel,
			setMealMore
		},
		computed: {
			cartNum() {
				return this.$store.state.cartNum;
			},
			showGoodsPrice() {
				if (this.$store.state.baseSet.goodsPrice === 5 && this.$common.isLogin()) {
					return '';
				} else if (!this.$common.isLogin() && this.$store.state.baseSet.goodsPrice === 4) {
					return '请登录';
				} else if (this.$store.state.userStatus.enableStatus === 4 && this.$store.state.baseSet.goodsPrice === 4) {
					return '已禁用';
				} else if (this.$store.state.userStatus.status !== 2 && this.$store.state.baseSet.goodsPrice === 4) {
					if (this.$store.state.userStatus.status === 0) {
						return '待审核';
					} else if (this.$store.state.userStatus.status === 1) {
						return '审核中';
					} else if (this.$store.state.userStatus.status === 3) {
						return '已驳回';
					}
				} else {
					return '';
				}
			},
			isLogin() {
				return this.$store.state.hasLogin;
			},
			// 辅助单位价格
			unitsalePrice() {
				if (this.goods_detail.isEq === 5) {
					if (this.eq_sku_kg.enabledLadder !== 1) {
						return this.eq_sku_kg.salePrice;
					} else {
						const unitnum = this.buy_num * Number(this.now_sku_data.conversion);
						const priceData = this.eq_sku_kg.ladderPrice.find(item => {
							return unitnum > item.from && unitnum <= item.to;
						});
						return priceData ? priceData.price : 0;
					}
				} else {
					return this.eq_sku_kg.salePrice;
				}
			}
		},
		data() {
			return {
				userInfo: {},
				pay_type: 1,
				payPop: false,
				eq_sku_kg: {}, // 抄码商品kg
				eq_sku_jian: {}, // 抄码商品辅助单位
				//轮播图下标
				currentSwiper: 0,
				service_pop: false,
				sharePop: false, // 分享弹窗
				canvasPop: false, // 海报弹窗
				now_sel_address: {},
				is_not_express: true, // 当前选择区域是否能够配送
				address_data: {}, // 客户地址数据
				not_dispatch_areas: {}, // 该商品不能配送区域
				is_add_show: false,
				is_poster: false,
				buy_num: 1,
				discountList: [],
				activity: [],
				maskState: false,
				indicatorDots: true, //是否显示面板指示点
				autoplay: true, //是否自动切换
				interval: 2000,
				duration: 500,
				goods_detail: {},
				goods_id: '',
				unit_list: [],
				uni_index: 0,
				specClass: 'none',
				specSelected: [],
				specList: [],
				isCollect: false,
				imgList: [],
				phaseTime: {
					second: 0,
					day: 0
				},
				coupon_price: '', //领券活动价格
				skuId: '', //商品的规格
				source: 5,
				QrSrc: '',
				base_set_info: {},
				spec_id_group: [],
				now_sku_data: {},
				startDeliveryPrice: 0,
				isSalesNum: 4, // 起送价
				pageName: '', // 启动页标示
				is_setMeal_show: false, //组合套餐弹窗
				combinedPackage: [],
				total: 0,
				shopId: '',
				isyhk: 0,//是否是优惠卡
			};
		},
		onShow() {
			if (this.now_sel_address.provinceCode) {
				this.address_data = this.now_sel_address;
				if (this.not_dispatch_areas.areas) {
					if (this.address_data.districtCode) {
						this.is_not_express = this.not_dispatch_areas.areas.indexOf(parseInt(this.address_data
							.districtCode)) === -1;
					} else if (this.address_data.cityCode) {
						this.is_not_express = this.not_dispatch_areas.citys.indexOf(parseInt(this.address_data
							.cityCode)) === -1;
					} else {
						this.is_not_express = this.not_dispatch_areas.provinces.indexOf(parseInt(this.address_data
							.provinceCode)) === -1;
					}
				}
			}
		},
		onShareAppMessage() {
			return {
				title: this.goods_detail.name,
				path: `/pagesT/unit/itemdetail?id=${this.goods_id}&businessmanId=${this.$store.state.userStatus.id || ''}&isyhk=${this.isyhk}`,
				imageUrl: this.imgList[0],
				success: res => {
					console.log(res);
				}
			};
		},
		// #ifdef MP-WEIXIN
		// 分享到朋友圈
		onShareTimeline(obj) {
			console.log('分享到朋友圈::', obj);
		},
		// 收藏小程序
		onAddToFavorites() {},
		// #endif
		watch: {
			async '$store.state.locationObj'(val) {
				if (JSON.stringify(val) === '{}') {
					this.getAuthorizeInfo();
					return;
				}
				await this.getGoodsDetail();
				await this.getQrSrc();
			},
			isLogin() {
				this.getGoodsDetail();
			}
		},
		async onLoad(options) {
			if (options.pageName) {
				this.pageName = options.pageName;
			}
			// 起送价
			this.startDeliveryPrice = this.$store.state.baseSet.startDeliveryPrice || 0;
			// #ifdef MP-WEIXIN
			// 小程序的原生菜单中显示分享按钮
			uni.showShareMenu({
				withShareTicket: false,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			//  获取小程序分销商参数
			if (options.businessmanId) {
				this.$store.commit('commit_businessmanId', options.businessmanId);
				this.relationshipBusinessman(options.businessmanId);
			}
			// #endif
			// 接收传值
			if (options.id) {
				this.goods_id = options.id;
			} else {
				// 扫码进入
				const scene = decodeURIComponent(options.scene);
				this.goods_id = scene;
			}
			if(options.isyhk) {
				this.isyhk = options.isyhk
			}
			if (options.skuId) {
				this.skuId = parseInt(options.skuId);
			}
			// this.goods_id = 78;
			this.spec_id_group[0] = this.goods_id;
			this.base_set_info = this.$store.state.baseSet;
			if (JSON.stringify(this.$store.state.locationObj) === '{}') {
				this.getAuthorizeInfo();
				return;
			}
			this.getGoodsDetail();

			if (this.isLogin) {
				this.address_data = this.$store.state.nowAddress;
				if (this.address_data.provinceCode) {
					if (this.not_dispatch_areas.areas) {
						if (this.address_data.districtCode) {
							this.is_not_express = this.not_dispatch_areas.areas.indexOf(parseInt(this.address_data
								.districtCode)) === -1;
						} else if (this.address_data.cityCode) {
							this.is_not_express = this.not_dispatch_areas.citys.indexOf(parseInt(this.address_data
								.cityCode)) === -1;
						} else {
							this.is_not_express = this.not_dispatch_areas.provinces.indexOf(parseInt(this.address_data
								.provinceCode)) === -1;
						}
					}
				} else {
					await this.getAllShippingAddress();
				}
			}
			await this.getQrSrc();
		},
		methods: {
			closePayPop() {
				this.payPop = false
			},
			openService() {
				this.service_pop = true;
			},
			// 商品服务弹窗
			cancelService() {
				this.service_pop = false;
			},
			// 获取地址列表
			getAllShippingAddress() {
				this.$u.api
					.getAllShippingAddress({
						page: 1,
						pageSize: 10
					})
					.then(({
						data
					}) => {
						if (data.length) {
							const address = data.find(item => item.defaultStatus === 5) || data[0];
							this.address_data = {
								provinceCode: address.provinceCode,
								cityCode: address.cityCode,
								districtCode: address.districtCode,
								provinceName: address.area.provinceName,
								cityName: address.area.cityName,
								districtName: address.area.districtName
							};
							this.$store.commit('commit_nowAddress', this.address_data);
							if (this.not_dispatch_areas.areas) {
								if (this.address_data.districtCode) {
									this.is_not_express = this.not_dispatch_areas.areas.indexOf(parseInt(this
										.address_data.districtCode)) === -1;
								} else if (this.address_data.cityCode) {
									this.is_not_express = this.not_dispatch_areas.citys.indexOf(parseInt(this
										.address_data.cityCode)) === -1;
								} else {
									this.is_not_express = this.not_dispatch_areas.provinces.indexOf(parseInt(this
										.address_data.provinceCode)) === -1;
								}
							}
						}
					});
			},
			// 修改购买金额
			buyNumchange(val) {
				this.buy_num = val;
			},
			// 切换商品规格属性
			skuChange(val) {
				this.now_sku_data = val;
				if (this.now_sku_data.activity && this.now_sku_data.activity.activityId) {
					let nowData = parseInt(new Date().getTime() / 1000);
					if (this.now_sku_data.activity.endTime && this.now_sku_data.activity.endTime - nowData > 0) {
						let totalSecond = this.now_sku_data.activity.endTime - nowData;
						this.phaseTime = {
							second: totalSecond % 86400,
							day: totalSecond <= 0 ? 0 : parseInt(totalSecond / 86400)
						};
					}
				}
			},
			// 收藏商品
			collectGoods() {
				if (!this.isLogin) {
					this.$api.msg('请登录');
					return;
				}
				if (this.goods_detail.isCollect) {
					this.goods_detail.isCollect = false;
				} else {
					this.goods_detail.isCollect = true;
				}
				this.$u.api.collectGoods(this.goods_id).then(res => {
					if (!this.goods_detail.isCollect) {
						this.$api.msg('已取消收藏');
					} else {
						this.$api.msg('已收藏');
					}
				});
			},

			getQrSrc() {
				// #ifdef MP-TOUTIAO
				let pathT = 'pagesT/product/product?id=' + this.goods_id;
				pathT = encodeURIComponent(pathT);
				this.$u.api
					.byteCreateQRCode({
						path: pathT,
						params: this.goods_id,
						appname: 'toutiao'
					})
					.then(data => {
						this.QrSrc = data.data.indexOf('https') > -1 ? data.data : webUrl.QRC_SRC + data.data;
					});
				// #endif
				// #ifdef MP-WEIXIN || H5
				let pathS = 'pagesT/product/product';
				this.$u.api
					.createwxaqrcode({
						path: pathS,
						params: this.goods_id
					})
					.then(data => {
						this.QrSrc = data.data.indexOf('https') > -1 ? data.data : webUrl.QRC_SRC + data.data;
						console.log(this.QrSrc);
					});
				// #endif
			},
			handelImg(url) {
				if (url.indexOf('?imageView2/2/w/750/h/750') > -1) {
					return url.replace('?imageView2/2/w/750/h/750', '');
				} else if (url.indexOf('?imageView2/2/w/750') > -1) {
					return url.replace('?imageView2/2/w/750', '');
				} else {
					return url;
				}
			},
			generatePoster() {
				// this.is_poster = true;
				// this.canvasPop = true;
				// this.sharePop = false;
				const pramas = {
					id: this.goods_detail.id,
					priceShop: '¥' + this.goods_detail.maxMarketPrice,
					headImgs: this.goods_detail.images.map(item => this.handelImg(item)),
					goodsImg: this.handelImg(this.goods_detail.images[0]),
					goodsName: this.goods_detail.title,
					goodsPrice: '¥' + this.goods_detail.minSalePrice,
					mainLogo: '',
					recommendCodeGoods: this.QrSrc,
					share: {
						shareContent: this.$store.state.baseSet.shop || '',
						shareImg: this.handelImg(this.goods_detail.images[0]),
						shareTitle: this.goods_detail.title,
						shareUrl: this.handelImg(this.goods_detail.images[0])
					}
				};
				uni.setStorageSync('posterData', pramas)
				uni.navigateTo({
					url: '/pagesT/product/goodsPoster'
				});
			},
			saveImage() {
				this.canvasPop = false;
			},
			cancelImg() {
				this.is_poster = false;
				this.canvasPop = false;
			},
			shareGoods() {
				this.sharePop = true;
			},
			//App分享为微信小程序（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）
			shareFriend() {
				const path = '/pagesT/unit/itemdetail?id=' + this.goods_id;
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 5,
					imageUrl: this.imgList[0],
					title: this.goods_detail.title,
					miniProgram: {
						id: 'gh_16db94f79967', //微信小程序原始ID
						path: path,
						type: 0,
						webUrl: ''
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					}
				});
			},
			// 分享弹窗关闭
			cancelPop() {
				this.sharePop = false;
			},
			// 如果是阶梯价
			ladderPriceChange() {
				return this.now_sku_data.ladderPrice.find(ladder => (this.buy_num || 1) >= ladder.from && (this.buy_num ||
					1) <= ladder.to).price;
			},
			// 请求商品品详情
			async getGoodsDetail() {
				let that = this
					
				if(that.isyhk == 1) {
					
					that.$u.api.getYhkDetail({
						id: that.goods_id
					}).then(({
						data
					}) => {
						console.log(data, 'itemdetail+++')
						// 轮播图
						that.goods_detail = data;
						that.goods_detail.result = data.introduce
						let arr = []
						arr[0] = data.image
						that.imgList = arr;
						console.log(that.imgList,'that.imgList')
					})
				}else {
					that.$u.api.getItemDetail({
						id: that.goods_id
					}).then(({
						data
					}) => {
						console.log(data, 'itemdetail+++')
						// 轮播图
						that.goods_detail = data;
						that.imgList = data.slider_image;
					})
				}
				
				// this.$u.api
				// 	.getGoodsDetail(this.goods_id)
				// 	.then(({
				// 		data
				// 	}) => {
				// 		uni.setNavigationBarTitle({
				// 			title: data.title
				// 		});
				// 		this.imgList = data.images;
				// 		data.specGroup = data.specGroup.map(item => {
				// 			return {
				// 				...item,
				// 				params: item.params.map(itemP => {
				// 					return {
				// 						...itemP,
				// 						isdisabled: true
				// 					};
				// 				})
				// 			};
				// 		});
				// 		this.goods_detail = data;
				// 		// 抄码商品获取 KG 数据
				// 		if (data.isEq === 5) {
				// 			this.eq_sku_kg = data.specMultiple.find(item => item.isMaster === 5);
				// 			this.eq_sku_jian = data.specMultiple.find(item => item.isMaster === 4);
				// 		}
				// 		this.not_dispatch_areas = data.express.ruleData.not_dispatch_areas;
				// 		if (this.skuId) {
				// 			// 如果已有选中的skuId 根据ID匹配对应规格数据
				// 			const specMultiple = data.specMultiple.find(item => item.id === parseInt(this.skuId));
				// 			if (specMultiple.isSale !== 4) {
				// 				this.now_sku_data = specMultiple;
				// 			}
				// 		} else if (data.specMultiple.length === 1 && data.specMultiple[0].isSale !== 4) {
				// 			this.now_sku_data = data.specMultiple[0];
				// 		} else {
				// 			// 如果当前商品是非抄码商品 默认选中默认规格
				// 			if (data.isEq === 4) {
				// 				const specMultiple = data.specMultiple.find(item => item.isDefault === 5);
				// 				if (specMultiple && specMultiple.isSale !== 4) {
				// 					this.now_sku_data = specMultiple;
				// 				}
				// 			} else {
				// 				// 抄码商品默认选中一个
				// 				const specMultiple = data.specMultiple.find(item => item.isMaster === 4);
				// 				if (specMultiple && specMultiple.isSale !== 4) {
				// 					this.now_sku_data = specMultiple;
				// 				}
				// 			}
				// 		}
				// 		if (this.now_sku_data.activity && this.now_sku_data.activity.activityId) {
				// 			let nowData = parseInt(new Date().getTime() / 1000);
				// 			if (this.now_sku_data.activity.endTime && this.now_sku_data.activity.endTime -
				// 				nowData > 0) {
				// 				let totalSecond = this.now_sku_data.activity.endTime - nowData;
				// 				this.phaseTime = {
				// 					second: totalSecond % 86400,
				// 					day: totalSecond <= 0 ? 0 : parseInt(totalSecond / 86400)
				// 				};
				// 			}
				// 		}
				// 		// 获取该商品的组合套餐
				// 		if (this.isLogin) {
				// 			this.listsApiComBinPackage();
				// 		}
				// 	})
				// 	.catch(err => {
				// 		setTimeout(() => {
				// 			uni.navigateBack();
				// 		}, 1500);
				// 	});
			},
			//分享
			share() {
				this.$refs.share.toggleMask();
			},
			openaddcartPop(type) {
				// if (!this.is_not_express) return;
				// this.is_add_show = true;
				// this.$u.api.calculation({
					
				// })
				if(this.isyhk == 1) {
					this.$u.api.getCustomerInfo().then(({ data }) => {
						this.userInfo = data;
						this.$store.commit('commit_userStatus', data);
						this.payPop = true
					});
				}else {
					this.goPage('/pagesT/order/createOrderT?id=' + this.goods_detail.id)
				}
				
			},
			// 支付
			submit() {
				let that = this
				// 判断余额是否足够
				
				if(that.pay_type == 1 && (that.goods_detail.price*1 > that.userInfo.memberBalance*1)) {
					return this.$u.toast('抱歉，您的可用余额不足');
				}
				that.$u.api.buyYhk({
					"id": that.goods_detail.id,
					"pay_type": that.pay_type, //1余额2微信3支付宝
					"source": that.pay_type == 2 ? 3: '',
				}).then(({
					data
				}) => {
					// 余额支付
					if(that.pay_type == 1) {
						console.log(data)
						if(data == '支付成功' || data.data == '支付成功') {
							that.payPop = false
							setTimeout(() => {
								uni.navigateTo({
									url:'/pagesT/money/paySuccess?price=' + that.goods_detail.price + '&isyhq=1'
								})
								// this.otheMsgTip('/pagesT/money/paySuccess?price=' + this
								// 	.goods_detail.price + '&isyhq=1');
							}, 200);
						}
					}
					// 微信支付
					if(that.pay_type == 2) {
						// data.data
						let payInfo = data.data
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payInfo.timeStamp, //当前时间
							nonceStr: payInfo.nonceStr, //随机字符串，长度在32一下
							package: payInfo.package, //统一单接口返回的prepay_id
							signType: payInfo.signType, //签名算法，目前支持MD5
							paySign: payInfo.paySign, //签名
							success: res => {
								// 订单审核，取消订单提醒
								that.payPop = false
								setTimeout(() => {
									this.otheMsgTip('/pagesT/money/paySuccess?price=' + this
										.goods_detail.price + '&isyhq=1');
								}, 200);
							},
							fail: async err => {
								that.payPop = false
								that.$u.toast('支付失败');
								console.log('支付失败');
								// await setTimeout(() => {
								// 	// uni.redirectTo({
								// 	// 	url: '/pagesT/order/orderT?state=0'
								// 	// });
								// }, 100);
							}
						});
						// #endif
					}
				})
			},
			// 关闭加入购物车弹窗
			closeaddcartPop(obj) {
				if (!obj.show) {
					this.is_add_show = false;
				}
			},
			previewImage(index) {
				let urls = JSON.parse(JSON.stringify(this.imgList));
				if (index > 0) {
					urls.unshift(urls[index]);
				}
				uni.previewImage({
					urls: urls,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: data => {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: err => {
							console.log(err.errMsg);
						}
					}
				});
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			back() {
				if (this.pageName) {
					this.goPage('/pages/index/index', 'switchTab');
				} else {
					uni.navigateBack();
				}
			},
			// 获取该商品的组合套餐
			listsApiComBinPackage() {
				if (!this.goods_detail.shopId) return;
				this.$u.api
					.listsApiComBinPackage({
						page: 1,
						pageSize: 10,
						shopId: this.goods_detail.shopId,
						goodsId: this.goods_id
					})
					.then(({
						data
					}) => {
						this.shopId = this.goods_detail.shopId;
						this.combinedPackage = data;
						this.total = data.length;
					});
			},
			// #ifdef MP
			// 添加分销上下级关系 source: 1:首次点击链接 2:首次下单 3:首次付款'
			async relationshipBusinessman(businessmanId) {
				console.log('上级ID', businessmanId);
				if (!this.$store.state.hasLogin) {
					// 没有登录不请求接口
					return;
				}
				await this.$u.api.relationshipBusinessman({
					businessmanId: businessmanId,
					source: 1
				});

				console.log('上下:', data.data);
			}
			// #endif
		}
	};
</script>

<style lang="scss">
	@keyframes showPopup {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes hidePopup {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes showLayer {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	@keyframes hideLayer {
		0% {
			transform: translateY(-100%);
		}

		100% {
			transform: translateY(0);
		}
	}

	.icon {
		font-size: 26upx;
	}

	.back-icon {
		font-size: 36rpx;
		padding-left: 24rpx;
		color: #2a2a2a;
	}

	.swiper-box {
		background-color: #ffffff;
		position: relative;
		width: 100%;
		height: 100vw;

		swiper {
			width: 100%;
			height: 100vw;

			swiper-item {
				image {
					width: 100%;
					height: 100vw;
					background-color: #f5f5f5;
				}
			}
		}

		.indicator {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 25upx;
			height: 40upx;
			border-radius: 4upx;
			font-size: 22upx;
			position: absolute;
			bottom: 50upx;
			right: 30upx;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	.goods-info {
		overflow: hidden;
		transform: translateY(-36rpx);

		.seckill-view {
			padding: 0 20upx;
			height: 80upx;
			line-height: 80upx;
			background: linear-gradient(to right, #ff3859, #ff2d2e);
			color: #ffffff;

			.ibonxianshimiaosha {
				font-size: 36rpx;
			}
		}

		.price-view {
			padding: 0 30rpx;
			height: 152rpx;
			background-color: #fa6400;
			color: #ffffff;
			border-radius: 48rpx 48rpx 0 0;
			position: relative;

			.price-out {
				position: absolute;
				top: 50%;
				transform: translateY(calc(-50% - 16rpx));
				font-size: 48rpx;
				font-family: DIN-Medium;

				.rmb-ic {
					font-size: 24rpx;
				}

				.market-price {
					text-decoration: line-through;
					font-size: 24upx;
					color: #ffffff;
					opacity: 0.6;
					font-weight: 400;
				}

				.vip-price {
					display: inline-block;
					margin-left: 20rpx;
					line-height: 32rpx;
					height: 32rpx;
					border-radius: 4rpx;
					overflow: hidden;
					font-family: DINPro-Regular;

					.price-text {
						float: left;
						min-width: 80rpx;
						text-align: center;
						vertical-align: middle;
						font-size: 20rpx;
						color: #ffdfa2;
						background: linear-gradient(270deg, #1e5657 0%, #0d2b2c 100%);
						padding: 0 8rpx;
					}

					.price-bs {
						text-align: center;
						float: left;
						vertical-align: middle;
						width: 32rpx;
						background-color: #ffdfa2;
						font-size: 20rpx;
						color: #2c7564;
					}
				}
			}

			.right-view {
				position: absolute;
				right: 30rpx;
				top: calc(50% - 16rpx);
				transform: translateY(-50%);
				font-size: 24rpx;

				.goods-num {
					text-align: right;

					.num-li {
						display: inline-block;
						font-weight: 400;
						margin-left: 20rpx;
					}
				}
			}
		}

		.active-view {
			padding: 0;
			overflow: hidden;

			// 限时秒杀样式
			.active-left {
				padding-left: 30rpx;
				width: 270rpx;
				line-height: normal;
				padding-top: 20rpx;

				.goods-num {
					height: 28rpx;
					line-height: 28rpx;
					display: flex;

					.num-li {
						font-weight: 400;
						margin-right: 20rpx;
						font-size: 20rpx;
					}
				}

				.market-price {
					text-decoration: line-through;
					font-size: 24upx;
					color: #ffffff;
					opacity: 0.6;
					font-weight: 400;
				}
			}

			.active-right {
				padding-right: 30rpx;
				width: 480rpx;
				background-color: #e02020;
				height: 150rpx;
				padding-left: 28rpx;
				padding-top: 20rpx;

				.ac-r-left {
					.active-ic {
						height: 32rpx;
						line-height: 32rpx;
						font-size: 32rpx;
						font-weight: bold;

						.ibonshijian {
							font-size: 32rpx;
							font-weight: normal;
							margin-right: 6rpx;
						}
					}

					.active-desc {
						height: 32rpx;
						line-height: 32rpx;
						font-size: 24rpx;
						margin-top: 15rpx;
					}
				}

				.ac-r-right {
					text-align: center;

					.time-title {
						font-size: 24rpx;
						margin-bottom: 8rpx;
					}

					.count-down {
						font-family: DIN-Medium;

						.day-num {
							height: 40rpx;
							padding: 0 4rpx;
							display: inline-block;
							background-color: #000000;
							color: #ffffff;
							border-radius: 6rpx;
							text-align: center;
							line-height: 40rpx;
							font-size: 28rpx;
						}

						.day-text {
							display: inline-block;
							line-height: 40rpx;
							color: #ffffff;
							font-size: 24rpx;
							margin: 0 8rpx;
						}
					}
				}
			}
		}

		.goods-info-main {
			transform: translateY(-32rpx);
			padding: 30rpx;
			background: #ffffff;
			border-radius: 32rpx 32rpx 8rpx 8rpx;

			.lap-info {
				display: flex;
				font-size: 24upx;

				.lap-li {
					text-align: center;
					flex: 3;
					padding: 0 20upx;

					.laprice-text {
						font-size: 28upx;
						font-weight: 600;
						color: #ff4d01;
					}

					.laprice-goods-num {
						color: #333333;
					}
				}
			}

			.top-title {
				.title {
					width: 594rpx;
					font-size: 32rpx;
					letter-spacing: 1px;
					color: #2a2a2a;
					font-weight: 500;

					.goods-brand {
						letter-spacing: 0;
						font-weight: 400;
						padding: 0 16upx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 40rpx;
						font-size: 24rpx;
						font-weight: 500;
						display: inline-block;
						color: #ffffff;
						margin-right: 16rpx;
					}
				}

				.collection-btn {
					text-align: center;
					font-size: 20rpx;

					.ibonfont {
						font-size: 40rpx;
					}
				}
			}

			.describe {
				font-size: 28rpx;
				color: #9a9a9a;
				padding-top: 20rpx;
				font-weight: 500;
				color: #e02020;
			}

			.active-box {
				margin-top: 40rpx;

				.row {
					width: 100%;
					display: flex;
					align-items: center;
					position: relative;

					.text {
						font-size: 28upx;
						color: #9a9a9a;
						margin-right: 40upx;
					}

					.content {
						.ac-li {
							margin-bottom: 10upx;

							.ac-label {
								background-color: #fa6400;
								padding: 0 16upx;
								height: 40rpx;
								line-height: 40rpx;
								border-radius: 40rpx;
								font-size: 20rpx;
								font-weight: 500;
								display: inline-block;
								color: #ffffff;
								margin-right: 16rpx;
							}

							.ac-activityTitle {
								display: inline-block;
								font-size: 24upx;
							}

							.ac-value {
								font-size: 24upx;
								padding-top: 10rpx;

								.ac-p {
									color: $price-color;
								}
							}
						}
					}
				}
			}
		}
	}

	.info-box {
		padding: 16rpx 30upx;
		background-color: #fff;
		border-radius: 12upx;
		transform: translateY(-48rpx);
		margin-top: 16rpx;

		.row {
			width: 100%;
			display: flex;
			align-items: center;
			position: relative;
			line-height: 80rpx;

			.text {
				font-size: 28upx;
				color: #9a9a9a;
				margin-right: 40upx;
			}

			.content {
				.conversion {
					display: inline-block;
					margin-right: 10rpx;
				}

				.no-sel {
					color: #9a9a9a;
				}

				.service-li {
					display: inline-block;
					font-size: 22rpx;
					color: #6c6c6c;
					margin-left: 20rpx;
					-webkit-line-clamp: 1;

					.service-icon {
						font-size: 28rpx;
						margin-right: 12rpx;
					}

					.icon {
						width: 28rpx;
						height: 28rpx;
						border-radius: 4rpx;
						margin-right: 12rpx;
					}
				}
			}

			.arrow {
				position: absolute;
				right: 0;

				.icon {
					color: #afafaf;
				}
			}
		}
	}

	.group-ul {
		.group-li {
			background-color: #ffffff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;

			.float_left {
				.left-scroll {
					width: 430rpx;
					white-space: nowrap;

					.goods-li {
						display: inline-block;
						vertical-align: middle;
						margin-right: 5px;

						image {
							display: block;
							width: 150rpx;
							height: 150rpx;
							border-radius: 10rpx;
							margin: 0 auto;
						}

						text-align: center;

						.goods-name {
							width: 150rpx;
							height: 36rpx;
							line-height: 36rpx;
							margin-top: 10rpx;
							font-size: 24rpx;
							-webkit-line-clamp: 1;
						}
					}

					.plus-icon {
						vertical-align: middle;
						display: inline-block;
						line-height: 150rpx;
						padding: 0 10rpx;
						height: 200rpx;
					}
				}
			}

			.dy-icon {
				padding: 0 10rpx;
				line-height: 150rpx;
				padding: 0 10rpx;
				height: 200rpx;
				color: #cecece;

				.ibonicon {
					font-size: 26rpx;
				}
			}

			.price-right {
				color: #666666;
				font-size: 24rpx;
				text-align: center;
				width: 190rpx;

				.group-price {
					font-family: DIN-Medium;

					.primary-color {
						font-weight: 700;
						font-size: 28rpx;
					}
				}

				.save-price {
					font-family: DIN-Medium;
					padding: 10rpx 0;
				}

				.buy-btn {
					line-height: 56rpx;
					height: 56rpx;
					border-radius: 8rpx;
					text-align: center;
					color: #ffffff;
					width: 150rpx;
					margin: 10rpx auto 0;
				}
			}
		}
	}

	.setMeal_more {
		color: #999;
		text-align: center;
		font-size: 24rpx;
	}

	.description {
		padding-bottom: 100upx;

		.title {
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: #999;
		}
	}

	.footer {
		position: fixed;
		bottom: 0upx;
		width: 100%;
		padding: 12upx 30rpx;
		background-color: #ffffff;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px -3rpx 32rpx 0px rgba(156, 170, 175, 0.16);

		.icons {
			height: 74upx;

			.box {
				height: 64upx;
				margin-left: 32rpx;
				display: inline-block;
				text-align: center;
				position: relative;

				.icon {
					font-size: 36upx;
					color: #000000;
				}

				.text {
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 20upx;
					color: #3c3c3c;
					padding-top: 5rpx;
				}

				&:first-child {
					margin-left: 10rpx;
					padding-right: 24rpx;
					position: relative;

					&::after {
						position: absolute;
						top: 10rpx;
						right: 0;
						content: ' ';
						display: inline-block;
						width: 1px;
						height: 48rpx;
						background: #d8d8d8;
						border-radius: 2rpx;
					}
				}
			}
		}

		.btn {
			overflow: hidden;

			.buy {
				border-radius: 8upx;
				height: 74upx;
				width: 385rpx;
				color: #ffffff;
				display: inline-block;
				line-height: 74upx;
				text-align: center;
				font-size: 28upx;
				&:first-child {
					margin-right: 10rpx;
				}
			}
		}
	}

	.popup {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
		display: none;

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}

		.layer {
			position: fixed;
			z-index: 22;
			bottom: -70%;
			width: 100%;
			padding: 0 4%;
			height: 70%;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;

			.content {
				width: 100%;
				padding: 20upx 0;
			}

			.btn {
				width: 100%;
				height: 100upx;

				.button {
					width: 100%;
					height: 80upx;
					border-radius: 40upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #f47952;
					font-size: 28upx;
				}
			}
		}

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			display: block;

			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		&.service {
			.row {
				margin: 30upx 0;

				.title {
					font-size: 30upx;
					margin: 10upx 0;
				}

				.description {
					font-size: 28upx;
					color: #999;
				}
			}
		}

		&.spec {
			.title {
				font-size: 30upx;
				margin: 30upx 0;
			}

			.sp {
				display: flex;

				view {
					font-size: 28upx;
					padding: 5upx 20upx;
					border-radius: 8upx;
					margin: 0 30upx 20upx 0;
					background-color: #f6f6f6;

					&.on {
						padding: 3upx 18upx;
						border: solid 1upx #f47925;
					}
				}
			}

			.length {
				margin-top: 30upx;
				border-top: solid 1upx #aaa;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20upx;

				.text {
					font-size: 30upx;
				}

				.number {
					display: flex;
					justify-content: center;
					align-items: center;

					.input {
						width: 80upx;
						height: 60upx;
						margin: 0 10upx;
						background-color: #f3f3f3;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;

						input {
							width: 80upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							font-size: 26upx;
						}
					}

					.sub,
					.add {
						width: 60upx;
						height: 60upx;
						background-color: #f3f3f3;
						border-radius: 5upx;

						.icon {
							font-size: 30upx;
							width: 60upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}
	}

	.share {
		display: none;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.15s linear both;
			}

			.layer {
				animation: showLayer 0.15s linear both;
			}
		}

		&.hide {
			display: block;

			.mask {
				animation: hidePopup 0.15s linear both;
			}

			.layer {
				animation: hideLayer 0.15s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			background-color: rgba(0, 0, 0, 0.5);
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			z-index: 11;
		}

		.layer {
			width: 92%;
			position: fixed;
			z-index: 12;
			padding: 0 4%;
			top: 100%;
			background-color: rgba(255, 255, 255, 0.9);

			.list {
				width: 100%;
				display: flex;
				padding: 10upx 0 30upx 0;

				.box {
					width: 25%;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;

					image {
						width: 13.8vw;
						height: 13.8vw;
					}

					.title {
						margin-top: 10upx;
						display: flex;
						justify-content: center;
						width: 100%;
						font-size: 26upx;
					}
				}
			}

			.btn {
				width: 100%;
				height: 100upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				border-top: solid 1upx #666666;
			}

			.h1 {
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34upx;
			}
		}
	}

	.coupon-box {
		.row {
			.content {
				.coupon-li {
					display: inline-block;
					width: 120upx;
					background-color: $price-color;
					color: #ffffff;
					line-height: 30upx;
					font-size: 18upx;
					text-align: center;
				}
			}
		}
	}

	.share-tit {
		line-height: 80upx;
		text-align: center;
		font-size: 32upx;
	}

	.share-cancel {
		line-height: 80upx;
		text-align: center;
		font-size: 28upx;
		border-top: 1px solid #f4f4f4;
	}

	.share-ul {
		display: flex;
		padding: 50upx 0;

		.share-li {
			flex: 3;

			.share-btn {
				background-color: #ffffff;
				font-size: 26upx;

				&::after {
					border: 0 none;
				}

				.icon-view {
					display: inline-block;
					width: 100upx;
					height: 100upx;
					border-radius: 100%;
					background-color: #18b566;
					line-height: 100upx;
					text-align: center;
					margin-bottom: 10upx;
				}
			}
		}
	}

	.poster-view {
		// width: 600upx;
		// margin: 0 auto;
	}

	.service-box {
		.content {
			width: 560rpx;
			-webkit-line-clamp: 1;

			.service-li {
				display: inline-block;
				color: #666666;
				font-size: 24rpx;
				margin-right: 30rpx;

				.icon {
					width: 50rpx;
					height: 50rpx;
					border-radius: 4rpx;
				}

				.ibonfont {
					margin-right: 10rpx;
					font-size: 24rpx;
					color: $uni-color-primary;
				}
			}
		}
	}

	.service-pop {
		.title {
			line-height: 100rpx;
			height: 100rpx;
			font-size: 32rpx;
			text-align: center;
			color: #222;
		}

		.service-ul {
			padding: 0 30rpx;
			max-height: 430rpx;
			overflow-y: auto;
			width: 100%;

			.service-li {
				font-size: 28rpx;
				padding: 24rpx 0;

				.icon {
					width: 32rpx;
					height: 32rpx;
					border-radius: 4rpx;
					margin-right: 20rpx;
				}

				.ibonfont {
					font-size: 32rpx;
					color: $uni-color-primary;
					margin-right: 20rpx;
				}

				.desc {
					padding-left: 54rpx;
					padding-top: 10rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.confirm-btn {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #ffffff;
			background-color: $uni-color-primary;
			margin-top: 30rpx;
		}
	}
	.pay-pop-view {
		background-color: #ffffff;
		border-top-left-radius: 12upx;
		border-top-right-radius: 12upx;
		font-size: 28upx;
	
		.pay-sel-title {
			padding: 0 30upx;
			line-height: 88upx;
			font-weight: bold;
			font-size: 32upx;
	
			.ibonfont {
				color: #999;
				font-weight: 400;
			}
		}
	
		.pay-btn {
			height: 90upx;
			line-height: 90upx;
			color: #000;
			font-size: 32upx;
			text-align: center;
			background-color: #108ee9;
		}
	
		.pay-ul {
			.pay-li {
				line-height: 100upx;
	
				.ibonfont {
					padding-left: 30upx;
					font-size: 46upx;
					vertical-align: middle;
					margin-right: 24upx;
				}
	
				.ibonweixinzhifu {
					color: #04be02;
				}
	
				.ibonumidd17 {
					color: #108ee9;
				}
	
				.ibonhuodaofukuan {
					color: #f2b844;
				}
	
				.pay-name {
					width: 650upx;
					display: inline-block;
					padding-right: 30upx;
					vertical-align: middle;
					border-bottom: 1px solid #f5f5f5;
	
					.ibonxuanze1,
					.ibonweixuanze {
						margin-right: 0;
						padding-left: 0;
						font-size: 38upx;
					}
	
					.balace-num {
						font-size: 24rpx;
						color: #6c6c6c;
					}
				}
	
				.balance-pay-name {
					position: relative;
					padding-bottom: 20rpx;
	
					.balance-tip {
						position: absolute;
						font-size: 22rpx;
						line-height: 36rpx;
						bottom: 10rpx;
						left: 0;
					}
				}
			}
		}
	}
</style>