yicangzongtai_app_240321/pages/product/goods/goods.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#666"></navbar>
		<view id="page-top">
			<view class="product">
				<view class="u-bg-fff pb40">
					<view class="pic">
						<!-- <image src="../../../static/delImg/product2.png" mode="aspectFill"></image> -->
						<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500"
							circular="true">
							<swiper-item v-if="dataForm.video_url">
								<!-- <video enable-progress-gesture="false" :src="dataForm.video_url"></video>
					   -->
								<j-video class="jvideo" :url="dataForm.video_url" width="750rpx" height="620rpx">
								</j-video>
							</swiper-item>
							<swiper-item v-for="(item, index) in imglist" :key="index">
								<image :src="item" mode="aspectFill"></image>
							</swiper-item>
						</swiper>

						<view class="p-price">
							<view class="pd24 u-flex-center" style="align-items: baseline;">
								<view class="u-FFF u-font36">
									<rich-text :nodes="$mUtil.priceBigSmallTwo(dataForm.min_sale_price)"></rich-text>
								</view>
								<text class="discount u-font24 u-ml20 u-del">￥{{ dataForm.max_market_price }}</text>
								<!-- <text class="discount u-font24 u-ml15">
									{{((dataForm.min_sale_price / dataForm.max_market_price) *10).toFixed(1)}}折
								</text> -->
								<!-- <text class="discount u-font24 u-ml15" style="flex: 1;text-align: right;">
									贡献值：{{ $mUtil.isToFixedNum(dataForm.consumption_value, 2) }}
								</text> -->
							</view>
						</view>

						<view class="u-plr30" style="margin-top: 100rpx;">
							<view>
								<view class="u-font34 u-bold u-1A1A1A">
									<view v-if="dataForm.platform_store" class="tag" style="vertical-align: middle;">
										自营</view>
									<text class="u-font34 u-bold u-1A1A1A"
										style="vertical-align: middle;">{{dataForm.title}}</text>
								</view>
							</view>
							<view class="u-font24 u-mt15 u-999">
								<text>已售
									<text class="u-FF0000">{{ dataForm.result_sale_num }}</text>件，仅剩<text
										class="u-FF0000">{{
			              dataForm.residual_inventory
			            }}</text>件</text>
							</view>
							<!--优惠-->
							<view class="bg-FFF6EE pd20 u-mt20 u-flex-center br-rd10"
								v-if="shopDiscounts.is_use == true">
								<view class="u-FF0000 br-FF0000 u-font24">首单优惠</view>
								<view class="u-ml15 u-font24 u-CA7E57">满{{ shopDiscounts.full }}元减{{
			              shopDiscounts.reduction
			            }}元</view>
							</view>
						</view>
					</view>
				</view>

				<view class="u-bg-fff u-mt10">
					<view class="u-plr30 u-flex-center-sb pt-pb35">
						<view class="u-flex-center">
							<view @click="goShop">
								<image class="u-avatar104" :src="shop.logo"></image>
							</view>
							<view class="u-ml25">
								<view class="u-font28 u-1A1A1A u-bold">{{ shop.shop_name }} </view>
								<view class="u-999 u-font24 u-mt5 u-text2" @click="goLocal">
									<text class="iconfont" style="color: #FA6138;">&#xe6db;</text>
									{{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name
			            }}{{ shop.address }}
								</view>
							</view>
						</view>
						<view class="iconfont" @click="goShop">&#xe6c7;</view>
					</view>
				</view>
			</view>

			<view class="u-bg-fff u-mt10">
				<view class="tab u-flex-center-sa u-font30 u-1A1A1A u-border-one-one"
					:style="`top: calc(${statusBarHeight}px + 44px)`">
					<view @tap="change(0)" class="pb30" :class="{ active: isChecked == 0 }">商品详情</view>
					<view @tap="change(1)" class="pb30" :class="{ active: isChecked == 1 }">
						用户评论({{ commentList.length }})</view>
				</view>
				<view class="u-mt10">
					<!--商品详情-->
					<view v-if="isChecked == 0">
						<view class="richText ql-editor-box">
              <rich-text :nodes="goodsInfo.mobile_detail"></rich-text>
							<!-- <jyf-parser :html="$mUtil.formatRichText(goodsInfo.mobile_detail)" ref="article">
							</jyf-parser> -->
						</view>
					</view>

					<!--评论-->
					<view class="u-plr30" v-else>
						<comment :value="commentList"></comment>
					</view>
				</view>
			</view>
		</view>
		<view style="height:150rpx;background-color:white"></view>
		<view class="bottom-btn u-bg-fff">
			<view class="pt-pb30 u-plr30 u-flex-center-sb">
				<view class="leftbox">
					<button @click="share" class="u-text-center goods-tools">
						<view class="iconfont2 u-font44 u-999">&#xe684;</view>
						<view class="u-font28 u-1A1A1A">分享</view>
					</button>

					<button class="u-text-center goods-tools" @click="collection">
						<view v-if="!isCollection">
							<view class="iconfont2 u-font40 u-999">&#xe6bf;</view>
							<view class="u-font28 u-1A1A1A">收藏</view>
						</view>
						<view v-else>
							<view class="iconfont2 u-font44 u-999 collectionActive">&#xe616;</view>
							<view class="u-font28 u-1A1A1A">取消</view>
						</view>
					</button>
          <view class="cart" @click="goTocart">
            <view class="u-text-center goods-tools">
              <view class="iconfont2 car-icon u-font44 u-999">&#xe600;<text v-if="carNums > 0"
                  class="nums">{{ carNums }}</text></view>
              <view class="u-font28 u-1A1A1A">购物车</view>
            </view>
          </view>
				</view>
				<!--普通商品-->
				<!-- <view class="u-flex-center" v-if="ispay"> -->
				<view class="u-flex-center">
					<button class="cart-btn u-00321E u-font30" @click="buy(0, dataForm.id)"
						v-if="dataForm.area_feature != 1">
						加入购物车
					</button>
					<button class="buy-btn u-DCCDA4 u-font30" @click="buy(1, dataForm.id)">
						立即购买
					</button>
				</view>
			</view>
		</view>

		<!--规格-->
		<uniPopup type="bottom" ref="specOpen">
			<view class="u-bg-fff spec">
				<view class="u-plr30 flex-sb u-border-one-one pb30">
					<view class="u-flex-center">
						<image class="u-goods200" :src="choseConfig.cover ? choseConfig.cover : cover"></image>
						<view class="u-ml20">
							<view class="u-999 u-font24 price-zhe">
								<view class="u-FF0000 u-font36">
									<rich-text
										:nodes="$mUtil.priceBigSmall(choseConfig.sale_price ? choseConfig.sale_price : moPrice)">
									</rich-text>
								</view>
								<text
									class="u-del u-ml15">￥{{ choseConfig.market_price ? choseConfig.market_price : moDelPrice }}
								</text>
								<!-- <text class="u-ml10">7.5折</text> -->
							</view>
							<view class="u-font22 u-999 u-mt5">库存 {{ stock }} 件</view>
							<view class="u-1A1A1A u-mt25">{{
                  choseConfig.sku_set_name ? choseConfig.sku_set_name : "请选择"
                }}
							</view>
						</view>
					</view>
					<view class="iconfont u-999 closeIcon" @click="specOpenClose">&#xe612;</view>
				</view>

				<view>
					<!-- overHeight -->
					<view class="">
						<view class="u-mt30" v-for="(item, index) in skuTab" :key="item.head.id">
							<view class="u-plr30">{{ item.head.name }}</view>
							<view class="u-mt20 u-border-one-one pb30">
								<view class="u-plr30 u-flex u-flex-warp">
									<view class="spec-item" :class="childrenItem.flag ? 'activeColor' : ''"
										@click="chonseSku(index, childrenItem.id)" v-for="childrenItem in item.values"
										:key="childrenItem.id">{{ childrenItem.name }}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="u-plr30 u-mt30">
						<view class="u-flex-center-sb">
							<view>购买数量</view>
							<!-- 服务体系礼包、免费商品、公益申领不能一次购买多个 -->
							<!-- <view v-if="/^(1|3)$/.test(dataForm.area_feature) || dataForm.free" class="u-flex-center">
								<view class="num" style="border: none;">{{ add_num }}</view>
							</view> -->
							<view class="u-flex-center">
								<view class="iconfont minus" @click="resNum">&#xe60b;</view>
								<view class="num">{{ add_num }}</view>
								<view class="iconfont plus-sign" @click="addNum">&#xe686;</view>
							</view>
						</view>
						<view class="specOpen-btn">
							<view v-if="btnType == 0">
								<button class="u-btn-two" @click="btnBuy(btnType)">
									{{ btnName }}
								</button>
							</view>
							<view v-else>
								<button class="u-btn-two" @click="btnBuy(btnType)">
									{{ btnName }}
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uniPopup>
		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
		<share ref="shares" :contentHeight="580" v-if="isvisible"></share>
		<!-- 服务体系礼包才有的弹窗 -->
		<uni-popup class="tip-popup" ref="submitPopup" type="center" :mask-click="false">
			<view class="content-box">
				<view class="title">请确认所属区域</view>
				<scroll-view scroll-y style="max-height: 80vh;box-sizing: border-box;">
					<view class="content">
						<view v-for="(item,index) in areaLevel" :key="index">
							<view class="check-tip"
								:class="dataForm && (dataForm.service_package_area != 7 || index<=0)?'required':''">
								请选择{{item.levelName}}</view>
							<picker class="pickerList" :range="areaList[index]" range-key="label"
								@change="e=>areaChange(e,index)">
								<view class="check-input">
									<textarea v-if="dataForm && dataForm.service_package_area == 7" disabled auto-height
										v-model="checkAreaList[index][item.propName]"
										:placeholder="'请选择所属'+item.levelName"
										placeholder-style="font-size:24rpx;line-height:40rpx"></textarea>
									<textarea v-else disabled auto-height v-model="checkAreaList[0][item.propName]"
										:placeholder="'请选择所属'+item.levelName"
										placeholder-style="font-size:24rpx;line-height:40rpx"></textarea>
									<text class="iconfont2">&#xe65f;</text>
								</view>
							</picker>
						</view>
						<button v-if="dataForm && dataForm.service_package_area == 7 && areaLevel.length < 7"
							@click="addArea()" class="add-area">继续选择其它省</button>
						<view class="tip">
							注意：请认证选择所属区域，选择和自身属地收益相关
						</view>
						<view class="btn-box">
							<button @click="closePopup()">取消</button>
							<button @click="submitByService()">继续购买</button>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "../../../components/uni-popup/uni-popup.vue";
	import comment from "../../../components/ld-comment/ld-comment.vue";
	import jyfParser from "../../../components/jyf-parser/jyf-parser";
	import share from "./../../public/share";
	import jVideo from "../../../components/j-video/j-video.vue"
	let app = getApp()
	export default {
		components: {
			uniPopup,
			comment,
			jyfParser,
			share,
			jVideo
		},
		data() {
			return {
				//手机状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				config: {
					back: true, //false是tolbar页面 是则不写
					title: "商品详情",
					color: "#1a1a1a",
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, '#ffffff'],

					// backTabPage: "",
					// leftSlot:true
				},
				imglist: [], //详情图片数组
				isChecked: 0,
				btnName: "",
				btnType: "", //0  购物车，1 立即购买
				dataForm: {}, //商品详情
				shop: {}, //店铺信息
				shopDiscounts: {}, //店铺首单优惠
				stock: 0,
				cover: "",
				loading: true,
				moDelPrice: "",
				moPrice: "",
				goodsSkuList: [], //sku组合值
				skuTab: [], //sku二位数组
				goods_id: null,
				limit_buy_num: 0,
				choseConfig: {},
				hasId: "",
				add_num: 1,
				goStatus: 0, //0:购物车，1下单
				shop_id: 0,
				commentList: [],
				goodsInfo: {},
				dataShopId: "",
				isvisible: false,
				isCollection: false, //是否收藏
				option: null,
				imgUrl: this.$mConfig.staticUrl,
				ispay: app.globalData.openPay,
				fromShare: false, // 是否分享过来的页面
				carNums: 0, // 购物车数量
				detail: null,
				// 省市区、街道、社区
				areaList: [
					[],
					[],
					[],
					[],
					[]
				],
				areaIndex: [0, 0, 0, 0, 0],
				checkAreaList: [{
					province_name: '',
					province_code: '',
					city_name: '',
					city_code: '',
					area_name: '',
					area_code: '',
					street_name: '',
					street_code: '',
					community_name: '',
					community_code: ''
				}],
				areaLevel: [] //省，市，区，街道，社区
			}
		},
		onShow() {
			var pages = getCurrentPages();
			var prevPage = pages[pages.length - 2];
			if (prevPage == undefined) {
				// this.config.backTabPage = "/pages/research/homepage/lidaPage";
			}
			if (uni.getStorageSync("apiToken")) {
				this.cartList()
			}

		},
		onLoad(options) {
			//店铺推荐（商品）
			this.option = options.id
			console.log('分类带过来的id' + this.option)
			console.log(options)
			if (options.id) {
				this.getDetailInfo(options.id);
				this.goodsDetail(options.id);
				this.loadComment(options.id);
			}
			if (options.shareId) {
				this.recordSave(options.shareId, options.id);
			}
			if (options.share == 1) {
				this.fromShare = true
			}
			this.getAreaList();
		},
		onShareAppMessage(res) {
			if (res.from === "button") {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.shareTitle,
				imageUrl: this.shareImg,
				path: `/pages/product/goods/goods?id=${this.goodsId}&shopid=${this.shop_id}&share=1`,
			};
		},
		methods: {
			iconBtn() {
				if (this.fromShare) {
					uni.redirectTo({
						url: '/pages/index/home'
					});
				} else {
					uni.navigateBack();
				}
			},
			goLocal() {
				uni.openLocation({
					latitude: Number(this.shop.tx_latitude),
					longitude: Number(this.shop.tx_longitude),
					name: this.shop.name,
					address: this.shop.address,
					success: function() {
						console.log("success");
					},
				});
				console.log(this.shop)
			},
			// 购物车数量
			cartList() {
				let shop = uni.getStorageSync('shop')
				let nums = 0
				console.log(shop.id)
				this.$http.get(`/cart/list/` + shop.id)
					.then(res => {
						if (res && res.code == 200) {
							if (res.list.length > 0) {
								res.list.forEach(k => {
									k.flag = false
									nums += k.user_cart_list.length
								})
								this.carNums = nums
							} else {
								this.carNums = 0
							}

						}
					})
			},
			goShop() {
				uni.navigateTo({
					// url: "/pages/research/homepage/shopHomepage?shopId=" + this.shop_id,
					url: "/pages/convenienceService/shopDetails?shopId=" + this.shop_id
				});

			},
			recordSave(share_user_id, goods_id) {
				this.$http
					.post("/share/record/save", {
						share_user_id: share_user_id,
						goods_id: goods_id,
					})
					.then((res) => {});
			},
			collection() {
				let token = uni.getStorageSync("apiToken");

				if (!token) {
					uni.navigateTo({
						url: "/pages/login/index",
					});
				} else {

					if (this.isCollection) {
						this.$http
							.delete("/collect/goods/delete/" + this.dataForm.id)
							.then((res) => {
								if (res && res.code == 200) {
									this.isCollection = false;
									this.$mUtil.toast("取消收藏成功");
								} else {
									this.$mUtil.toast(res.msg);
								}
							});
					} else {
						this.$http
							.put("/collect/goods/save", {
								goods_id: this.dataForm.id
							})
							.then((res) => {
								if (res && res.code == 200) {
									this.isCollection = true;
									this.$mUtil.toast("收藏成功");
								} else {
									this.$mUtil.toast(res.msg);
								}
							});
					}
				}
			},

			share() {
        this.isvisible = false
				let token = uni.getStorageSync("apiToken");

				if (!token) {
					uni.navigateTo({
						url: "/pages/login/index",
					});
				} else {
					this.$http.get('/goods/info/' + this.option).then((res) => {
						if (res && res.code == 200) {
							if (res.data == null) {
								this.$mUtil.toast("该商品不存在")
							} else {
								let user = uni.getStorageSync("personal");
								this.dataForm = res.data;
								this.isvisible = true;
								this.$nextTick(() => {
									this.$refs.shares.shareInfo(
										"/?pageType=1&type=1&id=" + this.goodsId + "&shareId=" + user
										.id,
										'pages/down',
										this.dataForm.title,
										"",
										this.dataForm.cover
									);
								});
							}
						}
					})


				}
			},
			// 获取主页数据
			getIndexList(shopid) {
				this.$http.get("/yxt/shop/info/" + shopid).then((res) => {
					uni.stopPullDownRefresh();
					this.loading = false;
					if (res.data && res.code == 200) {
						this.shop = res.data;
					}
				});
			},
			getByShop(id) {
				//店铺优惠查询
				this.$http.get("/marketing/firstOrder/getByShop/" + id).then((res) => {
					if (res && res.code == 200) {
						this.shopDiscounts = res.data;
					}
				});
			},
			getDetailInfo(id) {
				this.$http.get("/goods/info/" + id).then((res) => {
					this.loading = false;
					if (res && res.code == 200) {
						this.dataForm = res.data;
						this.goodsId = res.data.id;
						this.imglist = res.data.images;
						this.shareImg = res.data.cover;
						this.shareTitle = res.data.title;
						this.dataShopId = res.data.shop_id;
						this.shop_id = res.data.shop_id;
						this.getByShop(this.dataShopId);
						this.getIndexList(this.dataShopId);
					}
				});
				let token = uni.getStorageSync("apiToken");

				if (token) {
					this.$http.get("/collect/goods/is-collect/" + id).then((res) => {
						if (res && res.code == 200) {
							this.isCollection = res.data;
						}
					});
				}
			},
			goTocart() {
				uni.navigateTo({
					url: "/pages/index/shop",
				});
			},
			//点击拼团更多
			goGb() {
				this.$refs.gbOpen.open();
			},
			//点击关闭
			gbClose() {
				this.$refs.gbOpen.close();
			},
			//评论，商品详情切换
			change(i) {
				this.isChecked = i;
			},
			//点购物车，立即购买
			buy(i, id) {
				// 【普通商品】才能加入购物车，【1服务体系礼包,2新人惠选区,3公益申领】不能加入购物车
				// if (i == 0 && (!this.dataForm || this.dataForm.area_feature != 1)) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '该商品不可加入购物车'
				// 	})
				// 	return false;
				// }

				this.btnType = i;
				this.checkSku(id);
				if (i == 0) {
					this.btnName = "加入购物车";
				} else {
					this.btnName = "立即购买";
				}
			},
			// 减数量
			resNum() {
				if (this.add_num > 1) {
					this.add_num--;
				}
			},
			//加数量
			addNum() {
				this.add_num++;
			},
			chonseSku(index, id) {
				this.skuTab[index].values.forEach((res) => {
					res.flag = false;
					if (res.id == id) {
						res.flag = true;
					}
				});
				let choseId = [];
				this.skuTab.forEach((res) => {
					res.values.forEach((Key) => {
						if (Key.flag) {
							choseId.push(Key.id);
						}
					});
				});
				let totalId = choseId.sort().join("|");
				this.hasId = totalId;
				this.goodsSkuList.forEach((res) => {
					if (res.sku_hash_code == totalId) {
						this.choseConfig = res;
						this.stock = res.able_stock;
						this.able_stock = res.able_stock;
					}
				});
				console.log(this.goodsSkuList)
				console.log('goodsSkuList')
			},
			//查询sku
			checkSku(id) {

				this.$http.get(`/goods/skus/${this.shop_id}/${id}`).then((res) => {
					this.loading = false;
					if (res && res.code == 200) {
						// this.choseConfig = {};
						this.hasId = ''
						res.data.goods.sku_table.forEach((keys) => {
							keys.values.forEach((val) => {
								val.flag = false;
							});
						});
						this.limit_buy_num = res.data.goods.limit_buy_num;
						this.goods_id = res.data.goods.id;
						this.goodsSkuList = res.data.goods_sku_list;
						this.moPrice = res.data.goods.min_sale_price;
						this.moDelPrice = res.data.goods.max_sale_price;
						this.cover = res.data.goods.cover;
						this.stock = res.data.total_stock;

						if (res.data.goods_auth) {
							if (res.data.goods_auth.added) {
								this.$refs.specOpen.open();
							} else {
								this.$mUtil.toast("该商品已经下架");
							}
						} else {
							this.$mUtil.toast("没有经营权限");
						}
						//只有没数据才去重新渲染sku的数据
						if (this.skuTab.length == 0) {
							this.skuTab = res.data.goods.sku_table;
							for (let i in this.skuTab) {
								//默认选中第一个可选项
								this.skuTab[i].values[0].flag = true;
							}
							//显示选中的sku信息
							// this.chonseSku(0, this.skuTab[0].values[0].id);
						}
						//显示选中的sku信息
						this.chonseSku(0, this.skuTab[0].values[0].id);
						console.log(this.skuTab)
						console.log('skuTab')
						// if(res.data.goods.sku_table.length>0){
						// 	this.$refs.specOpen.open()
						// }else{
						// 	this.hasId = ''
						// 	this.btnBuy()
						// }
					}
				});
			},
			//关闭规格弹窗
			specOpenClose() {
				this.$refs.specOpen.close();
			},
			//加入购物车
			btnBuys() {
				// 判断是否选中sku
				if (this.skuTab.length > 0 && this.hasId.split('|').length < this.skuTab.length) {
					this.$mUtil.toast("请选中分类");
					return false;
				}

				// 判断限购
				if (this.add_num > this.limit_buy_num && this.limit_buy_num != 0) {
					this.$mUtil.toast("商品限购" + this.limit_buy_num + "件");
					return false;
				}
				//判断库存
				if (this.goodsSkuList.length > 0 && this.able_stock < this.add_num) {
					this.$mUtil.toast("商品库存只有" + this.able_stock + "件");

					this.$http.post(`/singlegoods/understockrecord/save`, {
						shop_id: this.shop_id,
						goods_id: this.goods_id,
						single_goods_id: this.choseConfig.single_goods_id,
						sku_set_name: this.choseConfig.sku_set_name,
						buy_num: this.add_num
					}).then((res) => {

					});

					return false;
				}
				if (this.goStatus == 0) {
					let data = {
						goods_id: this.goods_id,
						sku_hash_code: this.hasId,
						add_num: this.add_num,
						source_shop_id: this.shop_id.toString(),
					};
					this.$http.post(`/cart/add`, data).then((res) => {
						if (res && res.code == 200) {
							this.$mUtil.toast("添加成功");
							this.$refs.specOpen.close();
							this.choseConfig = {};
							this.add_num = 1;
							this.cartList();
						}
					});
				} else {
					this.psotJson();
					//如果是“服务体系商品”
					// if (this.dataForm.area_feature == 1 && this.dataForm.service_package_area != 1) {
					// 	if (this.dataForm.service_package_area != 7) {
					// 		switch (this.dataForm.service_package_area) {
					// 			case 6:
					// 				this.areaLevel = [{
					// 					levelName: '省',
					// 					propName: 'province_name',
					// 					propValue: 'province_code'
					// 				}];
					// 				break;
					// 			case 5:
					// 				this.areaLevel = [{
					// 					levelName: '省',
					// 					propName: 'province_name',
					// 					propValue: 'province_code'
					// 				}, {
					// 					levelName: '市',
					// 					propName: 'city_name',
					// 					propValue: 'city_code'
					// 				}];
					// 				break;
					// 			case 4:
					// 				this.areaLevel = [{
					// 					levelName: '省',
					// 					propName: 'province_name',
					// 					propValue: 'province_code'
					// 				}, {
					// 					levelName: '市',
					// 					propName: 'city_name',
					// 					propValue: 'city_code'
					// 				}, {
					// 					levelName: '区',
					// 					propName: 'area_name',
					// 					propValue: 'area_code'
					// 				}];
					// 				break;
					// 			case 3:
					// 				this.areaLevel = [{
					// 					levelName: '省',
					// 					propName: 'province_name',
					// 					propValue: 'province_code'
					// 				}, {
					// 					levelName: '市',
					// 					propName: 'city_name',
					// 					propValue: 'city_code'
					// 				}, {
					// 					levelName: '区',
					// 					propName: 'area_name',
					// 					propValue: 'area_code'
					// 				}, {
					// 					levelName: '街道',
					// 					propName: 'street_name',
					// 					propValue: 'street_code'
					// 				}];
					// 				break;
					// 			case 2:
					// 				this.areaLevel = [{
					// 					levelName: '省',
					// 					propName: 'province_name',
					// 					propValue: 'province_code'
					// 				}, {
					// 					levelName: '市',
					// 					propName: 'city_name',
					// 					propValue: 'city_code'
					// 				}, {
					// 					levelName: '区',
					// 					propName: 'area_name',
					// 					propValue: 'area_code'
					// 				}, {
					// 					levelName: '街道',
					// 					propName: 'street_name',
					// 					propValue: 'street_code'
					// 				}, {
					// 					levelName: '社区',
					// 					propName: 'community_name',
					// 					propValue: 'community_code'
					// 				}];
					// 				break;
					// 		}
					// 		this.submitPopup();
					// 		return;
					// 	} else {
					// 		this.areaLevel = this.checkAreaList.map(item => {
					// 			return {
					// 				levelName: '省',
					// 				propName: 'province_name',
					// 				propValue: 'province_code'
					// 			}
					// 		})
					// 		this.submitPopup();
					// 		return;
					// 	}
					// }

				}
			},
			//组合数据
			psotJson() {
				// this.loading = true;
				let dataJson = {};
				let childArr = [];
				let parendArr = [];
				// let shop = uni.getStorageSync('shop')
				// let shopid = shop.id ? shop.id : ''
				childArr.push({
					user_cart_id: 0,
					activity_goods_id: "0",
					goods_id: this.goods_id,
					num: this.add_num,
					sku_hash_code: this.hasId,
				});
				parendArr.push({
					shop_id: this.dataShopId,
					source_shop_id: this.shop_id,
					activity_id: 0, //活动id
					sponsor_activity_id: 0, //拼团id
					user_remark: "",
					items: childArr,
				});
				if (this.dataForm.service_package_area == 7) {
					let checkAreaList = this.checkAreaList.filter(item => {
						return !!item.province_code
					})
					this.checkAreaList = checkAreaList;
				}
				dataJson = {
					is_cart: false, //是否来源于购物车
					receipt_id: null,
					shipment_mode: 0, //0物流，1自提
					shop_orders: parendArr,
					marketing_type: 0, //0无活动，1秒杀，2拼团
					// service_system_goods: this.dataForm.area_feature == 1 ? true : undefined, // 是否是服务体系商品
					// service_package_area: this.dataForm.area_feature == 1 ? this.dataForm.service_package_area :
					// 	undefined, // 服务体系商品类型
					// select_areas: this.dataForm.area_feature == 1 ? this.checkAreaList : undefined,
					free: this.dataForm.free
				};
				uni.setStorageSync("dataJson", dataJson);
				//let originalPrice = this.dataForm.max_market_price // 原价
				//let zhe = ((this.dataForm.min_sale_price / this.dataForm.max_market_price) *10).toFixed(1) // 折扣
				uni.navigateTo({
					url: "../surePay/surePay",
				});
				// let shop = uni.getStorageSync('shop')
				// let shopid=shop.id?shop.id:''
				// this.loading = false;
				// this.$http.post(`/order/build`, dataJson).then(res => {
				// 	if (res && res.code == 200) {
				// 		uni.setStorageSync('sureData', res.data)
				// 		uni.navigateTo({
				// 			url: '../surePay/surePay'
				// 		})
				// 	}
				// })
			},
			//
			btnBuy(i) {
				this.goStatus = i;
				let token = uni.getStorageSync("apiToken");
				//判断是否微信授权登录（没有授权登录进wx-login,授权了但没有注册进login）
				if (!token) {
					uni.navigateTo({
						url: "/pages/login/index",
					});
				} else {
					this.btnBuys();
				}

				//0  购物车，1 立即购买
			},

			/**
			 * 详情
			 * */
			goodsDetail(id) {
				this.$http.get(`/goods/content/${id}`).then((res) => {
					if (res && res.code == 200) {
						this.goodsInfo = res.data;
					}
				});
			},

			/*评论*/
			loadComment(id) {
				this.$http
					.get(`/comment/orderGoods/getgoodscomments/${id}`)
					.then((res) => {
						if (res && res.code == 200) {
							this.commentList = res.list;
						}
					});
			},
			submitPopup() {
				this.$refs.submitPopup.open();
			},
			closePopup() {
				this.$refs.submitPopup.close();
			},
			//获取省市区、街道、社区
			getAreaList(parentCode = 100000, columnIndex = 0) {
				this.$http.get(`/cnarea/lbs-children/${parentCode}`, {}).then(res => {
					if (res && res.code == 200) {
						this.$set(this.areaList, columnIndex, res.list);
					}
				});
			},
			//地区选择
			areaChange(e, columnIndex) {
				let rowIndex = e.detail.value;
				let oldColumnIndex = this.areaIndex[columnIndex];
				this.areaIndex[columnIndex] = rowIndex;
				//非 “大区公司”等级
				if (this.dataForm.service_package_area != 7) {
					// 查询下级地区
					this.getAreaList(this.areaList[columnIndex][rowIndex].value, columnIndex * 1 + 1);
					//保存当前选择的数据，用于提交
					this.checkAreaList[0][this.areaLevel[columnIndex].propName] = this.areaList[columnIndex][rowIndex]
						.label;
					this.checkAreaList[0][this.areaLevel[columnIndex].propValue] = this.areaList[columnIndex][rowIndex]
						.value;
					// 重置选择的下级地区的值
					if (oldColumnIndex != rowIndex) {
						let props = ['province', 'city', 'area', 'street', 'community'] // 重置选择的下级列表的值
						let preName = this.areaLevel[columnIndex].propName.split('_name')[0]; //属性名前缀
						let startIndex = props.indexOf(preName);
						for (let i = startIndex; i < props.length; i++) {
							if (i > startIndex) {
								this.checkAreaList[0][props[i] + '_name'] = '';
								this.checkAreaList[0][props[i] + '_code'] = '';
							}
						}
					}

				} else {
					this.$set(this.areaList, columnIndex * 1 + 1, this.areaList[0]);
					this.checkAreaList[columnIndex][this.areaLevel[columnIndex].propName] = this.areaList[columnIndex][
						rowIndex
					].label;
					this.checkAreaList[columnIndex][this.areaLevel[columnIndex].propValue] = this.areaList[columnIndex][
						rowIndex
					].value;
				}
			},
			// 校验地区选择
			valArea() {
				let length = 0;
				let error = '';
				for (let i in this.areaLevel) {
					if (!this.checkAreaList[0][this.areaLevel[i].propValue]) {
						error = '请选择' + this.areaLevel[i].levelName;
						break;
					}
				}
				return error;
			},
			//来自“服务体系礼包”的购买
			submitByService() {
				let error = this.valArea();
				if (error) {
					uni.showToast({
						icon: 'none',
						title: error
					})
				} else {
					this.closePopup();
					this.psotJson();
				}
			},
			addArea() {
				this.checkAreaList.push({
					province_name: '',
					province_code: '',
					city_name: '',
					city_code: '',
					area_name: '',
					area_code: '',
					street_name: '',
					street_code: '',
					community_name: '',
					community_code: ''
				});
				this.areaLevel.push({
					levelName: '省',
					propName: 'province_name',
					propValue: 'province_code'
				});
				this.$set(this.areaList, this.checkAreaList.length - 1, this.areaList[0]);
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: 'hxicon';
		/* project id 2009392 */
		src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
	}

	@font-face {
		font-family: 'iconfont';
		/* project id 2070236 */
		src: url('//at.alicdn.com/t/font_2070236_id1ac7qapa.eot');
		src: url('//at.alicdn.com/t/font_2070236_id1ac7qapa.eot?#iefix') format('embedded-opentype'),
			url('//at.alicdn.com/t/font_2070236_id1ac7qapa.woff2') format('woff2'),
			url('//at.alicdn.com/t/font_2070236_id1ac7qapa.woff') format('woff'),
			url('//at.alicdn.com/t/font_2070236_id1ac7qapa.ttf') format('truetype'),
			url('//at.alicdn.com/t/font_2070236_id1ac7qapa.svg#iconfont') format('svg');
	}

	.hxicon {
		font-family: hxicon;
		font-size: 20px;
		font-style: normal;
		/* #ifndef APP-PLUS-NVUE */
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		/* #endif */

	}

	.price-zhe {
		display: flex;
		align-items: baseline;
	}

	.slotBox {
		position: fixed;

		.back {
			padding: 0 13rpx;
		}
	}

	.love-color {
		width: 36rpx;
		height: 36rpx;
	}

	.tag {
		display: inline-block;
		padding: 0 10rpx;
		height: 40rpx;

		background: #ff0000;
		border-radius: 10rpx 0px 10rpx 0px;
		line-height: 40rpx;
		text-align: center;
		margin-right: 10rpx;
		color: #fff;
		font-size: 20rpx;

	}

	.collectionActive {
		color: #ff0000;
		// font-size: 45rpx;
		transform: scale(1.2);
	}

	page {
		background-color: #f5f5f5;
	}

	.pd24 {
		padding: 24rpx;
	}

	.pd20 {
		padding: 20rpx;
	}

	.pt20-pb14 {
		padding-top: 20rpx;
		padding-bottom: 14rpx;
	}

	.pt28-pb18 {
		padding-top: 28rpx;
		padding-bottom: 18rpx;
	}

	.pb30 {
		padding-bottom: 30rpx;
	}

	.pb40 {
		padding-bottom: 40rpx;
	}

	.pb50 {
		padding-bottom: 50rpx;
	}

	.pt-pb30 {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.pt-pb35 {
		padding-top: 35rpx;
		padding-bottom: 35rpx;
	}

	.ml54 {
		margin-left: 54rpx;
	}

	.ml138 {
		margin-left: 138rpx;
	}

	.br-rd10 {
		border-radius: 10rpx;
	}

	.br-rd20 {
		border-radius: 20rpx;
	}

	.stb-btn {
		padding: 8rpx 18rpx;
		border-radius: 10rpx;
	}

	.br-FF0000 {
		border: 1rpx solid #ff0000;
		border-radius: 24rpx;
		padding: 6rpx 12rpx;
	}

	.bg-FFF6EE {
		background-color: #fff6ee;
	}

	.mt80 {
		margin-top: 80rpx;
	}

	.product {
		// padding-bottom: 150rpx;
	}

	.pic {
		width: 100%;
		position: relative;

		.swiper {
			// height: 620rpx;
			height: 100vw;

			video {
				width: 100%;
				// height: 620rpx;
				height: 100vw;
			}

			image {
				width: 100%;
				// height: 620rpx;
				height: 100vw;
			}
		}

		.p-price {
			z-index: 10;
			width: 100%;
			position: absolute;
			// top: 620rpx;
			top: 100vw;
			background: #FA6138;
			border-radius: 0rpx 0rpx 0px 0px;

			.discount {
				color: #ffffff;
			}
		}
	}

	.richText {
		padding: 30rpx;
    
    /deep/ img {
      margin-top: 0 !important;
      vertical-align: middle;
    }
	}

	//秒杀，拼团样式
	.p-ab {
		position: absolute;
		top: 448rpx;
	}

	.stb-list {
		padding-bottom: 10rpx;
	}

	.triangle-bottomright {
		width: 0;
		height: 0;
		border-bottom: 108rpx solid #dccda4;
		border-left: 60rpx solid transparent;
	}

	.seckill {
		background-color: #dccda4;
		color: #FA6138;
		padding: 16rpx;
		padding-right: 28rpx;
		border-radius: 5rpx 20rpx 0px 0px;
	}

	.seckill-btn {
		width: 86%;
	}

	.br-284534 {
		border-bottom: 1rpx solid rgba($color: #3775F6, $alpha: 0.3);
	}

	.gb-te {
		padding-top: 20rpx;
		padding-bottom: 15rpx;
	}

	.gb-btn {
		padding: 18rpx 80rpx 8rpx;
		line-height: 30rpx;
	}

	.btn-bg-dccda4 {
		background: #dccda4;
		border-radius: 48rpx 0rpx 0rpx 48rpx;
	}

	.btn-bg-00321E {
		background: #FA6138;
		border-radius: 0px 48px 48px 0px;
	}

	.tab {
		position: sticky;
		top: 0;
		background-color: #fff;
		padding-top: 38rpx;
		z-index: 9;

		.pb30 {
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 0;
				height: 2px;
				background: #FA6138;
				transition: all 0.3s;
			}

			&.active {
				font-size: 30rpx;
				color: #FA6138;
				font-weight: 700;

				&::before {
					width: 100%;
				}
			}
		}
	}

	.bottom-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 9;
		border-top: 1rpx solid #e6e6e6;

		.leftbox {
			display: flex;
			align-items: center;
      height: 84rpx;

			.u-text-center {
				margin-right: 20rpx;
			}
		}

		.cart {
			position: relative;

			.car-icon {
				position: relative;

				.nums {
					font-size: 20rpx;
					color: #FFFFFF;
					font-weight: 400;
					padding: 4rpx;
					height: 30rpx;
					min-width: 30rpx;
					line-height: 23rpx;
					background-color: #FF0000;
					border-radius: 15rpx;
					position: absolute;
					right: 5rpx;
					top: -10rpx;
				}
			}

			.number {
				position: absolute;
				top: -10rpx;
				left: 45rpx;
				padding: 4rpx 8rpx;
				background-color: #ff0000;
				border: 4rpx solid #ffffff;
				border-radius: 40rpx;
			}
		}

		.cart-btn {
			width: 200rpx;
			height: 85rpx;
			line-height: 85rpx;
			background: #FF9651;
			color: white;
			border-radius: 40rpx;
			margin-right: 10rpx;
		}

		.buy-btn {
			width: 200rpx;
			height: 85rpx;
			line-height: 85rpx;
			background: #FA6138;
			border-radius: 40rpx;
			margin-left: 10rpx;
		}
	}

	.flex-sb {
		display: flex;
		justify-content: space-between;
	}

	//弹窗
	.spec {
		border-radius: 18rpx 18rpx 0rpx 0rpx;
		padding-top: 30rpx;
		// max-height: 900rpx;
		overflow-y: auto;

		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);
		.spec-item {
			background-color: #f6f6f6;
			border: 1px solid #f6f6f6;
			padding: 12rpx 30rpx;
			font-size: 24rpx;
			color: #1a1a1a;
			border-radius: 4px;
		}

		.activeColor {
			background-color: #e1e6e3;
			border: 1px solid #FA6138;
			color: #FA6138;
			border-radius: 4px;
		}

		.spec-item:not(:last-child) {
			margin-right: 24rpx;
		}

		//减号
		.minus {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background: #dedede;
			border-radius: 8rpx 0rpx 0rpx 8rpx;
		}

		.num {
			width: 74rpx;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			border: 1px solid #dedede;
		}

		//加号
		.plus-sign {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background: #dedede;
			border-radius: 0rpx 8rpx 8rpx 0rpx;
		}

		.specOpen-btn {
			margin-top: 68rpx;
			padding-bottom: 34rpx;

			button {
				background-color: #FA6138;
				color: #ffffff;
			}
		}
	}

	.jvideo {
		.playIcon {
			width: 100rpx;
		}
	}

	.tip-popup {
		.content-box {
			width: 690rpx;

			.content {
				height: 100%;
				overflow: auto;
				box-sizing: border-box;
				background: white;
			}
		}

		.check-tip {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #1a1a1a;
			margin-bottom: 10rpx;
			padding: 0 30rpx;
			position: relative;

			&.required {
				&:before {
					content: '*';
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #ff0000;
					vertical-align: middle;
					margin-right: 2rpx;
				}
			}
		}

		.content {
			.tip {
				width: auto !important;
				padding-left: 30rpx;
				padding-right: 30rpx;
				text-align: center;
			}

			.add-area {
				width: 630rpx;
				background: white;
				color: #FA6138;
				border: 1px dashed #3775F6;
				height: 75rpx;
				line-height: 75rpx;
				font-size: 30rpx;
				margin: 40rpx auto 60rpx auto;
				border-radius: 20rpx;
			}
		}
	}

	.check-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		background: #ffffff;
		border-radius: 10px;
		width: 630rpx;
		min-height: 70rpx;
		border: 1px solid #cccccc;
		margin: 0 30rpx;
		padding: 15rpx 21rpx;
		margin-bottom: 25rpx;
	}
</style>