jiaoyi-uni/pages/goods/detail.vue

<template>
	<view class="content">
		<block v-if="loading">
			<view class="skeleton">
				<view class="skeleton-line max animate" style="height: 200upx;"></view>
				<view class="skeleton-line animate"></view>
				<view class="skeleton-line min animate"></view>
				<view class="skeleton-line min animate"></view>
				<view class="skeleton-line max animate" style="height: 200upx;"></view>
				<view class="skeleton-line max animate" style="height: 200upx;"></view>
			</view>
		</block>
		<block v-else>
			<view class="home-banner" v-if="bannerData.length>0">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :style="{ height: swiperHeight + 'px' }" :current="currIndex" @change="changeSwiper" :autoplay="false" :interval="2000" :duration="200">
					<swiper-item class="swiper-item" v-for="(item,idex) in bannerData" :key="idex">
						<image :src="item.url" :id="'wrap' + idex" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="goods-top" v-if="goodsData">
				<view class="price">
					<view class="sale">{{$dialog.disFormat(goodsData.price,goodsData.line_price)}}折</view>
					<view class="price-sale">{{ goodsData.price?$dialog.formatMoney(goodsData.price):'0.00'}}</view>
					<view class="line-price">{{ goodsData.line_price ? $dialog.formatMoney(goodsData.line_price) : '0.00'}}</view>
					<view class="desc-num">已售{{goodsData.sale_stock}}</view>
				</view>
				<view class="title">{{goodsData.product_name}}</view>
				<view class="goods-rule" @click="openRule(1)">
					购买须知<view class="right">
					<span class="mix-item" v-if="goodsData.use_date_type==1">
						自购买之日起{{ goodsData.day_duration }}天有效
					</span>
					<span class="mix-item" v-if="goodsData.use_date_type==2">
						有效期：{{ $dialog.dateFormat(goodsData.use_time_start,'yyyy-MM-dd') }}至{{ $dialog.dateFormat(goodsData.use_time_end,'yyyy-MM-dd') }}
					</span>
					 <image src="/static/image/right-black.png"></image></view>
				</view>
				<view class="goods-safe">
					<view class="safe-item"><image src="/static/image/check.png"></image>过期退</view>
					<view class="safe-item"><image src="/static/image/check.png"></image>随时退</view>
				</view>
			</view>
			<view class="goods-store" v-if="goodsData.poi">
				<view class="title">适用门店</view>
				<view class="store-info">
					<view class="store-left">
						<view class="name">{{goodsData.poi?goodsData.poi.poi_name:'-'}}</view>
						<view class="address">{{goodsData.poi?goodsData.poi.poi_address:'-'}}</view>
					</view>
					<view class="store-right">
						<view class="right-item" @click="toMap">
							<image src="/static/image/amap.png"></image>
							<view class="desc">导航</view>
						</view>
					</view>
				</view>
			</view>
			<view class="service-popup popup-white" v-if="specs.length > 0">
				<view class="title">团购套餐</view>
				<div class="group-body" v-for="(item,indx) in specs" :key="indx">
					<div class="body-title">
						{{item.name}}
						<span v-if="item.num == 0">全部可选</span>
						<span v-else>{{item.list.length}}选{{item.num}}</span>
					</div>
					<div class="body-item">
						<div class="body-item-li" v-for="(its,idx) in item.list" :key="idx">
							{{its.name}}
							<div class="item-right">
								<span class="desc">({{its.number}}份)</span>
								<span>¥ {{ its.price }}</span>
							</div>
						</div>
					</div>
				</div>
			</view>
			<view class="service-popup popup-white" v-if="goodsData">
				<view class="title">购买须知</view>
				<view class="rule-list">
					<view class="rule-item">
						<view class="icon"><image src="/static/image/rule-date.png"></image></view>
						<view class="item-top">
							<view class="name">可用日期</view>
							<view class="desc">
								<span class="mix-item" v-if="goodsData.use_date_type==1">
									自购买之日起{{ goodsData.day_duration }}天有效
								</span>
								<span class="mix-item" v-if="goodsData.use_date_type==2">
									有效期：{{ $dialog.dateFormat(goodsData.use_time_start,'yyyy-MM-dd') }}至{{ $dialog.dateFormat(goodsData.use_time_end,'yyyy-MM-dd') }}
								</span>
							</view>
						</view>
					</view>
					<view class="rule-item">
						<view class="icon"><image src="/static/image/rule-time.png"></image></view>
						<view class="item-top">
							<view class="name">可用时间</view>
							<view class="desc" v-if="goodsData.can_no_use_date==1">商家营业时间可用</view>
						</view>
					</view>
					<view class="rule-item">
						<view class="icon"><image src="/static/image/rule-rule.png"></image></view>
						<view class="item-top">
							<view class="name">预约规则</view>
							<view class="desc" v-if="goodsData.booking_type==1">无需预约，高峰期可能需要排队</view>
							<view class="desc" v-if="goodsData.booking_type==2">
								需要提前<span>{{ goodsData.booking_date }}</span>{{ goodsData.booking_unit==1?'天':'小时' }}预约
							</view>
						</view>
					</view>
					<view class="rule-item">
						<view class="icon"><image src="/static/image/rule-refund.png"></image></view>
						<view class="item-top">
							<view class="name">退款政策<view class="tips">随时退/过期退</view></view>
							<view class="desc">随时退款：未核销的商品支持随时申请退款；过期自动退：商品若在有效时间内未核销使用，到期之后系统将自动发起退款</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="service-popup popup-white">
				<view class="rule-content">
					<template v-if="goodsData.content">
						<view class="content-data" v-html="goodsData.content"></view>
					</template>
					<template v-if="otherImg.length > 0">
						<view class="rule-img" v-for="(item,indx) in otherImg" :key="indx">
							<image :src="item" mode="widthFix"></image>
						</view>
					</template>
				</view>
			</view>
			
			<view class="line-footer"></view>
			<view class="footer">
				<view class="footer-op">
					<view class="footer-left">
						<view class="item" @click="toHome"><image src="/static/image/goods/home.png"></image>首页</view>
						<view class="item" @click="showService(1)"><image src="/static/image/goods/service.png"></image>客服</view>
						<view class="item" @click="toOrder"><image src="/static/image/goods/order.png"></image>订单</view>
					</view>
					<view class="footer-right" @click="buyOrder(1)" v-if="userToken">立即购买 {{ goodsData?$dialog.formatMoney(goodsData.price):'0.00'}}</view>
					<button class="footer-right" open-type="getPhoneNumber" @getphonenumber="toLogin" v-else>登录下单 {{ goodsData?$dialog.formatMoney(goodsData.price):'0.00'}}</button>
				</view>
				<view class="footer-safe"></view>
			</view>
		</block>
		<uni-popup ref="rulepopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff">
			<view class="service-popup popup-height" v-if="goodsData">
				<view class="title" @click="openRule(2)">购买须知 <view class="close"><image src="/static/image/close.png"></image></view></view>
				<view class="rule-list">
					<view class="rule-item">
						<view class="icon"><image src="/static/image/rule-date.png"></image></view>
						<view class="item-top">
							<view class="name">可用日期</view>
							<view class="desc">
								<span class="mix-item" v-if="goodsData.use_date_type==1">
									自购买之日起{{ goodsData.day_duration }}天有效
								</span>
								<span class="mix-item" v-if="goodsData.use_date_type==2">
									有效期：{{ $dialog.dateFormat(goodsData.use_time_start,'yyyy-MM-dd') }}至{{ $dialog.dateFormat(goodsData.use_time_end,'yyyy-MM-dd') }}
								</span>
							</view>
						</view>
					</view>
					<view class="rule-item">
						<view class="icon"><image src="/static/image/rule-time.png"></image></view>
						<view class="item-top">
							<view class="name">可用时间</view>
							<view class="desc" v-if="goodsData.can_no_use_date==1">商家营业时间可用</view>
						</view>
					</view>
					<view class="rule-item">
						<view class="icon"><image src="/static/image/rule-rule.png"></image></view>
						<view class="item-top">
							<view class="name">预约规则</view>
							<view class="desc" v-if="goodsData.booking_type==1">无需预约，高峰期可能需要排队</view>
							<view class="desc" v-if="goodsData.booking_type==2">
								需要提前<span>{{ goodsData.booking_date }}</span>{{ goodsData.booking_unit==1?'天':'小时' }}预约
							</view>
						</view>
					</view>
					<view class="rule-item">
						<view class="icon"><image src="/static/image/rule-refund.png"></image></view>
						<view class="item-top">
							<view class="name">退款政策<view class="tips">随时退/过期退</view></view>
							<view class="desc">随时退款：未核销的商品支持随时申请退款；过期自动退：商品若在有效时间内未核销使用，到期之后系统将自动发起退款</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		
		<uni-popup ref="maskpopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
			<view class="kefu-popup">
				<view class="top">
					<view class="item">
						客服时间：{{storeData.start_at}}-{{storeData.end_at}}
					</view>
					<view class="item">
						<button class="btn" @click="$dialog.jumpUri('/pages/service/chat/chat?poi='+storeData.poi_id+'&source=goods&goods='+goodsId,1);showService(2)">在线咨询商家</button>
					</view>
					<view class="item" v-if="storeData.service_mobile" @click="callMobile(storeData.service_mobile)">商家客服电话</view>
				</view>
				<view class="foot" @click="showService(2)">取消</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="buypopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
			<view class="service-popup popup-flex popup-height" v-if="goodsData">
				<view class="buy-godos-top">
					<view class="goods-top-info">
						<view class="img"><image :src="buyGoods.img" mode="widthFix"></image></view>
						<view class="price-body">
							<view class="price">
								<view class="price-sale">{{ buyGoods.price?$dialog.formatMoney(buyGoods.price):'0.00'}}</view>
								<view class="line-price">{{ buyGoods.line_price ? $dialog.formatMoney(buyGoods.line_price) : '0.00'}}</view>
							</view>
							<view class="sale">{{$dialog.disFormat(buyGoods.price,buyGoods.line_price)}}折</view>
							<view class="name">已选：{{ buyGoods.name }}</view>
						</view>
					</view>
					<view class="close" @click="buyOrder(2)"><image src="/static/image/close.png"></image></view>
				</view>
				<view class="buy-godos-mib">
					<view class="mib-title">规格</view>
					<view class="mib-body" v-if="goodsData.mult_sku==2">
						<view :class="indx==skuIndex?'mib-body-item active':'mib-body-item'" v-for="(item,indx) in skuSpecs" :key="indx" @click="checkSku(item,indx)">{{item.name}}</view>
					</view>
					<view class="mib-body" v-else>
						<view class="mib-body-item active">默认</view>
					</view>
					<view class="mib-number">
						<view class="num-name">数量 </view>
						<view class="numb-box">
							<uni-number-box v-model="buyGoods.number" :min="1" :max="10" v-if="goodsData.limit_rule_type==1"></uni-number-box>
							<uni-number-box v-model="buyGoods.number" :min="1" :max="goodsData.limit_rule" v-if="goodsData.limit_rule_type==2" ></uni-number-box>
						</view>
					</view>
				</view>
				<view class="buy-godos-footer">
					<view class="btn-item-c cancel-btn" @click="buyOrder(2)">再看看</view>
					<view class="btn-item fex1">
						<pay-button-sdk
							class="pay-button"
							:mode="2"
							:goods-type="1"
							:goods-id="goodsData.goods_id"
							bind:getgoodsinfo="getGoodsInfo"  
							bind:placeorder="userLogin"  
							bind:error="onErrors"
							bind:pay="onPay" 
						></pay-button-sdk>
						<!-- <button type="primary" :disabled="buyDis" @click="buyNow">确认购买</button> -->
					</view>
				</view>
			</view>
		</uni-popup>
		
		
		<uni-popup ref="userpopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
			<view class="user-pop">
				<view class="title">登录提醒</view>
				<view class="pop-body">为了更好的区分完善信息,还需授权获取到您的头像、昵称信息</view>
				<view class="pop-btn">
					<button class="u-button full" open-type="getUserInfo" @click="getUserInfo">授权头像、昵称信息</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/goods.js";
