ds_mobile_app/mobile/standard/point/product/detail.vue

<template>
	<view class="container" v-if="isLoading">
		<!-- #ifndef MP-WEIXIN -->
		<block v-if="!isNavShow">
			<view class="go_back" @click="goBack()">
				<image :src="imgUrl + '/point/goods/go_back.png'" mode=""></image>
			</view>
			<view class="go_more"  @tap="tipsShow">
				<image :src="imgUrl + '/goods_detail/more_tips.png'" mode=""></image>
				<block v-if="tips_show">
					<view class="triangle-up"> </view>
					<view class="tips">
						<button v-for="(item, index) in tips" :key="index" class="tips_pre" @tap="handleLink" :data-link="item.tips_link"
						 :open-type="item.type" :data-type="item.type" plain="true">
							<image :src="item.tips_img"></image>
							<text>{{item.tips_name}}</text>
						</button>
					</view>
				</block>
			</view>
		</block>
		<!-- #endif -->
		<!-- 透明遮罩层 -->
		<view class="transparent_mask" v-if="transparent_mask" @tap="hideMask"></view>
		<!-- #ifdef APP-PLUS -->
		<view class="fixed_top_status_bar" :class="{fixed_top_status_bar_no_opcity:noOpcity}"></view>
		<!-- #endif -->
		<view class="nav_list" v-if="isNavShow" :class="{nav_list_no_opcity:noOpcity}">
			<!-- #ifndef MP-WEIXIN -->
			<view class="go_back_nav flex_row_center_center" @click="goBack()">
				<image :src="imgUrl + '/point/goods/back.png'" mode=""></image>
			</view>
			<!-- #endif -->
			<view class="nav_list_pre" :class="{nav_list_pre_active:currentNav == item.id}" v-for="(item,index) in navList" :key="index"
			 @click="clickNav(item.id)">
				{{item.text}}
			</view>
			<view class="more_tips" @tap="tipsShow">
				<image class="more" :src="imgUrl + 'goods_detail/more.png'"></image>
				<block v-if="tips_show">
					<view class="triangle-up"> </view>
					<view class="tips">
						<button v-for="(item, index) in tips" :key="index" class="tips_pre" @tap="handleLink" :data-link="item.tips_link"
						 :open-type="item.type" :data-type="item.type" plain="true">
							<image :src="item.tips_img"></image>
							<text>{{item.tips_name}}</text>
						</button>
					</view>
				</block>
			</view>
		</view>

		<view class="detail_con">
			<view class="carousel" id="nav1">
				<uni-swiper-dot :info="defaultProduct.goodsPics" field="content" :mode="mode" :current="goodsVideo?(current-1):current">
					
					<swiper class="swiper-box" @change="change" :current="current">
						<!-- #ifdef H5 -->
						<swiper-item  v-if="goodsVideo">
							<image :src="defaultProduct.goodsPics[0]" class="slide-image"></image>
							<image :src="imgUrl+'play.png'" class="play_btn" @click="toPlayPage"></image>
						</swiper-item>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN|| APP-PLUS  -->
						<swiper-item  v-if="goodsVideo">
							<block v-if="!playVFlag">
								<image :src="defaultProduct.goodsPics[0]" class="slide-image"></image>
								<image :src="imgUrl+'play.png'" class="play_btn" @click="playVideo('on')"></image>
							</block>
							<block v-else>
								<video controls :src="goodsVideo" class="video_btn"
								:poster="defaultProduct.goodsPics[0]" autoplay="true" @ended="playVideo('end')">
								</video>
							</block>
							
						</swiper-item>
						<!-- #endif -->
						<!-- 默认规格 图  start-->
						<block v-if="defaultProduct && defaultProduct.goodsPics && defaultProduct.goodsPics.length > 0">
							<swiper-item class="swiper-item" v-for="(item,index) in defaultProduct.goodsPics" :key="index">
								<view class="image-wrapper">
									<image :src="item" class="loaded" mode="aspectFit"></image>
								</view>
							</swiper-item>
						</block>
						<!-- 默认规格 图  end-->
					</swiper>
				</uni-swiper-dot>
			</view>

			<view class="introduce_section_point flex_column_between_start" :style="'background-image:url('+imgUrl+'/point/goods/detail_bg.png);background-size:100% 100%;background-repeat:no-repeat;'">
				<view class="point_top flex_row_start_end">
					<view class="point_num" v-if="defaultProduct.integralPrice">
						<text>{{defaultProduct.integralPrice}}</text><text>{{$L('积分')}}</text>
					</view>
					<view class="point_tips" v-if="defaultProduct.integralPrice && defaultProduct.cashPrice">+</view>
					<view class="point_price" v-if="defaultProduct.cashPrice">
						<text class="unit">￥</text>
						<text class="price_int">{{this.$getPartNumber(defaultProduct.cashPrice,'int')}}</text>
						<text class="price_decimal">{{this.$getPartNumber(defaultProduct.cashPrice,'decimal')}}</text>
					</view>
				</view>
				<view class="point_original_sales flex_row_between_center">
					<view class="point_original_price" v-if="defaultProduct.marketPrice">
						{{$L('原价')}}：￥<text>{{filters.toFix(defaultProduct.marketPrice)}}</text>
					</view>
					<view class="point_sales">{{$L('已兑换')}}{{goodsData.sales}}</view>
				</view>
			</view>

			<!-- 有活动商品样式 start -->
			<view class="introduce_section_activity">
				<view class="activity_goods_des">
					<view class="activity_goods_name">
						{{goodsData.goodsName}}
					</view>
					<view class="activity_share_collection">
						<view class="activity_goods_share" @click="goShare">
							<text class="iconfont iconfenxiang"></text>
							<text class="show_text">{{$L('分享')}}</text>
						</view>
					</view>
				</view>
				<view class="activity_goods_brief" v-if="goodsData.goodsBrief">
					{{goodsData.goodsBrief}}
				</view>
			</view>
			<!-- 有活动商品样式 end -->

			<!-- 选择规格 start -->
			<view class="spec_con" @click="showSpecModel">
				<view class="spec_left">
					<view class="spec_left_title">{{$L('已选')}}</view>
					<view class="spec_left_content" v-if="defaultProduct.specValues">{{defaultProduct.specValues}}</view>
					<view class="spec_left_content" v-else>{{$L('默认')}}</view>
				</view>
				<image :src="imgUrl+'goods_detail/right_down.png'" mode="" class="spec_right" ></image>
			</view>
			<!-- 选择规格 end -->

			<view class="detail-desc" id="nav2">
				<view class="detail-desc_title">
					<text>{{$L('商品详情')}}</text>
					<image :src="imgUrl + 'goods_detail/spec_param_bg.png'" mode=""></image>
				</view>
				<jyf-parser :html="goodsData.goodsDetails" ref="description"></jyf-parser>
			</view>

			<!-- 店铺推荐 推荐礼品 start -->
			<recommendList id="nav3" ref="recommendList"></recommendList>
			<!-- 店铺推荐 推荐礼品 end -->
		</view>

		<!-- 底部操作菜单 -->
		<view class="page_bottom" v-if="goodsData.state!=3">
			<view class="action_btn_group no_stock" @click="showSpecModel()">{{$L('商品已下架')}}</view>
		</view>
		<view class="page_bottom" v-else>
			<view class="action_btn_group no_stock" @click="showSpecModel()"  v-if="defaultProduct.productStock == 0">{{$L('库存不足')}}</view>
			<view class="action_btn_group" @click="showSpecModel('buy')" v-else>{{$L('立即兑换')}}</view>
		</view>

		<!-- 分享 -->
		<share ref="share" :contentHeight="580" :shareList="shareList"></share>
		<uni-popup ref="popup" type="dialog" @touchmove.stop.prevent="moveHandle">
			<uni-popup-dialog type="input" :title="dialogTitle" :content="dialogCon" :duration="2000" before-close="true" @close="dialogCancle"
			 @confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>


		<!-- 分享弹框 start -->
		<view class="share_model" v-if="share_model" @touchmove.stop.prevent="moveHandle">
			<view class="share_model_list">
				<!-- #ifdef H5 -->
				<view class="share_model_pre" @tap.stop="sldShareBrower" v-if="isWeiXinBrower">
					<image :src="imgUrl+'goods_detail/wx_share.png'" mode=""></image>
					<text>{{$L('微信好友')}}</text>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="share_model_pre">
					<image :src="imgUrl+'goods_detail/wx_share.png'" mode=""></image>
					<text>{{$L('微信好友')}}</text>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="share_model_pre" @tap.stop="sldShare(0,'WXSceneSession')">
					<image :src="imgUrl+'goods_detail/wx_share.png'" mode=""></image>
					<text>{{$L('微信好友')}}</text>
				</view>
				<view class="share_model_pre" @tap.stop="sldShare(0,'WXSenceTimeline')">
					<image :src="imgUrl+'goods_detail/wechat_moments.png'" mode=""></image>
					<text>{{$L('微信朋友圈')}}</text>
				</view>
				<!-- #endif -->
				<view class="share_model_pre">
					<image :src="imgUrl+'goods_detail/poster.png'" mode="" @click="getPoster"></image>
					<text>{{$L('生成海报')}}</text>
				</view>
			</view>
			<view class="share_model_close" @click="closeShareModel">
				<image :src="imgUrl+'goods_detail/share_close.png'" mode=""></image>
			</view>
		</view>
		<!-- 分享弹框 end -->



		<!-- 生成海报  start-->
		<view class="poster" v-if="poster" @touchmove.stop.prevent="moveHandle">
			<!-- 分享海报弹框 start -->
			<view class="share_model" :class="{poster_share_model:poster}">
				<image :src="sharePoster" mode="" class="poster_image" @longtap.stop="downloadPoster"></image>
				<view class="share_model_list">
					<!-- #ifdef MP-WEIXIN -->
					<view class="share_model_pre" @tap.stop="downloadPoster">
						<image :src="imgUrl+'goods_detail/poster.png'" mode=""></image>
						<text>{{$L('下载海报')}}</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="share_model_pre" @tap.stop="downloadPoster">
						<image :src="imgUrl+'goods_detail/poster.png'" mode=""></image>
						<text>{{$L('保存海报')}}</text>
					</view>
					<view class="share_model_pre" @tap.stop="sldShare(2,'WXSceneSession')">
						<image :src="imgUrl+'goods_detail/wx_share.png'" mode=""></image>
						<text>{{$L('微信好友')}}</text>
					</view>
					<view class="share_model_pre" @tap.stop="sldShare(2,'WXSenceTimeline')">
						<image :src="imgUrl+'goods_detail/wechat_moments.png'" mode=""></image>
						<text>{{$L('微信朋友圈')}}</text>
					</view>
					<!-- #endif -->
				</view>
				<!-- #ifndef H5 -->
				<view class="share_model_close" @click="closeShareModel">
					<image :src="imgUrl+'goods_detail/share_close.png'" mode=""></image>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<image :src="imgUrl+'goods_detail/poster_share.png'" mode="" class="poster_share_img" @longtap.stop="downloadPoster"></image>
				<image :src="imgUrl+'goods_detail/poster_share_close.png'" mode="" class="poster_share_close" @click.stop="closePoster"></image>
				<!-- #endif -->
			</view>
			<!-- 分享海报弹框 end -->

		</view>
		<!-- 生成海报  end-->
		<!-- 微信浏览器分享提示  start-->
		<view class="wx_brower_share_mask" v-if="showWeiXinBrowerTip">
			<view class="wx_brower_share_top_wrap">
				<image :src="imgUrl+'wx_share_tip.png'" mode="widthFix" @tap="closeShareModel" class="wx_brower_share_img"></image>
			</view>
		</view>
		<!-- 微信浏览器分享提示  end-->
		<!-- 规格弹框 start -->
		<uni-popup class="spec_model" ref="specModel" type="bottom" @touchmove.stop.prevent="moveHandle">
			<view class="spec_model_con">
				<view class="spec_model_content">
					<view class="spec_model_top">
						<view class="spec_model_goods">
							<view class="spec_goods_image" v-if="defaultProduct && defaultProduct.goodsPics && defaultProduct.goodsPics[0]">
								<image :src="defaultProduct.goodsPics[0]" mode="aspectFit"></image>
							</view>
							<view class="spec_goods_right">
								<view class="spec_goods_price_con">
									<view class="spec_prices">
										<view class="spec_goods_point" v-if="defaultProduct.integralPrice">
											{{defaultProduct.integralPrice}}{{$L('积分')}}
										</view>
										<view class="flex_row_start_end">
											<view class="spec_goods_price" v-if="defaultProduct.cashPrice">
												<text>￥</text>
												<text>{{$getPartNumber(defaultProduct.cashPrice,'int')}}</text>
												<text>{{$getPartNumber(defaultProduct.cashPrice,'decimal')}}</text>
											</view>
											<view class="spec_goods_cash" v-if="defaultProduct.marketPrice">
												￥{{filters.toFix(defaultProduct.marketPrice)}}
											</view>
										</view>
									</view>
								</view>
								<!-- 普通商品 start -->
								<view class="spec_goods_des">
									{{$L('已选规格')}}：{{defaultProduct.specValues ? defaultProduct.specValues : '默认'}}
								</view>
								<!-- 普通商品 end -->
							</view>
						</view>
						<image :src="imgUrl+'goods_detail/close.png'" mode="" class="close_spec" @click="closeSpecModel"></image>
					</view>
					<scroll-view scroll-y="true" class="spec_content">
						<view class="spec_list" v-if="specs && specs.length > 0">
							<view class="spec_list_pre" v-for="(item,index) in specs" :key="index">
								<view class="spec_list_pre_name">{{item.specName}}</view>
								<block v-if="item && item.specValueList && item.specValueList.length > 0" v-for="(item1,index1) in item.specValueList"
								 :key='index1'>
									<!-- checkState : 1-选中，2-可选，3-禁用 -->
									<view class="spec_list_pre_desc" :class="{spec_list_pre_desc_disabled:item1.checkState == '3'}" v-if="item1.checkState == '3'">
										<view class="spec_list_pre_con">
											<image :src="item1.image" mode="" v-if="item1.image"></image>
											<text>{{item1.specValue}}</text>
										</view>
									</view>
									<view class="spec_list_pre_desc" :class="{spec_list_pre_desc_active:item1.checkState == '1'}" @click="selectSpecVal(item.specId,item1.specValueId)"
									 v-else>
										<view class="spec_list_pre_con">
											<image :src="item1.image" mode="" v-if="item1.image"></image>
											<text>{{item1.specValue}}</text>
										</view>
									</view>
								</block>
							</view>
						</view>
						<view class="spec_num">
							<view class="spec_num_left">
								{{$L('购买数量')}}
							</view>
							<view class="spec_num_right">
								<text @click="editNum('reduce')" :class="{no_edit:currentSpecNum==1}">-</text>
								<input type="number" v-model="currentSpecNum" @input="editNum('edit',$event)" />
								<text @click="editNum('add')" :class="{no_edit:currentSpecNum==defaultProduct.productStock}">+</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 规格弹框的底部按钮 start -->
				<view class="spec_btn" v-if="goodsData.state!=3">
					<!-- 已下架 start -->
					<button type="primary" class="no_stock_spec_btn">{{$L('商品已下架')}}</button>
					<!-- 已下架 end -->
				</view>
				<view class="spec_btn" v-else>
					<!-- 库存不足 start -->
					<button type="primary" class="no_stock_spec_btn" v-if="defaultProduct.productStock == 0">{{$L('库存不足')}}</button>
					<!-- 库存不足 end -->
					<!--立即兑换 start -->
					<button type="primary" class="spec_btn_only" @click="goConfirm" v-else>{{$L('立即兑换')}}</button>
					<!--立即兑换 end -->
				</view>

				<!-- 规格弹框的底部按钮 end -->
			</view>
		</uni-popup>
		<!-- 规格弹框 end -->
	</view>
