yijianbao_user_uniapp/pages_shopping/productDetails.vue

<template>
	<view class="content" style="padding-bottom: 144rpx;">
		<!-- 商品轮播图片 -->
		<view class="shop-banner" @click="showImg()">
			<swiper class="swiper" :indicator-dots="false" :circular="true" :autoplay="true" :interval="3000"
				:duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff"
				@change="swiperChange">
				<swiper-item class="swiper-item" v-for="(item,index) in  banner" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!-- 底部遮罩 -->
			<view class="banner-mask"></view>
			<!-- 数量 -->
			<view class="num-box">{{ activeBanner }}/{{ banner.length }}</view>
		</view>
		<!-- 详细信息 -->
		<view class="det-info">
			<view class="price-box">
				<view class="price">
					<text class="label" style="color: #FF5C03;">会员价</text>
					<text class="unit">￥</text>
					<text class="num">{{product.price}}</text>
					<text class="label">零售价</text>
					<text class="old">¥{{product.otPrice}}</text>
				</view>
				<view class="share-box">
					<text class="text">分享</text>
					<image
						src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/share1.png"
						mode=""></image>
					<button class="share" data-name="shareBtn" open-type="share">分享</button>
				</view>
			</view>
			<view class="name-box">
				<view class="tag" :style="{background:_background(product.productType)}">
					{{$getDictLabelName("storeProductType",product.productType)}}</view>{{product.productName}}
			</view>
			<view class="intro" v-if="product.productInfo!=null" v-html="product.productInfo.replace(/\n/g,'<br>')">
			</view>
		</view>
		<view class="other-box">
			<view class="other-box-item">
				<view class="label">产品名称</view>
				<view class="text">{{product.productName||'--'}}</view>
			</view>
			<view class="other-box-item">
				<view class="label">包装规格</view>
				<view class="text">{{product.prescribeSpec||'--'}}</view>
			</view>
			<view class="other-box-item">
				<view class="label">包装单位</view>
				<view class="text">{{product.unitName||'--'}}</view>
			</view>
			<view class="other-box-item">
				<view class="label">批准文号</view>
				<view class="text">{{product.batchNumber||'--'}}</view>
			</view>
			<view class="other-box-item">
				<view class="label">生产厂家</view>
				<view class="text">{{product.mah||'--'}}</view>
			</view>
			<view class="other-box-item">
				<view class="label">商品条码</view>
				<view class="text">{{product.barCode||'--'}}</view>
			</view>
			<view class="other-box-item">
				<view class="label">功能主治</view>
				<view class="text">{{product.indications||'--'}}</view>
			</view>
			<!-- <view class="other-box-item" v-if="product.sales">
				<view class="label">已售</view>
				<view class="text">{{$formatSalesNum(product.sales)}}</view>
			</view>
			<view class="other-box-item">
				<view class="label" style="width: 4em;">服务</view>
				<view class="safe-box">
					<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/safe.png"
						mode=""></image>
					<text class="text" style="margin-right: 34rpx;">品质保障</text>
					<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/safe.png"
						mode=""></image>
					<text class="text" style="margin-right: 34rpx;">药师服务</text>
					<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/safe.png"
						mode=""></image>
					<text class="text">隐私保护</text>
				</view>
			</view> -->
		</view>
		
		<!-- 购买人数、库存 -->
		<!-- <view class="inventor">
			<view class="left">
				<view class="head-box">
					<view class="head" v-for="(item,j) in 5" :key="j">
						<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/head.jpg" mode=""></image>
					</view>
				</view> 
				<view class="num-box">
					已有 <text class="text">{{product.sales}}</text> 人购买
				</view>
			</view>
			<view class="right">
				库存 <text class="text">{{product.stock}}{{product.unitName}}</text>
			</view>
			<view class="right">
				 <text class="text">库存{{product.stock>0?'充足':'售罄'}} </text>
			</view>
		</view> -->
		<!-- 功效 -->
		<view class="effect" v-if="product.instructionManual">
			<view class="label">{{product.productName}}药品说明书</view>
			<view :class="product.productType ==2&&isView==0 ? 'hiddenbox':''" style="margin-top: 20rpx;">
				<u-parse :content="product.instructionManual" :style="{display: 'block'}"></u-parse>
			</view>
			<view class="shadowbox" v-if="product.productType ==2&&isView==0">
				<view class="shadowbox-btn x-ac" @click="handleShow">
					<text style="margin-right: 10rpx;">点击查看说明书全文</text>
					<u-icon name="arrow-down" color="#999" size="14"></u-icon>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" :round="10" @close="show=false" :closeOnClickOverlay="false">
			<view class="popupbox">
				<view class="popupbox-title">如何查看说明书</view>
				<view class="popupbox-body">
					需要先问诊获得处方后才能查看说明书，请点<text class="confirm" @click="addCart('buy')">问诊开药</text>开处方!
				</view>
				<view class="popupbox-footer" @click="show=false">我知道了</view>
			</view>
		</u-popup>
		<!-- 商品评价 -->
		<view class="det-box evaluate">
			<view class="title">商品评价({{evaluateTotal}})</view>
			<view class="evaluate">
				<evaluateItem v-for="(item,index) in evaluate" :key="index" :item="item"></evaluateItem>
				<view class="footer-desc" v-if="evaluate&&evaluate.length>0"> 
					<text @click="moreEvaluate">查看更多评价</text>
					<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/arrow_gray.png"></image>
				</view>
			</view>
		</view>
		<!-- 图文详情 -->
		<view class="det-box">
			<view class="title">图文详情</view>
			<view class="inner">
				<view v-html="product.description" style="font-size:0"></view>
			</view>
		<!-- 	<view class="other-box" style="margin: 0;padding: 24rpx 0;">
				<view class="other-box-item" v-if="product.dosage">
					<view class="label" style="margin-right: 16rpx;">【用法用量】</view>
					<view class="text">{{product.dosage}}</view>
				</view>
				<view class="other-box-item" v-if="product.adverseReactions">
					<view class="label" style="margin-right: 16rpx;">【不良反应】</view>
					<view class="text">{{product.adverseReactions}}</view>
				</view>
				<view class="other-box-item" v-if="product.contraindications">
					<view class="label" style="margin-right: 16rpx;">【禁忌】</view>
					<view class="text">{{product.contraindications}}</view>
				</view>
				<view class="other-box-item" v-if="product.precautions">
					<view class="label" style="margin-right: 16rpx;">【注意事项】</view>
					<view class="text">{{product.precautions}}</view>
				</view>
			</view> -->
		</view>
		<view class="storebox" v-if="chooseStore.storeId">
			<view class="x-bc">
				<view class="x-f">
					<image class="logo" :src="chooseStore.logoUrl" mode="aspectFill"></image>
					<view class="storebox-r" @click="goStoreDetail(chooseStore)">
						<view class="storename ellipsis2">{{chooseStore.storeName||''}}</view>
						<!-- <view class="storedesc">24小时营业 销售{{$formatSalesNum(chooseStore.salesCount) }}</view> -->
					</view>
				</view>
				<view class="storebox-btn" @click="goStoreDetail(chooseStore)">进店</view>
			</view>
			<detail :source="'product'" ref="getStoreInfo" :storeInfo="storeInfo"></detail>
		</view>
		<!-- 底部按钮 -->
		<view class="btn-foot">
			<view class="menu-box">
				<view class="item" @click="goHome">
					<image
						src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/back_home.png"
						mode=""></image>
					<text class="label">首页</text>
				</view>
				<!-- <view class="item" style="position: relative;">
					<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/consult_small.png" mode=""></image>
					<text class="label">咨询</text>
					<button class="contact-btn" open-type="contact"></button>
				</view> -->
				<view class="item" @click="navgetTo('./cart')">
					<view class="img-item">
						<u-badge type="error" max="99" :value="cartCount" :offset="[-10,-10]"
							:absolute="true"></u-badge>
						<image
							src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/fs/20250929/73574822bab04a86ae77b772b4e28952.png"
							mode=""></image>
					</view>
					<text class="label">购物车</text>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn cart" @click="addCart('cart')">加入购物车</view>
				<view class="btn buy" @click="addCart('buy')">{{buyText}}</view>
			</view>
		</view>
		<!-- 选择药品规格弹窗 -->
		<popupBottom ref="popup" :visible.sync="specVisible" title=" " radius="32" maxHeight="1024">
			<view class="product-spec">
				<!-- 商品信息 -->
				<view class="pro-info">
					<view class="img-box" @click="showImg(productValueSelect.image)">
						<image
							:src="productValueSelect.image==null||productValueSelect.image==''?product.image:productValueSelect.image"
							mode="aspectFill"></image>
					</view>
					<view class="info-text">
						<view class="price">
							<text class="unit">¥</text>
							<text class="num">{{ productValueSelect.price.toFixed(2) }}</text>
						</view>
						<view class="desc-box">
							<text class="text">已选：{{ productValueSelect.sku }}</text>
							<text class="text">库存{{ productValueSelect.stock?'充足':'售罄' }}</text>
						</view>
					</view>
				</view>
				<!-- 规格 -->
				<view class="spec-box">
					<view v-for="(item,index) in attrs">
						<view class="title">{{item.attrName}}</view>
						<view class="spec-list">
							<view v-for="(subItem,subindex) in item.values" :key="subindex"
								:class="subindex==item.index?'item active':'item'" @click="choseSpec(index,subindex)">
								{{ subItem }}
							</view>
						</view>
					</view>
				</view>
				<!-- 数量 -->
				<view class="price-num">
					<view class="label">数量</view>
					<view class="num-box">
						<view class="img-box" @click="lessNum()">
							<image v-if="specNum <= 1"
								src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/jian.png"
								mode=""></image>
							<image v-else
								src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/jian2.png"
								mode=""></image>
						</view>
						<input type="number" @change="changeNum" v-model="specNum" />
						<view class="img-box" @click="addNum()">
							<image
								src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/add.png"
								mode=""></image>
						</view>
					</view>
				</view>
				<view class="sub-btn" @click="submit">确定</view>
			</view>
		</popupBottom>
		<view class="loadding" v-if="loadding==true">
			<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/logo.png"></image>
			<text class="text">加载中...</text>
		</view>
	</view>
