179crm_user_app/pages/shopping/productDetails.vue

<template>
	<view class="content">
			<view class="share-box centerV ">
				<image class="w48 h48 " src="/static/images/weixin.png" mode=""></image>
				<text class="color-text mt8 weight-500 fs20">微信分享</text>
				<button class="share" data-name="shareBtn" open-type="share"></button>
			</view>
		<!-- 商品轮播图片 -->
		<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>
					<view class="cf-box" v-if="product.productType==2">
						<view class="title">处方药</view>
						<view class="subTitle">请在医师指导下使用</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 底部遮罩 -->
			<view class="banner-mask"></view>
			<!-- 数量 -->
			<view class="num-box"><text class="weight-500">{{ activeBanner }}</text>/{{ banner.length }}</view>
		</view>
		<!-- 详细信息 -->
		<view class="det-info">
			<view class="price-box">
				<view class="price">
					<text class="label">会员价</text>
					<text class="unit">￥</text>
					<text class="num" >{{product.price}}</text>
					<text class="fs24 color-text2">零售价</text>
					<text class="old" >¥{{product.otPrice}}</text>
				</view>
			<!-- 	<view class="share-box">
					<text class="text">分享</text>
					<image src="../../static/images/share1.png" mode=""></image>
					<button  class="share" data-name="shareBtn" open-type="share">分享</button>
				</view> -->
					<text class="fs24 color-text2">月售{{product.sales}}件</text>
			</view>
			<view class="name-box">
				<view class="tag">{{utils.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 class="intro-box">
				<text class="title-1">药品说明</text>
				<view class="line"></view>
				<view class="intro-text">
					<text class="title-2">药品说明:</text>
					<view class="intro-content ellipsis2" v-if="product.productInfo!=null" v-html="product.productInfo.replace(/\n/g,'<br>')">
					</view>
				</view>
				<view class="line"></view>
				<view class="intro-text">
					<text class="title-2">常见用法:</text>
					<view class="intro-content ellipsis2" v-if="product.productInfo!=null" v-html="product.productInfo.replace(/\n/g,'<br>')">
					</view>
				</view>
				<view class="line"></view>
				<view class="intro-text2">
					<text class="title-2">贮藏:</text>
					<view class="intro-content ellipsis2" v-if="product.productInfo!=null" v-html="product.productInfo.replace(/\n/g,'<br>')">
					</view>
				</view>
			</view> -->
			<!-- <view class="safe-box">
				<image src="../../static/images/safe.png" mode=""></image>
				<text class="text">免邮发货</text>
				<view class="line"></view>
				<text class="text">药师服务</text>
				<view class="line"></view>
				<text class="text">隐私保护</text>
			</view> -->
		</view>
		<view class="guige">
			<!-- <view class="guige-gg">
				<text class="gg-text">规格</text>
				<text class="gg-text2">{{productAttr.attrValues||'-'}}</text>
			</view> -->
			<view class="safe-box">
				<text class="text">服务</text>
				<view class="box">
					<view>
						<image src="../../static/images/service_icon14.png" mode=""></image>
						<text>免邮发货</text>
					</view>
					<view>
						<image src="../../static/images/service_icon14.png" mode=""></image>
						<text>药师服务</text>
					</view>
					<view>
						<image src="../../static/images/service_icon14.png" mode=""></image>
						<text>隐私保护</text>
					</view>
					<view @click="openEditMoney()">
						<image class='w48 h48' src="/static/images/right.png"></image>
					</view>
				</view>
				
			</view>
			<view class="popup-box" v-if="editShow">
			  <view class="info-mask"  @tap="cancelEditMoney()" ></view>
			  <view class="info-form">
				  <view class="top">
					<view class="title">服务</view>
					<view class="close" @click="cancelEditMoney()">
						<image class='w48 h48' src="../../static/images/close_icon24.png" mode=""></image>
					</view>
					</view>
					<view class="line"></view>
					<view class="form-box">
						<view class="form-item2">
							<view class="form-item-box">
								<image class='w28 h28' src="../../static/images/service_icon14.png" mode=""></image>
								<text>免邮发货</text>
							</view>
							<view class="form-content">
								订单支付成功后48小时内发货，若未在48小时内发货，平台审核后消费者将会收到至少3元无门槛红包(特殊商品及不可抗力因素除外)
							</view>
						</view>
						<view class="form-item2">
							<view class="form-item-box">
								<image class='w28 h28' src="../../static/images/service_icon14.png" mode=""></image>
								<text>药师服务</text>
							</view>
							<view class="form-content">
								用药关怀认证药师，24小时专业用药咨询
							</view>
						</view>
						<view class="form-item2">
							<view class="form-item-box">
								<image class='w28 h28' src="../../static/images/service_icon14.png" mode=""></image>
								<text>隐私保护</text>
							</view>
							<view class="form-content">
								除患者本人或其授权的代理人外,其他人员未经允许不得随意查阅患者的医疗记录
							</view>
						</view>
					</view>
					<view class="btns">
						<view class="sub-btn" @click="cancelEditMoney()">确定</view>
					</view>
			  </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="../../static/images/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">
			<view class="label">药品说明书</view>
			<view class="label">查看</view>
		</view> -->
		
		<view class="shop x-bc" v-if="storeSelectInfo.storeId">
			<view class="x-bc" style="flex: 1;overflow: hidden;">
				<view class="logo">
					<image :src="storeSelectInfo.logoUrl" mode="aspectFill"></image>
				</view>
				<view class="txtBox y-b">
					<view class="name">{{storeSelectInfo.storeName}}</view>
					<view class="desc">24小时营业 · 月售{{utils.formatSalesNum(storeSelectInfo.salesCount) }} · 支持预订</view>
				</view>
			</view>
			
			<button class="goShop" @click="navgetTo('/pages_shopping/store/index?storeId='+productValueSelect.storeId)">进店</button>
			
		</view>
		
		
		<!-- 图文详情 -->
		<view class="det-box">
			<view class="title">药品详情</view>
			<!-- <view class="det-title">
				<view class="tt">说明书</view>
				<view class="det-right">
					<text>查看详情</text>
					<image class='w48 h48' src="/static/images/right.png"></image>
				</view>
			</view> -->
			<!-- <view class="det-table">
				<view class="row">
					<text class="cell cell-1">通用名称</text>
					<text class="cell cell-2">云南白药气雾剂</text>
				</view>
				<view class="row">
				    <text class="cell cell-1">成份</text>
					<text class="cell cell-2">国家保密方，本品含草乌(制)、雪上一枝蒿(制)，其余成份略。</text>
				</view>
				<view class="row">
				    <text class="cell cell-1">性状</text>
					<text class="cell cell-2">云南白药气雾剂为非定量阀门气雾剂，在耐压容器中的药液为淡黄...</text>
				</view>
			</view> -->
			<!-- <view class="det-table">
				<uni-table border stripe emptyText="暂无更多数据" >
					
					<uni-tr>
						<uni-th align="center">通用名称</uni-th>
						<uni-th align="center">成份</uni-th>
						<uni-th align="left">性状</uni-th>
					</uni-tr>
					
					<uni-tr>
						<uni-td>云南白药气雾剂</uni-td>
						<uni-td>国家保密方，本品含草乌(制)、雪上一枝蒿(制)，其余成份略。</uni-td>
						<uni-td>云南白药气雾剂为非定量阀门气雾剂，在耐压容器中的药液为淡黄...</uni-td>
					</uni-tr>
				</uni-table>
			</view> -->
			
			<view class="inner">
				<view  v-html="product.description" style="font-size:0"></view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="btn-foot">
			<view class="menu-box">
				<view class="item" @click="goHome">
					<image src="../../static/images/tab_home_icon24.png" mode=""></image>
					<text class="label">首页</text>
				</view>
				<view class="item" style="position: relative;">
					<image src="../../static/images/customer_service_icon24.png" mode=""></image>
					<text class="label">咨询</text>
					<button class="contact-btn" open-type="contact"></button>
				</view>
				<view class="item" @click="navgetTo('./cart')">
					<uni-badge size="small" :text="cartCount" absolute="rightTop" type="error">
						<image src="../../static/images/shopping_car_icon20.png" mode=""></image>
					</uni-badge>
					<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="info-title">{{product.productName}}</view>
						<view class="price">
							<view class="label">会员价</view>
							<text class="unit">¥</text>
							<text class="num">{{ productValueSelect.price ? productValueSelect.price.toFixed(2) : '0.00' }}</text>
						</view>
						<view class="desc-box">
							<text class="text">月售{{product.sales}}件</text>
						</view>
					</view>
				</view>
			<!-- 	<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 ? productValueSelect.price.toFixed(2) : '0.00' }}</text>
						</view>
						<view class="desc-box">
							<text class="text" v-if="showServiceFee">服务费:¥{{ productValueSelect.serviceFee ? productValueSelect.serviceFee.toFixed(2) : '0.00' }}</text>
							<text class="text">已选：{{ productValueSelect.sku }}</text>
							<text class="text">库存：{{ productValueSelect.stock }}</text>
						</view>
					</view>
				</view> -->
				<!-- 健康师 -->
			<!-- 	<view class="tech-pBox" style="margin-top: 20rpx;">
					<view class="label">选择健康管理师</view>
					<view 
						v-for="(item,index) in storePriceList.slice(0,2)"
						:key="index"
						:class="productValueSelect.storeId ==  item.storeId ? 'item hover':'item'"
						@click="storeChange(item,index)"
					>
					
						<image mode="aspectFill" :src="productValueSelect.image==null||productValueSelect.image==''?product.image:productValueSelect.image"></image>
						<view class="tech-right">
							<view class="tech-right-top">
								<text class="title-1">秦宇</text>
								<text class="title-2">健康管理师/执业药师</text>
							</view>
							<view class="tech-right-bottom">{{item.storeName}}</view>
						</view>
					</view>	
				</view> -->
				<!-- 门店 -->
				<!-- <view class="spec-box form-item" v-if="stores.length>0">
					<text class="label">所属门店</text>
					<picker  class="birth-picker"  mode="selector" :value="storeIdx" :range="storeNames" @change="pickerChange"  @columnchange="pickerColumnchange">
						<view class="right-box">
							<view class="input-box">
								<input type="text" v-model="storeName" placeholder="请选择门店" class="form-input" disabled="disabled" />
							</view>
							<image class="arrow" src="../../static/images/arrow_gray.png" mode=""></image>
						</view>
					</picker>
				</view> -->
				<view class="shop-pBox" style="margin-top: 20rpx;" v-if="storePriceList&&storePriceList.length>0">
					<view 
						v-for="(item,index) in storePriceList.slice(0,3)"
						:key="index"
						:class="productValueSelect.storeId ==  item.storeId ? 'item hover':'item'"
						@click="storeChange(item,index)"
					>
						<view class="top x-bc">
							<view class="price"><b>￥</b>{{ item.price.toFixed(2) }}</view>
							<view class="num">销售{{utils.formatSalesNum(item.sales) }}</view>
						</view>
						<view class="bot x-bc shop-pBox-name">
							<view class="name">{{item.storeName}}</view>
							<view @click.stop="navgetTo('/pages_shopping/store/index?storeId='+item.storeId)">
								<u-icon name="arrow-right" color="#000" size="14"></u-icon>
							</view>
						</view>
					</view>	
					<view class="shop-morebtn" @click="openStorePicker" v-show="storePriceList.length > 3">
						<view>查看全部</view>
						<view v-show="storeIdx > 2">
							<text>已选</text> 
							<text style="margin: 0 10rpx;">{{storeSelectInfo.storeName}}</text>
							<text>￥{{productValueSelect.price.toFixed(2)}}</text>
						</view>
					</view>
				</view>
				<!-- 店铺弹窗 -->
				<u-popup :show="showStorePicker" :round="16" mode="bottom">
					<view class="storepopup">
						<view class="storepopup-title">
							选择店铺
						<image class="close-icon" src="@/static/images/close40.png" mode="widthFix" @click="closeStorePicker"></image></view>
						<scroll-view class="shop-pBox storepopup-box" scroll-y="true">
							<view 
								v-for="(item,index) in storePriceList"
								:key="index"
								:class="productValueSelect.storeId ==  item.storeId ? 'item hover':'item'"
								@click="pickerStore(item,index)"
							>
								<view class="top x-bc">
									<view class="price"><b>￥</b>{{ item.price.toFixed(2) }}</view>
									<view class="num">销售{{utils.formatSalesNum(item.sales) }}</view>
								</view>
								<view class="bot x-bc shop-pBox-name">
									<view class="name">{{item.storeName}}</view>
									<u-icon name="arrow-right" color="#000" size="14" @click.native.stop="navgetTo('/pages_shopping/store/index?storeId='+item.storeId)"></u-icon>
								</view>
							</view>
						</scroll-view>
					</view>
				</u-popup>
				
				<!-- 规格 -->
				<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="../../static/images/jian.png" mode=""></image>
							<image v-else src="../../static/images/jian2.png" mode=""></image>
						</view>
						<input   type="number" @change="changeNum" v-model="specNum"   />
						<view class="img-box" @click="addNum()">
							<image src="../../static/images/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://user.test.ylrztop.com/images/logo.png"></image>
			<text class="text">加载中...</text>
		</view>
		<u-modal :show="showModal" title="温馨提示" content="处方药须凭处方在药师指导下购买和使用" @confirm="hideModal()"></u-modal>
	</view>