</template>
<script module="filters" lang="wxs" src="../../../utils/filter.wxs"></script>
<script>
	import share from '@/components/share';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress';
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
	import recommendList from "../components/recommend_list.vue";
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			share,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			jyfParser,
			selectAddress,
			uniSwiperDot,
			recommendList
		},
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				dialogTitle: '温馨提示!',
				dialogCon: '您需要先登录哦～',
				goodsData: {},
				shareList: [],
				goodsId: '', //商品id
				curFreight: '', //当前运费
				currentSelId: '', //默认选中第一个地址
				share_model: false, //分享弹框
				isNavShow: false, //是否显示导航
				navList: [{
						text: '商品',
						id: 0,
					},
					{
						text: '详情',
						id: 1
					},
					{
						text: '推荐',
						id: 2
					},
				],
				currentNav: 0, //当前点击的默认是第一项
				nav1ScrollTop: 0, //商品模块距离顶部的距离
				nav2ScrollTop: 0, //详情模块距离顶部的距离
				nav3ScrollTop: 0, //推荐模块距离顶部的距离
				codeImg: '', //海报图片
				poster: false, //生成海报
				specModel: false, //规格弹框
				currentSpecNum: 1, //当前规格弹框中的购买数量
				defaultProduct: {}, //默认货品信息
				specs: [], //商品规格列表
				productId: '', //货品id
				sharePoster: '',
				isWeiXinBrower: false, //是否微信浏览器
				showWeiXinBrowerTip: false, //微信浏览器分享的提示操作
				source: 2, //来源，终端类型，1、pc 2、app；3、公众号或微信内部浏览器；4、小程序
				mode: 'nav', //轮播图的显示样式类型
				current: 0, //轮播图默认显示第一页
				showSpecModelType: '', //规格弹框的底部按钮的显示类型	默认：加入购物车及立即购买都有	add：加入购物车	buy：立即购买		nosocket库存不足	offshelf商品下架
				noOpcity: false, //顶部导航的背景是否有透明度，轮播图以上有，以下没有
				isLoading: false,
				transparent_mask: false, //透明遮罩蒙层
				tips_show: false, //分享链接弹框
				tips: [{
						tips_img: getApp().globalData.imgUrl + 'goods_detail/home.png',
						tips_name: '积分首页',
						tips_link: '/standard/point/index/index',
						type: 'navigateTo'
					},
					{
						tips_img: getApp().globalData.imgUrl + 'goods_detail/go_cart.png',
						tips_name: '购物车',
						tips_link: '/pages/cart/cart',
						type: 'switchTab'
					},
					{
						tips_img: getApp().globalData.imgUrl + 'goods_detail/preson.png',
						tips_name: '个人中心',
						tips_link: '/pages/user/user',
						type: 'switchTab'
					}
				],
				onceLoad:true ,//页面首次加载标识
				goodsVideo:'',
				showControls:true,//是否显示轮播角标
				playVFlag:false,
				goBuyDisableStatus:false
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onReachBottom() {
			this.$refs.recommendList.getMoreData();
		},
		onShow(){
			if(!this.onceLoad){
				this.getGoodsDetail(this.productId);
			}
		},
		async onLoad(options) {
			setTimeout(()=>{
				//异步宏任务执行
				this.onceLoad=false;
			},0)
			uni.showLoading({
				title: '加载中！'
			})
			this.productId = options.productId;
			this.goodsId = options.goodsId;
			this.getGoodsDetail(this.productId);
			this.sharePoster = getApp().globalData.apiUrl +
				'v3/integral/front/integral/goods/share/sharePosters?integralProductId=' + this.productId + '&source=' + this.source;
			// this.shareList = await this.$api.json('shareList');
			uni.getSystemInfo({
				success: (res) => {
					let clientHeight = res.windowHeight,
						clientWidth = res.windowWidth,
						rpxR = 750 / clientWidth;
					let calc = clientHeight * rpxR;
					this.winHeight = calc;
				}
			})
			// #ifdef H5
			this.isWeiXinBrower = this.$isWeiXinBrower();
			// #endif

			//#ifdef APP-PLUS
			this.source = 2;
			//#endif
			//#ifdef H5
			this.source = 3;
			//#endif
			//#ifdef MP-WEIXIN
			this.source = 4;
			//#endif
			this.goTop(); //一键回到页面顶部
		},
		onShareAppMessage: function() {
			return {
				title: this.goodsData.goodsName,
				path: '/pages/product/detail?productId=' + this.productId + '&goodsId=' + this.goodsId,
				imageUrl: this.defaultProduct.goodsPics
			};
		},

		//页面滚动事件
		onPageScroll(res) { //监听滚动事件，获取滚动条的当前位置
			this.tips_show = false;
			if (res.scrollTop > 50) {
				this.isNavShow = true
				if (res.scrollTop > 350) {
					this.noOpcity = true
				} else {
					this.noOpcity = false;
				}
				if (res.scrollTop < this.nav2ScrollTop) {
					this.currentNav = 0;
				} else if (res.scrollTop >= this.nav2ScrollTop && res.scrollTop < this.nav3ScrollTop) {
					this.currentNav = 1
				} else if (res.scrollTop >= this.nav3ScrollTop) {
					this.currentNav = 2
				}
			} else {
				this.isNavShow = false;
			}
		},
		methods: {
			//立即兑换
			goConfirm() {
				if (!this.hasLogin) {
					getApp().globalData.goLogin()
					return
				}
				this.$refs.specModel.close();
				uni.navigateTo({
					url: '/standard/point/product/confirm_order?number=' + this.currentSpecNum + '&productId=' + this.productId
				})
			},
			//获取页面元素模块距离顶部的距离
			getSelectorQuery() {
				let query = uni.createSelectorQuery().in(this);
				// 获取状态栏的高度
				let statusBarHeight = 0;
				// #ifdef APP-PLUS
				let systemInfo = uni.getSystemInfoSync();
				statusBarHeight = systemInfo.statusBarHeight;
				// #endif
				//获取对应模块到顶部的距离
				query.select('#nav1').boundingClientRect((res) => {
					this.nav1ScrollTop = res.top - (50 + statusBarHeight)
				}).exec()
				query.select('#nav2').boundingClientRect((res) => {
					this.nav2ScrollTop = res.top - (50 + statusBarHeight)
				}).exec()
				query.select('#nav3').boundingClientRect((res) => {
					this.nav3ScrollTop = res.top - (50 + statusBarHeight)
				}).exec()
			},
			// 点击导航
			clickNav(navId) {
				this.currentNav = navId;
				if (navId == 0) {
					this.isNavShow = true;
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					})
					this.isNavShow = false;
				} else if (navId == 1) {
					uni.pageScrollTo({
						scrollTop: this.nav2ScrollTop,
						duration: 300
					})

				} else if (navId == 2) {
					uni.pageScrollTo({
						scrollTop: this.nav3ScrollTop + 5,
						duration: 600
					})
				}
			},
			//轮播图切换
			change: function(e) {
				this.current = e.detail.current;
				if(this.goodsVideo&&e.detail.current==0){
					this.showControls=false
				}else{
					this.showControls=true
				}
			},
			//跳转客服页面
			toKefu() {
				this.$sldCommonTip()
			},
			//浏览器分享
			sldShareBrower() {
				this.showWeiXinBrowerTip = true;
				this.share_model = false;
				let {
					goodsData
				} = this;
				this.$weiXinBrowerShare(1, {
					title: goodsData.goodsName,
					desc: goodsData.goodsBrief,
					link: goodsData.shareLink,
					imgUrl: goodsData.shareImage,
				});
			},

			//分享 type：分享类型 0 图文 2图片，scene 场景 WXSceneSession：分享朋友  WXSenceTimeline：分享朋友圈
			sldShare: function(type, scene) {
				let shareData = {};
				let {
					goodsData,
					sharePoster
				} = this;
				if (type == 0) {
					shareData.href = goodsData.shareLink;
					shareData.title = goodsData.goodsName;
					shareData.summary = goodsData.goodsBrief;
					shareData.imageUrl = goodsData.shareImage;
				} else if (type == 2) {
					shareData.imageUrl = sharePoster;
				}
				this.$weiXinAppShare(type, scene, shareData);
				this.closeShareModel(); //关闭分享
			},
			
			// 点击播放按钮,或者视频播放结束隐藏视频组件
			playVideo(type){
				if(type=='on'){
					this.playVFlag = true
				}else if(type=='end'){
					this.playVFlag = false
				}
				
			},

			//回到页面顶部
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				this.currentNav = 0;
			},
			//获取商品详情信息
			getGoodsDetail(productId) {
				this.$request({
					url: 'v3/integral/front/integral/mall/details',
					data: {
						integralProductId: this.productId, //积分货品Id
					}
				}).then(res => {
					if (res.state == 200) {
						this.goodsData = res.data; //详情信息
						this.defaultProduct = res.data.defaultProduct; //默认货品信息
						if(!this.defaultProduct.productStock){
							//如果默认库存为0，则此商品全规格库存都为0，则禁用button
							this.goBuyDisableStatus=true;
						}
						this.productId = this.defaultProduct.integralProductId; //货品id
						this.specs = res.data.specs; //规格列表
						this.goodsId = res.data.integralGoodsId; //商品的goodsId;
						this.goodsVideo = res.data.goodsVideo,
						this.showControls = this.goodsVideo?false:true;
						this.isLoading = true;
						uni.hideLoading();
					} else {
						this.isLoading = true;
						//错误提示
						this.$api.msg(res.msg);
					}
				}).then(() => {
					setTimeout(() => {
						this.getSelectorQuery();
					}, 0)
				}).catch((e) => {})
			},
			/**选择规格值
			 * @param {Object} specId 父级规格值
			 * @param {Object} specValueId   点击的当前的规格值
			 */
			selectSpecVal(specId, specValueId) {
				let that = this;
				let curParSpec = []; //当前点击的规格的父级id的当前项
				curParSpec = that.specs.filter(item => item.specId == specId);
				let curSPec = []; //当前点击的规格的规格id的当前项
				curSPec = curParSpec[0].specValueList.filter(item1 => item1.specValueId == specValueId);
				curSPec[0].checkState = 1;
				//被选择的规格值的id
				let choiceSpecIds = [];
				that.specs.forEach(item => {
					if (item.specId != specId) {
						item.specValueList.forEach(item1 => {
							if (item1.checkState == '1') { // checkState: 1-选中，2-可选，3-禁用
								choiceSpecIds.push(item1.specValueId)
							}
						})
					} else {
						choiceSpecIds.push(specValueId);
					}
				})

				let param = {};
				param.url = 'v3/integral/front/integral/mall/productInfo';
				param.method = 'GET';
				param.data = {};
				param.data.integralGoodsId = that.goodsId;
				param.data.specValueIds = choiceSpecIds.join(',');
				that.$request(param).then(res => {
					if (res.state == 200) {
						let result = res.data;
						that.defaultProduct = result.defaultProduct; //默认货品信息
						that.productId = result.defaultProduct.integralProductId; //货品id
						that.specs = res.data.specs; //规格列表
						that.goodsId = res.data.integralGoodsId; //商品的goodsId;
						that.currentSpecNum = 1;
					} else {
						that.$api.msg(res.msg);
					}
				}).catch((e) => {
					//异常处理
				})
			},
			//分享
			share() {
				this.$refs.share.toggleMask();
			},

			moveHandle() {},
			//弹层取消事件
			dialogCancle() {
				this.$refs.popup.close();
			},
			//弹层确认事件
			dialogConfirm() {
				uni.navigateTo({
					url: `/pages/public/login`
				})
				this.$refs.popup.close();
			},
			//去分享
			goShare() {
				this.share_model = true;
			},
			//关闭分享弹框
			closeShareModel() {
				this.share_model = false;
				this.showWeiXinBrowerTip = false;
				this.poster = false;
			},
			//获取海报
			getPoster() {
				this.share_model = false;
				this.showWeiXinBrowerTip = false;
				this.poster = true;
			},
			//下载海报
			downloadPoster() {
				let {
					sharePoster
				} = this;
				let _this = this;
				uni.downloadFile({
					url: sharePoster,
					success: res_info => {
						if (res_info.statusCode == 200) {
							uni.saveImageToPhotosAlbum({
								filePath: sharePoster,
								success: function(data) {
									uni.showToast({
										title: '已保存到本地',
										icon: 'success',
										duration: 1000
									});
								},
								fail: function(res) {
									uni.getSetting({
										success: function(res_down) {
											if (!res_down.authSetting['scope.writePhotosAlbum']) {
												uni.showModal({
													title: '提示',
													content: '您好,需要开启相册权限',
													showCancel: false,
													success(res) {
														if (res.confirm) {
															uni.authorize({
																scope: 'scope.writePhotosAlbum',
																success() {
																	// 用户已经同意,后续调用时不会弹窗询问
																	uni.showToast({
																		title: '已保存到本地',
																		icon: 'success',
																		duration: 1000
																	});
																	_this.closeShare();
																},
																fail(res) {
																	//拒绝授权
																	uni.showToast({
																		title: '抱歉，没有授权无法下载海报',
																		icon: 'none'
																	});
																}
															});
														}
													}

												});
											} else {
												uni.saveImageToPhotosAlbum({
													filePath: sharePoster,
													success: function(data) {
														uni.showToast({
															title: '已保存到本地',
															icon: 'success',
															duration: 1000
														});
													},
													fail: function(res) {
													}
												})
											}
										},
										fail: function(res) {
										}

									});
								}
							})
						} else {
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							});
							_this.poster = true;
						}
					}
				})
			},

			//关闭海报
			closePoster() {
				this.poster = false;
			},
			//打开规格弹框
			showSpecModel(type) {
				if(this.goBuyDisableStatus && !type){
					return;
				}
				if (type == 'add') {
					this.showSpecModelType = 'add'
				} else if (type == 'buy') {
					this.showSpecModelType = 'buy'
				} else if (type == 'offshelf') {
					this.showSpecModelType = 'offshelf'
				} else if (type == 'nosocket') {
					this.showSpecModelType = 'nosocket'
				} else {
					this.showSpecModelType = ''
				}
				this.$refs.specModel.open();
			},
			//编辑数量
			editNum(type, e) {
				let that = this;
				if (type == 'add') {
					if (that.currentSpecNum >= that.defaultProduct.productStock) {
						if(that.defaultProduct.productStock<=0){
							//如果商品库存为0,禁止操作购买数量即可
							return;
						}
						that.currentSpecNum = that.defaultProduct.productStock;
					} else {
						if (that.currentSpecNum > 999) {
							that.currentSpecNum = 999;
						} else {
							that.currentSpecNum++
						}
					}
				} else if (type == 'edit') {
					if (that.currentSpecNum > that.defaultProduct.productStock) {
						setTimeout(() => {
							that.currentSpecNum = that.defaultProduct.productStock;
						}, 0)
					} else {
						that.currentSpecNum = e.detail.value;
						if (that.currentSpecNum == 0) {
							setTimeout(() => {
								that.currentSpecNum = 1;
							}, 0)
						} else {
							that.currentSpecNum = that.currentSpecNum.replace(/\D/g, '');
							if (that.currentSpecNum > 999) {
								setTimeout(() => {
									that.currentSpecNum = 999;
								}, 0)
							} else {
								setTimeout(() => {
									that.currentSpecNum = that.currentSpecNum;
								}, 0)
							}
						}
					}
				} else if (type == 'reduce') {
					if (that.currentSpecNum > 1) {
						that.currentSpecNum--;
					} else {
						that.currentSpecNum = 1;
					}
				}
			},
			//关闭规格弹框
			closeSpecModel() {
				this.$refs.specModel.close();
			},
			//去商品详情页面
			goGoodsDetail(defaultProductId, goodsId) {
				uni.navigateTo({
					url: '/pages/product/detail?productId=' + defaultProductId + '&goodsId=' + goodsId
				})
			},
			//分享链接的弹框展示
			tipsShow() {
				this.tips_show = !this.tips_show;
				this.transparent_mask = !this.transparent_mask;
			},
			//三点分享链接
			handleLink(e) {
				let link = e.currentTarget.dataset.link;
				let type = e.currentTarget.dataset.type;
				if (type != 'share') {
					if (type == 'navigateTo') {
						uni.navigateTo({
							url: link
						})
					} else {
						uni.switchTab({
							url: link
						});
					}
				}
				this.tips_show = false;
			},
			//隐藏透明遮罩层
			hideMask() {
				this.transparent_mask = false;
				this.tips_show = false;
			},
			//返回上一页
			goBack() {
				// #ifdef H5
				const pages = getCurrentPages();
				//有返回的页面则直接返回，uni.navigateBack默认返回失败之后会自动刷新页面，无法继续返回
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//vue router 可以返回uni.navigateBack失败的页面，但是会重新加载
				let a = this.$router.go(-1);
				//router.go失败之后则重定向到积分首页
				if (a == undefined) {
					uni.reLaunch({
						url: '/standard/point/index/index'
					})
				}
				return;
				// #endif
				uni.navigateBack({
					delta: 1
				})
			},
			//h5跳转新页面播放视频
			toPlayPage(){
				uni.navigateTo({
					url: '/pages/product/video?video_url='+this.goodsVideo+'&posterImage='+this.defaultProduct.goodsPics[0],
				});
			},
		}
	}
