<template>
	<view class="pages">
		<!-- head -->
		<view class="scrollPage-header">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="header-title">
				<view class="header-left" @click="goBack">
					<uni-icons type="arrowleft" size="20"></uni-icons>
					<text>{{isShare?'首页':'返回'}}</text>
				</view>
				<view class="header-right"></view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="scrollPage-content">
			<view class="product-info" v-if="detail">
				<view :style="{height:statusBarHeight+'px'}"></view>
				<u-swiper mode="number" :border-radius="0" img-mode="aspectFit" :interval="3000" :height="450" :list="imgList" @click="viewImg"></u-swiper>
				<view class="product-info-text">
					<view class="product-info-text-title">
						{{detail.productName}} 
						<!-- <view class="copyText" @click="copy(detail.productName)">复制</view> -->
						<uni-tag style="margin-left: 10px;" size="mini" :circle="true" v-if="detail.status==0 || detail.dealerScopeFlag==0" :text="detail.status==0?'已下架':'已售罄'"></uni-tag>
					</view>
					<view class="product-info-text-attr">
						<view class="product-info-price flex align_center" v-if="!hasLogin">
							￥***
						</view>
						<view class="flex align_center" v-else>
							<view class="product-info-price">
								￥<text>{{detail.priceStr[0]}}</text>.{{detail.priceStr[1]}}
							</view>
							<view class="flex align_center rebate-tag" v-if="detail.promoType=='BUY_PROD_GIVE_VALID'">
								返<text>{{detail.resultValue}}</text>元
							</view>
							<view class="flex align_center rebate-tag" v-if="detail.promoType=='BUY_PROD_GIVE_PROD'">
								买{{detail.conditionValue}}赠{{detail.resultValue}}
							</view>
							<view class="flex align_center tejia-tag" v-if="detail.promoType=='PROMO_PROD'">
								特价<text>￥{{detail.orginPrice}}</text>
							</view>
						</view>
						<view class="product-info-nums">
							<view class="share">
								<button open-type="share"><u-icon :size='24' name="zhuanfa"></u-icon> 分享</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-divider bg-color="">商品详情</u-divider>
			<view class="product-info-guige" v-if="detail&&detail.product">
				<view class="row">品牌：<text>{{detail.product.productBrandName||'--'}}</text></view>
				<view class="row">原厂编码：<text>{{detail.product.origCode||'--'}} </text> <view class="copyText" v-if="detail.product.origCode" @click="copy(detail.product.origCode)">复制</view></view>
				<view class="row">产品编码：<text>{{detail.product.code||'--'}}</text> <view class="copyText" v-if="detail.product.code" @click="copy(detail.product.code)">复制</view></view>
				<view class="row">条形码：<text>{{detail.product.qrCode||'--'}}</text> <view class="copyText" v-if="detail.product.qrCode" @click="copy(detail.product.qrCode)">复制</view></view>
				<view class="row-ban">商品尺寸：<text>{{detail.product.size||'--'}}</text></view>
				<view class="row-ban">计量单位：<text>{{detail.product.unit||'--'}}</text></view>
				<view class="row-ban">重量：<text>{{detail.product.weight||'--'}}</text></view>
				<view class="row-ban">包装数：<text>{{ (detail.product.packQty) || '--' }}{{ detail.product.packQty ? detail.product.unit : '' }}/{{ detail.product.packQtyUnit||'--' }}</text></view>
			</view>
			<view class="product-info-content">
				<rich-text v-if="detail && detail.product && detail.product.description" :nodes="detail.product.description"></rich-text>
				<view v-else style="font-size: 12px;color: #999;text-align: center;">暂无产品介绍</view>
			</view>
		</view>
		<!-- 底部栏 -->
		<view class="scrollPage-footer">
			<view class="scrollPage-footer-box">
				<view class="footer-left">
					<view v-if="isShare" class="footer-left-item" @click="goBack">
						<u-icon :size='50' color="#666" name="home"></u-icon>
						<text class="footer-left-item-text">首页</text>
					</view>
					<view class="footer-left-item" @click="toCart">
						<u-icon :size='50' color="#666" name="shopping-cart"></u-icon>
						<text class="footer-left-item-text">购物车</text>
						<text class="badge" v-if="totalNum">{{totalNum>99?'99+':totalNum}}</text>
					</view>
				</view>
				<view class="footer-right">
					<view class="footer-right-item" @click="toAddCart">
						<text>加入购物车</text>
					</view>
					<view class="footer-right-item" @click="toBuy">
						<text>立即购买</text>
					</view>
				</view>
			</view>
			<view :style="{height:safeAreaBottom+'px'}"></view>
		</view>
		<!-- 购物车动画 -->
		<uni-cart-animation ref="cartAnimation" @animationfinish="animationfinish"></uni-cart-animation>
		<!-- 立即购买和付款 -->
		<page-container
		:show="showPopu" 
		:round="true"
		:z-index="100"
		position="bottom" 
		customStyle="border-radius:15px 15px 0 0;"
		@beforeleave="beforeClosePopu"
		@afterleave="closePopu">
			<!-- 确认订单 -->
			<view class="popu-content" v-if="detail&&!showPay">
				<view class="popu-close" @click="cancelBuy">
					<uni-icons size="26" type="closeempty"></uni-icons>
				</view>
				<view class="pupu-box">
					<view class="popu-content-img">
						<image style="width: 80px; height: 80px;" mode="aspectFit" :src="detail.productMsg||'/static/def_imgs.png'"></image>
					</view>
					<view class="popu-content-info">
						<view class="popu-content-info-title">
							<text class="ellipsis-two">{{detail.productName}}</text>
						</view>
						<view class="popu-content-info-code">
							<text class="ellipsis-two">{{detail.product.code}}</text>
						</view>
						<view class="popu-content-box">
							<view class="popu-content-price" v-if="hasLogin">
								￥<text>{{detail.priceStr[0]}}</text>.{{detail.priceStr[1]}}
							</view>
							<view class="popu-content-price" v-else>￥***</view>
							<view class="flex align_center rebate-tag" v-if="hasLogin&&detail.promoType=='BUY_PROD_GIVE_VALID'">
								返<text>{{detail.resultValue}}</text>元
							</view>
							<view class="flex align_center rebate-tag" v-if="hasLogin&&detail.promoType=='BUY_PROD_GIVE_PROD'">
								买{{detail.conditionValue}}赠{{detail.resultValue}}
							</view>
							<view class="flex align_center tejia-tag" v-if="hasLogin&&detail.promoType=='PROMO_PROD'">
								特价<text>￥{{detail.orginPrice}}</text>
							</view>
						</view>
						<view style="margin-top: 10px;" class="popu-content-num flex align_center justify_end">
							<text>数量</text>
							<view class="flex align_center qty-box">
								<view class="qty-btn" @click="changeQty(qty-1)" :class="(qty <= 1)?'qty-disabled':''">-</view>
								<view class="qty-num" @click="$refs.showPopu.open()" :style="{width:Number(qty).toString().length*8+10+'px'}">
									{{qty}}
								</view>
								<view class="qty-btn" @click="changeQty(qty+1)" :class="(qty >= 999)?'qty-disabled':''">+</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pupu-box gift-box" v-if="giftNum">
					<view class="popu-content-img">
						<image style="width: 58px; height: 58px;" mode="aspectFit" :src="detail.productMsg||'/static/def_imgs.png'"></image>
					</view>
					<view class="popu-content-info">
						<view class="popu-content-info-title flex align_center">
							<view class="flex align_center rebate-tag">
								赠品
							</view>
							<view class="ellipsis-two">{{detail.productName}}</view>
						</view>
						<view class="popu-content-box">
							<view class="popu-content-num flex align_center">
								<text>X</text> {{giftNum}}
							</view>
						</view>
					</view>
				</view>
				<view class="pupu-box-item">
					<view class="flex align_center justify_between" v-if="shelfInfo">
						<text>配送商：{{shelfInfo.dealerName}}</text>
						<view @click="callPhone()"><uni-icons size="18" type="phone" color="dodgerblue"></uni-icons><text style="font-size:12px;">拨打</text></view>
					</view>
					<!-- <view class="flex align_center justify_between" v-if="shelfInfo">
						<text>支付方式：在线支付</text>
						<view><uni-icons size="18" type="right" color="dodgerblue"></uni-icons></view>
					</view> -->
				</view>
				<view class="popu-content-btn">
					<view class="popu-content-btn-item cartbtn" v-if="isAddCart" @click="submitCart($event)">加入购物车</view>
					<view class="popu-content-btn-item okbtn" v-if="!isAddCart" @click="toBuy">
						{{hasPay?'立即支付':'确定采购'}}
						<text class="payAmount">￥{{payAmount}}</text>
					</view>
				</view>
			</view>
			<!-- 确认付款 -->
			<view class="popu-content" v-if="payInfo&&showPay">
				<view class="popu-close" @click="cancelPay">
					<uni-icons size="26" type="closeempty"></uni-icons>
				</view>
				<view class="pupu-box-pay-item">
					<view class="popu-content-amount flex align_center justify_center">
						<view>￥{{payInfo.totalAmount}}</view>
					</view>
					<view class="flex align_center justify_between" v-if="payInfo.totalSpecialGiveAmount>0">
						<text>总优惠</text>
						<view class="popu-content-price">￥{{payInfo.totalSpecialGiveAmount}}</view>
					</view>
					<view class="flex align_center justify_between" v-if="payInfo.totalTicketGiveAmount>0">
						<text>代金券</text>
						<view class="popu-content-price">￥{{payInfo.totalTicketGiveAmount}}</view>
					</view>
					<view style="height: 10px;"></view>
					<view class="popu-content-title flex align_center justify_between">
						<text>付款方式</text>
						<view></view>
					</view>
					<view class="popu-content-pay flex align_center justify_between">
						<view class="flex align_center"><uni-icons size="20" type="weixin" color="#4CAF50"></uni-icons> <text style="margin-left: 5px;">微信支付</text></view>
						<view><uni-icons size="22" type="checkbox-filled" color="red"></uni-icons></view>
					</view>
				</view>
				<view class="popu-content-btn">
					<view class="popu-content-btn-item okbtn" @click="confirmPay">确定付款</view>
				</view>
			</view>
		</page-container>
		<!-- 修改数量弹框 -->
		<uni-popup ref="showPopu" type="center" style="z-index: 1500;" :maskClick="false">
			<view class="popu-nums-content">
				<view class="popu-close" @click="$refs.showPopu.close()">
					<uni-icons size="26" type="closeempty"></uni-icons>
				</view>
				<view class="popu-content-title flex align_center justify_center"><text>修改商品数量</text></view>
				<view class="popu-content-num flex align_center justify_center">
					<uni-number-box v-model="qty" :size="28" :input-width="280" :input-height="70" :min="1" :max="999"></uni-number-box>
				</view>
				<view class="popu-content-btn">
					<view class="popu-content-btn-item okbtn" @click="$refs.showPopu.close()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations,
	} from 'vuex'
	import { addCart, getCartCount } from '@/api/cart.js'
	import { getShopDetail } from '@/api/shop.js'
	import { purchaseSave, purchaseCheck, purchasePay } from '@/api/purchase.js'
	import { toAuthStore, toLogin } from "@/utils/index.js"
	export default {
		data() {
			return {
				loading: false,
				showPopu: false, // 弹框
				statusBarHeight: 0, // 状态栏高度
				safeAreaBottom: 0, // 底部安全区域高度
				imgList: [],
				shopProductSn: null,
				detail: null,
				qty: 1,// 数量
				isShare: false ,// 是否从分享打开的
				busPos:{
				    x: 10,
				    y:uni.getSystemInfoSync().windowHeight - 30
				},
				submitOk: false, // 是否成功
				cacelOk: false, // 是否取消
				refashOk: false, // 是否刷新页面
				showPay: false, // 是否显示付款信息
				isAddCart: false, // 是否加入购物车
				payData: null, // 支付参数
			}
		},
		onLoad(option) {
			this.isShare = !!option.share
			// 计算安全区域
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
			this.shopProductSn = option.sn
			// 获取产品详情
			this.getDetail()
		},
		// 分享
		onShareAppMessage(e){
			return {
			  title: this.detail ? this.detail.productName : '商品名称',
			  path: '/pagesB/shopiing/productDetail?sn='+this.shopProductSn+'&share=1',
			  imageUrl:this.detail ? this.detail.productMsg : '',
			  type: '1'
			}
		},
		computed: {
			...mapState(['hasLogin']),
			// 登录用户信息
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
			// 货架经销商信息
			shelfInfo(){
				return this.$store.state.vuex_storeShelf
			},
			//是否开启线上支付
			hasPay(){
				const shelfInfo = this.shelfInfo
				return shelfInfo&&shelfInfo.payOnlineFlag&&shelfInfo.payOnlineFlag=='1'
			},
			// 经销商电话
			dealerPhone(){
				const shelfInfo = this.shelfInfo
				return shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
			},
			totalNum(){
				return this.hasLogin&&this.userInfo.sysUserFlag == '1' ? this.$store.state.vuex_cartTotal : 0
			},
			// 赠品数量
			giftNum(){
				return this.detail && this.detail.promoType=='BUY_PROD_GIVE_PROD' ? Math.floor(this.qty / this.detail.conditionValue)*this.detail.resultValue : 0
			},
			// 支付总金额
			payAmount(){
				const price = this.detail && this.detail.priceStr ? this.detail.priceStr.join('.') : 0
				return price ? Number(price*this.qty).toFixed(2) : 0
			},
			// 付款信息
			payInfo(){
				return this.$store.state.vuex_tempOrderData
			}
		},
		methods: {
			// 返回
			goBack(){
				if(this.isShare){
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}else{
					uni.navigateBack()
				}
			},
			// 复制
			copy(text){
				uni.setClipboardData({
					data: text,
				})
			},
			viewImg(index){
				uni.previewImage({
					urls: this.imgList
				})
			},
			// 联系经销商
			callPhone() {
				if(this.dealerPhone!=''){
					uni.makePhoneCall({
						phoneNumber: this.dealerPhone
					})
				}
			},
			// 产品详情
			getDetail(){
				uni.showLoading({
					title: '加载中'
				})
				const storeShelf = this.$store.state.vuex_storeShelf
				const dealerSn = this.hasLogin && this.userInfo && this.userInfo.sysUserFlag == '1'&&storeShelf ? storeShelf.dealerSn : ''
				// 获取产品详情
				getShopDetail({
					shopProductSn: this.shopProductSn,
					dealerSn: dealerSn
				}).then(res => {
					if(res.status == 200){
						this.detail = res.data
						if(res.data){
							if(res.data.productPicList){
								res.data.productPicList.forEach(item => {
									this.imgList.push(item.imageUrl||'/static/def_imgs.png')
								})
							}else{
								this.imgList.push(res.data.productMsg||'/static/def_imgs.png')
							}
							const a = res.data.shopPromoProduct
							let bprice = res.data.price
							if(a){
							  res.data.promoType = a.promoType
							  res.data.resultValue = a.resultValue
							  res.data.conditionValue = a.conditionValue
							  res.data.discountType = a.discountType
							  res.data.promoProductSn = a.promoProductSn
							  res.data.promoSn = a.promoSn
							  res.data.orginPrice = res.data.price
							  // 特价
							  if(res.data.promoType=='PROMO_PROD'){
								  bprice =res.data.conditionValue
							  }
							}
							res.data.priceStr = Number(bprice).toFixed(2).toString().split('.')
						}
					}
					uni.hideLoading()
				})
			},
			animationfinish(){
				this.loading = false
			},
			changeQty(value) {
				const max = 999
				const v = value > max ? max : (value==''||value==0?1:value)
				this.qty = v
			},
			// 加入购物车
			toAddCart(){
				// 未登录
				if(this.hasLogin){
					// 游客未认证
					if(this.userInfo.sysUserFlag == '0'){
						toAuthStore()
					}else{
						// 打开确认数量弹框
						this.isAddCart = true
						this.showPopu = true
					}
				}else{
					toLogin()
				}
			},
			// 确定加入购物车
			submitCart(event){
				if(this.loading){
					return
				}
				this.loading = true
				this.$refs.cartAnimation.touchOnGoods(event,this.busPos);
				// 加入购物车
				addCart({
					qty: this.qty,
					price: this.detail.price,
					productSn: this.detail.productSn
				}).then(res => {
					if(res.status == 200){
						uni.$emit('refashCart')
						this.showPopu = false
					}
				})
			},
			// 打开购物车页面
			toCart(){
				if(this.hasLogin){
					// 游客未认证
					if(this.userInfo.sysUserFlag == '0'){
						toAuthStore()
					}else{
						uni.navigateTo({
							url: '/pagesB/cart/index'
						})
					}
				}else{
					toLogin()
				}
			},
			// 立即购买
			toBuy(){
				if(this.hasLogin){
					// 游客未认证
					if(this.userInfo.sysUserFlag == '0'){
						toAuthStore()
					}else{
						if(this.detail.status==0 || this.detail.dealerScopeFlag==0){
							uni.showToast({
								title: '此商品已'+(this.detail.status==0?'下架':'售罄'),
								icon: 'none'
							})
						}else{
							// 打开数量选择弹框
							if(!this.showPopu){
								this.showPopu = true
							}else{
								// 去结算生产订单
								this.creatOrder()
							}
						}
					}
				}else{
					toLogin()
				}
			},
			// 取消立即购买
			cancelBuy(){
				this.resetPage()
			},
			// 去结算
			creatOrder(){
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				const _this = this
				purchaseCheck({detailList: [{
							productSn:this.detail.productSn,
							productCode:this.detail.productCode,
							qty: this.qty,
							price:this.detail.price,
							promoSn: this.detail.promoSn
						}]}).then(res => {
							uni.hideLoading()
							if(res.status == 200){
								const successList = res.data.successList ? res.data.successList.map(item => {
									return {
										productSn:item.productSn,
										productCode: item.productCode,
										qty: item.qty,
										price:item.price,
										promoSn: item.promoSn
									}
								}) : []
								const removeList = res.data.removeList ? res.data.removeList.map(item => item.productCode) : []
								const selloutList = res.data.selloutList ? res.data.selloutList.map(item => item.productCode) : []
								// 有已下架或已售罄产品提示
								if(removeList.length || selloutList.length){
									uni.showModal({
										title: '提示',
										content: (removeList.length ? `产品${removeList.join(',')}已下架，`:'')+(selloutList.length?`产品${selloutList.join(',')}已售罄，`:'')+`不可采购。`+(successList.length?'是否继续采购其他产品？':''),
										showCancel: successList.length,
										confirmText: successList.length?'确定':'知道了',
										success(ret) {
											if(ret.confirm && successList.length){
												_this.submitForm(successList)
											}
										}
									})
								}else{
									const promoChangeFlag = res.data.promoChangeFlag
									// 活动变更
									if(promoChangeFlag){
										uni.showModal({
											title: '提示',
											content: '促销活动已变更，请刷新？',
											confirmText:'确定刷新',
											success(ret) {
												if(ret.confirm){
													_this.showPopu = false
													_this.refashOk = true
												}
											}
										})
										return
									}
									// 直接提交
									_this.submitForm(successList)
								}
							}else{
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
				})
			},
			// 创建订单
			submitForm(detailList){
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				purchaseSave({
					detailList: detailList
				}).then(res => {
					if(res.status == 200){
						res.data.detailList = []
						this.$store.state.vuex_tempOrderData = res.data
						// 这里判断是否开通支付，如果开通打开确认付款弹框
						if(this.hasPay){
							// 计算待付款剩余倒计时
							res.data.timestamp = (new Date(res.data.createDate.replace(/-/g,'/')).getTime() + 1800000 - new Date().getTime())/1000
							purchasePay({
								bizSn:res.data.purchaseSn,
								bizNo:res.data.purchaseNo,
								bizType:'PURCHASE',
								payUserOpenId: this.$store.state.vuex_openid || uni.getStorageSync('openid')
							}).then(res=>{
								this.showPay = true
								this.payData = res.data?res.data.payRequestRest:null
								uni.hideLoading()
							})
						}else{
							// 未开通支付，创建成功，跳转到订单详情页
							this.showPopu = false
							this.submitOk = true
							uni.hideLoading()
						}
					}else{
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			// 关闭之前
			beforeClosePopu(){
				console.log(this.showPay,this.submitOk,this.cacelOk)
				// 正在支付
				if(this.showPay&&!this.submitOk&&!this.cacelOk){
					this.showPay = false
					this.cancelPay()
				}
			},
			// 关闭确定订单弹窗后
			closePopu(){
				this.showPopu = false
				// 刷新页面
				if(this.refashOk){
					this.qty = 1
					this.getDetail()
				}else{
					// 开通了支付
					if(this.hasPay){
						// 付款
						if(this.showPay){
							// 确定取消付款或付款失败
							if(this.cacelOk){
								this.cacelOk = false
							}
							// 确定付款成功
							if(this.submitOk){
								this.submitOk = false
							}
							// 去订单详情页
							this.toOrderDetial()
						}else{
							// 取消立即购买
							this.resetPage()
						}
					}else{
						// 未开通支付
						// 去订单详情页
						if(this.submitOk){
							this.submitOk = false
							this.toOrderDetial()
						}else{
							// 取消采购
							this.resetPage()
						}
					}
				}
			},
			// 确认付款
			confirmPay(){
				const _this = this
				// 确认付款
				const data = _this.payData
				console.log(data)
				if(data){
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: (res) =>{
							_this.payComplete(1,true)
						},
						fail: (err)=> {
							console.log('fail:',err);
							_this.payComplete(err.errMsg.indexOf("cancel")>=0 ? 2 : 0,false)
						}
					});
				}else{
					_this.payComplete(0,false)
				}
			},
			payComplete(type,data){
				uni.showToast({
					mask: true,
					title: type==1 ? '支付成功' : (type==2?'支付取消':'支付失败'),
					icon: 'none'
				})
				this.showPopu = false
				this.submitOk = true
			},
			// 确认取消付款弹框
			cancelPay(){
				const _this = this
				uni.showModal({
					title: '确定取消支付吗？',
					content: '您的订单在30分钟内未支付将被取消，请尽快完成支付。',
					confirmText: '继续支付',
					cancelText: '取消支付',
					success(ret) {
						// 确定取消，跳转到订单详情页
						if(ret.cancel){
							// 支付弹框打开中
							if(_this.showPopu){
								console.log(0)
								_this.showPopu = false
								_this.cacelOk = true
							}else{
								console.log(1)
								// 未打开直接跳转
								_this.toOrderDetial()
							}
						}
						if(ret.confirm){
							console.log(2)
							// 继续支付
							_this.showPopu = true
							_this.showPay = true
							_this.cacelOk = false
						}
					}
				})
			},
			// 重置页面
			resetPage(){
				this.qty = 1
				this.isAddCart = false
				this.showPopu = false
				this.showPay = false
				this.cacelOk = false
				this.submitOk = false
				setTimeout(()=>{
					uni.hideLoading()
				},300)
			},
			// 订单详情页
			toOrderDetial(){
				this.resetPage()
				// 跳转到订单详情页面
				uni.navigateTo({
					url: "/pagesB/procureOrder/orderDetail?purchaseSn="+this.$store.state.vuex_tempOrderData.purchaseSn
				})
			}
		}
	}
</script>

<style lang="less">
	.pages {
		height: 100vh;
		display: flex;
		flex-direction: column;
		.scrollPage-header{
			z-index: 1;
			width: 100%;
			position:fixed;
			left: 0;
			top: 0;
			.header-title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 10px;
				height: 44px;
				.header-left{
					display: flex;
					align-items: center;
					text{
						font-size: 14px;
						color: #333333;
					}
					background-color: rgba(255,255,255,0.6);
					box-shadow: 0px 1px 0px 0px #E6E6E6;
					border-radius: 50px;
					padding: 3px 6px 3px;
				}
				.header-right{
					width: 50px;
				}
			}
		}
		.copyText{
			background-color: #efefef;
			border-radius: 100rpx;
			padding: 0 20rpx;
			color: #03A9F4;
			font-size: 20rpx;
			display: inline-block;
			margin-left: 20rpx;
			height: 44rpx;
			line-height: 44rpx;
		}
		.scrollPage-content{
				flex: 1;
				overflow-y: auto;
				.product-info{
					background:#fff;
					margin-bottom: 10px;
					.product-info-text{
						padding: 10px;
						.product-info-text-title{
							font-weight: bold;
							color: #333333;
							line-height: 22px;
							margin-bottom: 5px;
						}
						.product-info-text-attr{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.product-info-price{
								color: red;
								display: flex;
								align-items: baseline;
								font-size: 12px;
								text{
									font-size: 38rpx;
								}
							}
							.product-info-nums{
								font-size: 12px;
								color: #999999;
								>view{
									display: flex;
									align-items: center;
								}
								.share{
									button{
										width: auto;
										padding: 0;
										border: 0;
										background: none;
										line-height: normal;
										margin: 0;
										display: inline;
										font-size: 12px;
										color: #999;
										&::after{
											border:none;
										}
										/deep/ .u-icon{
											margin-right: 3px;
										}
									}
								}
							}
						}
					}
				}
				.product-info-guige{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					background:#fff;
					margin: 10px 0;
					padding: 10px;
					line-height: 28px;
					.row{
						width: 100%;
					}
					.row-ban{
						width: 50%;
					}
					>view{
						color: #999;
						text{
							color: #333333;
						}
					}
				}
				.product-info-content{
					background:#fff;
					margin-bottom: 10px;
					padding: 10px;
					line-height: 28px;
				}
		}
		.rebate-tag{
			background: #ffe7df;
			color: #E91E63;
			padding: 2px 5px;
			font-size: 10px;
			border-radius: 3px;
			margin-left: 6px;
		}
		.tejia-tag{
			color: #E91E63;
			margin-left: 6px;
			font-size: 12px;
			text{
				font-size: 12px;
				color: #999;
				margin-left: 5px;
				text-decoration: line-through;
			}
		}
		.scrollPage-footer{
			background-color: #FFFFFF;
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			.scrollPage-footer-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 45px;
			}
			.footer-left{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 35%;
				.footer-left-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0 15px;
					position: relative;
					.footer-left-item-text{
						font-size: 12px;
						color: #666666;
					}
					.badge{
						background: #f44336;
						color: #fff;
						position: absolute;
						right: 5px;
						top: -8px;
						font-size: 12px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50rpx;
						padding: 0 10rpx;
					}
				}
			}
			.footer-right{
				width: 60%;
				height: 80%;
				display: flex;
				align-items: center;
				border-radius: 50px;
				overflow: hidden;
				margin: 0 5px;
				.footer-right-item{
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 50%;
					font-size: 14px;
					color: #FFFFFF;
				}
				.footer-right-item:first-child{
					background-color: #FF9900;
				}
				.footer-right-item:last-child{
					background-color: #FF0000;
				}
			}
		}
		.popu-nums-content{
			background-color: #FFFFFF;
			border-radius: 10px;
			width: 300px;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10px 15px;
			.popu-close{
				padding: 10px;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1000;
			}
			.popu-content-title{
				padding: 10px;
				font-size: 16px;
			}
			.popu-content-num{
				font-size: 24rpx;
				color: #999999;
				padding: 10px 0;
				> text{
					margin-right: 10px;
					font-size: 10px;
				}
			}
			.popu-content-btn{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 20px 0 10px;
				.popu-content-btn-item{
					width: 40%;
					height: 32px;
					font-size: 14px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 100px;
				}
				.cancelBtn{
					background-color: #f8f8f8;
					color: #666;
				}
				.okbtn{
					background-color: #f70000;
					color: #FFFFFF;
				}
			}
		}
		.popu-content{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 10px 15px;
				.popu-close{
					padding: 10px;
					position: absolute;
					right: 0;
					top: 0;
					z-index: 1000;
				}
				.qty-box{
					display: flex;
					.qty-btn{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 22px;
						height: 20px;
						border-radius: 50px;
						font-size: 18px;
						color: #066cff;
						&.qty-disabled{
							color: #999;
						}
					}
					.qty-num{
						width: 24px;
						height: 20px;
						line-height: 20px;
						text-align: center;
						background-color: #efefef;
						margin: 0 3px;
						border-radius: 3px;
						font-size: 12px;
						input{
							width: 100%;
							height: 100%;
							text-align: center;
							color: #333;
						}
					}
				}
				.pupu-box{
					display: flex;
					justify-content: space-between;
					margin-top: 35px;
					width: 100%;
				}
				.popu-content-img{
					border-radius: 6px;
					border: 1px solid #eee;
					overflow: hidden;
					width: 80px;
					height: 80px;
				}
				.popu-content-info{
					padding: 0 0 0 10px;
					flex-grow: 1;
					overflow: hidden;
					width: 50%;
					.popu-content-info-title{
						font-size: 14px;
					}
					.popu-content-info-code{
						font-size: 12px;
						color: #00aaff;
						margin-top: 5px;
					}
				}
				.gift-box{
					padding-left: 8%;
					margin-top: 10px;
					border-top: 1px solid #eee;
					padding-top: 10px;
					.popu-content-img{
						width: 58px;
						height: 58px;
					}
					.popu-content-info-title{
						font-size: 12px;
						color: #666;
					}
					.popu-content-box{
						margin-top: 0;
					}
					.popu-content-num{
						padding:5px 15px;
						>text{
						  font-size: 10px;
						}
					}
					.rebate-tag{
						margin: 0 5px 0 0;
						background: #ff0000;
						color: #fff;
						flex-grow: 1;
						display: flex;
						justify-content: center;
					}
					.ellipsis-two{
						width: 80%;
						flex-grow: 1;
					}
				}
				.popu-content-box{
					display: flex;
					align-items: baseline;
					margin-top: 5px;
					.popu-content-price{
						color: red;
						display: flex;
						align-items: baseline;
						font-size: 12px;
						text{
							font-size: 38rpx;
						}
					}
				}
				.pupu-box-item,.pupu-box-pay-item{
					width: 100%;
					padding-top: 20px;
					> view{
						padding: 10px 0;
					}
				}
				.pupu-box-pay-item{
					> view{
						padding: 6px 0;
					}
					.popu-content-amount{
						font-size: 28px;
						color: red;
					}
					.popu-content-title{
						font-weight: bold;
					}
				}
				.popu-content-num{
					> text{
						margin-right: 10px;
					}
				}
				.popu-content-btn{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-around;
					margin: 30px 0 20px;
					.popu-content-btn-item{
						width: 30%;
						height: 34px;
						font-size: 14px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 100px;
					}
					.cancelBtn{
						background-color: #f8f8f8;
						color: #666;
					}
					.okbtn{
						background-color: #f70000;
						color: #FFFFFF;
						width: 65%;
						.payAmount{
							margin-left: 5px;
						}
					}
					.cartbtn{
						background-color: #ffa60c;
						color: #FFFFFF;
						width: 65%;
					}
				}
		}
	}
</style>