CommunityApp/pagesM/pages/goods_des.vue

<template>
	<view class="pageBg" style="background-color: #f7f7f7;">
		<!-- 商品图片 -->
		<!-- productImages -->
		<view class="goods_img_box">
			<swiper
				class="swiper"
				interval="5000"
				duration="500"
				autoplay="true"
				circular="true"
				:indicator-dots="base.productImages!==undefined&&base.productImages.length>1"
				indicator-color="#E5E5E5"
				indicator-active-color="#888888"
			>
				<block v-if="base.productImages!==undefined&&base.productImages.length>0">
					<swiper-item v-for="(item, index) in base.productImages" :key="index">
						<image class="image" mode="widthFix" :src="item.large" @tap="roopHeadImage(item.large)"></image>
					</swiper-item>
				</block>
				<block v-else>
					<swiper-item><image class="image" mode="widthFix" :src="base.thumbnail || 'http://139.9.103.171:1888/img/image/goods_def.png'"></image></swiper-item>
				</block>
			</swiper>
		</view>

		<!-- 商品信息 -->
		<view class="goods_info_box margin-bottom-10">
			<view class="goods_time_title" style="padding-top: 20rpx;justify-content: space-between;">
				<text class="goods_title" selectable="true">{{ base.name ? base.name : '' }}</text>
				<image style="width: 76rpx;height: 76rpx;padding-left: 20rpx;" class="share_icon_btn" @tap="shareDrawer" src="http://139.9.103.171:1888/img/image/share_icon.png" mode="widthFix"></image>
			</view>
			<view class="goods_des">{{ base.caption ? base.caption : '' }}</view>
			<view  style="padding:0rpx 0 20rpx 30rpx;box-sizing: border-box;" class="flex justify-between">
				<view class="">
					<text class="text-price" style="color: #2f7ff5;padding-right: 30rpx;font-size: 46rpx;font-weight: 600;">{{ base.price ? base.price : '' }}</text>
					<text class="text-price text-gray text-df text-line-through">{{ base.marketPrice ? base.marketPrice : '' }}</text>
				</view>
				<view class="margin-right-30 padding-top-20 text-gray text-sm">
					库存：{{ defaultAvailableStock }}
				</view>
			</view>
		</view>

		<!-- 是否包邮 -->
		<view
			style="margin-top: 0;"
			class="get_coupon"
			v-if="
				(base != null && base.promotion != null && base.promotion.freeShipping != null && base.promotion.freeShipping.isenabled) ||
					(moneyOffsList != null && moneyOffsList.length > 0)
			"
		>
			<view class="get_coupon_text">促销活动</view>
			<view class="coupon">
				<view class="coupon_list">
					<view class="coupon_item">包邮</view>
					<view class="coupon_list" v-for="(item, index) in moneyOffsList" :key="index">
						<!-- 统一处理方式 -->
						<view class="coupon_item" v-if="item.promotionNames.length > 0">{{ item.promotionNames }}</view>
						<!-- <view class="coupon_item" v-if="item.discounttype == 0">满{{item.minprice}}减{{item.discounvalue}}</view> -->
						<!-- 固定价格 -->
						<!-- <view class="coupon_item" v-if="item.discounttype == 1">满{{item.minprice}}减{{item.discounvalue}}</view> -->
						<!-- 金额减免 -->
						<!-- <view class="coupon_item" v-if="item.discounttype == 2">{{item.minprice > 0 ? '满' + item.minprice : ''}} {{item.discounvalue}}折</view> -->
						<!-- 百分比减免 -->
						<!-- <view class="coupon_item" v-if="item.discounttype == 3">满{{item.minprice}}减{{item.discounvalue}}</view> -->
						<!-- 重复金额减免 -->
					</view>
				</view>
			</view>
		</view>

		<!-- 满减 -->
		<!-- <view class="get_coupon" v-if="">
      <view class="get_coupon_text">满减</view>
      <view class="coupon">
        <view class="coupon_list" v-for="(item,index) in moneyOffsList" :key="index">
          <view class="coupon_item">满{{item.minprice}}减{{item.discounvalue}}</view>
        </view>
      </view>
    </view> -->

		<!-- 赠品 -->
		<view class="get_coupon" v-if="giftsList != null && giftsList.length > 0">
			<view class="get_coupon_text">赠品</view>
			<view class="coupon">
				<view class="coupon_list" v-for="(item, index) in giftsList" :key="index">
					<view class="coupon_item">{{ item.name }}</view>
				</view>
			</view>
		</view>
			
		<!-- 领取优惠券-->
		<view class="get_coupon" v-if="base.promotion&&base.promotion.coupon!==undefined&&couponList.length > 0">
			<view class="get_coupon_text">领取优惠券</view>
			<view class="coupon" @tap="showCouponBox">
				<view class="coupon_list">
					<view class="coupon_item">{{ base.promotion.coupon.name }}</view>
				</view>
				<image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
			</view>
		</view>
		
		<!-- 保障 -->
		<view class="get_coupon">
			<view class="get_coupon_text ">保障</view>
			<view class="coupon">
				<view style="font-size: 24upx;margin-right: 20upx;color: #484848;">
					24小时无理由退换货
				</view>
			</view>
		</view>
			
		<!-- 商品详细信息 -->
		<view class="goods_detail_info_box">
			<view class="goods_detail_tab">
				<view :class="['goods_tab_item', current == 0 ? 'good_tab_item_active cur' : '']" @tap="tapTabItem(0)">图文详情</view>
				<view :class="['goods_tab_item', current == 1 ? 'good_tab_item_active' : '']" @tap="tapTabItem(1)">商品参数</view>
				<view :class="['goods_tab_item', current == 2 ? 'good_tab_item_active' : '']" @tap="tapTabItem(2)">
					商品评价
					<text v-if="reviewProdCount > 0">({{ reviewProdCount }})</text>
				</view>
			</view>
			<swiper class="tab_content" :current="current" duration="300" @change="switchTab" :style="{ height: swiper_height }">
				<swiper-item>
					<view id="start0"></view>
					<view class="tab1" v-if="info"><rich-text :nodes="info"></rich-text></view>
					<view class="no_data_wrap" v-else><DtNoData msg="暂无数据" /></view>
					<view id="end0"></view>
				</swiper-item>
				<swiper-item>
					<view id="start1"></view>
					<view class="tab2" v-if="introduction.length > 0">
						<view class="goods_params_list">
							<view class="goods_params_item" v-for="(item, index) in introduction" :key="index">
								<view class="goods_params_title">【{{ item.name }}】</view>
								<view class="goods_params_des">{{ item.value }}</view>
							</view>
						</view>
						<view class="check_btn" @tap="jumpmanual">查看完整说明书</view>
					</view>
					<view class="no_data_wrap" v-else><DtNoData msg="暂无数据" /></view>
					<view id="<end1></end1>"></view>
				</swiper-item>
				<swiper-item>
					<view id="start2"></view>
					<view class="tab3" v-if="reviewDatas.length > 0">
						<DtGoodsComment :dataList="reviewDatas" @tapImage="roopImageClick" />
						<view class="check_btn" @tap="moreGoodsComment">查看更多的评价</view>
					</view>
					<view class="no_data_wrap" v-else><DtNoData msg="暂无数据" /></view>
					<view id="end2"></view>
				</swiper-item>
			</swiper>
		</view>

		<!--推荐商品-->
		<view clsss="recommend" style="background:#F2F2F2">
			<DtRecommendWrap title="为您推荐" />
			<DtRecommendGoodsList :height="150" :dataList="recommendGoodsList" />
		</view>

		<!-- 工具栏 -->
		<view class="tool_height" :style="footSafe"></view>
		<view class="goods_sell_out_tip" v-if="!base.isMarketable">该商品正在补货中，先瞧瞧别的吧~</view>
		<view class="goods_tool" :style="footSafe">
			<view class="left">
				<button
					class="item item_btn"
					open-type="contact"
					session-from="weapp"
					:send-message-title="base.name"
					:send-message-path="'pagesM/pages/goods_des?id=' + loadOptions.id"
					:show-message-card="true"
				>
					<image src="http://139.9.103.171:1888/img/image/service_concat_icon.png" style="margin-top: -10upx;"></image>
					<text>咨询</text>
				</button>
				<view class="item" @tap="setProductFavorite">
					<image src="http://139.9.103.171:1888/img/image/collection_success_icon.png" v-if="isFavorite"></image>
					<image src="http://139.9.103.171:1888/img/image/collection_icon.png" v-else></image>
					<text>收藏</text>
				</view>
				<view class="item shop_car" @tap="goToShopCar">
					<image src="http://139.9.103.171:1888/img/image/shop_icon.png"></image>
					<text>购物车</text>
					<view class="tip_count" v-if="shopCartNum > 0">{{ shopCartNum }}</view>
				</view>
			</view>
			<view class="right">
				<view class="sell_out" v-if="!base.isMarketable">已售罄</view>
				<block v-else>
					<view class="item add_shop_car" @tap="joinShopCar">加入购物车</view>
					<view class="item buy" @tap="buyNow">{{ base.drugType == 'RX' ? '提交需求' : '立即购买' }}</view>
					<!-- <view class="item buy" @tap="buyNow">立即购买</view> -->
				</block>
			</view>
		</view>
		<FootGoodsBook
			ref="footBook"
			:number.sync="number"
			:specifications="specifications"
			:selectSpecificationValueMaps="selectSpecificationValueMaps"
			:base="base"
			:selectSkuItemObj="selectSkuItemObj"
			@selectsku="selectSku"
			@goodsnum="onGoodsNumChange"
			@goodsnumblur="blurInputNumber"
			@confirm="confirmAddOrBuy"
		/>
		<view v-if="showDistributorCoupon" class="drawer_screen" ></view>
		<view v-if="showDistributorCoupon" style="padding: 40upx;width: 400upx;height: 400upx;position: fixed;top: 0;left: 0;right: 0;bottom: 0; margin: auto;background-color: #fc7700;z-index: 10000;border-radius: 20upx;">
			<image src="http://139.9.103.171:1888/img/image/close2.png" style="width: 50upx;position: absolute;top: -100upx;right: 0;" mode="widthFix" @tap="showDistributorCoupon=false"></image>
			<view style="color: #fff;text-align: center;margin-bottom: 20upx;font-size: 34upx;">恭喜您获得优惠券</view>
			<view  style="display: flex;position: relative;">
				<image src="http://139.9.103.171:1888/img/image/coupon_img_white.png" style="width: 100%;display: block;" mode="widthFix"></image>
				<view style="position: absolute;top:0;left:0;right:0;padding: 20upx;display: flex;justify-content: space-between;">
					<view>
						<view style="font-size: 28upx;line-height: 60upx;">{{distributorCoupon.name}}</view>
						<view style="font-size: 20upx;color: gray;line-height: 60upx;">{{distributorCoupon.beginDate}}-{{distributorCoupon.endDate}}</view>
					</view>
					<view style="margin-right: 20upx;">
						<view style="color: red;font-size: 32upx;line-height: 60upx;">￥{{distributorCoupon.amt}}</view>
						<view style="font-size: 22upx;color: gray;line-height: 60upx;">{{distributorCoupon.type}}</view>
					</view>
				</view>
			</view>
			<button  @tap="onRecieve(distributorCoupon)" style="border-radius: 25px;line-height: 80upx;margin-top: 90upx;text-align: center;background-color: #fed116;color: #fc7700;">立即领取</button>
		</view>
		<!-- 产品优惠券列表 -->
		<FootGoodsCoupon ref="footCoupon" :dataList="couponList" @visible="onVisible" @receive="onRecieve" />
		
		<!-- 使用animation属性指定需要执行的动画 -->
		<view class="drawer_screen" @tap="closeDrawer" v-if="bg"></view>
		<view :animation="animationData" class="drawer_attr_box" v-if="sharediv">
			<view class="drawer_content">
				<button open-type="share" class="btn">发送给好友</button>
				<button @tap="showPoster" class="btn">生成海报</button>
				<button @tap="closeDrawer" class="btn detail-cancel-btn">取消</button>
			</view>
		</view>
		<!-- 生成海报 -->
		<cover-view class="imagePathBox" :hidden="maskHidden == false" v-if="maskHidden">
			<cover-view class="shengcheng">
				<cover-image src="http://139.9.103.171:1888/img/image/close2.png" class="shareClose" @tap="closePoster"></cover-image>
				<cover-image v-if="imagePosterPath" :src="imagePosterPath" class="shengcheng" mode="aspectFill"></cover-image>
			</cover-view>
			<button class="save" @tap="picdown">保存图片</button>
		</cover-view>
		<cover-view :hidden="maskHidden == false" class="mask"></cover-view>
		<DtPoster ref="dtPoster" id="poster" :config="posterConfig" @success="onPosterSuccess" @fail="onPosterFail" />

		<DtLogin ref="dialogLogin" @signIn="onSignIn"/>
	</view>