</script>

<style lang='scss'>
	page {
		background: $bg-color-split;
		/* padding-bottom: 100rpx; */
		width: 750rpx;
		margin: 0 auto;
	}
	.container{
		position: relative;
	}
	
	.uni-swiper-dot,.swiper-box,.video_btn,.swiper_item,.slide-image{
		width: 100%;
		height: 750rpx;
	}
	.play_btn{
		width: 90rpx;
		height: 90rpx;
		position: absolute;
		left: 50%;    //起始是在body中，横向距左50%的位置
		top:50%;      //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
		transform:translate(-50%,-50%);//水平、垂直都居中,也可以写成下面的方式
	}
	

	.go_back {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		/* #ifdef H5 */
		top: 28rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: calc(var(--status-bar-height) + 28rpx);
		/* #endif */
		left: 25rpx;
		z-index: 99;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.go_more{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		/* #ifdef H5 */
		top: 28rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 28rpx;
		/* #endif */
		right: 25rpx;
		z-index: 99;
		image{
			width: 50rpx;
			height: 50rpx;
		}
		.triangle-up {
			position: absolute;
			display: block;
			top: 40rpx;
			right: -15rpx;
			width: 0rpx;
			height: 0rpx;
			background: #FFFFFF;
			border: 1px solid #CCCCCC;

			&::before {
				box-sizing: content-box;
				width: 0;
				height: 0;
				position: absolute;
				top: -2px;
				right: 25rpx;
				padding: 0;
				border-bottom: 8px solid #ffffff;
				border-top: 8px solid transparent;
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
				display: block;
				content: '';
				z-index: 12;
			}

			&::after {
				box-sizing: content-box;
				width: 0px;
				height: 0px;
				position: absolute;
				top: -5px;
				right: 20rpx;
				padding: 0;
				border-bottom: 9px solid rgba(102, 102, 102, 0.1);
				border-top: 9px solid transparent;
				border-left: 9px solid transparent;
				border-right: 10px solid transparent;
				display: block;
				content: '';
				z-index: 10
			}
		}
		.tips {
			position: absolute;
			z-index: 20;
			top: 70rpx;
			right: -10rpx;
			width: 226rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 10rpx 0px rgba(102, 102, 102, 0.2);
			opacity: 0.94;
			border-radius: 15rpx;
			display: flex;
			flex-direction: column;
			.tips_pre {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				box-sizing: border-box;
			}

			button::after {
				border: none;
				border-bottom: 1rpx solid #f1f1f1;
			}

			button[plain] {
				border: none;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}

			text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 32rpx;
			}
		}
	}

	.icon-you {
		font-size: $font-base;
		color: #888;
	}

	/* 透明遮罩层 */
	.transparent_mask {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #FFFFFF;
		top: 0;
		left: 0;
		opacity: 0;
		z-index: 10;
	}

	.fixed_top_status_bar {
		position: fixed;
		/* #ifdef APP-PLUS */
		height: var(--status-bar-height);
		/* #endif */
		/* #ifndef APP-PLUS */
		height: 0;
		/* #endif */
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		background: rgba(250, 250, 250, 0.9);
	}

	.fixed_top_status_bar_no_opcity {
		background: #FFFFFF;
	}

	.nav_list {
		display: flex;
		justify-content: space-between;
		position: fixed;
		width: 750rpx;
		height: 100rpx;
		background: rgba(250, 250, 250, 0.9);
		padding: 0 50rpx 0 20rpx;
		/* #ifdef MP-WEIXIN */
		padding-left: 150rpx;
		/* #endif */
		align-items: center;
		z-index: 50;

		.go_back_nav {
			width: 50rpx;
			height: 50rpx;

			image {
				width: 20rpx;
				height: 32rpx;
			}
		}

		.nav_list_pre {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 32rpx;
			padding-bottom: 5rpx;
		}

		.nav_list_pre_active {
			border-bottom: 5rpx solid #FC1C1C;
		}

		/* 三点更多分享 */
		.more_tips {
			position: relative;
			display: flex;
			align-items: center;

			.more {
				width: 50rpx;
				height: 50rpx;
			}

			.triangle-up {
				position: absolute;
				display: block;
				top: 40rpx;
				left: 25rpx;
				width: 0rpx;
				height: 0rpx;
				background: #FFFFFF;
				border: 1px solid #CCCCCC;

				&::before {
					box-sizing: content-box;
					width: 0;
					height: 0;
					position: absolute;
					top: -2px;
					right: 25rpx;
					padding: 0;
					border-bottom: 8px solid #ffffff;
					border-top: 8px solid transparent;
					border-left: 8px solid transparent;
					border-right: 8px solid transparent;
					display: block;
					content: '';
					z-index: 12;
				}

				&::after {
					box-sizing: content-box;
					width: 0px;
					height: 0px;
					position: absolute;
					top: -5px;
					right: 20rpx;
					padding: 0;
					border-bottom: 9px solid rgba(102, 102, 102, 0.1);
					border-top: 9px solid transparent;
					border-left: 9px solid transparent;
					border-right: 10px solid transparent;
					display: block;
					content: '';
					z-index: 10
				}
			}

			.tips {
				position: absolute;
				z-index: 20;
				top: 70rpx;
				right: -30rpx;
				width: 226rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 10rpx 0px rgba(102, 102, 102, 0.2);
				opacity: 0.94;
				border-radius: 15rpx;
				display: flex;
				flex-direction: column;

				.tips_pre {
					width: 100%;
					height: 88rpx;
					display: flex;
					align-items: center;
					padding-left: 40rpx;
					box-sizing: border-box;
				}

				button::after {
					border: none;
					border-bottom: 1rpx solid #f1f1f1;
				}

				button[plain] {
					border: none;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}

				text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					line-height: 32rpx;
				}
			}
		}
	}

	.nav_list_no_opcity {
		background: #FFFFFF;
	}

	.detail_con {
		padding-bottom: 100rpx;
	}

	.carousel {
		height: 750rpx;
		position: relative;

		/* #ifndef MP-WEIXIN */
		margin-top: var(--status-bar-height);
		/* #endif */
		.swiper-box {
			width: 750rpx;
			height: 750rpx;
		}

		swiper {
			height: 100%;
		}

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

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

			image {
				max-width: 100%;
				max-height: 100%;
			}
		}

	}

	/* 积分商品商品信息 start */
	.introduce_section_point {
		width: 750rpx;
		height: 130rpx;
		padding: 15rpx 0 20rpx 24rpx;
		box-sizing: border-box;

		.point_top {
			.point_num {
				text {
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #FFFFFF;

					&:nth-child(2) {
						font-size: 30rpx;
					}
				}
			}

			.point_tips {
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				margin: 0 5rpx;
			}

			.point_price {
				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #FFFFFF;

					&:nth-child(2) {
						font-size: 40rpx;
					}
				}
			}
		}

		.point_original_sales {
			width: 700rpx;

			.point_original_price {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				opacity: 0.7;

				text {
					text-decoration: line-through;
				}
			}

			.point_sales {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

	}

	/* 积分商品商品信息 end */

	/* 有活动的商品描述详情 start */
	.introduce_section_activity {
		background: #FFFFFF;
		padding: 28rpx 0 30rpx 0;
		margin-bottom: 20rpx;

		.activity_goods_des {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx 0 21rpx;

			.activity_goods_name {
				width: 533rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 48rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break: break-all;
			}

			.activity_share_collection {
				display: flex;

				.activity_goods_collection {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100rpx;

					.iconfont {
						font-size: 44rpx;
					}

					.iconaixin1 {
						color: #FB1C1C;
					}

					.show_text {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2D2D2D;
					}
				}

				.activity_goods_share {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-left: 15rpx;

					.iconfont {
						font-size: 44rpx;
					}

					.show_text {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2D2D2D;
					}
				}
			}
		}

		.activity_goods_brief {
			width: 681rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #555555;
			line-height: 36rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-top: 8px;
		}
	}

	/* 有活动的商品描述详情 end */

	/* 标题简介 */
	.introduce_section {
		background: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.price_part {
			.left {
				display: flex;
				flex-direction: column;

				.sell_price {
					color: $main-color;

					.unit {
						font-size: 26rpx;
						font-weight: bold;
					}

					.price_int {
						font-size: 50rpx;
						line-height: 50rpx;
						margin-left: 4rpx;
						font-weight: bold;
					}

					.price_decimal {
						font-size: 26rpx;
						font-weight: bold;
					}
				}

				.original_price {
					color: #949494;
					font-size: 22rpx;
					text-decoration: line-through;
				}
			}

			.right {
				.collection {
					display: flex;
					flex-direction: column;
					width: 72rpx;

					.iconaixin1 {
						color: #f80f0c;
					}

					.iconaixin {
						color: #2D2D2D;
					}

					text {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2D2D2D;
					}
				}

				view {
					.iconfont {
						font-size: 50rpx;
						color: #2D2D2D;

						&.active {
							color: $main-color;
						}
					}

					.show_text {
						color: #2D2D2D;
						font-size: 22rpx;

						&.active {
							color: $main-color;
						}
					}

					&:last-child {
						margin-left: 25rpx;
					}
				}
			}
		}

		.goods_name {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			line-height: 45rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			word-break: break-word;
			margin-top: 20rpx;
		}

		.goods_ad {
			color: #666666;
			font-size: 28rpx;
			line-height: 60rpx;
			height: 60rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}


		.coupon-tip {
			align-items: center;
			padding: 4rpx 10rpx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6rpx;
			line-height: 1;
			transform: translateY(-4rpx);
		}


	}

	/* 分享 */
	.share-section {
		display: flex;
		align-items: center;
		color: $font-color-base;
		background: linear-gradient(left, #fdf5f6, #fbebf6);
		padding: 12rpx 30rpx;

		.share-icon {
			display: flex;
			align-items: center;
			width: 70rpx;
			height: 30rpx;
			line-height: 1;
			border: 1px solid $uni-color-primary;
			border-radius: 4rpx;
			position: relative;
			overflow: hidden;
			font-size: 22rpx;
			color: $uni-color-primary;

			&:after {
				content: '';
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				left: -20rpx;
				top: -12rpx;
				position: absolute;
				background: $uni-color-primary;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24rpx;
			margin-left: 2rpx;
			margin-right: 10rpx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: $font-base;
			margin-left: 10rpx;
		}

		.icon-bangzhu1 {
			padding: 10rpx;
			font-size: 30rpx;
			line-height: 1;
		}

		.share-btn {
			flex: 1;
			text-align: right;
			font-size: $font-sm;
			color: $uni-color-primary;
		}

		.icon-you {
			font-size: $font-sm;
			margin-left: 4rpx;
			color: $uni-color-primary;
		}
	}

	.spec_con {
		padding: 0 8rpx 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		background: #FFFFFF;

		.spec_left {
			display: flex;
			align-items: center;

			.spec_left_title {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 45rpx;
				margin-right: 35rpx;
			}

			.spec_left_content {
				width: 550rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #343434;
				line-height: 45rpx;
				margin-right: 10rpx;
			}
		}

		.spec_right {
			width: 36rpx;
			height: 36rpx;
		}
	}


	.c-list {
		font-size: $font-sm;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx;
			position: relative;
		}

		.tit {
			color: #666;
			font-size: 26rpx;
			margin-right: 35rpx;
		}

		.con {
			flex: 1;
			color: #333;
			font-size: 28rpx;

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

		.bz-list {
			height: 40rpx;
			font-size: $font-sm;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30rpx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40rpx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 积分 start */
	.integral {
		background: #FFFFFF;

		.integral_content {
			border-top: 1rpx solid #f2f2f2;
			display: flex;
			align-items: center;
			height: 100rpx;
			padding: 0 20rpx;

			.integral_title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}

			.integral_con {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-left: 35rpx;
			}
		}
	}

	/* 积分 end */

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 20rpx;
		overflow-x: hidden;
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.detail-desc_title {
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #2D2D2D;
				line-height: 36rpx;
			}

			image {
				width: 675rpx;
				height: 22rpx;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

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

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

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

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

		&.none {
			display: none;
		}

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

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10rpx 10rpx 0 0;
			background-color: #fff;

			.btn {
				height: 66rpx;
				line-height: 66rpx;
				border-radius: 100rpx;
				background: $uni-color-primary;
				font-size: $font-base;
				color: #fff;
				margin: 30rpx auto 20rpx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

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

			100% {
				opacity: 0;
			}
		}

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

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

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

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

	/* 底部操作菜单 */
	.page_bottom {
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		margin: 0 auto;
		bottom: 0rpx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 98rpx;
		background: #fff;
		box-shadow: 0px 0px 20px 0px rgba(86, 86, 86, 0.2);

		.p_b_btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96rpx;
			height: 80rpx;
			position: relative;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 10rpx;
			}

			.show_text {
				color: #2D2D2D;
				font-size: 20rpx;
			}

			.cart_num {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				right: 10rpx;
				top: -10rpx;
				background: #FF0000;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
			}
		}

		.action_btn_group {
			width: 690rpx;
			height: 70rpx;
			background: $point-btn-color;
			border-radius: 35rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 70rpx;
			text-align: center;
			&.no_stock{
				background: #BBBBBB;
				color: #FFFFFF;
			}
		}
	}

	.share_model {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: rgba(0, 0, 0, 0.6);
		z-index: 100;
	}

	.share_model_list {
		display: flex;
		justify-content: space-around;
		padding: 0 50rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 150rpx;
		z-index: 110;
		width: 750rpx;

		.share_model_pre {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: transparent;
			border-radius: 0;
			height: auto;
			line-height: auto;

			&::after {
				border-width: 0;
			}

			image {
				width: 105rpx;
				height: 105rpx;
			}

			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 36rpx;
				margin-top: 30rpx;
			}
		}
	}

	.share_model_close {
		width: 46rpx;
		height: 46rpx;
		bottom: 60rpx;
		position: fixed;
		z-index: 110;
		left: 0;
		right: 0;
		margin: 0 auto;

		image {
			width: 46rpx;
			height: 46rpx;
		}
	}

	button {
		padding: 0;
		margin: 0;
	}

	.poster {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: rgba(0, 0, 0, 0.6);
		z-index: 100;

		.poster_image {
			width: 541rpx;
			height: 837rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: absolute;
			left: 105rpx;
			/* #ifdef H5 */
			bottom: 360rpx;
			/* #endif */
			/* #ifndef H5 */
			bottom: 380rpx;
			/* #endif */
		}

		.poster_share_img {
			width: 390rpx;
			height: 90rpx;
			/* left: 179rpx; */
			position: absolute;
			bottom: 177rpx;
			margin: 72rpx 0 22rpx;
		}

		.poster_share_close {
			width: 49rpx;
			height: 49rpx;
			position: absolute;
			/* left: 351rpx; */
			bottom: 105rpx;
		}

		/* #ifdef H5 */
		.poster_share_model {
			width: 750rpx;
			height: 100%;
			position: fixed;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.poster_image {
				width: 541rpx;
				height: 837rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
			}

			.poster_share_img {
				width: 390rpx;
				height: 90rpx;
				margin: 72rpx 0 22rpx;
			}

			.poster_share_close {
				width: 49rpx;
				height: 49rpx;
			}
		}

		/* #endif */
	}

	.spec_model {
		.spec_model_con {
			width: 750rpx;
			height: 900rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 0;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			z-index: 150;

			.spec_model_content {
				padding-bottom: 115rpx;

				.spec_model_top {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 22rpx 0 30rpx;
					box-sizing: border-box;

					.spec_model_goods {
						display: flex;
						height: 151rpx;
						align-items: center;

						.spec_goods_image {
							width: 151rpx;
							height: 151rpx;
							background: #EEEEEE;
							border-radius: 15rpx;

							image {
								width: 151rpx;
								height: 151rpx;
								border-radius: 15rpx;
							}
						}

						.spec_goods_right {
							margin-left: 30rpx;
							width: 450rpx;

							.spec_goods_price_con {
								display: flex;
								align-items: center;

								.spec_prices {
									.spec_goods_point {
										font-size: 30rpx;
										font-family: PingFang SC;
										font-weight: 600;
										color: #F30300;
									}

									.spec_goods_tips {
										font-size: 28rpx;
										font-family: PingFang SC;
										font-weight: 600;
										color: #F30300;
										margin-right: 5rpx;
									}

									.spec_goods_price {
										display: inline-block;

										text {
											font-size: 24rpx;
											font-family: PingFang SC;
											font-weight: 600;
											color: #FC1C1C;
										}

										text:nth-child(2) {
											font-size: 30rpx;
										}
									}

									.spec_goods_cash {
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 500;
										text-decoration: line-through;
										color: #999999;
										margin-left: 10rpx;
									}
								}

								.sec_kill_tips {
									width: 130rpx;
									height: 40rpx;
									background: linear-gradient(90deg, #FFAA06 0%, #FF8323 0%, #FC5300 0%, #FF1353 100%);
									border-radius: 20rpx;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #FFFFFF;
									text-align: center;
									line-height: 40rpx;
									margin-left: 20px;
								}
							}

							.spec_goods_des {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #343434;
								margin-top: 19rpx;
								width: 450rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
							}
						}
					}

					.close_spec {
						width: 46rpx;
						height: 46rpx;
					}
				}

				.spec_content {
					height: 620rpx;

					.spec_list {
						margin: 0 30rpx;
						padding-top: 34rpx;

						.spec_list_pre {
							border-bottom: 1rpx solid #F5F5F5;

							.spec_list_pre_name {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #666666;
								margin-bottom: 30rpx;
							}

							.spec_list_pre_desc {
								display: inline-table;
								padding: 13rpx 25rpx;
								box-sizing: border-box;
								box-sizing: border-box;
								background: #F5F5F5;
								border-radius: 50rpx;
								margin-bottom: 30rpx;
								margin-right: 30rpx;
								border: 1rpx solid #F5F5F5;

								.spec_list_pre_con {
									display: flex;
									align-items: center;

									text {
										font-size: 26rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #343434;
										text-align: center;
									}

									image {
										width: 36rpx;
										height: 36rpx;
										margin-right: 20rpx;
									}
								}
							}

							.spec_list_pre_desc_active {
								background: #FFFFFF;
								border: 1rpx solid #FC1C1C;

								.spec_list_pre_con {
									text {
										color: #FC1C1C;
									}
								}
							}

							.spec_list_pre_desc_disabled {
								background: #F5F5F5;
								opacity: 0.2;

								.spec_list_pre_con {
									text {
										color: #2D2D2D;
									}
								}
							}
						}
					}

					.spec_num {
						height: 50rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 20rpx 0 30rpx;
						box-sizing: border-box;
						margin-top: 16rpx;

						.spec_num_left {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;

							text {
								color: #949494;
							}
						}

						.spec_num_right {
							width: 182rpx;
							height: 50rpx;
							border: 1rpx solid #EDEDED;
							border-radius: 6rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #A6A6A6;
							line-height: 30rpx;

							text {
								width: 51rpx;
								height: 50rpx;
								text-align: center;
								line-height: 50rpx;
								border-left: 1rpx solid #EDEDED;
								&.no_edit{
									background: #F8F8F8;
									opacity: 0.5;
									color: #949494;
								}
							}

							text:nth-child(1) {
								color: #949494;
								border-right: 1rpx solid #EDEDED;
								border-left: none;
							}

							input {
								width: 78rpx;
								height: 50rpx;
								line-height: 50rpx;
								text-align: center;
								font-size: 24rpx;
								color: #333333;
							}
						}
					}
				}
			}

			.spec_btn {
				width: 750rpx;
				height: 98rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(86, 86, 86, 0.08);
				display: flex;
				align-items: center;
				justify-content: center;
				position: fixed;
				bottom: 0;

				.spec_btn_only {
					width: 690rpx;
					height: 70rpx;
					border-radius: 35rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
					line-height: 70rpx;
					background: $point-btn-color;
				}
				.no_stock_spec_btn{
					width: 690rpx;
					height: 70rpx;
					border-radius: 35rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
					line-height: 70rpx;
					background: #BBBBBB;
				}
			}
		}
	}
</style>