ec.uniapp-master/pages/shop/goodsdetail.vue

<template>
	<view>
		<lf-nav title="商品详情" titleColor="#fff" :spreadOut="false" :showIcon="true" bgColor="transparent"></lf-nav>
		<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true">
			<block>
				<!-- 商品图片轮播 -->
				<swiper :current="current" :indicator-dots="pictures.length > 1" :circular="true" class="swiper-box" indicator-active-color="#1998FE">
					<swiper-item v-for="(item, index) in pictures" :key="index">
						<image mode="aspectFill" :src="item" style="width: 100%; height: 100%;" @click="lookImg(index)"></image>
						<view class="seckill-box" v-if="type == 'seckill'">
							<view>距离结束还剩余</view>
							<view>
								<countdown-timer :time="time" :autoStart="true" @finish="dateFinish">
									<template v-slot="{day, hour, minute, second}">
										<view class="lf-flex">
											<view>{{ day }}</view>
											<view>天</view>
											<view>{{ hour >= 10 ? hour : "0" + hour }}</view>
											<view>时</view>
											<view>{{ minute >= 10 ? minute : "0" + minute }}</view>
											<view>分</view>
											<view>{{ second >= 10 ? second : "0" + second }}</view>
											<view>秒</view>
										</view>
									</template>
								</countdown-timer>
							</view>
						</view>
					</swiper-item>
				</swiper>
				
				<!-- 商品主要信息 -->
				<view class="head-info">
					<view class="lf-row-between">
						<view v-if="type == 'point'">
							<text class="lf-font-48 lf-color-primary lf-font-bold">{{ goods_detail.redeem_point }}</text>
							<text class="lf-font-28 lf-color-777 lf-m-l-10">个兑换</text>
						</view>
						<lf-price :iftext="false" :price="goods_detail.sell_price || 0" v-else></lf-price>
						<text class="lf-iconfont icon-fenxiang lf-font-40" @click="shareGraphic()"></text>
					</view>
					<view class="lf-row-between lf-font-24 lf-m-t-20 lf-p-b-20">
						<view class="lf-font-bold lf-font-32 lf-color-222">{{ goods_detail.name }}</view>
					</view>
					<view class="lf-row-between lf-font-24 lf-p-b-30">
						<view class="lf-font-28 lf-color-777 lf-row-between">可自提/可邮寄</view>
					</view>
				</view>
				<!-- 商品优惠 -->
				<block v-if="coupons && coupons.length">
					<self-line></self-line>
					<view class="bg-white" >
						<view class="cu-bar padding-lr">
							<view class="lf-flex">
								<text class="lf-color-777 lf-font-28">优惠</text>
								<view style="width: 580rpx;">
									<view class="lf-color-222 lf-font-26 lf-m-l-30" 
										v-for="(item, index) in coupons" :key="index">{{ item.title }}
									</view>
								</view>
							</view>
							<view>
								<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
							</view>
						</view>
					</view>
				</block>
				<self-line></self-line>
				<!-- 服务tags -->
				<block v-if="goods_detail.tags.length">
					<view class="bg-white">
						<view class="cu-bar padding-lr">
							<view class="lf-flex">
								<text class="lf-color-777 lf-font-28">服务</text>
								<view style="width: 600rpx;flex-wrap: wrap;display: flex;margin-top: 32rpx;">
									<view class="lf-m-l-30" v-for="(tagItem, tagIndex) in goods_detail.tags" :key="tagIndex">
										<text class="lf-iconfont icon-xuanzhong lf-font-30" style="color: #15716E;"></text>
										<text class="lf-m-l-10 lf-font-26 lf-color-black">{{ tagItem }}</text>
									</view>
								</view>
							</view>
							<view>
								<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
							</view>
						</view>
					</view>
				</block>
				<!-- 商品选择规格 -->
				<view class="bg-white">
					<view class="cu-bar padding-lr" @click="shoot(2)">
						<view class="lf-flex">
							<text class="lf-color-777 lf-font-28">选择</text>
							<text class="lf-color-222 lf-font-26 lf-m-l-30">{{ showSpec }}</text>
						</view>
						<view>
							<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
						</view>
					</view>
				</view>
				<self-line></self-line>
				
				<!-- 店铺信息 -->
				<view v-if="type != 'point'">
					<view class="user-top">
						<view class="lf-row-between lf-w-100">
							<view class="lf-flex" @click="$url('/pages/shop/shopdetail?id='+ brand_detail.id)">
								<view class="tag-father">
									<image :src="brand_detail.logo" mode="aspectFill" class="head-img"></image>
								</view>
								<view class="lf-flex-column lf-m-l-20">
									<text class="lf-font-28 lf-color-black lf-font-bold">{{ brand_detail.name }}</text>
									<view class="lf-font-24 lf-color-777">
										<text class="lf-iconfont icon-dizhi lf-font-24 lf-color-primary"></text>
										<text class="lf-m-l-10">{{ brand_detail.floor }}</text>
									</view>
								</view>
							</view>
							<!-- <view>
								<button class="head-btn" @click="$url('/pages/user/my/chatonline')">
									<text class="lf-iconfont icon-kefuhdpi lf-font-24"></text>
									<text class="lf-m-l-10">客服</text>
								</button>
							</view> -->
						</view>
					</view>
					<scroll-view class="scroll-view" :scroll-x="true">
						<view class="scroll-content">
							<view class="goods-item" 
								v-for="(item, index) in brand_detail.goods" 
								:key="index" 
								@click="$url('/pages/shop/goodsdetail?id='+ item.id)">
								<image class="goods-img" :src="item.img"></image>
								<view class="goods-info">
									<view class="lf-line-1">{{ item.name }}</view>
									<view>￥{{ item.sell_price }}</view>
								</view>
							</view>
							<view class="goods-item" @click="$url('/pages/shop/shopdetail?id='+ brand_detail.id)">
								<view class="more-box">
									<text>查看更多</text>
									<text class="lf-iconfont icon--2 lf-text-vertical"></text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				
				<!-- 商品详情 -->
				<view class="goods-detail">
					<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
					<rich-text :nodes="formatRichText(goods_detail.content)"></rich-text>
					<!-- <image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image> -->
				</view> 
				<!-- 修饰专用 -->
				<view class="extra"></view>
				
				<!-- 吸底操作按钮 -->
				<view class="lf-row-between fixed-bottom">
					<view class="lf-flex lf-p-t-10 lf-p-b-10">
					<!-- 	<view class="lf-flex-column lf-row-center icon-item" open-type="contact">
							<text class="lf-iconfont icon-pinglun- icon-img"></text>
							<view class="lf-m-t-1">客服</view>
						</view> -->
						<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
							<text class="lf-iconfont icon-shoucang2 icon-img lf-color-price" v-if="is_collect"></text>
							<text class="lf-iconfont icon-shoucang11 icon-img" v-else></text>
							<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
						</view>
						<button class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/store/cart/cart')">
							<text class="lf-iconfont icon-gouwulan icon-img"></text>
							<view class="lf-m-t-1">购物车</view>
						</button>
					</view>
					<view v-if="type == 'seckill'">
						<button class="btn" style="width: 349rpx;">立即秒杀</button>
					</view>
					<view v-else-if="type == 'point'">
						<button class="btn" style="width: 349rpx;">立即兑换</button>
					</view>
					<view class="lf-flex" v-else>
						<button class="btn1" @click="shoot(1)">加入购物车</button>
						<button class="btn lf-m-l-15" @click="shoot(2)">立即购买</button>
					</view>
				</view>
				
				<!-- 加入购物车、立即购买模态框选规格 -->
				<u-popup v-model="show_popup" mode="bottom" :round="true" borderRadius="20">
					<view class="popup-content">
						<!-- 商品信息及关闭按钮 -->
						<view class="popup-head">
							<view class="lf-flex">
								<image class="goods-img" :src="goods_detail.img"></image>
								<view class="goods-info">
									<view class="price">{{ showGoodsSpecPrice }}</view>
									<view class="goods-name">{{ goods_detail.name }}</view>
								</view>
							</view>
							<view @click="show_popup = false">
								<text class="lf-iconfont icon-cuo lf-font-50"></text>
							</view>
						</view>
						<!-- 规格 -->
						<view v-for="(value, key) in goods_stock.specs" :key="key">
							<view class="spec-title">{{ value.label }}</view>
							<view class="lf-flex-wrap">
								<view :class="{
									'spec-item': true,
									'spec-active': value.spec_current === index}" 
									@click="activeSpec(key, index)"
									v-for="(item, index) in value.list" 
									:key="index">{{ item.value }}
								</view>
							</view>
						</view>
						<!-- 数量 -->
						<view class="lf-row-between lf-m-t-40">
							<view class="lf-font-28 lf-color-555">数量</view>
							<view class="lf-flex">
								<view class="num-btn" @click="changeNum('less')">
									<text class="lf-iconfont icon-jian1 lf-font-30"></text>
								</view>
								<view>
									<input class="input" :value="goods_num" :disabled="true" />
								</view>
								<view class="num-btn lf-text-right" @click="changeNum('add')">
									<text class="lf-iconfont icon-jia lf-font-30"></text>
								</view>
							</view>
						</view>
						<!-- 操作按钮 -->
						<button class="comfirm-btn" @click="specConfirm">{{ click_type == 1 ? '加入购物车' : '立即购买' }}</button>
					</view>
				</u-popup>
				
				<!-- 回到顶部 -->
				<u-back-top :scroll-top="pageScrollTop"></u-back-top>
			</block>
		</skeleton>
	</view>