export default {
	data() {
		return {
			buyDis:false,
			loading:true,
			goodsId:"101088609520561356",
			bannerData:[],
			indicatorDots: true,
			goodsData:null,
			storeData:null,
			spm:0,
			specs:[],
			skuSpecs:[],
			buyGoods:null,
			skuIndex:0,
			loadingPayBtn:0,
			currIndex: 0, // 当前索引
			swiperHeight: 200,
			userToken:null,
			mobileData:null,
			loginCode:null,
			optionData:null,
			otherImg:[],
			scene:""
		}
	},
	created() {
		this.$scope.getGoodsInfo = this.getGoodsInfo;
		this.$scope.userLogin = this.userLogin;
		this.$scope.onErrors = this.onErrors;
		this.$scope.onPay = this.onPay;
	},
	onLoad(options) {
		app = this;
		const data = uni.getLaunchOptionsSync();
		app.scene = data.scene
		// app.storeData = uni.getStorageSync("contact");
		app.userToken = uni.getStorageSync("user_token");
		app.goodsId = options.goods?options.goods:0;
		app.spm = options.spm?options.spm:'0';
		app.optionData = options
		app.getGoods();
	},
	methods: {
		popState(type){
			if (type == 1) {
				app.$refs.userpopup.open()
			} else {
				app.$refs.userpopup.close()
			}
			return ;
		},
		getUserInfo(e){
			uni.getUserProfile({
				force: true,
				success(resp) {
					if (resp.errMsg == 'getUserProfile:ok') {
						var detail = {};
						detail.avatar = resp.userInfo.avatarUrl
						detail.nickname = resp.userInfo.nickName
						detail.mobile = JSON.stringify(app.mobileData)
						Api.nicknameAuth(detail).then((res)=>{
							if (res.code == 0) {
								return app.$dialog.showSuccess(res.msg);
							}
							app.popState(2)
							uni.setStorageSync("user_token", res.data.access_token)
							app.userToken = res.data.access_token
						})
					}
				},
				fail(e) {
					console.log(e)
				}
			})
		},
		toLogin(e){
			uni.login({
				force:true,
				success(resp){
					app.loginCode = resp.code;
					var detail = e.detail;
					detail.login = resp.code;
					Api.mobileAuth(detail).then((res)=>{
						if (!res.data.mobile) {
							return app.$dialog.showSuccess(res.msg);
						}
						app.mobileData = res.data;
						app.popState(1)
					})
				}
			})
		},
		callMobile(mobile){
			uni.makePhoneCall({
				phoneNumber:mobile,
				success(res) {
					console.log(res)
				},fail(res) {
					console.log(res)
				}
			})
		},
		/* 切换 swiper 滑块 */
		changeSwiper(e) {
			app.currIndex = e.detail.current;
			app.$nextTick(() => {
				app.setSwiperHeight(); // 动态设置 swiper 的高度
			});
		},
		/* 动态设置 swiper 的高度 */
		setSwiperHeight() {
			const element = "#wrap" + app.currIndex;
			console.log("图片ID:",element)
			const query = uni.createSelectorQuery().in(this);
			query.select(element).boundingClientRect();
			query.exec(res => {
				console.log("动态计算后信息:",res)
				if (res && res[0]) this.swiperHeight = res[0].height==0?res[0].width:res[0].height;
			});
		},
		getGoodsInfo(event){
			console.log("getGoodsInfo",event)
			const { goodsId } = event.detail;
			return new Promise(resolve => {
				// 在此处开发者可以进行商品数据请求，获取商品信息 
				// 然后将商品信息传入 resolve 函数 
				resolve({ 
					minLimits: 1, 
					maxLimits: app.goodsData.limit_rule_type==1?99:app.goodsData.limit_rule, 
					dateRule: '周一至周日可用', 
					relationType: 1,
					validation: { 
						phoneNumber: { 
							required: app.goodsData.customer_reserved_info==2?true:false  // 手机号是否必填 
						}
					},
					extra:app.buyGoods,
					// 在 bind:getgoodsinfo 返回的 promise 的 resolve 函数中新增 marketingVersion 字段 
					marketingVersion: 2, 
				}); 
			})
		},
		onErrors(e){
			console.log("错误",e)
			// if (app.loadingPayBtn == 1) {
			// 	app.buyNow()
			// 	return ;
			// }
			// app.loadingPayBtn ++;
		},
		userLogin(event) {
			return new Promise((resolve, reject) => {
				tt.login({
					success(){
						console.log("next")
						resolve()
					},
					fail: () => reject()
				});
			});
		},
		onPay(event){
			console.log("event",event)
			const { status, outOrderNo, result } = event.detail;
			console.log(status, outOrderNo, result)
			const { code } = result;
			if (code === 0) { // 支付成功
				app.$dialog.showSuccess("支付成功","none",function(){
					uni.navigateTo({
						url:"usr://pages/order/detail?order="+outOrderNo
					})
				})
			} else {
				app.$dialog.showSuccess("支付失败","none",function(){
					uni.navigateTo({
						url:"usr://pages/order/detail?order="+outOrderNo
					})
				})
				// 继续支付失败（超时、取消、关闭）
			}
		},
		buyNow(){
			var formData = app.buyGoods;
			formData.parent = app.goodsId;
			formData.spm = app.spm;
			app.buyDis = true;
			Api.add(formData).then((res)=>{
				app.buyDis = false;
				if (res.code == 0) {
					return app.$dialog.showSuccess(res.msg)
				}
				uni.navigateTo({
					url:"/pages/order/confirm?order="+res.data.order
				})
			})
		},
		checkSku(data,index){
			app.skuIndex = index;
			app.buyGoods = {
				img:data.image,
				price:data.price,
				line_price:data.line_price,
				name:data.name,
				product_id:data.product_id,
				number:1,
				sku_id:data.sku_id
			}
		},
		toGoods(id){
			uni.navigateTo({
				url:"/pages/goods/detail?goods="+id
			})
		},
		toMap(){
			var poi = app.goodsData.poi;
			uni.openLocation({
				latitude:poi.latitude,
				longitude:poi.longitude,
				name:poi.poi_name,
				address:poi.poi_address,
				success() {
					console.log("open success")
				},
				fail(err) {
					app.$dialog.showSuccess("打开导航失败")
					console.log(err)
				}
			})
		},
		/**
		 * 直接购买
		 */
		buyOrder(type){
			var userToken = uni.getStorageSync("user_token");
			if (!userToken) {
				
				return ;
			}
			if (type == 1) {
				app.$refs.buypopup.open()
			} else {
				app.$refs.buypopup.close()
			}
			return ;
		},
		toHome(){
			uni.switchTab({
				url:"/pages/index/index"
			})
		},
		toOrder(){
			uni.switchTab({
				url:"/pages/order/order"
			})
		},
		showService(type){
			if (type == 1) {
				app.$refs.maskpopup.open()
			} else {
				app.$refs.maskpopup.close()
			}
		},
		openRule(type){
			if (type == 1) {
				app.$refs.rulepopup.open()
			} else {
				app.$refs.rulepopup.close()
			}
		},
		getGoods(){
			app.loading = true;
			Api.data({"goods":app.goodsId,"spm":app.spm,"option":JSON.stringify(app.optionData)}).then((res)=>{
				app.loading = false;
				if (res.code && res.code == 0) {
					return app.$dialog.showSuccess(res.msg);
				}
				if (!app.storeData) {
					app.storeData = res.data.poi;
					uni.setStorageSync("contact",res.data.poi);
				}
				uni.setStorageSync("poiId",res.data.poi.poi_id);
				app.goodsData = res.data;
				app.bannerData = res.data.image_list
				app.specs = res.data.specs;
				app.skuSpecs = res.data.skuSpecs;
				app.otherImg = res.data.otherImg;
				if (res.data.skuSpecs.length > 0) {
					var skuSpecs = app.skuSpecs[0]
					var buyGoods = {
						img:skuSpecs.image,
						price:skuSpecs.price,
						line_price:skuSpecs.line_price,
						name:skuSpecs.name,
						number:1,
						product_id:skuSpecs.product_id,
						sku_id:skuSpecs.sku_id,
						goods_id:skuSpecs.goods_id,
						scene:app.scene
					}
				} else {
					var buyGoods = {
						img:res.data.image_list[0].url,
						price:res.data.price,
						line_price:res.data.line_price,
						name:"默认",
						number:1,
						product_id:res.data.product_id,
						sku_id:res.data.product_id,
						goods_id:res.data.goods_id,
						scene:app.scene
					}
				}
				app.buyGoods = buyGoods
				setTimeout(function(){
					app.setSwiperHeight(); // 动态设置 swiper 的高度
				},800)
				// app.$nextTick(() => {
				// });
			})
		}
	}
}
</script>

