yicangzongtai_app_240321/pages/product/goods/freeGoods.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">
									<text>免费领</text>
								</view>
								<text class="discount u-font24 u-ml20 u-del">￥{{ dataForm.max_market_price }}</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>
					</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: #0F8947;">&#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">
				<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-font36 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 class="number u-font20 u-FFF">10</view> -->
				</view>
				<view class="u-flex flex-sb" v-if="ispay">
					<button class="cart-btn u-00321E u-font30" @click="buy(0, dataForm.id)">
						加入购物车
					</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 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 class="u-flex-center">
								<view class="num" style="border: none;">{{ add_num }}</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>
	</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 // 购物车数量
			};
		},
		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
			}
		},
		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,
				});

			},
			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.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) {
				// 【免费领商品】不能加入购物车
				if(i== 0){
					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.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();
				}
			},
			//组合数据
			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,
				});
				dataJson = {
					is_cart: false, //是否来源于购物车
					receipt_id: null,
					shipment_mode: 0, //0物流，1自提
					shop_orders: parendArr,
					marketing_type: 0, //0无活动，1秒杀，2拼团
					free: true
				};
				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/freeSurePay",
				});
				// 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;
						}
					});
			},
		},
	};
</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: 600rpx;
			background: linear-gradient(90deg,#20a733, #0a824b);
			border-radius: 20rpx 20rpx 0px 0px;

			.discount {
				color: #ffffff;
			}
		}
	}

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

	//秒杀，拼团样式
	.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: #0B844A;
		padding: 16rpx;
		padding-right: 28rpx;
		border-radius: 5rpx 20rpx 0px 0px;
	}

	.seckill-btn {
		width: 86%;
	}

	.br-284534 {
		border-bottom: 1rpx solid rgba($color: #0B844A, $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: #0B844A;
		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: #0f8a46;
				transition: all 0.3s;
			}
			&.active {
				font-size: 30rpx;
				color: #0D8847;
				font-weight: 700;
				&::before {
					width: 100%;
				}
			}
		}
	}

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

		.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: #F8A764;
			color: white;
			border-radius: 40rpx;
			margin-right: 10rpx;
		}

		.buy-btn {
			width: 200rpx;
			height: 85rpx;
			line-height: 85rpx;
			background: #0B844A;
			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 #0B844A;
			color: #0B844A;
			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: #0B844A;
				color: #ffffff;
			}
		}
	}

	.jvideo {
		.playIcon {
			width: 100rpx;
		}
	}
</style>