</template>

<script>
	import countdownTimer from '@/components/countdown-timer/countdown-timer';
	export default {
		components: {
			countdownTimer
		},
		data(){
			return {
				current: 0, // 轮播下标
				goods_id: 0,
				goods_detail: {},
				is_collect: false, // 1为当前收藏商品了，0为否
				skeletonLoading: false,
				pictures: [],
				show_popup: false, // 是否显示选规格模态框
				click_type: null, // 当前点击的是加入购物车[1]还是立即购买[2]
				type: 'mail', // 页面显示类型，mail普通可邮寄商品，point积分商品，seckill秒杀商品
				time: 0,
				goods_stock: {
					specs: {},
					stores: {}
				},
				seckill: {}, // 秒杀商品的信息
				brand_detail: {},
				token: '',
				coupons: [], // 优惠
				goods_num: 1,
				is_date_finish: false
			}
		},
		computed: {
			showGoodsSpecPrice(){
				let goods_detail = this.goods_detail;
				let stores = this.goods_stock.stores;
				let specs = this.goods_stock.specs;
				
				if(!this.$isRight(specs[1])){
					return `￥${goods_detail.min_price} - ￥${goods_detail.max_price}`;
				}
				let spec_current_1 = specs[1].spec_current;
				let spec_current_2 = specs[2].spec_current;
				if(specs[1].spec_current != null && specs[2].spec_current != null){
					let id_1 = specs[1].list[spec_current_1].id;
					let id_2 = specs[2].list[spec_current_2].id;
					if(id_1 < id_2){
						let id_3 = id_2;
						id_2 = id_1;
						id_1 = id_3;
					}
					return "￥"+ stores[id_2 +'-'+ id_1].price;
				}else{
					return `￥${goods_detail.min_price} - ￥${goods_detail.max_price}`;
				}
			},
			showSpec(){
				let specs = this.goods_stock.specs;
				let str = '';
				for(let i in specs){
					if(specs[i].spec_current != null){
						str += specs[i].list[specs[i].spec_current].value +';';
					}
				}
				if(str == ''){
					str = '请选择规格'
				}
				return str;
			}
		},
		onLoad(options){
			console.log("options", options)
			this.token = this.$cookieStorage.get('user_token');
			this.goods_id = options.id;
			this.getNewdetail();
			this.getGoodsStock(); // 获取商品库存、规格信息
		},
		methods: {
			// 切换商品收藏
			switchCollect(){
				if(!this.token){
					this.$url('/pages/login/index');
					return;
				}
				this.addCollcet()
			},
			//收藏
			addCollcet() {
				this.$http.post({
					api: 'api/collect/create',
					data: {
						type:'jc_goods',
						collect_id: this.goods_detail.id,
					},
					header: {
					   Authorization: this.token
					}
				}).then(res => {
					this.$msg(res.data.data);
					this.getNewdetail();
				}).catch(err => {
					console.log("====", err);
				})
			},
			// 加入购物车和立即购买
			shoot(type){
				this.click_type = type;
				if(this.$isRight(this.goods_stock.specs)){
					this.show_popup = true;
				}else{
					this.confirm();
				}
			},
			// 选规格提交
			specConfirm(){
				let specs = this.goods_stock.specs;
				let flag = true;
				for(let i in specs){
					if(specs[i].spec_current == null){
						flag = false;
					}
				}
				if(flag){
					this.confirm();
				}else{
					this.$msg('您未选完整规格')
				}
			},
			// 商品选规格
			activeSpec(key, index){
				let obj = this.goods_stock.specs;
				if(obj[key]['spec_current'] == index){
					obj[key]['spec_current'] = null;
				}else{
					obj[key]['spec_current'] = index;
				}
				this.$set(this.goods_stock, 'specs', obj);
			},
			// 商品加减
			changeNum(type){
				if(type == 'add'){
					if(this.goods_num < 10){
						this.goods_num++;
					}
				}else if(type == 'less'){
					if(this.goods_num > 1){
						this.goods_num--;
					}
				}
			},
			// 跳转至下单页TODO
			confirm(){
				if(this.is_date_finish){
					return this.$msg('活动已结束');
				}
				let goods_detail = this.goods_detail;
				let specs = this.goods_stock.specs;
				let stores = this.goods_stock.stores;
				
				let s_id_1 = 1;
				let s_id_2 = 2;
				for(let i in specs){
					if(specs[i].label_key == 'size'){
						s_id_1 = 1;
					}
					if(specs[i].label_key == 'color'){
						s_id_2 = 2;
					}
				}
				
				let spec_current_1 = specs[s_id_1].spec_current;
				let spec_current_2 = specs[s_id_2].spec_current;
				let id_1 = specs[s_id_1].list[spec_current_1].id;
				let id_2 = specs[s_id_2].list[spec_current_2].id;
				if(id_1 > id_2){
					let id_3 = id_2;
					id_2 = id_1;
					id_1 = id_3;
				}
				
				let par = {
					attributes: {
						color: specs[s_id_2].list[specs[s_id_2].spec_current].value,
						com_id: goods_detail.id,
						img: goods_detail.img,
						size: specs[s_id_1].list[specs[s_id_1].spec_current].value,
						sku: goods_detail.goods_no +'-'+ specs[s_id_1].list[specs[s_id_1].spec_current].value
					},
					id: stores[id_1 +'-'+ id_2].id,
					product_id: stores[id_1 +'-'+ id_2].id,
					price: stores[id_1 +'-'+ id_2].price,
					store_count: stores[id_1 +'-'+ id_2].store,
					market_price: goods_detail.market_price,
					name: goods_detail.name,
					qty: this.goods_num
				}
				
				uni.showLoading({
					title: '正在提交'
				})
				this.show_popup = false;
				if(this.click_type == 1){
					// 加入购物车
					this.$http.post({
						api: 'api/shopping/cart',
						data: {"0": par},
						header: {
							Authorization: this.token
						}
					}).then(res => {
						if(res.data.code == 200){
							this.$msg('加入购物车成功', {icon: 'success'})
						}else{
							this.$msg('加入购物车失败', {icon: 'error'})
						}
						uni.hideLoading()
					}).catch(err => uni.hideLoading())
				}else if(this.click_type == 2){
					// 直接结算
					this.$cookieStorage.set('order_confirm', par);
					uni.hideLoading();
					this.$url('/pages/order/confirm/confirm');
					// this.$http.post({
					// 	api: 'api/shopping/order/checkout',
					// 	data: par,
					// 	header: {
					// 		Authorization: this.token
					// 	}
					// }).then(res => {
					// 	if(res.data.code == 200){
					// 		this.$url('/pages/order/confirm/confirm');
					// 	}else{
					// 		this.$msg('提交失败', {icon: 'error'})
					// 	}
					// 	uni.hideLoading()
					// }).catch(err => uni.hideLoading())
				}
			},
			// 点击页面分享按钮
			shareGraphic(){
				this.getCreateShareImg();
			},
			//请求h5的图片接口
			getCreateShareImg(){
				wx.showLoading({
					title:"生成中",
					mask:true
				})
				    let origin = window.location.origin;
					let share_url = origin+'/pages/store/detail/detail';
				this.$http.get({
					api:'api/distribution/createH5ShareImg',
					data:{
						goods_id:this.id,
						share_url:share_url 
					}
				}).then(res=>{
					res = res.data;
					if(res.status){
						this.qr_code_image = res.data.image;
			
						if(this.qr_code_image){
							this.share_gaphic =!this.share_gaphic;
							this.is_toggle_share = false;
						}
					} else{
						wx.showModal({
							content: res.message || '请求失败，请重试',
							showCancel: false
						});
					}
					wx.hideLoading()
				}).catch(rej=>{
					wx.hideLoading()
					wx.showModal({
						content: rej.message || '内部错误，请重试',
						showCancel: false
					});
				})
				
			},
			// 商品详情
			getNewdetail(){
				this.$http.get({
					api: 'api/store/detail/'+ this.goods_id,
					header: {
					   Authorization: this.token
					}
				}).then(res => {
					console.log("===---", res);
					let meta = res.data.meta;
					let goods_detail = res.data.data;
					this.goods_detail = goods_detail;
					this.pictures = [res.data.data.img];
					this.is_collect = Boolean(res.data.data.is_collect) || false;
					let type = 'mail';
					if(this.$isRight(goods_detail.is_largess)){
						type = 'point';
					}
					if(this.$isRight(meta.seckill)){
						type = 'seckill';
						this.seckill = meta.seckill;
						let currentDate = this.$shared.recordTime();
						this.time = new Date(meta.seckill.ends_at).getTime() - new Date(currentDate).getTime()
					}
					if(type != 'point'){
						this.getBrandDetail(goods_detail.brand_id);
					}
					if(this.$isRight(meta.discounts)){
						this.coupons = meta.discounts.coupons;
					}
					this.type = type;
				}).catch(err => {
					console.log("====", err);
				})
			},
			// 获取商家信息
			getBrandDetail(brand_id){
				this.$http.get({
					api: 'api/brand/detail',
					data: {
						brand_id: brand_id
					},
					header: {
					   Authorization: this.token
					}
				}).then(res => {
					this.brand_detail = res.data.data;
				})
			},
			// 获取商品库存信息
			getGoodsStock(){
				this.$http.get({
					api: `api/store/detail/${this.goods_id}/stock`
				}).then(res => {
					let data = res.data.data;
					for(let i in data.specs){
						data.specs[i].spec_current = null;
					}
					this.goods_stock = data;
				})
			},
			// 拨打电话
			makePhoneCall(phoneStr){
				uni.makePhoneCall({
					phoneNumber: String(phoneStr)
				})
			},
			// 打开地图 PS.暂时用不到
			openMap(){
				let { address, lat, lng } = this.goods_detail?.store || {};
				uni.openLocation({
				  longitude: Number(lat),
				  latitude: Number(lng),
				  scale: 20,
				  name: address
			   });
			},
			// 预览图片
			lookImg(index){
				this.$u.throttle(() => {
					let banners = this.pictures;
					uni.previewImage({
						urls: banners,
						current: index
					})
				}, 200);
			},
			// 倒计时结束
			dateFinish(){
				this.is_date_finish = true;
			},
			// 富文本处理
			formatRichText(richText){
			  if(richText != null){
					let newRichText= richText.replace(/<img[^>]*>/gi, function(match, capture){
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newRichText = newRichText.replace(/style="[^"]+"/gi,function(match, capture){
						match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
						return match;
					});
					newRichText = newRichText.replace(/<br[^>]*\/>/gi, '');
					newRichText = newRichText.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"');
					return newRichText;
				}else{
					return null;
				}
			}
		},
		onShareAppMessage(){
			let goods = this.goods_detail;
			let title = goods.name;
			let imageUrl = goods.share_cover || goods.cover || goods.img;
			let path = '/pages/route/index?route=detail&id='+ goods.id;
			
			return {
				title,
				path,
				imageUrl
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
		overflow-x: hidden;
	}
</style>
<style lang="scss" scoped="scoped">
	//商品上去scrollview部分
	.scroll-view{
		height: 310rpx;
		width: 100%;
		// margin-top: 20rpx;
		padding: 0 30rpx 30rpx 30rpx;
		background-color: white;
		.scroll-content{
			display: flex;
			width: 100%;
			.goods-item{
				margin-right: 15rpx;
				width: 180rpx;
			}
			.goods-img{
				width: 180rpx;
				height: 180rpx;
				background-color: #EEEEEE;
			}
			.goods-info{
				text-align: center;
				color: #222222;
				&>view:nth-child(1n){
					font-size: 24rpx;
				}
				&>view:nth-child(2n){
					font-size: 28rpx;
					font-weight: bold;
					text-align: left;
					color: #F63434;
				}
			}
			.more-box{
				width: 180rpx;
				height: 180rpx;
				background-color: #EEEEEE;
				text-align: center;
				line-height: 180rpx;
				font-size: 24rpx;
			}
		}
	}
	
	//scrollview结束
	.tag-father {
		position: relative;
	}
	.head-tag {
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 24rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background-color: #15716E;
		border: 1rpx solid #FFFFFF;
		position: absolute;
		left: 76rpx;
		top: 86rpx;
		z-index: 99;
	}
	.qzone-img {
		width: 220rpx;
		height: 220rpx;
		border-radius: 10rpx;
		margin-right: 12rpx;
		&:nth-child(3n) {
			margin-right: 0;
		}
		&:nth-child(n + 4) {
			margin-top: 12rpx;
		}
	}
	.user-top {
		background-color: #F3F8F8;
		padding: 30rpx;
		display: flex;
		align-items: center;
		background-color: white;
	}
	.head-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.head-btn {
		display: flex;
		width: max-content;
		height: 45rpx;
		background: white;
		border: 2rpx solid #15716E;
		align-items: center;
		font-size: 22rpx;
		color: #15716E;
		justify-content: space-between;
		border-radius: 35rpx;
		padding: 10rpx!important;
	}
	.swiper-box{
		width: 750rpx;
		height: 750rpx;
		background-color: #FFFFFF;
		position: relative;
		.seckill-box{
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx;
			width: 100%;
			height: 77rpx;
			background-color: #15716E;
			color: #FFFFFF;
			font-size: 26rpx;
		}
	}
	
	.head-info{
		width: 750rpx;
		height: auto;
		box-sizing: border-box;
		padding: 0 32rpx;
		padding-top: 20rpx;
		background-color: #FFFFFF;
		// .price>view:nth-of-type(1){
		// 	color: #FF0000;
		// 	margin-right: 22rpx;
		// 	font-weight: bold;
		// }
		.price>view:nth-of-type(1){
			text-decoration: line-through;
			color: #777777;
			margin-right: 22rpx;
		}
		.price>view:nth-of-type(2){
			width: max-content;
			padding: 0 18rpx;
			height: 46rpx;
			background-color: #1998FE;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
		}
		.label-box{
			min-height: 130rpx;
			width: 100%;
			border-top: 1rpx solid #E5E5E5;
			display: flex;
			flex-wrap: wrap;
			padding: 30rpx 0 10rpx 0;
			.label-item{
				width: max-content;
				padding: 20rpx;
				height: 70rpx;
				border-radius: 10rpx;
				border: 2rpx solid #1998FE;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #1998FE;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}
	
	.address-box{
		width: 750rpx;
		height: auto;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding: 32rpx;
		margin-top: 20rpx;
		.shop-img{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
	}
	
	.goods-detail{
		width: 750rpx;
		height: auto;
		background-color: #FFFFFF;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		.goods-img{
			width: 100%;
		}
	}
	
	.extra{
		width: 100%;
		height: 110rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}
	
	.fixed-bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		width: 100%;
		height: auto;
		padding: 0 32rpx;
		border-top: 1rpx solid #e5e5e5;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.icon-item{
			text-align: center;
			margin-right: 16rpx;
			background-color: transparent;
			margin: 0;
			line-height: initial;
			font-size: 28rpx;
			font-weight: inherit;
			margin-right: 10rpx;
			padding: 0;
			width: 88rpx;
			position: relative;
			&:first-child{
				padding-left: 0;
			}
			.icon-img{
				height: 50rpx;
				width: 50rpx;
				font-size: 40rpx;
				line-height: 1;
			}
		}
		.btn1{
			margin: 0;
			width: max-content;
			height: 80rpx;
			background-color: rgba(21, 113, 110, 0.1);
			color: #15716E;
			line-height: 80rpx;
			font-size: 32rpx;
			padding: 0 20rpx;
			border-radius: 42rpx;
			font-size: 26rpx;
			border: 2rpx solid #15716E;
		}
		.btn{
			margin: 0;
			padding: 0 20rpx;
			width: max-content;
			height: 80rpx;
			background-color: #15716E;
			color: #FFFFFF;
			line-height: 80rpx;
			font-size: 26rpx;
			border-radius: 42rpx;
		}
	}
	
	.popup-content{
		height: max-content;
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx !important;
		padding: 40rpx 32rpx;
		max-height: 80vh;
		overflow-y: scroll;
		.popup-head{
			display: flex;
			justify-content: space-between;
			.goods-img{
				width: 150rpx;
				height: 150rpx;
				border-radius: 2rpx;
				margin-right: 20rpx;
			}
			.goods-info{
				width: 400rpx;
				height: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.price{
					font-size: 48rpx;
					font-weight: bold;
					color: #F63434;
					line-height: 1;
				}
				.goods-name{
					font-size: 32rpx;
					color: #222222;
					line-height: 1.4;
				}
			}
		}
		.spec-title{
			font-size: 28rpx;
			color: #555555;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}
		.spec-item{
			width: 142rpx;
			height: 64rpx;
			border-radius: 33rpx;
			border: 2rpx solid #555555;
			font-size: 28rpx;
			color: #555555;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
			&:nth-child(4n){
				margin-right: 0rpx;
			}
			&:nth-child(n+5){
				margin-top: 20rpx;
			}
		}
		.spec-active{
			border: none;
			background-color: #15716E;
			color: #FFFFFF;
		}
		.input{
			width: 40rpx;
			height: 45rpx;
			border-radius: 2rpx;
			background-color: #F3F8F7;
			text-align: center;
		}
		.num-btn{
			width: 36rpx;
		}
		.comfirm-btn{
			width: 550rpx;
			height: 100rpx;
			background: #15716E;
			border-radius: 50rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			margin-top: 62rpx;
		}
	}
</style>