junzitang/pagesT/product/product.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">
			<!-- 底部菜单 -->
			<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 v-else 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 clearfix active-view" v-if="now_sku_data.isActivity === 5">
					<view class="float_left active-left">
						<view class="active-left-top">
							<block v-if="!showGoodsPrice">
								<view style="display: inline-block;">
									<text class="rmb-ic">¥</text>
									<!-- 选择规格 -->
									<view v-if="now_sku_data.id" style="display: inline-block;">
										<rich-text v-if="now_sku_data.havActivity === 5"
											:nodes="$_utils.splitPrice(now_sku_data.activity.activityPrice, 12)">
										</rich-text>
										<rich-text v-else-if="now_sku_data.enabledLadder === 1"
											:nodes="$_utils.splitPrice(ladderPriceChange(), 12)"></rich-text>
										<rich-text v-else :nodes="$_utils.splitPrice(now_sku_data.salePrice, 12)">
										</rich-text>
									</view>
									<!-- 没有选择规格 -->
									<block v-else>
										<view style="display: inline-block;" v-if="goods_detail.isEq === 4">
											<rich-text :nodes="$_utils.splitPrice(goods_detail.minSalePrice, 12)">
											</rich-text>
										</view>
										<view v-else style="display: inline-block;">
											<rich-text :nodes="$_utils.splitPrice(goods_detail.maxSalePrice, 12)">
											</rich-text>
										</view>
									</block>
								</view>
								<text class="market-price">￥{{ goods_detail.maxMarketPrice }}</text>
							</block>
							<view style="display: inline-block;" class="showGoodsPrice" v-else>{{ showGoodsPrice }}</view>
						</view>
						<view class="goods-num">
							<view class="num-li" v-if="base_set_info.isSalesNum === 5">
								已售{{ now_sku_data.realSalesNum || goods_detail.realSalesNum }}</view>
							<view class="num-li" v-if="base_set_info.stockDisplay !== 4">
								库存
								<block v-if="base_set_info.stockDisplay === 5">
									<text
										v-if="goods_detail.isEq !== 5">{{ (now_sku_data.inventory || goods_detail.inventory) >= 1 ? '有货' : '库存不足' }}</text>
									<text v-else>{{ eq_sku_jian.inventory >= 1 ? '有货' : '库存不足' }}</text>
								</block>
								<!-- 抄码商品直接展示辅助单位的库存 -->
								<text v-if="base_set_info.stockDisplay === 6">
									{{ goods_detail.isEq === 5 ? Math.floor(eq_sku_jian.otherNum) : Math.floor(now_sku_data.inventory || goods_detail.inventory) }}
								</text>
							</view>
						</view>
					</view>
					<view class="float_right active-right clearfix">
						<view class="ac-r-left float_left">
							<view class="active-ic">
								<text class="ibonfont ibonshijian"></text>
								<text>限时秒杀</text>
							</view>
							<view class="active-desc">
								每人限购{{ now_sku_data.activity.limitNum }}{{ now_sku_data.unitName }}</view>
						</view>
						<view class="ac-r-right float_right">
							<view class="time-title">距离结束时间</view>
							<view class="count-down">
								<block v-if="phaseTime.day > 0">
									<text class="day-num">{{ phaseTime.day }}</text>
									<text class="day-text">天</text>
								</block>

								<u-count-down height="40" color="#ffffff" separator-size="36" font-size="26"
									border-color="#000000" bg-color="#000000" separator-color="#000000"
									:timestamp="phaseTime.second" :show-days="false"></u-count-down>
							</view>
						</view>
					</view>
				</view>
				<!-- 商品信息 -->
				<view class="price-view primary-bg clearfix" v-else>
					<view class="price-out">
						<block v-if="!showGoodsPrice">
							<view style="display: inline-block;">
								<text class="rmb-ic">¥</text>
								<!-- 选择规格 -->
								<view v-if="now_sku_data.id" style="display: inline-block;">
									<rich-text v-if="now_sku_data.havActivity === 5"
										:nodes="$_utils.splitPrice(now_sku_data.activity.activityPrice, 12)">
									</rich-text>
									<rich-text v-else-if="now_sku_data.enabledLadder === 1"
										:nodes="$_utils.splitPrice(ladderPriceChange(), 12)"></rich-text>
									<rich-text v-else :nodes="$_utils.splitPrice(now_sku_data.salePrice, 12)">
									</rich-text>
								</view>
								<!-- 没有选择规格 -->
								<block v-else>
									<view style="display: inline-block;" v-if="goods_detail.isEq === 4">
										<rich-text :nodes="$_utils.splitPrice(goods_detail.minSalePrice, 12)">
										</rich-text>
									</view>
									<view v-else style="display: inline-block;">
										<rich-text :nodes="$_utils.splitPrice(goods_detail.maxSalePrice, 12)">
										</rich-text>
									</view>
								</block>
							</view>
							<view class="vip-price clearfix" v-if="goods_detail.minMemberPrice > 0 && !now_sku_data.id">
								<view class="price-text">
									¥{{ goods_detail.isEq === 5 ? goods_detail.maxMemberPrice : goods_detail.minMemberPrice }}
								</view>
								<view class="price-bs">vip</view>
							</view>
							<block v-else>
								<view class="vip-price clearfix" v-if="now_sku_data.memberPrice > 0">
									<view class="price-text">¥{{ now_sku_data.memberPrice }}</view>
									<view class="price-bs">vip</view>
								</view>
							</block>
						</block>
						<view style="display: inline-block;" class="showGoodsPrice" v-else>{{ showGoodsPrice }}</view>
						<view class="market-price">￥{{ goods_detail.maxMarketPrice }}</view>
					</view>
					<view class="right-view">
						<view class="goods-num">
							<view class="num-li" v-if="base_set_info.isSalesNum === 5">
								已售{{ now_sku_data.realSalesNum || goods_detail.realSalesNum }}</view>
							<view class="num-li" v-if="base_set_info.stockDisplay !== 4">
								库存
								<!-- 抄码商品直接展示辅助单位的库存 -->
								<block v-if="base_set_info.stockDisplay === 5">
									<text
										v-if="goods_detail.isEq !== 5">{{ (now_sku_data.inventory || goods_detail.inventory) > 0 ? '有货' : '库存不足' }}</text>
									<text v-else>{{ eq_sku_jian.inventory >= 1 ? '有货' : '库存不足' }}</text>
								</block>
								<text v-if="base_set_info.stockDisplay === 6">
									{{ goods_detail.isEq === 5 ? Math.floor(eq_sku_jian.otherNum) : Math.floor(now_sku_data.inventory || goods_detail.inventory) }}
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="goods-info-main">
					<view class="lap-info" v-if="false">
						<view class="lap-li" v-for="(item, index) in now_sku_data.ladderPrice" :key="index">
							<view class="laprice-text">
								<text class="rmb-icon">￥</text>
								<text>{{ item.price }}</text>
							</view>
							<view class="laprice-goods-num" v-if="index + 1 === now_sku_data.ladderPrice.length">
								≥{{ item.from }}{{ now_sku_data.unitName }}</view>
							<view class="laprice-goods-num" v-else>
								{{ item.from }}~{{ item.to }}{{ now_sku_data.unitName }}</view>
						</view>
					</view>
					<view class="clearfix top-title">
						<view class="title float_left ellipsis">
							<view class="goods-brand primary-bg" v-if="goods_detail.isEq === 5">抄码</view>
							<view class="goods-brand primary-bg" v-if="goods_detail.brandName">
								{{ goods_detail.brandName }}</view>
							{{ goods_detail.title || '' }}
						</view>
						<view @click="collectGoods" class="float_right collection-btn">
							<view><text
									:class="[goods_detail.isCollect ? 'ibonjiarushoucang1 primary-color' : 'ibonjiarushoucang']"
									class="ibonfont"></text></view>
							<view>{{ goods_detail.isCollect ? '已收藏' : '加入收藏' }}</view>
						</view>
					</view>

					<view class="describe ellipsis">{{ goods_detail.describe }}</view>
					<!-- 活动 -->
					<view class="active-box" v-if="now_sku_data.isActivity === 5">
						<view class="row">
							<view class="text">活动</view>
							<view class="content">
								<view class="ac-li">
									<view class="ac-label">限时秒杀</view>
									<view class="ac-activityTitle">{{ now_sku_data.activity.title }}</view>
									<view class="ac-value">
										商品活动数量
										<text class="ac-p">{{ now_sku_data.activity.activityNum }}</text>
										{{ now_sku_data.unitName }}
									</view>
								</view>
							</view>
						</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 class="row" @click="openaddcartPop">
					<view class="text">已选</view>
					<view class="content">
						<text v-if="!now_sku_data.id" class="no-sel">请选择规格</text>
						<view v-else>
							<text>{{ buy_num }}{{ now_sku_data.unitName }};</text>
							<block v-for="(item, index) in now_sku_data.specGroup" :key="index">
								<text v-if="index > 0" style="padding: 0 10upx;">/</text>
								<text>{{ item.specValueName }}</text>
							</block>
							<text v-if="goods_detail.isEq === 5">{{ unitsalePrice }}元/{{ eq_sku_kg.unitName }}</text>
						</view>
					</view>
					<view class="arrow">
						<view class="icon ibonfont ibonjinru"></view>
					</view>
				</view>
				<view class="row" v-if="goods_detail.expressType === 1">
					<view class="text">运费</view>
					<view class="content">
						<text>包邮</text>
						<!-- <text>{{ goods_detail.expressFee > 0 ? goods_detail.expressFee + '元' : '免运费' }}</text> -->
						<!-- <text style="font-size: 24rpx;">（请以提交订单为准）</text> -->
					</view>
				</view>
				<view class="row" @click="openService" v-if="goods_detail.support.length">
					<view class="text">服务</view>
					<view class="content">
						<view class="service-li" v-for="(item, index) in goods_detail.support" :key="index">
							<text v-if="!item.Icon"
								class="ibonfont ibonjiarushoucang primary-color service-icon"></text>
							<image v-else class="icon" :src="item.Icon" mode="aspectFill"></image>
							<text>{{ item.servicesName }}</text>
						</view>
					</view>
					<view class="arrow">
						<view class="icon ibonfont ibonjinru"></view>
					</view>
				</view>
			</view>
			<!-- 组合套餐 -->
			<view class="info-box" v-if="total > 0 && isLogin && combinedPackage.length > 0">
				<view class="row">
					<view class="text">组合套餐</view>
					<view class="content">
						<text>{{ total }}组套餐,最多可省￥{{ combinedPackage[0].originPrice - combinedPackage[0].price - 0 }}</text>
					</view>
				</view>
				<view class="group-ul" v-for="(item, index) in combinedPackage" :key="index">
					<view class="group-li clearfix" @click="goPage('/pageT/goodsGroup/goodsGroupDetail?id=' + item.id)">
						<view class="float_left">
							<scroll-view scroll-x="true" class="left-scroll">
								<view class="goods-ul">
									<block v-for="(item1, index1) in item.goodsData" :key="index1">
										<view class="goods-li">
											<image :src="item1.images[0]" mode="aspectFill"></image>
											<view class="goods-name ellipsis">{{ item1.title }}</view>
										</view>
										<view class="plus-icon" v-if="index1 !== item.goodsData.length - 1">
											<u-icon name="plus" color="#cecece" size="28"></u-icon>
										</view>
									</block>
								</view>
							</scroll-view>
						</view>
						<view class="float_left dy-icon"><text class="ibonfont ibonicon"></text></view>
						<view class="float_left price-right">
							<view class="group-price">
								<text>套餐价</text>
								<text class="primary-color">¥{{ item.price - 0 }}</text>
							</view>
							<view class="save-price primary-color">可省¥{{ item.originPrice - item.price - 0 }}</view>
							<view class="buy-btn primary-bg">立即购买</view>
						</view>
					</view>
				</view>
				<view class="setMeal_more" @click="is_setMeal_show = true">
					<text style="margin-right: 10rpx;">查看更多套餐</text>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			<!-- 详情 -->
			<view class="description">
				<view class="title">———— 商品详情 ————</view>
				<view class="content">
					<u-parse :html="goods_detail.content || goods_detail.description"></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 mode="bottom" v-model="service_pop" border-radius="12" closeable close-icon-color="#222222">
			<view class="service-pop">
				<view class="title">商品服务</view>
				<view class="service-ul">
					<view class="service-li ellipsis" v-for="(item, index) in goods_detail.support" :key="index">
						<view>
							<text v-if="!item.Icon" class="ibonfont ibonjiarushoucang primary-color"></text>
							<image v-else class="icon" :src="item.Icon" mode="aspectFill"></image>
							<text class="text">{{ item.servicesName }}</text>
						</view>
						<view class="desc ellipsis">{{ item.describe }}</view>
					</view>
				</view>
				<view class="primary-btn confirm-btn" @click="cancelService">确定</view>
			</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" />
	</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 {
				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: ''
			};
		},
		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.title,
				path: `/pagesT/product/product?id=${this.goods_id}&businessmanId=${this.$store.state.userStatus.id || ''}`,
				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.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: {
			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/product/product?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() {
				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;
			},
			// 关闭加入购物车弹窗
			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: 190upx;
				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;
		}
	}
</style>