</template>

<script>
	import {getDicts} from '@/api/index'
	import {getProductDetails,getProductStoreStock,getCartCount,addCart} from '@/api/product'
	import {getProductConfig} from '@/api/common'
	import popupBottom from '@/components/px-popup-bottom/px-popup-bottom.vue'
	export default {
		components: {
			item:{},
			popupBottom
		},
		data() {
			return {
				editShow:false,
				loadding:true,
				buyText:"立即购买",
				// mTitle:"温馨提示",
				// mContent:"处方药须凭处方在药师指导下购买和使用",
				type:null,
				productValueSelect:{
					price:0,
					serviceFee:0
				},
				banner:[],
				productId:null,
				attrs:[],
				values:[],
				stores:[],
				storeId:null,
				storeNames:[],
				storeIdx:0,  
				storeName:"",
				product:{
					price:0,
					otPrice:0,
				},
				showModal:false,
				// 当前轮播的图片
				activeBanner: 1,
				// 购物车数量
				cartCount: 0,
				// 规格弹窗
				specVisible: false,
				// 规格数量
				specNum: 1,
				config:null,
				showServiceFee:false,
				selectVal:"",
				// 链接带的storeId
				urlStoreId: undefined, 
				showStorePicker: false,
				// 所选规格门店店铺价格
				storePriceList: [],
				// 所选店铺
				storeSelectInfo: {},
				// 保存选的规格
				choseSpecSubIndex: 0,
				choseSpecIndex: 0,
			};
		},
		onLoad(options) {
			this.urlStoreId = options.storeId || undefined
			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.utils.urlToObj(url)
				uni.setStorageSync('tuiUserId',obj.userId);
			}
			uni.showShareMenu({
				withShareTicket:true,
				//小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus:["shareAppMessage","shareTimeline"] //不设置默认发送给朋友
			})
			this.getDicts();
			this.productId = options.productId;
			if(this.utils.checkToken()){
				this.getCartCount();
			}
			// this.getProductConfig();
		},
		onShow() {
			this.getProductDetails();
			// this.getStoreList();
		},
		//发送给朋友
		onShareAppMessage(res) {
			if(this.utils.isLogin()){
				var user=JSON.parse( uni.getStorageSync('userInfo'))
				return {
					title: this.product.productName,
					path: '/pages/shopping/productDetails?productId='+this.product.productId+"&userId="+user.userId,
					imageUrl: 'https://user.test.ylrztop.com/images/logo.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			if(this.utils.isLogin()){
				var user=JSON.parse( uni.getStorageSync('userInfo'))
				return {
					title: this.product.productName,
					query:'productId='+this.product.productId+"&userId="+user.userId,//页面参数
					imageUrl: 'https://user.test.ylrztop.com/images/logo.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
			
		},
		methods: {
			getDicts:function(){
				getDicts().then(
					res => {
						if(res.code==200){
							uni.setStorageSync('dicts',JSON.stringify(res));
						} 
					},
					rej => {}
				);
			},
			getStoreList(){
				getStoreList().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]
					});
				}
			},
			//服务弹窗
			openEditMoney(){
				this.editShow = true
			},
			cancelEditMoney(){
				this.editShow = false
			},
			doAddCart(type){
				if(this.specNum==0){
					uni.showToast({
						icon:'none',
						title: "库存不足",
					});
					return;
				}
				var isBuy=type=="buy"?1:0;
				console.log(this.productValueSelect,'ppp')
				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))
								})
								// uni.navigateTo({
								// 	url: '/pages/shopping/confirmOrder?type='+this.type+"&cartIds="+res.id+"&orderType="+this.orderType+"&storeId="+this.storeId
								// })
							}
							else
							{
								this.getCartCount()
								uni.showToast({
									icon:'success',
									title: "添加成功",
								});
							}
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
							this.getProductDetails()
						}
					},
					rej => {}
				);
			},
			
			getCartCount(){
				let data = {productId:this.productId};
				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/home/index'
				})
			},
			// 跳转页面
			navgetTo(url) {
				console.log("跳转")
				this.utils.isLogin().then(res => {
					if(res){
						uni.navigateTo({
							url: url
						})
					}
				})
			},
			// 加入购物车
			addCart(type) {
				this.utils.isLogin().then(res => {
					if(res){
						this.type=type;
						this.specVisible = true
					}
				});
			},
			getProductDetails(){
				let data = {
					productId:this.productId,
					storeId: this.urlStoreId || ""
				};
				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.showModal=true;
								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
							});
							this.values=res.productValues;
							this.stores=res.stores;
							// this.storeNames=this.stores.map(store => store.storeName);
							if(this.stores.length>0 ){
								// this.storeName=this.storeNames[this.storeIdx];
								// urlStoreId存在表示在店铺内购买的商品
								this.storeId= this.urlStoreId || this.stores[this.storeIdx].storeId;
							}
							
							this.choseSpec(0,0)
						}
						else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
							setTimeout(function(){
								uni.reLaunch({
									url: '/pages/home/index',
								})
							},2000)
							
						}
					},
					rej => {}
				);
			},
			getProductStoreStock(type){
				let data = {productId:this.productId,storeId:this.storeId};
				getProductStoreStock(data).then(
					res => {
						//this.loadding=false
						if(res.code==200){
							this.attrs=res.productAttr;
							this.attrs.forEach((item,index,arr)=>{
							     item.values=item.attrValues.split(',');
								 item.index=0
							});
							this.values=res.productValues;
							if(type == 'chooseStore') {
								this.choseSpec(this.choseSpecIndex,this.choseSpecSubIndex)
							} else {
								this.choseSpec(0,0)
							}
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
							setTimeout(function(){
								uni.reLaunch({
									url: '/pages/home/index',
								})
							},2000)
							
						}
					},
					rej => {}
				);
			},
			
			// 规格选择
			choseSpec(index,subIndex) {
				this.choseSpecIndex = index
				this.choseSpecSubIndex = 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]);
					  }
				   }
				}
				let selectVal=values.sort().join(","); //返回值：默认
				this.selectVal=selectVal;
				console.log("qxj selectVal:"+selectVal);
				// var valueSelect=this.values.filter((item)=>{
				//      return item.sku==selectVal;
				// });
				var valueSelect=this.getValueSelect();
				console.log("qxj valueSelect:"+JSON.stringify(valueSelect));
				if(valueSelect!=null&&valueSelect.length>0){
					this.productValueSelect=valueSelect[0];
				}
				console.log("qxj productValueSelect:"+JSON.stringify(this.productValueSelect));
				this.updateSpecNum();
				if(this.stores.length>0 && !this.urlStoreId){
					this.getStorePriceList()
				}
				
			},
			//更新数量
			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() {
				this.specNum++
				if(this.specNum>=this.productValueSelect.stock){
					this.specNum=this.productValueSelect.stock
				}
				console.log(this.specNum,'===')
			},
			// 确定选择该规格
			submit() {
				this.specVisible = false
				this.doAddCart(this.type);
			},
			hideModal(){
				this.showModal=false;
			},
			getProductConfig(){
				getProductConfig().then(
					res => {
						if(res.code==200){
							this.config=res.data;
							this.showServiceFee=this.config.isShowProductDetails;
							console.log(this.config);
						}
					},
					rej => {}
				);
			},
			getValueSelect(){
				var valueSelect;
				if(this.stores.length>0 && !this.urlStoreId){
					valueSelect=this.values.filter((item)=>{
						 // return item.sku==this.selectVal;
						 if(item.storeId) {
							 return item.sku==this.selectVal && item.storeId==this.storeId;
						 } else {
							 return item.sku==this.selectVal;
						 }
					});
				}else{
					valueSelect=this.values.filter((item)=>{
					     return item.sku==this.selectVal;
					});
				}
				return valueSelect;
			},
			// pickerChange(e) {
			// 	this.storeIdx = parseInt(e.detail.value);
			// 	this.storeName=this.storeNames[this.storeIdx];
			// 	this.storeId=this.stores[this.storeIdx].storeId;
			// 	var valueSelect= this.getValueSelect();
			// 	this.productValueSelect=valueSelect[0];
			// 	this.getProductStoreStock();
				
			// },
			// pickerColumnchange(e){
					
			// },
			closeStorePicker() {
				this.showStorePicker = false
			},
			openStorePicker() {
				this.showStorePicker = true
			},
			pickerStore(item,index) {
				this.showStorePicker = false
				this.storeChange(item,index)
			},
			// 选择店铺价格
			storeChange(item,index) {
				this.storeIdx = index;
				this.storeId = item.storeId;
				var valueSelect= this.getValueSelect();
				this.productValueSelect=valueSelect[0];
				// this.getProductStoreStock("chooseStore");
			},
			// 更新所选规格的店铺价格
			getStorePriceList() {
				const priceList = this.values.filter(item => item.sku === this.productValueSelect.sku && item.storeId); 
				this.storePriceList = priceList.map(item =>{ 
					const store = this.stores.find(it => item.storeId === it.storeId); 
					if(store){ 
						return { ...item, storeName: store.storeName }; 
					} 
				}); 
				// 获取页面店铺相关数据
				const selectStore = this.stores.find(it => this.productValueSelect.storeId === it.storeId);
				this.storeSelectInfo = selectStore || {} 
			},
		}
	}