<style>
page{background-color: #f8f8f8;}


.rule-content{padding: 20upx;}
.rule-content image{width: 100%;}

.user-pop .title{padding: 20upx;border-bottom: 2upx solid #f8f8f8;font-size: 28upx;font-weight: bold;color: #000;}
.user-pop .pop-body{padding: 20upx;font-size: 24upx;color: #555;line-height: 60upx;text-align: center;}
.user-pop .pop-btn{display: flex;align-items: center;margin-top: 20upx;justify-content: end;}
.user-pop .u-button{font-size: 28upx;height: 80upx;border-radius: 40upx;line-height: 80upx;margin-bottom: 40upx;color: #333;border: 2upx solid #007aff;background-color: #fff;padding: 0 40upx;}
.user-pop .u-button::after{border: 0;}
.user-pop .u-button.full{background-color: #007aff;color: #fff;}

.cancel-btn{font-size: 32upx;border-radius: 10upx;color: #333;background-color: #fff;padding: 0 40upx;border: 2upx solid #ddd;height: 100%;display: flex;align-items: center;justify-content: center;}
.cancel-btn::after{border: 0;}

.popup-flex{display: flex;flex-direction: column;}
.buy-godos-footer{padding: 20upx;display: flex;align-items: center;justify-content: space-between;gap: 20upx;}
.buy-godos-footer .btn-item.fex1{flex: 1;}
.buy-godos-footer .btn-item .pay-button{width: 100% !important;}
.buy-godos-footer .btn-item-c{display: flex;align-items: center;}

.buy-godos-mib{padding: 20upx;flex: 1;}
.buy-godos-mib .mib-number{margin-top: 20upx;display: flex;align-items: center;justify-content: space-between;font-size: 28upx;color: #666;}
.buy-godos-mib .mib-title{font-size: 28upx;color: #666;}
.buy-godos-mib .mib-body{margin-top: 15upx;display: flex;align-items: center;flex-wrap: wrap;gap: 20upx;}
.buy-godos-mib .mib-body .mib-body-item{font-size: 24upx;color: #666;padding: 10upx;background-color: #f8f8f8;border-radius: 5upx;}
.buy-godos-mib .mib-body .mib-body-item.active{background-color: #007aff;color: #fff;}

.buy-godos-top{display: flex;padding: 15upx;align-items: start;}
.buy-godos-top .close{margin-left: auto;margin-right: 0;display: flex;align-items: center;justify-content: center;}
.buy-godos-top .close image{width: 40upx;height: 40upx;}
.buy-godos-top .img{height: 200upx;overflow: hidden;}
.buy-godos-top .img image{width: 200upx;border-radius: 10upx;}
.buy-godos-top .goods-top-info{display: flex;align-items: center;gap: 10upx;}
.buy-godos-top .goods-top-info .price{display: flex;align-items: center;flex: 1;}
.buy-godos-top .goods-top-info .price .line-price{color: #999999;font-size: 24rpx;text-decoration-line: line-through;margin-right: 20upx;}
.buy-godos-top .goods-top-info .price .price-sale{color: #FF4747;font-size: 32rpx;font-weight: bold;margin-right: 10upx;}
.buy-godos-top .goods-top-info .price .desc-num{color: #999;font-size: 24upx;margin-left: auto;margin-right: 0;}
.buy-godos-top .goods-top-info .sale{background-color: #FDEBE5;border: 4rpx;font-size: 22rpx;color: #FF4747;padding: 10rpx;display: inline-block;}
.buy-godos-top .goods-top-info .name{font-size: 22rpx;margin-top: 15upx;color: #666;}

.skeleton{width: 90%;margin: 20upx auto;}
.line-footer{height: 200upx;}
.footer{position: fixed;bottom: 0;background-color: #fff;padding: 20upx 20upx 0 20upx;border-top: 2upx solid #f8f8f8;left: 0;right: 0;}
.footer .footer-op{display: flex;align-items: center;}
.footer .footer-op .footer-left{display: flex;align-items: center;gap: 40upx;justify-content: center;}
.footer .footer-op .footer-left .item{flex-direction: column;display: flex;font-size: 24rpx;color: #333;align-items: center;}
.footer .footer-op .footer-left image{width: 40upx;height: 40upx;}
.footer .footer-op .footer-right{background-color: #007aff;color: #fff;font-size: 28rpx;flex: 1;margin-left: 40upx;height: 80upx;border-radius: 10upx;line-height: 80upx;text-align: center;}
.footer .footer-safe {height: env(safe-area-inset-bottom);width: 100%;}

.kefu-popup .item{height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;border-bottom: 2upx solid #f8f8f8;}
.kefu-popup .item .btn{background-color: #fff;border: 0;height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;}
.kefu-popup .item .btn::after{border: 0;}
.kefu-popup .foot{height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;border-top: 20upx solid #f8f8f8;}

.goods-store{background-color: #fff;padding: 0 20upx;margin-top: 20upx;}
.goods-store .title{line-height: 80upx;font-size: 32rpx;color: #333;font-weight: bold;display: flex;align-items: center;border-bottom: 2upx solid #f8f8f8;}
.goods-store .store-info{display: flex;align-items: center;padding: 20upx 0;}
.goods-store .store-info .store-right{margin-left: auto;margin-right: 0;font-size: 24rpx;color: #999;}
.goods-store .store-info .store-right image{width: 50upx;height: 50upx;margin-bottom: 10upx;}
.goods-store .store-info .store-left .name{font-size: 30rpx;color: #333;font-weight: bold;line-height: 80upx;}
.goods-store .store-info .store-left .address{font-size: 24rpx;color: #999;}

.service-popup.popup-height{height: 60vh;}
.service-popup.popup-white{background-color: #fff;margin-top: 20upx;}
.service-popup.popup-white .title{border-bottom: 2upx solid #f8f8f8;}
.service-popup .title{line-height: 80upx;font-size: 32rpx;color: #333;font-weight: bold;padding: 0 20upx;display: flex;align-items: center;}
.service-popup .title .close{margin-left: auto;margin-right: 0;display: flex;align-items: center;justify-content: center;}
.service-popup .title .close image{width: 40upx;height: 40upx;}
.service-popup.popup-white .rule-list{padding-bottom: 20upx;}

.service-popup .rule-item{display: flex;margin-top: 40upx;align-items: start;padding: 0 20upx;}
.service-popup .rule-item image{width: 50upx;height: 50upx;}
.service-popup .rule-item .item-top{margin-left: 20upx;}
.service-popup .rule-item .name{font-size: 28rpx;color: #333;font-weight: bold;margin-bottom: 10upx;display: flex;align-items: center;}
.service-popup .rule-item .name .tips{color: #333;border: 2upx solid #ddd;border-radius: 5upx;font-size: 22rpx;font-weight: normal;margin-left: 40upx;background-color: #fff;padding: 5upx 10upx;}
.service-popup .rule-item .desc{color: #999;font-size: 24rpx;line-height: 40upx;}
.home-banner image{width: 100%;height: auto;}
.home-banner .swiper{height: 380upx;}
.goods-top{background-color: #fff;padding: 20upx;border-radius: 30upx 30upx 0 0;}
.goods-top .price{display: flex;align-items: center;flex: 1;}
.goods-top .price .line-price{color: #999999;font-size: 24rpx;text-decoration-line: line-through;margin-right: 20upx;}
.goods-top .price .price-sale{color: #FF4747;font-size: 32rpx;font-weight: bold;margin-right: 10upx;}
.goods-top .price .desc-num{color: #999;font-size: 24upx;margin-left: auto;margin-right: 0;}
.goods-top .title{margin: 20upx 0;font-size: 32rpx;color: #000;font-weight: bold;}
.goods-top .goods-safe{display: flex;align-items: center;font-size: 24rpx;color: #999;gap: 40upx;}
.goods-top .goods-safe .safe-item{display: flex;align-items: center;}
.goods-top .goods-safe image{width: 30upx;height: 30upx;margin-right: 10upx;}
.goods-top .goods-rule{margin: 20upx 0;display: flex;align-items: center;font-size: 24rpx;color: #999;height: 80upx;line-height: 80upx;}
.goods-top .goods-rule .right{display: flex;align-items: center;flex: 1;color: #000;margin-left: 40upx;}
.goods-top .goods-rule .right image{width: 30upx;height: 30upx;margin-left: auto;margin-right: 0;}
.goods-top .price .sale{background-color: #FDEBE5;border: 4rpx;font-size: 22rpx;color: #FF4747;padding: 10rpx;margin-right: 20upx;border-radius: 5upx;}

.popup-height-max{max-height: 60vh;}
.group-body{padding: 20upx;}
.group-body .body-title{display: flex;align-items: center;line-height: 48upx;font-size: 28upx;color: #333;font-weight: bold;gap: 20upx;justify-content: space-between;}
.group-body .body-title span{font-size: 24upx;font-weight: normal;color: #666;}
.group-body .body-item-li{display: flex;align-items: center;justify-content: space-between;line-height: 48upx;font-size: 24upx;color: #333;font-weight: bold;}
.group-body .body-item-li .item-right{display: flex;align-items: center;gap: 20upx;width: 40%;justify-content: end;}
.group-body .body-item-li .item-right .desc{color: #999;font-weight: normal;}
</style>