</template>

<script>
	import detail from '@/components/storeDetail.vue'
	import {getCartCount,storeDetail} from '@/api/index.js'
	import {getDicts} from '@/api/common.js'
	import { getProductDetails, addCart,instructionsViewable } from './api/product.js'
	import {selectCommentByUser} from '@/api/myStoreOrder.js'
	import popupBottom from './components/px-popup-bottom.vue'
	import evaluateItem from '@/components/evaluateItem.vue'
	export default {
		components: {
			popupBottom,
			evaluateItem,
			detail
		},
		data() {
			return {
				loadding: true,
				buyText: "立即购买",
				type: null,
				productValueSelect: {
					price: 0,
				},
				banner: [],
				productId: null,
				attrs: [],
				values: [],
				product: {
					price: 0,
					otPrice: 0,
				},

				// 当前轮播的图片
				activeBanner: 1,
				// 购物车数量
				cartCount: 0,
				// 规格弹窗
				specVisible: false,
				// 规格数量
				specNum: 1,
				chooseStore: {},
				storeList: [],
				storeId: '',
				evaluateTotal: 0,
				evaluate: [],
				show: false,
				isView: 0,
				storeInfo: {}
			};
		},
		computed: {
			_background() {
				//productType： 1：OTC，2：Rx，3：非药品，4：器械
				return (productType) => {
					switch (productType) {
						case 1:
							return '#37E2EA' // OTC
						case 2:
							return 'red' // Rx
						case 3:
							return '#2583EB' // 非药品
						case 4:
							return '#999' // 器械
						default:
							return '#ccc'
					}
				}
			}
		},
		onLoad(options) {
			if (options.userId != null) {
				uni.setStorageSync('tuiUserId', options.userId);
			} else if (options.hasOwnProperty('q') && options.q) {
				// 通过下面这步解码，可以拿到url的值
				const url = decodeURIComponent(options.q)
				this.url = url;
				// // 对url中携带的参数提取处理
				const obj = this.$urlToObj(url)
				uni.setStorageSync('tuiUserId', obj.userId);
			}
			this.storeId = options.storeId || '';
			uni.showShareMenu({
				withShareTicket: true,
				//小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"] //不设置默认发送给朋友
			})
			this.getDicts();
			this.productId = options.productId;
			this.$isLogin().then(res => {
				if (res) {
					this.getCartCount();
				}
			})
		},
		onShow() {
			this.getProductDetails();
		},
		//发送给朋友
		onShareAppMessage(res) {
			this.$isLogin().then(res => {
				if (res) {
					var user = JSON.parse(uni.getStorageSync('userInfo'))
					return {
						title: this.product.productName,
						path: '/pages_shopping/productDetails?productId=' + this.product.productId + "&userId=" +
							user.userId,
					}
				}
			})
		},
		//分享到朋友圈
		onShareTimeline(res) {
			this.$isLogin().then(res => {
				if (res) {
					var user = JSON.parse(uni.getStorageSync('userInfo'))
					return {
						title: this.product.productName,
						query: 'productId=' + this.product.productId + "&userId=" + user.userId, //页面参数
					}
				}
			})

		},
		methods: {
			getStoreInfo() {
				storeDetail(this.storeId).then(res=>{
					if(res.code==200) {
						this.storeInfo =res.data || {}
						this.$refs.getStoreInfo.getDescHeight()
					}
				})
			},
			handleShow() {
				uni.showLoading({
					title: '加载中',
					icon: 'none'
				})
				instructionsViewable({productId: this.productId}).then(
					res => {
						uni.hideLoading()
						if(res.code==200){
							this.isView = res.data ? 1 : 0
							this.show = this.isView == 0
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			goStoreDetail(item) {
				uni.navigateTo({
					url: '/pages_store/storeIndex?storeId=' + item.storeId
				})
			},
			getDicts: function() {
				getDicts().then(
					res => {
						if (res.code == 200) {
							uni.setStorageSync('dicts', JSON.stringify(res));
						}

					},
					rej => {}
				);
			},
			showImg(img) {
				if (img != null) {
					var imgs = [];
					imgs.push(img)
					//预览图片
					uni.previewImage({
						urls: imgs,
						current: imgs[0]
					});
				} else {
					//预览图片
					uni.previewImage({
						urls: this.banner,
						current: this.banner[0]
					});
				}
			},
			doAddCart(type) {
				if (this.specNum == 0) {
					uni.showToast({
						icon: 'none',
						title: "库存不足",
					});
					return;
				}
				var isBuy = type == "buy" ? 1 : 0;
				let data = {
					isBuy: isBuy,
					cartNum: this.specNum,
					productId: this.productValueSelect.productId,
					attrValueId: this.productValueSelect.id
				};
				addCart(data).then(
					res => {
						if (res.code == 200) {
							if (type == "buy") {
								const selectCarts = [{
									storeId: this.storeId,
									data: {
										type: this.type,
										cartIds: res.id,
									}
								}]
								uni.navigateTo({
									url: '/pages_shopping/confirmOrder?type=' + this.type + '&orderType=' +
										this.orderType + '&confirmParam=' + encodeURIComponent(JSON.stringify(
											selectCarts))
								})
							} else {
								this.getCartCount()
								uni.showToast({
									icon: 'success',
									title: "添加成功",
								});
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
							this.getProductDetails()
						}
					},
					rej => {}
				);
			},
			getProductDetails() {
				let data = {
					productId: this.productId
				};
				getProductDetails(data).then(
					res => {
						this.loadding = false
						if (res.code == 200) {
							this.product = res.product;
							if (this.product.productType == 1) {
								this.buyText = "立即购买"
							} else if (this.product.productType == 2) {
								this.buyText = "开方购买"
							}
							this.product.otPrice = this.product.otPrice.toFixed(2);
							this.product.price = this.product.price.toFixed(2);
							if (this.product.sliderImage != null) {
								this.banner = this.product.sliderImage.split(',');
							} else {
								this.banner = []
							}
							this.attrs = res.productAttr;
							this.attrs.forEach((item, index, arr) => {
								item.values = item.attrValues.split(',');
								item.index = 0
							})
							console.log(this.attrs)
							this.values = res.productValues;
							this.storeId = res.store.storeId || ''
							this.storeList = [res.store] || [];
							if (this.storeList && this.storeList.length > 0) {
								const idx = this.storeList.indexOf(Number(this.storeId || 0));
								if (this.storeId && idx > -1) {
									this.chooseStore = this.storeList[idx]
								} else {
									this.chooseStore = this.storeList[0]
								}
							}
							this.choseSpec(0, 0)
							this.getCommentByUser()
							this.getStoreInfo();
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
							setTimeout(function() {
								uni.reLaunch({
									url: '/pages/index/index',
								})
							}, 2000)

						}
					},
					rej => {}
				);
			},
			getCartCount() {
				let data = {};
				getCartCount(data).then(
					cartRes => {
						if (cartRes.code == 200) {
							this.cartCount = cartRes.data;
						}
					},
					rej => {}
				);

			},
			// swiper变化事件
			swiperChange(event) {
				this.activeBanner = event.detail.current + 1
			},
			// 回到首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 跳转页面
			navgetTo(url) {
				this.$isLogin().then(res => {
					if (res) {
						uni.navigateTo({
							url: url
						})
					}
				})
			},
			// 加入购物车
			addCart(type) {
				this.show=false
				this.$isLogin().then(res => {
					if (res) {
						this.type = type;
						this.specVisible = true
					} else {
						uni.navigateTo({
							url: '/pages/auth/login'
						})
					}
				})
			},
			// 规格选择
			choseSpec(index, subIndex) {
				this.attrs[index].index = subIndex;
				this.$forceUpdate();
				let productAttr = this.attrs;
				let values = [];
				for (let i = 0; i < productAttr.length; i++) {
					for (let j = 0; j < productAttr[i].values.length; j++) {
						if (productAttr[i].index === j) {
							values.push(productAttr[i].values[j]);
						}
					}
				}
				var selectVal = values.sort().join(",");
				console.log(selectVal)
				var valueSelect = this.values.filter((item) => {
					return item.sku == selectVal;
				})
				if (valueSelect != null && valueSelect.length == 1) {
					this.productValueSelect = valueSelect[0];
				}
				this.updateSpecNum();

			},
			//更新数量
			updateSpecNum() {
				if (this.productValueSelect.stock == 0) {
					this.specNum = 0;
				} else {
					this.specNum = 1;
				}
			},
			changeNum(e) {
				this.specNum = e.detail.value.replace(/\D/g, '')
				if (this.specNum < 1) {
					this.specNum = 1
				}
				if (this.specNum >= this.productValueSelect.stock) {
					this.specNum = this.productValueSelect.stock
				}
			},
			// 数量减法
			lessNum() {
				this.specNum--
				if (this.specNum < 1) {
					this.specNum = 1
				}
				if (this.specNum >= this.productValueSelect.stock) {
					this.specNum = this.productValueSelect.stock
				}
			},
			// 数量加法
			addNum() {
				if (this.specNum < 10) {
					this.specNum++
				} else {
					uni.showToast({
						icon: 'none',
						title: '限购10盒',
					});
				}
				if (this.specNum >= this.productValueSelect.stock) {
					this.specNum = this.productValueSelect.stock
				}

			},
			// 确定选择该规格
			submit() {
				this.specVisible = false
				this.doAddCart(this.type);

			},
			moreEvaluate() {
				uni.navigateTo({
					url: '/pages_shopping/evaluate?storeId='+this.storeId+ '&productIds='+this.productId,
				})
			},
			getCommentByUser(){
				const param = {
					page: 1,
					pageSize: 2,
					storeId:this.storeId,
					orderId: null,
					productIds:this.productId,
					userId: uni.getStorageSync('userId') || null,
					showSelf: 0
				}
				selectCommentByUser(param).then(res=>{
					if(res.code==200) {
						this.evaluate = res.data.list
						this.evaluateTotal = res.data.total
					} else {
						this.evaluate = []
						this.evaluateTotal = 0
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hiddenbox {
		height: 240rpx;
		overflow: hidden;
	}
	.popupbox {
		width: 80vw;
		font-size: 32upx;
		font-family: PingFang SC;
		color: #333333;
		&-title{
			font-weight: bold;
			padding: 30rpx;
			text-align: center;
		}
		&-body {
			padding: 24rpx 30rpx;
			line-height: 2;
		}
		.confirm {
			background-color: #2583EB;
			border-radius: 10rpx;
			color: #fff;
			padding: 10rpx 24rpx;
			margin: 0 10rpx;
		}
		&-footer {
			border-top: 1rpx solid #F7F7F7;
			padding: 30rpx;
			color: red;
			text-align: center;
		}
	}
	.shadowbox{
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255,0.5) 50%,rgb(255, 255, 255) 80%);
		padding-top: 240rpx;
		margin-top: -240rpx;
		position: relative;
		&-btn {
			padding: 10rpx 40rpx;
			border-radius: 10rpx;
			border: 1rpx solid #ccc;
			display: inline-flex;
		}
	}
	.img-item {
		position: relative;
		width: 44rpx;
		height: 44rpx;
		margin: 0 20rpx 0 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.other-box {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 12rpx 24rpx;
		margin: 24rpx;

		&-item {
			display: flex;
			align-items: flex-start;
			padding: 10rpx 0;
		}

		.label {
			flex-shrink: 0;
			color: #999999;
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 1.3;
			margin-right: 40rpx;
			min-width: 4em;
			text-align: justify;
			/* 两端对齐 */
			text-align-last: justify;
			/* 最后一行也撑满 */
		}

		.safe-box {
			display: flex;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
		}
	}

	.shop-banner {
		height: 756upx;
		background-color: #FFFFFF;
		position: relative;

		.swiper-item {
			box-sizing: border-box;
		}

		.swiper,
		.swiper-item,
		.swiper-item image {
			width: 100%;
			height: 100%;
		}

		.banner-mask {
			width: 100%;
			height: 44upx;
			// background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
			// opacity: 0.8;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 9;
			background-image: url(https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/black_mask.png);
			background-size: 20upx 44upx;
			background-repeat: repeat-x;
		}

		.num-box {
			width: 80upx;
			height: 44upx;
			line-height: 44upx;
			text-align: center;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background: rgba(0, 0, 0, .3);
			border-radius: 22upx;
			position: absolute;
			right: 30upx;
			bottom: 30upx;
			z-index: 10;
		}
	}

	.det-info {
		background: #FFFFFF;
		padding: 36upx 30upx 25upx;
		margin: 20rpx 24rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

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

				.label {
					color: #999999;
					font-size: 28upx;
					font-family: PingFang SC;
					line-height: 1.3;
					margin-right: 5upx;
				}

				.unit {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6633;
					line-height: 1.3;
				}

				.num {
					font-size: 40upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6633;
					margin: 0 20upx 0 0;
					line-height: 1;
				}

				.old {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					text-decoration: line-through;
					color: #999999;
					line-height: 1.3;
				}
			}

			.share-box {
				width: 120upx;
				height: 46upx;
				border: 1px solid #2583EB;
				border-radius: 23upx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.text {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2583EB;
				}

				image {
					margin-left: 2rpx;
					width: 25upx;
					height: 24upx;
				}

				.share {
					display: inline-block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
				}
			}

			.spec {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 36upx;
			}
		}

		.name-box {
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #111111;
			line-height: 44upx;
			margin-top: 32upx;

			.tag {
				display: inline-block;
				padding: 0 6upx;
				height: 30upx;
				background: linear-gradient(90deg, #2583EB 0%, #92C1F5 100%);
				border-radius: 4upx;
				margin-right: 10upx;
				font-size: 22upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 30upx;
				float: left;
				margin-top: 7upx;
			}
		}

		.intro {
			display: block;
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 36upx;
			padding-top: 18upx;
		}
	}

	.inventor {
		height: 88upx;
		padding: 0 39upx 0 30upx;
		margin-top: 10upx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;

			.head-box {
				margin-right: 27upx;
				display: flex;
				align-items: center;

				.head {
					width: 48upx;
					height: 48upx;
					border-radius: 50%;
					overflow: hidden;
					box-shadow: 0 0 0 1px #fff;
					margin-right: -10upx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.num-box {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;

				.text {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}

		.right {
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;

			.text {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
	}

	.effect {
		box-sizing: border-box;
		padding: 30rpx;
		background: #FFFFFF;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 1.8;
		margin: 24rpx 24rpx 0 24rpx;
		border-radius: 16rpx;
		
		.label {
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 1;
		}
	}

	.det-box {
		padding: 30upx 30upx 0 30upx;
		background-color: #FFFFFF;
		margin: 24rpx 24rpx 0 24rpx;
		border-radius: 16rpx;

		.title {
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 1;
			margin-bottom: 24rpx;
		}

		.label,
		.text {
			font-size: 30upx !important;
		}
	}

	.btn-foot {
		box-sizing: border-box;
		width: 100%;
		height: 121upx;
		background: #FFFFFF;
		padding: 0 32upx 0 28upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;

		.menu-box {
			display: flex;
			align-items: center;

			.item {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-right: 48upx;

				&:last-child {
					margin-right: 0;
				}

				image {
					width: 36upx;
					height: 36upx;
					margin-bottom: 10upx;
				}

				.label {
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					text-align: center;
				}
			}

			::v-deep.uni-badge--x {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			::v-deep.uni-badge {
				border: none;
				background-color: #FF3636;
				font-family: Roboto;
			}
		}

		.btn-box {
			display: flex;
			align-items: center;

			.btn {
				position: relative;
				width: 200upx;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				border-radius: 44upx;
				margin-left: 20upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;

				&:first-child {
					margin-left: 0;
				}

				&.cart {
					background: #FF6633;

					.share {
						display: inline-block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}

				&.buy {
					background: #2583EB;
				}
			}
		}
	}

	.product-spec {
		.pro-info {
			display: flex;
			align-items: center;

			.img-box {
				width: 200upx;
				height: 200upx;
				background: #FFFFFF;
				border-radius: 16upx;
				overflow: hidden;
				margin-right: 30upx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info-text {
				height: 200upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.price {
					display: flex;
					align-items: flex-end;

					.unit {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF6633;
						line-height: 1.2;
						margin-right: 10upx;
					}

					.num {
						font-size: 50upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF6633;
						line-height: 1;
					}
				}

				.desc-box {
					display: flex;
					flex-direction: column;
					padding-bottom: 9upx;

					.text {
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-top: 27upx;
						line-height: 1;

						&:first-child {
							margin-top: 0;
						}
					}
				}
			}
		}

		.spec-box {
			padding-top: 50upx;

			.title {
				font-size: 34upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
				line-height: 1;
			}

			.spec-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30upx;

				.item {
					box-sizing: border-box;
					height: 64upx;
					padding: 0 30upx;
					line-height: 64upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					background: #F7F7F7;
					border: 1px solid #F7F7F7;
					border-radius: 32upx;
					margin-right: 20upx;
					margin-bottom: 30upx;

					&.active {
						background: #F1FFFE;
						border: 1px solid #2583EB;
						color: #2583EB;
					}
				}
			}
		}

		.price-num {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 14upx;

			.label {
				font-size: 34upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
			}

			.num-box {
				display: flex;
				align-items: center;

				.img-box {
					width: 60upx;
					height: 60upx;
					// border-radius: 4upx;
					border: 1px solid #dddddd;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 25rpx;
						height: 25rpx;
					}
				}

				input {
					width: 60upx;
					height: 60upx;
					line-height: 60upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					// border-radius: 4upx;
					border-top: 1px solid #dddddd;
					border-bottom: 1px solid #dddddd;
					text-align: center;
					// margin: 0 16upx;
				}
			}
		}

		.sub-btn {
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #2583EB;
			border-radius: 44upx;
			margin-top: 30upx;
			// margin-bottom: 30upx;

		}
	}

	.contact-btn {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 9999;
	}

	.loadding {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;

		image {
			border-radius: 50%;
			animation: load linear 1s infinite;
			width: 120rpx;
			height: 120rpx;
		}

		.text {
			font-size: 28rpx;
			margin-top: 20rpx;
		}
	}

	.storebox {
		margin: 24rpx;
		padding: 28rpx 26rpx;
		font-family: PingFang SC, PingFang SC;
		color: #333;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.logo {
			width: 104rpx;
			height: 104rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-right: 26rpx;
		}

		.storename {
			font-weight: 500;
			font-size: 32rpx;
		}

		.storedesc {
			margin-top: 12rpx;
			font-weight: 400;
			font-size: 22rpx;
		}

		.storebox-r {
			flex: 1;
			overflow: hidden;
		}

		.storebox-btn {
			flex-shrink: 0;
			padding: 10rpx 24rpx;
			font-size: 28rpx;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			border: 2rpx solid #FF5C03;
			font-weight: 500;
			font-size: 24rpx;
			color: #FF5C03;
		}
	}
	.evaluate {
		.title {
			margin: 0;
			padding-bottom: 24rpx;
		}
	}
	.footer-desc {
		text-align: center;
		padding: 0 32rpx 24rpx 0;
		font-size: 28rpx;
		color: #999;
		image{
			margin-left: 10rpx;
			width:15rpx;
			height:20rpx;
		}
	}
</style>