</template>

<script>
import DtGoodsComment from '../comps/dt_goods_comment.vue';
import DtRecommendWrap from '../comps/dt_recommend_wrap.vue';
import DtRecommendGoodsList from '../comps/dt_recommend_goods_list.vue';
import DtNoData from '../comps/dt_no_data.vue';
import DtPoster from '../comps/canvas/poster.vue';
import DtLogin from '../comps/dt_login.vue';
import FootGoodsCoupon from '../comps/foot_goods_coupon.vue';
import FootGoodsBook from '../comps/foot_goods_book.vue';

export default {
	components: {
		DtGoodsComment,
		DtNoData,
		DtRecommendWrap,
		DtRecommendGoodsList,
		DtPoster,
		DtLogin,
		FootGoodsCoupon,
		FootGoodsBook
	},
	data() {
		return {
			srcollTop:0,
			
			isAutoHeight: true,
			selectedTab: 0,
			isLogin: false,
			imageURL:'http://139.9.103.171:1888/img/image/coupon_img_white.png',	
			swiper_height: 0,
			space: '\xa0\xa0',
			isWaitShow: false,
			current: 0,
			content: '',
			showToastBox: false,
			bg: false,
			sharediv: false,
			animationData: '',

			posterConfig: {},
			imagePosterPath: '',
			maskHidden: false,
			isclick: false,

			reviewProdCount: 0,
			productId: 0,
			base: {},

			reviewDatas: [],
			couponList: [],
			moneyOffsList: [],
			giftsList: [],

			goodsDetailInfo: {},
			recommendGoodsList: [],
			defaultAvailableStock: 0,

			isFavorite: false, //是否收藏

			number: 1, //购买数量
			operationType: 1, //1添加购物车 2立即购买

			shopCartNum: 0, //购物车种类数量

			skus: [], //选中所有sku的不同情况数组
			specifications: [], //所有sku

			selectSpecificationValueMaps: {}, //选中sku
			selectSkuItemObj: {}, //选中sku对应的情况

			waitShow: false,

			manual: [],

			srcs: [],
			imgBox: [],
			inviteCode:null, //邀请码id （分销优惠券参数）
			showDistributorCoupon:false,
			distributorCoupon:null,
			qrval:'',
		};
	},
	computed: {
		footSafe() {
			return 'padding-bottom:' + this.safeAreaBottom + 'px';
		},
		info() {
			let info = this.goodsDetailInfo.info;
			if (!info) {
				return '';
			}
			info = info.replace(/style=\"(.*?)\"/gi, '').replace(/<img/g, '<img style="width:100%;"');
			return info;
		},
		introduction() {
			let entriesList = [];
			if (this.goodsDetailInfo.introduction && this.goodsDetailInfo.introduction.length > 0) {
				this.goodsDetailInfo.introduction.forEach(introduction => {
					introduction.entries.forEach(item => {
						entriesList.push(item);
					});
				});
			}
			this.manual = entriesList;
			return entriesList.slice(0, 5);
		}
	},
	methods: {
		//查看详情
		onVisible(ev, idx) {
			let couponList = this.couponList.slice(0);
			couponList[idx].isShowDetail = !couponList[idx].isShowDetail;
			console.log(330, couponList);
			this.$set(this, 'couponList', couponList);
		},
		// 领取优惠券
		async onRecieve(item) {
			console.log('get Voucher', item);
			let memberId = this.$auth.getMemberId();
			let resp = await this.$api.couponExchange({
				_isShowLoading: true,
				memberId: memberId,
				couponId: item.id
			});
			if (resp.result) {
				this.showDistributorCoupon = false;
				this.$dialog.success('领取成功');
				this.getCouponByProductId();
			} else {
				this.$dialog.error('领取失败');
			}
		},
		/**
		 * 获取选中的sku对应的对象
		 * @param {Object} selectSpecificationValueMaps
		 * @return {Number} -1:组合不存在；1：选择成功；2：库存不足
		 */
		selectSkusItem(selectSpecificationValueMaps) {
			let isSelectAll = this.isSelectAllSku(selectSpecificationValueMaps);
			if (!isSelectAll) return 1;
			let skuItemObjArr = [];
			for (let sku of this.skus) {
				let num = 0;
				for (let spc of sku.specificationValues) {
					for (let key in selectSpecificationValueMaps) {
						let item = selectSpecificationValueMaps[key];
						if (item.id + item.value == spc.id + spc.value) {
							num++;
							break;
						}
					}
				}
				if (num == sku.specificationValues.length) {
					if(sku.availableStock <= 0){
						return 2;
					}
					this.selectSkuItemObj = sku;
					this.number = sku.wholesaleNumStart;
					return 1;
				}
			}
			return -1;
		},

		selectSku(skuIndex, item) {
			if (this.skus != null && this.skus.length > 0) {
				let isOk = 0;
				for (let sku of this.skus) {
					if (sku.specificationValues != null && sku.specificationValues.length > 0) {
						for (let s of sku.specificationValues) {
							if (s.id + s.value == item.id + item.value) {
								let json = JSON.stringify(this.selectSpecificationValueMaps);
								let temp = JSON.parse(json);
								temp[skuIndex + ''] = { id: item.id, value: item.value };
								if(skuIndex == 0 && temp['1'] != null){
									this.selectSkuItemObj = {};
									this.selectSkuItemObj[skuIndex + ''] = { id: item.id, value: item.value };
									this.selectSpecificationValueMaps = {};
									this.selectSpecificationValueMaps[skuIndex + ''] = { id: item.id, value: item.value };
									this.number = 0;
									this.$forceUpdate();
									return;
								}
								isOk = this.selectSkusItem(temp);
								if (isOk == 1) {
									this.selectSpecificationValueMaps[skuIndex + ''] = { id: item.id, value: item.value };
									break;
								}else if(isOk == 2) break;
							}
						}
					}
					if (isOk > 0) break;
				}
				if (isOk == -1) uni.showToast({icon: 'none',title: '暂无此商品'});
				if (isOk == 2) uni.showToast({icon: 'none',title: '库存不足'});
				this.$forceUpdate();
			}
		},

		//是否选完sku的规格
		isSelectAllSku(maps) {
			if (maps == null) maps = this.selectSpecificationValueMaps;
			let length = 0;
			for (let key in maps) {
				if (maps[key] != null) length++;
			}
			return length == this.specifications.length;
		},
		
		async confirmAddOrBuy() {
			if (!this.isSelectAllSku()) {
				this.$dialog.toast('请选择所有相关选项！');
				return;
			}
			this.$refs.footBook.hide();
			if (this.operationType == 1) {
				if (this.shopCartNum >= 100) {
					this.$dialog.toast('购物车已满');
					return;
				}
				let dataArr = [];
				let data = {};
				data.skuId = this.selectSkuItemObj.id;
				data.quantity = this.number;
				dataArr.push(data);
				let res = await this.$api.cartAdds(dataArr);
				this.$dialog.toast('添加购物车成功');
				this.cartKindCount();
				this.$util.refreshPage(['pages/shop_car']);
			}

			if (this.operationType == 2) {
				let data = {};
				data.skuId = this.selectSkuItemObj.id;
				data.quantity = this.number;
				let paramsStr = JSON.stringify(data);
				let isCanBuy = await this.$api.checkCartBuy(data);
				this.$refs.footBook.hide();
				if (isCanBuy) {
					let params = {
						params: paramsStr,
						flag: this.$global.orderFlag.normal
					};
					uni.navigateTo({
						url: '/pagesM/pages/order_confirm?' + this.$util.serialize(params)
					});
				}
			}

			this.closeToastBox();
		},

		//加入购物车
		joinShopCar() {
			let inviteCode = this.$auth.getInviteCode()
			if (!this.$auth.isAuth) {
				this.showLogin()
				return
			}else if(inviteCode!==null){//针对已登录情况
				this.showLogin();
				return
			}
			if (this.specifications.length == 0) {
				this.$dialog.toast('暂无规格可选');
				return;
			}
			// this.showToastBox = true;
			this.$refs.footBook.show();
			this.operationType = 1;
		},

		//立即购买
		buyNow() {
			let inviteCode = this.$auth.getInviteCode()
			if (!this.$auth.isAuth) {
				this.showLogin()
				return
			}else if(inviteCode!==null){//针对已登录情况
				this.showLogin();
				return
			}
			if (this.specifications.length == 0) {
				this.$dialog.toast('暂无规格可选');
				return;
			}
			// this.showToastBox = true;
			
			this.operationType = 2;
			this.$refs.footBook.show();
		},
		//跳转购物车
		goToShopCar() {
			let inviteCode = this.$auth.getInviteCode()
			if (!this.$auth.isAuth) {
				this.showLogin()
				return
			}else if(inviteCode!==null){//针对已登录情况
				this.showLogin();
				return
			}
			uni.navigateTo({
				url:'/pagesM/pages/shop_car'
			})
		},
		//领取优惠券
		showCouponBox() {
			let inviteCode = this.$auth.getInviteCode()
			if (!this.$auth.isAuth) {
				this.showLogin()
				return
			}else if(inviteCode!==null){//针对已登录情况
				this.showLogin();
				return
			}
			// this.showCouponToastBox = true;
			// console.log(this.$refs)
			this.$refs.footCoupon.show();
		},

		//设置收藏
		async setProductFavorite() {
			let inviteCode = this.$auth.getInviteCode()
			if (!this.$auth.isAuth) {
				this.showLogin()
				return
			}else if(inviteCode!==null){//针对已登录情况
				this.showLogin();
				return
			}
			let data = {};
			data.productId = this.productId;
			data.memberId = this.$auth.getMemberId();
			let res = await this.$api.setProductFavorite(data);
			this.$util.refreshPage(['pages/mine_collection']);
			this.isFavorite = res.result;
			this.$dialog.toast(res.result ? '收藏成功' : '取消收藏');
		},

		switchTab(e) {
			this.current = e.detail.current;
			this.autoHeight();
		},
		tapTabItem(current) {
			this.current = current;
		},
		autoHeight() {
			if(!this.isAutoHeight) return;
			let current = this.current;
			let _this = this;
			uni.createSelectorQuery()
				.select('#end' + current)
				.boundingClientRect()
				.select('#start' + current)
				.boundingClientRect()
				.exec(rect => {
					let top1 = rect == null || rect[0] == null || rect[0].top == null ? 0 : rect[0].top;
					let top2 = rect == null || rect[1] == null || rect[1].top == null ? 0 : rect[1].top;
					let _space = Math.abs(top1 - top2);
					_space = _space === 0 ? '100%' : _space + 'px';
					const h = _this.swiper_height;
					if(_this.selectedTab != current){
						_this.selectedTab = current;
						_this.swiper_height = parseFloat(_space) < 500 ? '500px' : _space;
					}else if (parseFloat(_this.swiper_height) <= parseFloat(_space)) _this.swiper_height = _space;
					// Log.e(`================${_this.base.name}>>>h = ${h}; top1 = ${top1};  top2 = ${top2};  _space = ${_space}`);
					_this.$forceUpdate();
					setTimeout(() => {
						// _this.isAutoHeight = false;
						_this.autoHeight();
					}, 500);
				});
		},
		onGoodsNumChange(delta) {
			if (delta < 0) {
				if (this.number == 1) {
					return;
				}
				if (this.number <= this.selectSkuItemObj.wholesaleNumStart) {
					this.$dialog.toast('该商品起批量为' + this.selectSkuItemObj.wholesaleNumStart);
					return;
				}
				this.number--;
			} else {
				if (this.number >= this.selectSkuItemObj.purchaseLimit && this.selectSkuItemObj.purchaseLimit > 0) {
					return;
				}
				if (this.number >= this.selectSkuItemObj.availableStock) {
					this.$dialog.toast('该商品库存不足');
					return;
				}
				this.number++;
			}
		},
		lessAction() {
			if (this.number == 1) {
				return;
			}
			if (this.number <= this.selectSkuItemObj.wholesaleNumStart) {
				this.$dialog.toast('该商品起批量为' + this.selectSkuItemObj.wholesaleNumStart);
				return;
			}
			this.number--;
		},
		addAction() {
			if (this.number >= this.selectSkuItemObj.purchaseLimit && this.selectSkuItemObj.purchaseLimit > 0) {
				return;
			}
			if (this.number >= this.selectSkuItemObj.availableStock) {
				this.$dialog.toast('该商品库存不足');
				return;
			}
			this.number++;
		},

		blurInputNumber(e) {
			let number = e.detail.value ? e.detail.value : 1;
			if (this.selectSkuItemObj.wholesaleNumStart) {
				let wholesaleNumStart = this.selectSkuItemObj.wholesaleNumStart;
				let availableStock = this.selectSkuItemObj.availableStock;
				if (number < wholesaleNumStart) {
					this.number = wholesaleNumStart;
					this.$dialog.toast('该商品起批量为' + wholesaleNumStart);
					return;
				}
				if (number > availableStock) {
					this.number = wholesaleNumStart;
					this.$dialog.toast('该商品库存不足');
					return;
				}
				this.number = number;
			} else {
				this.number = number;
			}
		},

		closeToastBox() {
			this.showToastBox = false;
		},
		shareDrawer() {
			this.animationDrawer("open")
			// this.shareFriend();
		},
		closeDrawer() {
			this.isclick = false;
			this.animationDrawer('close');
		},
		shareFriend() {
			this.bg = false;
			this.sharediv = false;
			this.isclick = false;
			uni.showShareMenu({
				withShareTicket: true
			});
		},

		animationDrawer(currentStatu) {
			/* 动画部分 */
			// 第1步：创建动画实例
			var animation = wx.createAnimation({
				duration: 200, //动画时长
				timingFunction: 'linear', //线性
				delay: 0 //0则不延迟
			});

			// 第2步：这个动画实例赋给当前的动画实例
			this.animation = animation;

			// 第3步：执行第一组动画：Y轴偏移240px后(盒子高度是240px)，停
			animation.translateY(240).step();

			// 第4步：导出动画对象赋给数据对象储存
			this.animationData = animation.export();

			// 第5步：设置定时器到指定时候后，执行第二组动画
			setTimeout(
				function() {
					// 执行第二组动画：Y轴不偏移，停
					animation.translateY(0).step();
					// 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
					this.animationData = animation;
					//关闭抽屉
					if (currentStatu == 'close') {
						this.bg = false;
						this.sharediv = false;
					}
				}.bind(this),
				200
			);

			// 显示抽屉
			if (currentStatu == 'open') {
				this.bg = true;
				this.sharediv = true;
			}
		},
		showPoster() {
			if (this.isclick) {
				return;
			}
			this.isclick = true;
			
			// 获取页面path
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let inviteCode = null;
			let resp = this.$auth.getMemberInfo();
			if(this.$auth.isPromoter(true)){
				inviteCode = this.$auth.getMemberId();
			}
			if (this.$isEmpty(inviteCode)) {
				inviteCode=0
			}
			//由于微信小程序码的scence参数长度的限制，参数越简洁越好
			let scene=this.base.id+","+this.base.store.id+","+inviteCode
			this.getGenerateCode(scene)
		},
		/**
		 * 生成二维码
		 */
		getGenerateCode(scene){
			uni.showLoading({
				title:"生成中..."
			})
			let that=this
			let operation='miniprogram/getAccessToken'
			let params={
				appId:this.$wxData.APPID,
				secret:this.$wxData.SECRET,
				grantType:this.$wxData.GRANTTYPE
			}
			getApp().globalData.postRequest(params,operation,function(res){
				let params={
					access_token:res.data.access_token,
					scene:scene,
					page:'pages/index/index',
					width:60
				}
				let operation="miniprogram/generateCode"
				setTimeout(()=>{
					getApp().globalData.postRequest(params,operation,(res)=>{
						//生成海报
						that.drawPoster(res.data)
					})
				},800)
			})
		},
		/**
		 * 生成海报
		 * @param {Object} qrImg 二维码图片
		 */
		drawPoster(qrImg) {
			this.$set(this, 'posterConfig', {
				width: 750,
				height: 1334,
				backgroundColor: '#ffffff',
				debug: true,
				pixelRatio: 2,
				preload: true,
				images: [
					{
						x: 35,
						y: 60,
						width: 680,
						height: 850,
						url: this.base.thumbnail || 'http://139.9.103.171:1888/img/image/goods_def.png',
						zIndex: 2
					},
					{
						x: 480,
						y: 950,
						width: 260,
						height: 260,
						url: qrImg,
						zIndex: 2,
						type:'qrcode'
					}
				],
				texts: [
					{
						x: 35,
						y: 1000,
						text: this.base.name,
						fontSize: 32,
						color: '#333333',
						lineHeight: 50,
						lineNum: 3,
						textAlign: 'left',
						fontFamily: 'SourceHanSansRegular',
						zIndex: 11,
						width: 400
					},
					{
						x: 35,
						y: 1200,
						text: '￥' + this.base.price,
						fontSize: 60,
						color: '#D32222',
						lineHeight: 50,
						lineNum: 3,
						textAlign: 'left',
						fontFamily: 'SourceHanSansRegular',
						zIndex: 11,
						width: 400
					}
				]
			});
			uni.hideLoading()
			this.$nextTick(() => {
				this.$refs.dtPoster.onCreate();
			});
		},
		closePoster() {
			this.maskHidden = false;
			this.isclick = false;
		},
		onPosterSuccess(path) {
			this.imagePosterPath = path;
			this.maskHidden = true;
			this.isclick = false;
		},
		onPosterFail(e) {
			this.isclick = false;
		},
		picdown() {
			uni.saveImageToPhotosAlbum({
				filePath: this.imagePosterPath,
				success: res => {
					console.log(res);
					this.$dialog.success('图片已保存到相册，赶紧晒一下吧');
					this.maskHidden = false;
					this.sharediv = false;
					this.bg = false;
					this.isclick = false;
				},
				fail: res => {
					if (res.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
						return;
					}
					if (res.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
						this.$dialog.confirm({
							content: '需要使用保存图片或视频到系统相册功能,请确认授权打开',
							showCancel: false,
							success: confirmRes => {}
						});
					}
				}
			});
		},

		// 通过商品id获取优惠券列表
		async getCouponByProductId() {
			let memberId = this.$auth.getMemberId();
			let data = {};
			data.productId = this.base.id;
			data.memberId = memberId;
			let resp = await this.$api.getCouponByProductId(data);
			console.log(resp);
			this.couponList = resp;
			return resp;
		},
		//通过商品id获取分销优惠券列表
		async getDistributorCoupon(){
			let memberId = this.$auth.getMemberId();
			let data = {};
			data.productId = this.productId;
			// data.inviteCode = this.inviteCode;
			data.memberId = memberId;
			let resp = await this.$api.getDistributorCouponByProductId(data);
			if(JSON.stringify(resp) == '{}'||resp==''||resp==null||resp==undefined){return;}
			this.distributorCoupon = resp;
			this.distributorCoupon.beginDate = resp.beginDate.substr(0,10);
			this.distributorCoupon.endDate = resp.endDate.substr(0,10);
			this.showDistributorCoupon = true;
		},		
		// 获取商品详情推荐商品
		async getRecommendProduct() {
			let data = {};
			data.productId = this.base.id;
			data.productCategoryId = this.base.productCategoryId;
			let resp = await this.$api.getRecommendProduct(data);
			this.recommendGoodsList = resp.store;
			return resp;
		},

		// 获取商品详情
		async findProductInfoById() {
			let memberId = this.$auth.getMemberId();
			let resp = await this.$api.findProductInfoById({
				_isShowLoading: true,
				productId: this.productId,
				memberId: memberId
			});
			console.log(502, resp);
			this.base = resp.base; // 基本信息
			
			let imgBox = [];
			for (let i = 0; i < this.base.productImages.length; i++) {
				imgBox.push(this.base.productImages[i].large);
			}
			this.imgBox = imgBox;

			this.skus = resp.base.skus.skus; //不同情况
			let specifications = resp.base.skus.specifications; //sku规格
			if (specifications != null && specifications.length > 0) {
				let isOk = false;
				for (var i = 0; i < specifications[0].entries.length; i++) {
					specifications[0].entries[i].isExit = false;
					for (let sku of this.skus) {
						if (sku.specificationValues != null && sku.specificationValues.length > 0) {
							for (let sv of sku.specificationValues) {
								if (specifications[0].entries[i].id == sv.id) {
									specifications[0].entries[i].isExit = true;
									break;
								}
							}
						}
						if (specifications[0].entries[i].isExit == true) break;
					}
				}
			}
			this.specifications = specifications;
			this.moneyOffsList = resp.base.promotion.moneyOffs;
			this.giftsList = resp.base.promotion.gifts;

			let defaultSkus = this.skus.filter(item => {
				return item.isDefault;
			});

			this.defaultAvailableStock = defaultSkus[0].availableStock;
			if (this.specifications.length == 0) {
				this.selectSkuItemObj = Object.assign({}, defaultSkus[0]);
				this.number = this.selectSkuItemObj.wholesaleNumStart;
			}

			this.shopCartNum = this.base.cartNum;
			this.number = this.base.wholesaleNumStart;
			this.isFavorite = this.base.isFavorite;

			this.goodsDetailInfo = resp;
			setTimeout(() => {
				this.autoHeight();
			}, 100);
			
			this.getRecommendProduct()
			this.getCouponByProductId()
			this.waitShow = true;
			return resp;
		},

		//获取购物车商品种类
		async cartKindCount() {
			let resp = await this.$api.cartKindCount();
			this.shopCartNum = resp.kindCount;
		},

		//获取评论
		async getReviewList() {
			let data = {};
			data.pageNo = 1;
			data.pageSize = 1;
			data.productId = this.productId;
			data.type = '';
			let res = await this.$api.getReviewList(data);
			console.log(res);
			let srcs = [];
			for (let i in res.datas) {
				res.datas[i].imageUrls = JSON.parse(res.datas[i].imageUrls);
				srcs = srcs.concat(res.datas[i].imageUrls);
			}
			this.srcs = srcs;
			this.reviewDatas = res.datas;
			return res;
		},

		roopHeadImage(img) {
			uni.previewImage({
				current: img, // 当前显示图片的http链接
				urls: this.imgBox // 需要预览的图片http链接列表
			});
		},
		roopImageClick(img) {
			uni.previewImage({
				current: img, // 当前显示图片的http链接
				urls: this.srcs // 需要预览的图片http链接列表
			});
		},

		//查看更多评价
		moreGoodsComment() {
			uni.navigateTo({
				url: '/pagesM/pages/goods_comment_list?productId=' + this.productId
			});
		},

		//查看说明书
		jumpmanual() {
			uni.navigateTo({
				url: '/pagesM/pages/goods_manual'
			});
		},
		showLogin() {
			this.$refs.dialogLogin.show();
		},
		onSignIn(resp) {
			this.$util.refreshPage(['pages/home', 'pages/shop_car', 'pages/mine']);
			this.onPullDownRefreshPage();
		},
		// 获取总数
		async reviewProductCount() {
			let resp = await this.$api.reviewProductCount({
				productId: this.productId
			});
			this.reviewProdCount = resp;
			return resp;
		},
		onLoadPage(options) {
			wx.hideShareMenu();
			this.productId = options.id ? options.id : 0;
			let inviteCode = options.inviteCode? options.inviteCode:null;
			this.$auth.setInviteCode(inviteCode);
			 this.findProductInfoById()
			 this.getReviewList()
			 this.reviewProductCount()
		}
	},

	onShow() {
		this.isAutoHeight = true;
		this.autoHeight();
	},
	onLoad() {
		wx.showShareMenu({
		  withShareTicket: true
		})
	},
	
	onShareAppMessage(res) {
		// if (res.from === 'button') {
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let inviteCode = null;
			let resp = this.$auth.getMemberInfo();
			if(this.$auth.isPromoter(true)){
				inviteCode = this.$auth.getMemberId();
			}
			let path = `/pages/index/index?type=share&id=${this.base.id}&storeId=${this.base.store.id}&path=${currentPage.route}&inviteCode=${inviteCode}`;
			console.error('path = ' + path);
			return {
				title: this.base.name,
				path: path,
				success(res) {
					// 转发成功
					console.log('转发成功');
				},
				fail(res) {
					// 转发失败
					console.log('转发失败');
				}
			};
		// }
	},
	onHide() {
		this.isAutoHeight = false;
	},
	onUnload() {
		this.isAutoHeight = false;
	}
};
</script>

<style lang="scss" scoped>


.cu-bar.tabbar.shop .action {
	width: 116rpx;
	-webkit-box-flex: initial;
	-webkit-flex: initial;
	flex: initial;
}
.cu-tag.badge {
	border-radius: 100px;
	position: absolute;
	top: -5px;
	right: -2px;
	font-size: 10px;
	padding: 0px 6rpx;
	height: 14px;
	color: #ffffff;
}
	
view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
    box-sizing: border-box;
}	

	
.goods_img_box {
	height: 750upx;
	background: #fff;
	.swiper {
		height: 100%;
		width: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.goods_info_box {
	display: flex;
	flex-direction: column;
	background: #fff;
	.goods_price_share {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		.price {
			flex: 1;
			.sell_price {
				color: #ee1515;
				font-size: 48upx;
			}
			.original_price {
				color: #999999;
				font-size: 26upx;
				text-decoration: line-through;
				margin-left: 20upx;
			}
		}
		.share_icon_btn {
			width: 70upx;
			height: 70upx;
			// padding: 20upx 0;
			// padding-left: 20upx;
			.share_icon {
				width: 70upx;
				height: 70upx;
			}
		}
	}
	.goods_time_title {
		line-height: 48rpx;
		display: flex;
		flex-direction: row;
		position: relative;
		padding: 0 30upx;
		word-wrap: break-all;
		align-items: center;
		.goods_title {
			font-weight: 600;
			flex: 1;
			font-size: 34upx;
			color: #333;
			display: flex;
			flex-direction: row;
			align-items: center;
			text-align: justify;
		}
		.goods_time {
			position: absolute;
			left: 30upx;
			top: 6upx;
			background: $dt-color-primary;
			font-size: 18upx;
			color: #fff;
			border-radius: 4upx;
			padding: 5upx 10upx;
			height: 28upx;
			display: flex;
			align-items: center;
		}
	}
	.goods_tip {
		padding: 10upx 30upx;
		font-size: 0.7rem;
		color: #f04d0d;
	}
	.goods_active {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20upx;
		padding: 0 30upx;
		.active_item {
			// border: 1upx solid #ee1515;
			// border-radius: 4upx;
			padding: 5upx 10upx;
			color: #ee1515;
			font-size: 20upx;
			margin-right: 20upx;
			position: relative;
			margin-bottom: 10upx;
		}
		.active_item::after {
			display: flex;
			box-sizing: border-box;
			align-items: center;
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 200%;
			height: 200%;
			transform: scale(0.5);
			transform-origin: 0 0;
			border: 1upx solid #ee1515;
			border-radius: 4upx;
			pointer-events: none;
		}
	}
	.goods_des {
		color: #8b8b8b;
		font-size: 28upx;
		padding: 20upx 30upx 30rpx ;
	}
	.goods_inventory_sales {
		font-size: 24upx;
		color: #999;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20upx 30upx;
		border-top: 1upx solid #e5e5e5;
		text {
			width: 30%;
		}
	}
}

.get_coupon {
	background: #fff;
	padding: 20upx 30upx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	.get_coupon_text {
		color: #333;
		font-size: 28upx;
	}
	.coupon {
		display: flex;
		flex-direction: row;
		align-items: center;
		.coupon_list {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #2f7ff5;
			font-size: 20upx;
			.coupon_item {
				position: relative;
				padding: 10upx 20upx;
				margin-right: 20upx;
			}
			.coupon_item::after {
				display: flex;
				box-sizing: border-box;
				align-items: center;
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 200%;
				height: 200%;
				transform: scale(0.5);
				transform-origin: 0 0;
				border: 1upx solid #2f7ff5;
				border-radius: 12rpx;
				pointer-events: none;
			}
		}
		image {
			width: 10upx;
			height: 18upx;
		}
	}
}

.goods_detail_info_box {
	margin-top: 10upx;
	background: #fff;
	.goods_detail_tab {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding: 0 20upx;
		.goods_tab_item {
			flex: 1;
			color: #666666;
			font-size: 28upx;
			padding: 20upx 0;
			text-align: center;
		}
		.good_tab_item_active {
			color: $base;
		}
	}

	.tab_content {
		.tab2 {
			.goods_params_list {
				display: flex;
				flex-direction: column;
				padding: 20upx 20upx 0 20upx;
				.goods_params_item {
					display: flex;
					flex-direction: row;
					margin-bottom: 30upx;
					.goods_params_title {
						color: #666666;
						font-size: 28upx;
					}
					.goods_params_des {
						flex: 1;
						font-size: 28upx;
						color: #333333;
					}
				}
			}
			.check_btn {
				width: 600upx;
				height: 60upx;
				margin: 0 auto;
				margin-bottom: 40upx;
				line-height: 60upx;
				text-align: center;
				font-size: 26upx;
				color: #666666;
				border: 1upx solid #ccc;
			}
		}
		.tab3 {
			.check_btn {
				width: 600upx;
				height: 60upx;
				margin: 0 auto;
				margin-bottom: 40upx;
				line-height: 60upx;
				text-align: center;
				font-size: 26upx;
				color: #666666;
				border: 1upx solid #ccc;
			}
		}
		.no_data_wrap {
			max-height: 300upx;
			min-height: 300upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
}

.tool_height {
	height: 150upx;
}
.goods_tool {
	display: flex;
	height: 90upx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	.left {
		width: fit-content;
		display: flex;
		flex-direction: row;
		align-items: center;
		// border-top: 1upx solid #ccc;
		background: #fff;
		box-sizing: border-box;
		height: 100%;
		button {
			line-height: 1;
		}
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 110upx;
			// border-right: 1upx solid #ccc;
			// border-bottom: 1upx solid #ccc;
			border-radius: 0;
			box-sizing: border-box;
			height: 100%;
			justify-content: center;
			image {
				width: 35upx;
				height: 35upx;
				margin-bottom: 5upx;
			}
			text {
				color: #747774;
				font-size: 20upx;
			}
		}
		.item:last-child {
			border-right: none;
		}
		.shop_car {
			position: relative;
			.tip_count {
				position: absolute;
				right: 22upx;
				top: 5rpx;
				width: 24upx;
				height: 24upx;
				border-radius: 50%;
				background-color: #f37b1d;
				color: #fff;
				font-size: 18upx;
				text-align: center;
				line-height: 24upx;
			}
		}
	}
	.right {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		.item {
			width: 50%;
			height: 90upx;
			font-size: 28upx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.add_shop_car {
			background: #1e9edf;
		}
		.buy {
			background: #2f7ff5;
		}
		.sell_out {
			width: 100%;
			height: 90upx;
			font-size: 28upx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #9fdff4;
		}
	}
}
.goods_sell_out_tip {
	color: #ffffff;
	font-size: 22upx;
	background: rgba(0, 0, 0, 0.4);
	position: fixed;
	bottom: 90upx;
	left: 0;
	width: 100%;
	text-align: center;
	padding: 8upx 0;
}

.toast_box {
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 101;
	left: 0;
	bottom: 0upx;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.toast_content {
		background: white;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: fixed;
		width: 100%;
		bottom: 0upx;
		.goods_img_price_wrap {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 30upx 0;
			border-bottom: 1 solid #e5e5e5;
			.goods_img {
				height: 120upx;
				width: 120upx;
				padding-left: 30upx;
				image {
					width: 120upx;
					height: 120upx;
				}
			}
			.goods_price_box {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 120upx;
				padding-left: 28upx;
				.price {
					display: flex;
					flex-direction: row;
					align-items: center;
					text {
						padding-left: 10upx;
						padding-top: 7upx;
						font-size: 48upx;
						color: #2f7ff5;
					}
				}
				.sku_params {
					font-size: 24upx;
					color: #999;
				}
				.count_num {
					font-size: 24upx;
					color: #999;
				}
			}
		}

		.goods-sku-list-wrap {
			display: flex;
			flex-direction: column;
			.sku_item {
				padding: 0 30upx;
				.sku_name {
					font-size: 24upx;
					color: #333;
					padding: 20upx 0upx;
				}
				.sku_value_box {
					display: flex;
					flex-wrap: wrap;
					flex-direction: row;
					text {
						font-size: 26upx;
						color: #333;
						padding: 10upx 20upx;
						margin-right: 15upx;
						border: 2upx solid #ebebeb;
						opacity: 0.6;
						border-radius: 5px;
						margin-bottom: 10upx;
					}
					.active {
						background-color: $dt-color-primary;
						border: 2upx solid $dt-color-primary;
						color: #fff;
						opacity: 1;
					}

					.disabled {
						background-color: #e5e5e5;
						color: #ccc;
						opacity: 1;
					}
				}
			}
		}

		.goods_num_select_wrap {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 20upx 30upx 30upx 30upx;
			.num_text {
				font-size: 24upx;
				color: rgb(51, 51, 51);
			}
			.number_select {
				height: 50upx;
				border-radius: 6upx;
				border: 2upx solid #e5e5e5;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				width: 200upx;
				.number_change_less {
					width: 60upx;
					text-align: center;
					border-right: 2upx solid #e5e5e5;
					height: 100%;
					line-height: 50upx;
					font-size: 36upx;
				}
				.number_change_add {
					width: 60upx;
					text-align: center;
					border-left: 2upx solid #e5e5e5;
					height: 100%;
					line-height: 50upx;
					font-size: 36upx;
				}

				.goods_number {
					width: 60upx;
					padding: 0 10upx;
					text-align: center;
					font-size: 36upx;
					color: #353535;
				}
			}
		}

		.comfirm_btn_box {
			margin: 80upx 40upx;
			button {
				color: #fff;
				border-radius: 6upx;
				text-align: center;
				background: $dt-color-primary;
			}
		}
		.toastDelete {
			position: absolute;
			width: 30upx;
			height: 30upx;
			right: 10upx;
			top: 0upx;
			padding: 20upx;
		}
	}
	.toast_coupon_content {
		min-height: 800upx;
		height: auto;
		background: #f2f2f2;
		position: fixed;
		width: 100%;
		bottom: 0upx;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		.title {
			color: #333333;
			text-align: center;
			font-size: 30upx;
			height: 100upx;
			line-height: 100upx;
			background: #fff;
		}
		.coupon_wrap_list {
			display: flex;
			flex-direction: column;
			align-items: center;
			.coupon_height {
				height: 20upx;
			}
		}
		.toastDelete {
			position: absolute;
			width: 30upx;
			height: 30upx;
			right: 10upx;
			top: 15upx;
			padding: 20upx;
		}
	}
}

.drawer_screen {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background: #000;
	opacity: 0.2;
	overflow: hidden;
}
.drawer_attr_box {
	width: 100%;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1001;
	background: rgb(242, 242, 242);
	.drawer_content {
		overflow-y: scroll;
		.btn {
			background: #fff;
			font-size: 30upx;
			color: rgb(51, 51, 51);
			border-bottom: 1px solid #e8e8e8;
			border-radius: 0;
			padding: 12upx 0;
		}
		.btn::after {
			border: none;
		}
		.detail-cancel-btn {
			margin-top: 10upx;
		}
	}
}

.imagePathBox {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1200;
	.save {
		display: block;
		width: 80%;
		height: 80upx;
		padding: 0;
		line-height: 80upx;
		text-align: center;
		position: fixed;
		z-index: 1200;
		top: 1000upx;
		left: 10%;
		background: $base;
		color: #fff;
		font-size: 30upx;
		border-radius: 10upx;
	}
	.save::after {
		border: 0 !important;
	}
}
.shengcheng {
	width: 600upx;
	height: 900upx;
	position: fixed;
	top: 100upx;
	left: 50%;
	z-index: 1200;
	border-radius: 10upx;
	transform: translate(-50%);
	margin-top: -50upx;
	.shareClose {
		text-align: center;
		position: fixed;
		top: 60upx;
		right: 10upx;
		height: 46upx;
		width: 46upx;
		z-index: 1201;
	}
}
</style>