</script>

<style lang="scss">
	.share-box{
		// position: absolute;
		 position: fixed;
		right: 24rpx;
		top: 70%;
		z-index: 99;
		width: 112rpx;
		height: 112rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 1rpx solid #EFF3F7;
		background-color: #FFFFFF;
		.share{
			display: inline-block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
		}
	}
	.shop-banner{
		height: 756upx;
		background-color: #FFFFFF;
		position: relative;
		.swiper-item{
			box-sizing: border-box;
			position: relative;
		}
		.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(../../static/images/black_mask.png);
			background-size: 20upx 44upx;
			background-repeat: repeat-x;
		}
		.num-box{
			width: 80upx;
			height: 40upx;
			line-height: 40upx;
			text-align: center;
			font-size: 24upx;
			font-family: PingFang SC;
			// font-weight: 500;
			color: #FFFFFF;
			background: rgba(0, 0, 0, .7);
			border-radius: 20upx;
			position: absolute;
			right: 40upx;
			bottom: 34upx;
			z-index: 10;
		}
	    .cf-box{
	    	position: absolute;
	    	z-index: 10;
	    	left: 0;
	    	right:0;
	    	top: calc(50% - 200rpx);
	    	bottom: calc(50% - 200rpx);
	    	background-color: rgba(0,0,0, 0.3);
	    	backdrop-filter: blur(2rpx); /* 背景模糊度 */
	    	display: flex;
	    	flex-direction: column;
	    	flex: 1;
	    	justify-content: center;
	    	align-items: center;
			color: #EDEEEF;
	    	.title{
	    		font-size: 40rpx;
	    		font-weight: bold;
	    	}
	    	.subTitle{
	    		font-size: 28rpx;
	    		font-weight: bold;
	    		margin-top: 10rpx;
	    	}
	    }
	    
	
	}
	.guige{
		padding:24upx;
		border-radius: 16upx;
		background: #fff;
		width: auto;
		font-size: 24upx;
		color: #222426;
		margin: 24upx;
		.guige-gg{
			.gg-text{
				color: #898E91 ;
				margin-right: 40upx;
			}
		}
		.safe-box{
			display: flex;
			align-items: center;
			// padding-top: 24upx;
			font-size: 24upx;
			color: #222426;
			.text{
				color: #999999;
				margin-right: 40upx;
			}
			.box{
				display: flex;
				align-items: center;
				image{
					width: 28upx;
					height: 28upx;
					margin-right: 10upx;
				}
				view{
					display: flex;
					align-items: center;
					margin-right: 40upx;
					&:last-child{
						margin-right: 0;
						image{
							margin-right: 0;
						}
					}
				}
			}
			
		}
		.popup-box{
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			.info-mask {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: rgba($color: #000000, $alpha: 0.5);
				z-index: 999;
			}
			.info-form {
				z-index: 1000;
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding:0 30upx 60upx;
				background: #FFFFFF;
				border-radius: 40upx;
				.top{
					display: flex;
				}
				.line{
					border-top: 1px solid  #F1F1F1;
					width: 100%;
				}
				.title{
					padding: 30upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36upx;
					font-weight: bold;
					line-height: 44upx;
					font-family: PingFang SC;
					color: #222222;
				}
				.close{
					padding-top:30rpx;
					position: absolute;
					right: 30upx;
				}
				.form-box{
					width: 100%;
					padding-top: 30upx;
					.form-item2{
						padding-bottom: 30upx;
						// display: flex;
						// align-items: flex-start;
						// border-bottom: 1px solid #F1F1F1;
						.form-item-box{
							display: flex;
							align-items: center;
							text{
								font-size: 28upx;
								color: #222426;
								margin-left: 10upx;
								font-weight: bold;
							}
						}
						 .form-content{
							 font-size:24upx ;
							 text-align: left;
							 color: #626468 ;
							 margin-top: 20upx;
							 line-height: 40upx;
						 }
					}
				}
				.btns{
					width: 100%;
					height: 120upx;
					padding:20upx 30upx;
					display: flex;
					align-items: center;
					justify-content: center;
					.sub-btn{
						width: 100%;
						height: 88upx;
						line-height: 88upx;
						text-align: center;
						font-size: 36upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						background: #008FD3;
						border-radius: 44upx;
					}
				}
				
			}
		}
	}
	.det-info{
		// background: #FFFFFF;
		// padding: 36upx 30upx 25upx;
		background: #FFFFFF;
		    padding: 24rpx;
		    margin: 24rpx;
		    border-radius: 16rpx;
		
		.price-box{
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			.price{
				display: flex;
				align-items: flex-end;
				.label{
					font-weight: 500;
					font-size: 24rpx;
					color: #FF5030;
					font-family: PingFang SC;
					line-height: 1.3;
					margin-right: 10upx;
				}
				.unit{
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6633;
					line-height: 1.3;
				}
				.num{
					font-size: 48upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF5030;
					margin-right: 20upx;
					line-height: 1;
				}
				
				.old{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					// text-decoration: line-through;
					color: #898E91;
					margin-left: 10upx;
					// line-height: 1.3;
				}
			}
			// .share-box{
			// 	width: 120upx;
			// 	height: 46upx;
			// 	border: 1px solid #0bb3f2;
			// 	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: #0bb3f2;
			// 	}
			// 	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: 2upx 8upx;
				height: 32upx;
				background: #F5A623;
				border-radius: 4upx;
				margin-right: 10upx;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 30upx;
				float: left;
				margin-top: 7upx;
			}
		}
		.intro{
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 36upx;
			padding: 18upx 0 23upx;
			// border-bottom: 1px solid #f7f7f7;
		}
		.intro-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:20upx;
			border-radius: 16upx;
			background: #F5F7FA;
			width: auto;
			.title-1{
				font-size: 24upx;
				color:#222426  ;
				font-weight: bold;
				width: 40%;
				text-align: center;
			}
			.title-2{
				font-size: 24upx;
				color:#222426;
				font-weight: bold;
				display: block;
			}
			.intro-text{
	          // padding: 0 20upx;
			}
			.intro-text2{
				width:50%;
			}
			.intro-content{
				color: #898E91;
				font-size: 24upx;
			}
			.line{
				width: 1px;
				    height: 40upx;
				    background: #EDEEEF;
				    margin: 0 20upx;
			}
		}
		.safe-box{
			display: flex;
			align-items: center;
			padding-top: 24upx;
			image{
				width: 20upx;
				height: 24upx;
				margin-right: 20upx;
			}
			.text{
				font-size: 22upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 1;
			}
			.line{
				width: 1px;
				height: 23upx;
				background: #EDEEEF;
				margin: 0 20upx;
			}
		}
	}
	.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: 20upx 30upx;
		background: #FFFFFF;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 1.8;
		margin-top: 10upx;
		display: flex; 
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		.label{
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #111111;
			line-height: 1.8;
		}
	}
	
	
	.shop{
		// box-sizing: border-box;
		// padding: 20upx 30upx;
		// background: #FFFFFF;
		// font-size: 28upx;
		// font-family: PingFang SC;
		// font-weight: 500;
		// color: #666666;
		// line-height: 1.8;
		// margin-top: 10upx;
		// background: url(../../static/images/chu_query.png) no-repeat  center center / cover;
		
		
		box-sizing: border-box;
				background: #FFFFFF;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 1.8;
				padding: 24rpx;
		  margin: 24rpx;
		  border-radius: 16rpx;
				
		.logo{
			flex-shrink: 0;
			width: 100rpx;
			height: 100rpx;
			border-radius: 16rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.txtBox{
			flex: 1;
			overflow: hidden;
			margin:0 30rpx;
		}
		
		.name{
			font-size: 32upx;
			font-weight: 600;
			color: #333;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		
		.desc{
			font-size: 24upx;
			font-weight: normal;
			color: #222426;
			text-align: left;
		}
		
		
		.goShop{
			flex-shrink: 0;
			width: 96rpx;
			height: 56rpx;
			background: #fff;
			border-radius: 30rpx;
			color: #008FD3;
			font-size: 24upx;
			margin: 0;
			border: 1px solid  #008FD3;
			padding: 0;
			line-height: 56rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
.tech-pBox{
		box-sizing: border-box;
		padding: 0upx 0upx;
		background: #FFFFFF;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		.label{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #222426;
			text-align: left;
			padding: 24rpx 0;
		}
		.item{
			border: 1px solid #fff;
			border-radius: 12rpx;
			padding:30upx;
			border: 1px solid #EFF3F7;
			display: flex;
			align-items: center;
		      margin-bottom: 20rpx;
			.price{
				font-size: 42rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FF6633;
				display: flex;
				flex: 1;
				b{ font-size: 30rpx;line-height: 46rpx; margin-top: 14rpx; }
			}
			
			.num{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: normal;
				color: #999;
				width:200rpx;
				text-align: right;
			}
			
			.name{
				max-width: 60%;
				margin-right: 10rpx;
				font-size: 28upx;
				font-weight: normal;
				color: #333;
				text-align: left;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}
			.tech-right{
			flex:1;
			&-bottom{
				font-family: PingFang SC;
				color: #898E91;
				font-size:24upx;
			}
			&-top{
				display: flex;
				align-items: flex-end;
				margin-bottom: 10upx;
				.title-1{
					font-family: PingFang SC;
					font-size:32upx;
					color:#222426;
					margin-right: 14upx;
				}
				.title-2{
					font-family: PingFang SC;
					font-weight: 400;
					font-size:24upx;
					color:#222426;
				}
			}
			}
			
		}
	
		.hover{
			border:1rpx solid #008FD3;
			background: #F0FAFF;
		}
		.shop-morebtn {
			margin-top: 14rpx;
			box-sizing: border-box;
			padding: 12rpx 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #111111;
			background: #F7F7F7;
			border-radius: 32rpx;
			text-align: center;
			text {
				color: #999;
			}
		}
	}
	.shop-pBox{
		box-sizing: border-box;
		padding: 0upx 0upx;
		background: #FFFFFF;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		
		.item{
			border: 1px solid #fff;
			border-radius: 12rpx;
			padding:18rpx 20rpx 24rpx;
			.price{
				font-size: 42rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FF6633;
				display: flex;
				flex: 1;
				b{ font-size: 30rpx;line-height: 46rpx; margin-top: 14rpx; }
			}
			
			.num{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: normal;
				color: #999;
				width:200rpx;
				text-align: right;
			}
			
			.name{
				max-width: 60%;
				margin-right: 10rpx;
				font-size: 28upx;
				font-weight: normal;
				color: #333;
				text-align: left;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
		}
		.hover{
			border:1rpx solid #FF6633;
		}
		.shop-morebtn {
			margin-top: 14rpx;
			box-sizing: border-box;
			padding: 12rpx 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #111111;
			background: #F7F7F7;
			border-radius: 32rpx;
			text-align: center;
			text {
				color: #999;
			}
		}
	}
	.shop-pBox-name {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.storepopup {
		padding: 40rpx 20rpx 20rpx 20rpx;
		.storepopup-title {
			text-align: center;
			margin-bottom: 30rpx;
			position: relative;
			.close-icon {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(0, -50%);
			}
		}
		.storepopup-box {
			height: 60vh;
		}
	}
	
	.det-box{
		// margin-top: 10upx;
		// padding: 40upx 30upx 130upx 30upx;
		// background-color: #FFFFFF;
		margin-top: 10upx;
		background-color: #FFFFFF;
		padding:24rpx;
		margin: 24upx 24upx 175upx 24upx;
		    border-radius: 16rpx;
		.title{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 60upx;
			margin-bottom: 30upx;
			padding-bottom: 24upx;
			border-bottom: 1px solid #ECECEC;
		}
		.det-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
		 .tt{
			 font-size: 28upx;
			 font-weight: bold;
			 color: #222426;
		 }
		}
		.det-right{
			display: flex;
			font-size: 24upx;
			color:#898E91;
			align-items: center;
		}
		.det-table{
			width: 100%;
			margin: 24rpx 0;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 1rpx solid #ECECEC;
			overflow: hidden;
			font-size: 24rpx;
			.row {
				display: table-row;
				
			}
			.row:last-child .cell-1,.row:last-child .cell-2{
				border-bottom: 0;
			}
			.cell {
				display: table-cell;
				padding: 24rpx;
				// padding: 10px;
				// margin: 10px;
				// border: 1rpx solid #ECECEC;
				&.cell-1{
					width: 30%;
					text-align: center;
					color: #626468;
					background: #F5F7FA;
					border-right: 1rpx solid #ECECEC;
					border-bottom: 1rpx solid #ECECEC;
				}
				&.cell-2{
					color: #222426;
					text-align: center;
					border-bottom: 1rpx solid #ECECEC;
				}
			}
		}
	}
	
	.btn-foot{
		box-sizing: border-box;
		width: 100%;
		height: 151upx;
		background: #FFFFFF;
		padding: 0 24upx;
		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: 40upx;
					height: 40upx;
					margin-bottom: 10upx;
				}
				.label{
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #626468;
					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{
				width: 200upx;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				border-radius: 44upx;
				margin-left: 20upx;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				&:first-child{
					margin-left: 0;
				}
				&.cart{
					background: #FF5030;
				}
				&.buy{
					background: #008FD3;
				}
			}
		}
	}
	.product-spec{
		padding-bottom: 30upx;
		.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;
				.info-title{
					font-family: PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #222426;
					text-align: left;
				}
				.price{
					display: flex;
					align-items: flex-end;
					.label{
						    font-weight:500;
						    font-size: 24rpx;
						    color: #FF5030;
						    font-family: PingFang SC;
						    line-height: 1.3;
						    margin-right: 10rpx;
					}
					.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: 26upx;
				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: 24upx;
					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 #008FD3;
						color: #008FD3;
					}
				}
			}
		}
		.price-num{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 14upx;
			.label{
				font-size: 26upx;
				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: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background:#008FD3;
			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;
		}
	}

    .form-item{
    	padding: 30upx 0;
    	display: flex;
    	align-items: flex-start;
    	border-bottom: 1px solid #F1F1F1;
    	&:last-child{
    		border-bottom: none;
    	}
    	.label{
    		width: 180upx;
    		text-align: left;
    		font-size: 30upx;
    		line-height: 44upx;
    		font-family: PingFang SC;
    		font-weight: 500;
    		color: #222222;
    		flex-shrink: 0;
    	}
    	input{
    		text-align: left;
    	}
    	.form-input{
    		font-size: 30upx;
    		font-family: PingFang SC;
    		font-weight: 500;
    		color: #999999;
    		text-align: left;
    	}
    	.form-textarea{
    		font-size: 30upx;
    		color: #999999;
    		height: 100upx;
    		padding: 4upx 0;
    	}
    	 
    	.birth-picker {
    		flex: 1;
    		display: flex;
    		align-items: center;
    		
    		.right-box{
    			width: 100%;
    			display: flex;
    			align-items: center;
    			.input-box{
    				width: 470upx;
    			}
    			.arrow{
    				width: 13upx;
    				height: 23upx;
    				margin-left: 20upx;
    			}
    		}
    	}
    }


</style>