<template>
	<view class="shop-detail-page">
		<HeaderCom></HeaderCom>
		<scroll-view scroll-y="true" class="scroll-view">
			<swiper class="swiper" circular indicator-dots>
				<swiper-item v-for="(item,index) in detailData.rollingImagesResource" :key="index" class="swiper-item">
					<view class="swiper-img">
						<img :src="item.url" style="width: 100%;height: 750rpx;" alt="" />
						<!-- <image :src="item.url" mode="aspectFit"></image> -->
					</view>
				</swiper-item>
			</swiper>
			<view class="detail">
				<view class="name">{{detailData.name||''}}</view>
				<view class="info">
					<image src="@/static/an/point.gif" mode="" class="point-icon"></image>
					<view class="point">{{detailData.mallPoint||''}}</view>
					<!-- <view class="price">¥{{detailData.price.sale||0}}</view> -->
				</view>
				<view class="freight">{{feeRule}}</view>
			</view>
			<view class="introduce">
				<view class="title">详情介绍</view>
				<!-- <img :src="detailData.detailImagesResource[0].url" alt="" style="width: 100%;"> -->
				<template v-for="(item,index) in detailData.detailImagesResource">
					<img :src="item.url" mode="aspectFit" :key="index" style="width: 100%;"></img>
				</template>
			</view>
			<!-- v-if="detailData.status == 1" -->
			<view class="footer">
				<view class="left">
					<view class="left-item" @click="goHome">
						<image src="@/static/shop/sy.png" mode="aspectFit" class="icon"></image>
						首页
					</view>
					<view class="left-item" @click="handleCustomer">
						<image src="@/static/shop/kf.png" mode="aspectFit" class="icon"></image>
						客服
					</view>
					<view class="left-item" @click="copy">
						<image src="@/static/shop/fx.png" mode="aspectFit" class="icon"></image>
						分享
					</view>
				</view>
				<view class="purchase" @click="buy">立即抢购</view>
			</view>
		</scroll-view>
		<!-- 实物商品 -->
		<popup-view v-model="show" mode="bottom" border-radius="15" zIndex="1">
			<view class="popup-main">
				<view class="address">
					<view class="detail" @click="selectAddress" v-if="JSON.stringify(address) === '{}'">
						<view class="address-info">
							<view class="info">
								<image src="@/static/zy/index/address.png" mode="aspectFit" class="address-icon">
								</image>
								<view class="name">选择收货地址，让快递到家~</view>
							</view>
						</view>
						<image src="@/static/zy/index/jt.png" mode="aspectFit" class="arr-icon"></image>
					</view>
					<view class="detail" @click="selectAddress" v-else>
						<view class="address-info">
							<view class="info">
								<image src="@/static/zy/index/address.png" mode="aspectFit" class="address-icon">
								</image>
								<view class="name">{{address.receiver}}</view>
								<view class="phone">{{address.phone}}</view>
							</view>
							<view class="address-detail">{{address.province}} {{address.city}} {{address.area}}
								{{address.address}}</view>
						</view>
						<image src="@/static/zy/index/jt.png" mode="aspectFit" class="arr-icon"></image>
					</view>
					<!-- <image src="" mode="aspectFit" class="edit-icon"></image> -->
				</view>
				<view class="popup-header">
					<image :src="detailData.coverResource.url" mode="" class="popup-header-img"></image>
					<view class="popup-info">
						<view class="popup-info-name">{{detailData.name}}</view>
						<view class="popup-info-price">
							<view class="popup-info-price-left">
								<view class="popup-clover">
									<image src="@/static/an/point.gif" mode="" class="clover-img"></image>
									{{detailData.mallPoint}}
								</view>

								<view class="popup-price">
									<!-- <text class="popup-symbol">¥</text>{{detailData.price.sale}} -->
								</view>
							</view>
							<view class="operation">
								<image src="@/static/new/mine/sub.png" mode="" class="subs" @click="sub()"></image>
								<view class="operation-num">{{quantity}}</view>
								<image src="@/static/new/mine/add.png" mode="" class="add" @click="add()"></image>
							</view>
						</view>
					</view>
				</view>

				<view class="item">
					<view class="label">邮费</view>
					<view class="value">{{Number(previewData.deliveryFee)}}</view>
				</view>
				<view class="item">
					<view>实际支付</view>
					<view>
						<text>{{previewData.points}} 积分</text>
						<text style="margin-left: 10rpx;"
							v-if="previewData.deliveryFee > 0">¥{{Number(previewData.deliveryFee)}}</text>
					</view>
				</view>
				<view class="mains" v-if="payList.length > 0 && previewData.deliveryFee > 0">
					<view class="pay" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
						<view class="left">
							<image :src="item.img" mode="aspectFit" class="pay-icon"></image>
							{{item.label}}
						</view>
						<image src="@/static/new/address/s.png" mode="" class="select-icon" v-if="item.visible"></image>
						<image src="@/static/new/address/no.png" mode="" class="select-icon" v-else></image>
					</view>
				</view>
				<view class="agreement" @click="agreementVisible = !agreementVisible">
					<image src="@/static/new/address/s.png" mode="" class="agreement-icon" v-if="agreementVisible"></image>
					<image src="@/static/new/address/no.png" mode="" class="agreement-icon" v-else></image>
					我已满18岁，已阅读并同意
					<text class="agreement-color" @click.stop="agreementCk('index')">《用户协议》、</text>
					<text class="agreement-color" @click.stop="agreementCk('privacy')">《隐私政策》、</text>
					<text class="agreement-color" @click.stop="agreementCk('nonage-rule')">《儿童个人信息保护规则》、</text>
					<text class="agreement-color" @click.stop="agreementCk('nonage')">《支付服务协议》</text>
				</view>
				<view class="popup-footer">
					<view class="now-buy" @click="confirmBuy">
						立即支付
						<text>{{previewData.points}} 积分</text>
						<text style="margin-left: 20rpx;"
							v-if="previewData.deliveryFee > 0">¥{{Number(previewData.deliveryFee)}}</text>
					</view>
				</view>
			</view>
		</popup-view>
		<!-- 虚拟商品 -->
		<popup-view v-model="virtualShow" mode="bottom" border-radius="15" zIndex="1">
			<view class="popup-main">
				<view class="popup-header">
					<image :src="virtualDetail.productCoverResource.url" mode="" class="popup-header-img"></image>
					<view class="popup-info">
						<view class="popup-info-name">{{virtualDetail.productAbbreviation}}</view>
						<view class="popup-info-price">
							<view class="popup-info-price-left">
								<view class="popup-clover">
									<image src="@/static/an/point.gif" mode="" class="clover-img"></image>
									{{virtualDetail.mallPoint}}
								</view>
		
								<view class="popup-price">
									<!-- <text class="popup-symbol">¥</text>{{detailData.price.sale}} -->
								</view>
							</view>
							<!-- <view class="operation">
								<image src="@/static/new/mine/sub.png" mode="" class="subs" @click="sub()"></image>
								<view class="operation-num">{{quantity}}</view>
								<image src="@/static/new/mine/add.png" mode="" class="add" @click="add()"></image>
							</view> -->
						</view>
					</view>
				</view>
		
				<!-- <view class="item">
					<view class="label">邮费</view>
					<view class="value">{{Number(previewData.deliveryFee)}}</view>
				</view> -->
				<view class="item">
					<view>实际支付</view>
					<view>
						<text>{{virtualDetail.points}} 积分</text>
						<text style="margin-left: 10rpx;"
							v-if="virtualDetail.deliveryFee > 0">¥{{Number(virtualDetail.deliveryFee)}}</text>
					</view>
				</view>
				<view class="item" v-if="virtualDetail.deliveryType === 'BIRD_VIRTUAL'">
					<view>充值账号</view>
					<view>
						<input type="text" placeholder="请输入充值账号" style="font-weight: bold;font-size: 28rpx;color: #333333;text-align: right;" v-model="account">
					</view>
				</view>
				<view class="item" v-if="virtualDetail.tips">
					<!-- <view>领取方式</view> -->
					<view style="word-break: break-all;font-size: 24rpx;color: #999;">
						{{virtualDetail.tips}}
					</view>
				</view>
				<!-- <view class="mains" v-if="payList.length > 0">
					<view class="pay" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
						<view class="left">
							<image :src="item.img" mode="aspectFit" class="pay-icon"></image>
							{{item.label}}
						</view>
						<image src="@/static/new/address/s.png" mode="" class="select-icon" v-if="item.visible"></image>
						<image src="@/static/new/address/no.png" mode="" class="select-icon" v-else></image>
					</view>
				</view> -->
				<view class="agreement" @click="agreementVisible = !agreementVisible">
					<image src="@/static/new/address/s.png" mode="" class="agreement-icon" v-if="agreementVisible"></image>
					<image src="@/static/new/address/no.png" mode="" class="agreement-icon" v-else></image>
					我已满18岁，已阅读并同意
					<text class="agreement-color" @click.stop="agreementCk('index')">《用户协议》、</text>
					<text class="agreement-color" @click.stop="agreementCk('privacy')">《隐私政策》、</text>
					<text class="agreement-color" @click.stop="agreementCk('nonage-rule')">《儿童个人信息保护规则》、</text>
					<text class="agreement-color" @click.stop="agreementCk('nonage')">《支付服务协议》</text>
				</view>
				<view class="popup-footer">
					<view class="now-buy" @click="confirmVirtualBuy">
						立即支付
						<text>{{virtualDetail.points}} 积分</text>
						<text style="margin-left: 20rpx;"
							v-if="virtualDetail.deliveryFee > 0">¥{{Number(virtualDetail.deliveryFee)}}</text>
					</view>
				</view>
			</view>
		</popup-view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/shop/detail"></page-popup>
		
		<template v-if="isPayDlgVisible">
			<isPayDlgVue @isOk="isPayStatus" @isCancel="isCancelCk" v-if="isPayDlgVisible" @againPay="againPay"></isPayDlgVue>
		</template>
	</view>
</template>

<script>
	import {
		myMixins
	} from "@/mixins/mixins.js";
	import {
		productDetailApi,
		favorItemApi,
		delFavorItemApi
	} from '@/API/product.js'
	import {
		carriageRule
	} from '@/API/shop.js'

	import {
		customerApi,
		userAddress,
		shareApi
	} from '@/API/user.js'
	import {
		orderPreview,
		createShopOrder
	} from '@/API/order.js'
	import { virtualOrderPreviewApi,virtualShopOrderApi,virtualOrderPaidApi } from '@/API/virtual.js'
	import HeaderCom from '@/pages/components/header.vue'
	import ConfirmCom from './confirm'
	import isPayDlgVue from '@/pages/components/isPayDlg.vue'
	import {
		orderPaidApi
	} from '@/API/index.js'
	import reportClickFn from '@/utils/report.js'
	export default {
		mixins: [myMixins],
		data() {
			return {
				id: "",
				show: false, //立即购买弹框
				quantity: 1,
				detailData: {
					detailImages: "",
					price: {},
					coverResource: {}
				}, //商品详情
				scroll: 0,
				footerType: "", //是否现实底部
				customer: '',
				feeRule: '',
				address: {},
				previewData: {},
				shareUrl: '',
				shareqr: '',
				payList: [],
				payType: '',
				isBtnStatus:false,
				isPayDlgVisible:false,
				orderNo:'',
				agreementVisible:false,
				isPayBtn:false,
				virtualShow:false,
				virtualDetail:{
					productCoverResource:{}
				},
				account:'',
				isVirtual:false,//是否虚拟商品
			}
		},
		components: {
			HeaderCom,
			ConfirmCom,
			isPayDlgVue
		},
		onLoad(opation) {
			if (opation.shareqr) {
				this.shareqr = opation.shareqr
			}
			this.id = opation.id
			this.footerType = opation.footer ? opation.footer : ''
			this.getDetail()
			// this.getdeliveryFee()
			if (uni.getStorageSync('box-token')) {
				this.getCustomer()
			}

			uni.$on('backAddressParams', params => {
				if (params.id) {
					this.address = params
					this.getOrderPreview()
				}
			});
			this.getCarriageRule()
			this.getShare()
		},
		onPageScroll(res) {
			this.scroll = res.scrollTop
		},
		methods: {
			
			// 用户协议 隐私政策
			agreementCk(type){
				uni.navigateTo({
					url:`/pages/agreement/${type}`
				})
			},
			goPage(type){
				uni.navigateTo({
					url:`/pages/agreement/nonage`
				})
			},
			againPay(){
				
				if(this.detailData.type === 'VIRTUAL'){
					this.confirmVirtualBuy()
				}else{
					this.confirmBuy()
				}
				
			},
			isCancelCk(){
				this.isPayDlgVisible = false
			},
			isPayStatus(){
				this.getOrderPaid(this.orderNo,'click')
			},
			getShare() {
				shareApi().then(res => {
					console.log(res)
					if (res.code === 200) {
						if (res.data) {
							this.shareUrl = res.data
						}
					}
				})
			},
			getOrderPreview() {
				uni.showLoading()
				orderPreview({
					productId: this.detailData.id,
					quantity: this.quantity,
					userAddressId: this.address.id ? this.address.id : ''
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {

						this.previewData = res.data

						this.payList = []
						this.previewData.methods.forEach(item => {
							let objToAdd = null;
							if (item === 'ALIPAY') {
								objToAdd = {
									label: '支付宝支付',
									type: 'ALIPAY',
									visible: false,
									height: '30rpx',
									width: '30rpx',
									img: '../../static/new/pay/zfb.png',
								};
							} else if (item === 'WECHAT') {
								objToAdd = {
									label: '微信支付',
									type: 'WECHAT',
									visible: false,
									width: '34rpx',
									height: '29rpx',
									img: '../../static/new/pay/wx.png',
								};
							} else if (item === 'POINTS') {
								objToAdd = {
									label: "积分支付",
									type: 'POINTS',
									visible: false,
									img: '../../static/an/point.gif',
									width: '30rpx',
									height: '31rpx'
								};
							} else if (item === 'NONE') {
								objToAdd = {
									label: "无需支付",
									type: 'NONE',
									visible: false,
									img: '',
									width: '32rpx',
									height: '34rpx'
								};
							} else if (item === 'COIN') {
								objToAdd = {
									label: "代币支付",
									type: 'COIN',
									visible: false,
									img: '../../static/an/point.gif',
									width: '32rpx',
									height: '34rpx'
								};
							}

							// 只有在objToAdd被赋值的情况下才添加到payList
							if (objToAdd) {
								if (objToAdd.type === 'ALIPAY') {
									// 如果是WECHAT类型，则先添加到数组第一位
									this.payList.unshift(objToAdd);
								} else {
									// 其他类型添加到数组末尾
									this.payList.push(objToAdd);
								}
							}
						});
						this.payList[0].visible = true
						console.log("this.payList[0].type:", this.payList)
						this.payType = this.payList[0].type
						// if(this.previewData.methods){
						// 	this.previewData.methods.forEach(item => {
						// 		if(item === 'ALIPAY'){
						// 			this.payList.push({label:"支付宝支付",type:'ALIPAY',visible:false,img:'../../static/index/zfb.png',width:'30rpx',height:'30rpx'})
						// 		}else if(item === 'WECHAT'){
						// 			this.payList.push({label:"微信支付",type:'WECHAT',visible:false,img:'../../static/index/wx.png',width:'34rpx',height:'29rpx'})
						// 		}else if(item === 'POINTS'){
						// 			this.payList.push({label:"积分支付",type:'POINTS',visible:false,img:'../../static/mine/jf.png',width:'30rpx',height:'31rpx'})
						// 		}else if(item === 'NONE'){
						// 			this.payList.push({label:"无需支付",type:'NONE',visible:false,img:'',width:'32rpx',height:'34rpx'})
						// 		}
						// 	})
						// 	this.payList[0].visible = true
						// 	this.payType = this.payList[0].type
						// }
						// this.channelGet()
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			// 切换支付方式
			payChange(index, item) {
				this.payList.forEach((v, i) => {
					v.visible = false;
				})
				this.payType = item.type
				this.payList[index].visible = !this.payList[index].visible
				// this.payinfoUrl = ''
			},
			// 选择地址
			selectAddress() {
				uni.navigateTo({
					url: `/pages/mine/address?type=select`
				})
			},
			getCarriageRule() {
				carriageRule().then(res => {
					if (res.code === 200) {
						this.feeRule = res.data
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			copy() {

				let search = window.location.href
				uni.setClipboardData({
					data: `${search}`,
				})
				console.log(search);

			},
			handleCustomer() {
				window.open(this.customer)
			},
			// 获取详情
			getDetail() {
				uni.showLoading()
				let header = {}
				if (this.shareqr) {
					header = {
						'share-qr': this.shareqr
					}
				} else {
					header = {}
				}
				productDetailApi({
					id: this.id
				}, header).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						// res.data.rollingImagesResource.unshift(res.data.coverResource)
						this.detailData = res.data
					} else {
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			goBack() {
				uni.navigateBack()
			},
			// 滚动到顶部
			goTop() {
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0 // number number number！
				});
			},
			getCustomer() {
				customerApi().then(res => {
					if (res.code === 200) {
						this.customer = res.data
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			// 减
			sub() {
				if (this.quantity === 1) {
					this.$api.msg("不能小于1！");
					return;
				}
				if (this.quantity > 1) {
					this.quantity--
				}
				this.getOrderPreview()
			},
			// 加
			add() {
				this.quantity++
				this.getOrderPreview()
			},
			// 获取地址列表
			getAddress() {
				uni.showLoading()
				userAddress({
					page: 1,
					size: 10
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						res.data.content.forEach(item => {
							if (item.isDefault === 1) {
								this.address = item
							}
						})
						// this.getDetail()
						this.getOrderPreview()
						// this.getUserInfo()
					} else {
						this.$api.msg(res.message)
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 立即购买弹框
			buy() {
				if(this.detailData.type === 'VIRTUAL'){
					console.log("aaa")
					virtualOrderPreviewApi({productId:this.detailData.id}).then(res => {
						if(res.code === 200){
							console.log(res)
							this.virtualDetail = res.data
							this.payList = []
							this.virtualDetail.methods.forEach(item => {
								let objToAdd = null;
								if (item === 'ALIPAY') {
									objToAdd = {
										label: '支付宝支付',
										type: 'ALIPAY',
										visible: false,
										height: '30rpx',
										width: '30rpx',
										img: '../../static/new/pay/zfb.png',
									};
								} else if (item === 'WECHAT') {
									objToAdd = {
										label: '微信支付',
										type: 'WECHAT',
										visible: false,
										width: '34rpx',
										height: '29rpx',
										img: '../../static/new/pay/wx.png',
									};
								} else if (item === 'POINTS') {
									objToAdd = {
										label: "积分支付",
										type: 'POINTS',
										visible: false,
										img: '../../static/an/point.gif',
										width: '30rpx',
										height: '31rpx'
									};
								} else if (item === 'NONE') {
									objToAdd = {
										label: "无需支付",
										type: 'NONE',
										visible: false,
										img: '',
										width: '32rpx',
										height: '34rpx'
									};
								} else if (item === 'COIN') {
									objToAdd = {
										label: "代币支付",
										type: 'COIN',
										visible: false,
										img: '../../static/an/point.gif',
										width: '32rpx',
										height: '34rpx'
									};
								}
							
								// 只有在objToAdd被赋值的情况下才添加到payList
								if (objToAdd) {
									if (objToAdd.type === 'ALIPAY') {
										// 如果是WECHAT类型，则先添加到数组第一位
										this.payList.unshift(objToAdd);
									} else {
										// 其他类型添加到数组末尾
										this.payList.push(objToAdd);
									}
								}
							});
							this.payList[0].visible = true
							console.log("this.payList[0].type:", this.payList)
							this.payType = this.payList[0].type
							this.virtualShow = true
						}else{
							this.$api.msg(res.message)
						}
						
					})
					
				}else{
					this.getAddress()
					this.quantity = 1
					this.show = true
				}
				

				// 兑换预览埋点
				reportClickFn('product_detail_preview_clk')
			},
			// 虚拟商品购买
			confirmVirtualBuy(){
				this.isVirtual = true
				if(this.isPayBtn){
					return
				}
				this.isPayBtn = true
				setTimeout(()=>{
					this.isPayBtn = false;
				}, 2000);
				if(!this.agreementVisible){
					this.$api.msg("请阅读并同意《用户协议》、《隐私政策》、《儿童个人信息保护规则》、《支付服务协议》")
					return
				}
				uni.hideLoading()
				clearInterval(this.timer)
				this.timer = null
				if(this.isBtnStatus){
					return
				}
				this.isBtnStatus = true
				setTimeout(()=>{
					this.isBtnStatus = false;
				}, 2000);
				let data = {
					productId:this.detailData.id,
					method:'POINTS',
					// method:this.payType,
					source:'EXCHANGE'
				}
				if(this.virtualDetail.deliveryType === 'BIRD_VIRTUAL' && !this.account){
					this.$api.msg('请输入充值账号')
					return
				}
				 // v-if="virtualDetail.deliveryType === 'BIRD_VIRTUAL'"
				if(this.account){
					data['account'] = this.account.replace(/\s+/g, '')
				}
				// if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.account))) {
				// 	this.$api.msg('请输入正确的手机号');
				// 	return;
				// }
				virtualShopOrderApi(data).then(res =>  {
					console.log("this.payType:",this.payType)
					if (res.code === 200) {
						// if (this.payType === 'WECHAT' || this.payType === 'ALIPAY') {
						// 	window.location.href = res.data.payParams.payinfo
						// }
						if (res.data.payParams.payinfo) {
							window.location.href = res.data.payParams.payinfo
						}
						this.orderNo = res.data.no
						this.isPayDlgVisible = true
						console.log("res.data.no:",res.data.no)
						this.getVirtualOrderPaid(res.data.no)
						let clearTime = 0
						this.timer = setInterval(() => {
							this.getVirtualOrderPaid(res.data.no)
							clearTime += 3
							if (clearTime == 30) {
								uni.hideLoading()
								clearInterval(this.timer)
								this.timer = null
								// this.$api.msg("未查询到支付结果")
							}
						}, 3000);
					} else {
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			getVirtualOrderPaid(no){
				virtualOrderPaidApi({
					no
				}).then(payResult => {
					if (payResult.data) {
						// 实际兑换埋点
						// reportClickFn('product_detail_ preview_pay_clk')
						clearInterval(this.timer); // 清除定时器
						this.timer = null;
						this.$api.msg('支付成功')
						this.isPayDlgVisible = false
						uni.navigateTo({
							url: `/pages/mine/payVirtualSuccess?no=${no}&price=${this.virtualDetail.deliveryFee}&point=${this.virtualDetail.points}&payType=${this.payType}&productName=${this.virtualDetail.productName}`
						})
						this.quantity = 1
						this.show = false
						uni.hideLoading()
					}else{
						if(types === 'click'){
							this.$api.msg('未查询到支付结果')
						}
					}
				}).catch(err => {
					console.log("aaa")
					clearInterval(this.timer); // 清除定时器
					this.timer = null;
					uni.hideLoading()
				})
			},
			// 确认购买
			confirmBuy() {
				this.isVirtual = false
				// if(this.previewData.methods.length === 0){
				// 	return
				// }
				if(this.isPayBtn){
					return
				}
				this.isPayBtn = true
				setTimeout(()=>{
					this.isPayBtn = false;
				}, 2000);
				if(!this.agreementVisible){
					this.$api.msg("请阅读并同意《用户协议》、《隐私政策》、《儿童个人信息保护规则》、《支付服务协议》")
					return
				}
				uni.hideLoading()
				clearInterval(this.timer)
				this.timer = null
				if(this.isBtnStatus){
					return
				}
				this.isBtnStatus = true
				setTimeout(()=>{
					this.isBtnStatus = false;
				}, 2000);
				if (JSON.stringify(this.address) === '{}') {
					this.$api.msg('请选择地址')
					return
				}
				// if(this.payType === 'POINTS' && this.detailData.mallPoint > this.infoDetail.points){
				// 	return
				// }
				let data = {
					productId: this.id,
					userAddressId: this.address.id,
					// method: this.payType,
					method: 'POINTS',
					methodCarriage: this.payType,
					quantity: this.quantity,
					source:'EXCHANGE'
				}
				// uni.showLoading()
				createShopOrder(data).then(res => {
					console.log("this.payType:",this.payType)
					if (res.code === 200) {
						// if (this.payType === 'WECHAT' || this.payType === 'ALIPAY') {
						// 	window.location.href = res.data.payParams.payinfo
						// }
						if (res.data.payParams.payinfo) {
							window.location.href = res.data.payParams.payinfo
						}
						this.orderNo = res.data.no
						this.isPayDlgVisible = true
						this.getOrderPaid(res.data.no)
						let clearTime = 0
						this.timer = setInterval(() => {
							this.getOrderPaid(res.data.no)
							clearTime += 3
							if (clearTime == 30) {
								uni.hideLoading()
								clearInterval(this.timer)
								this.timer = null
								// this.$api.msg("未查询到支付结果")
							}
						}, 3000);
					} else {
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			goHome() {
				uni.switchTab({
					url: `/pages/index/new-index`
				})
			},
			getOrderPaid(no,types) {
				orderPaidApi({
					no
				}).then(payResult => {
					if (payResult.data) {
						// 实际兑换埋点
						reportClickFn('product_detail_ preview_pay_clk')
						clearInterval(this.timer); // 清除定时器
						this.timer = null;
						this.$api.msg('支付成功')
						this.isPayDlgVisible = false
						if(this.isVirtual){
							uni.navigateTo({
								url: `/pages/shop/paySuccess?no=${no}&price=${this.virtualDetail.totalAmount}&point=${this.virtualDetail.points}&payType=${this.payType}&productName=${this.virtualDetail.productName}&quantity=${this.virtualDetail.quantity}`
							})
						}else{
							uni.navigateTo({
								url: `/pages/shop/paySuccess?no=${no}&price=${this.previewData.deliveryFee}&point=${this.previewData.points}&payType=${this.payType}&productName=${this.previewData.productName}&quantity=${this.previewData.quantity}`
							})
						}
						
						this.quantity = 1
						this.virtualShow = false
						uni.hideLoading()
					}else{
						if(types === 'click'){
							this.$api.msg('未查询到支付结果')
						}
					}
				}).catch(err => {
					clearInterval(this.timer); // 清除定时器
					this.timer = null;
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}

	.shop-detail-page {

		// padding-top: 112rpx;
		.scroll-view {

			.swiper {
				width: 750rpx;
				height: 750rpx;

				// height: 480rpx;
				.swiper-item {
					width: 750rpx;
					height: 750rpx;

					// height: 480rpx;
					.swiper-img {
						width: 750rpx;
						height: 750rpx;
						// height: 480rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #F5F5F5;
					}
				}
			}

			.detail {
				width: 750rpx;
				background: #FFFFFF;
				padding: 24rpx 32rpx 32rpx 32rpx;

				.name {
					width: 686rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.info {
					display: flex;
					align-items: center;
					margin-top: 16rpx;

					.point-icon {
						width: 48rpx;
						height: 48rpx;
					}

					.point {
						margin-left: 16rpx;
						font-weight: 800;
						font-size: 40rpx;
						color: #000000;
					}

					.price {
						margin-left: 24rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #999999;
						text-decoration: line-through;
					}
				}

				.freight {
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					margin-top: 4rpx;
				}
			}

			.introduce {
				width: 100%;
				margin-top: 16rpx;
				padding-bottom: 144rpx;
				background-color: #fff;

				.title {
					padding: 24rpx 32rpx;
					font-weight: 800;
					font-size: 28rpx;
					color: #000000;
				}
			}

			.footer {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 144rpx;
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;

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


					.left-item {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						font-weight: 500;
						font-size: 20rpx;
						color: #666666;
						margin-right: 56rpx;

						.icon {
							width: 48rpx;
							height: 48rpx;
							margin-bottom: 8rpx;
						}
					}
				}

				.purchase {
					width: 328rpx;
					height: 96rpx;
					background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}

		.popup-main {
			padding: 30rpx 22rpx;
			// padding: 32rpx 32rpx 0rpx 32rpx;
			z-index: 9991;

			// max-height: 900rpx;
			// position: relative;
			.address {
				// width: 686rpx;
				width: 100%;
				// background: #FFFFFF;
				// border-radius: 8rpx;
				// padding: 24rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 18rpx;

				.detail {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.address-info {
						.info {
							display: flex;
							align-items: center;

							.address-icon {
								width: 30rpx;
								height: 40rpx;
								margin-right: 10rpx;
							}

							.name {
								font-weight: 800;
								font-size: 32rpx;
								color: #000000;
								// max-width: 250rpx;
								// overflow: hidden;
								// white-space: nowrap;
								// text-overflow: ellipsis;
							}

							.phone {
								font-weight: 500;
								font-size: 24rpx;
								color: #666666;
								margin-left: 8rpx;
							}
						}

						.address-detail {
							width: 600rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-weight: 500;
							font-size: 24rpx;
							color: #666666;
							margin-top: 12rpx;
						}
					}

					.arr-icon {
						width: 20rpx;
						height: 30rpx;
					}

				}

				.edit-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.popup-header {
				display: flex;
				align-items: center;
				height: 158rpx;

				.popup-header-img {
					width: 158rpx;
					height: 158rpx;
					border-radius: 10rpx;
				}

				.popup-info {
					margin-left: 25rpx;
					width: 500rpx;

					.popup-info-name {

						width: 482rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}

					.popup-info-price {
						margin-top: 60rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.popup-info-price-left {
							display: flex;
							align-items: center;

							.popup-price {
								display: flex;
								align-items: center;
								font-weight: 300;
								font-size: 16rpx;
								color: #888888;
								margin-left: 20rpx;
								height: 50rpx;
								display: flex;
								align-items: flex-end;
								padding-bottom: 8rpx;
								text-decoration: line-through;

								.popup-symbol {
									// font-size: 20rpx;
								}
							}

							.popup-clover {
								display: flex;
								align-items: center;
								font-weight: bold;
								font-size: 42rpx;
								color: #000000;
								height: 50rpx;

								.clover-img {
									width: 48rpx;
									height: 48rpx;
									margin-right: 6rpx;
								}
							}
						}

						.operation {
							display: flex;
							align-items: center;
							width: 144rpx;
							height: 48rpx;
							border-radius: 8rpx;

							.subs {
								height: 48rpx;
								width: 48rpx;
							}

							.operation-num {
								height: 48rpx;
								width: 48rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 28rpx;
								color: #000000;
								border-top: 2rpx solid #E6E6E6;
								border-bottom: 2rpx solid #E6E6E6;
							}

							.add {
								height: 48rpx;
								width: 48rpx;
							}
						}
					}
				}
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 685rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

			.popup-title {
				color: #333333;
				font-weight: 800;
				font-size: 28rpx;
				margin-top: 48rpx;
				margin-bottom: 24rpx;
			}

			.specification-list {
				// display: flex;
				// align-items: center;
				// flex-wrap: wrap;

				width: 100%;
				max-height: 600rpx;
				margin-bottom: 50rpx;
				padding-bottom: 220rpx;
				overflow-y: auto;

				.specification-item {
					z-index: 9999;
					display: inline-block;
					padding: 0 64rpx;
					// width: 200rpx;
					height: 56rpx;
					line-height: 56rpx;
					border: 2rpx solid #B3B3BE;
					border-radius: 28rpx;
					// display: flex;
					// align-items: center;
					// justify-content: center;
					font-size: 24rpx;
					color: #B3B3BE;
					margin-right: 32rpx;
					margin-bottom: 32rpx;
				}

				.specification-item-active {
					border: 2rpx solid #333333;
					color: #333333;
				}
			}

			.popup-footer {
				z-index: 9999;
				background-color: #fff;
				// padding-bottom: 20rpx;
				margin-top: 30rpx;

				.footer-num {
					// display: flex;
					// align-items: center;
					// justify-content: space-between;
					z-index: 9999;
					margin-top: 20rpx;

					.footer-info {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 800;
						color: #333333;

						.footer-info-num {
							margin-left: 10rpx;
							font-size: 24rpx;
							color: #999999;
							font-weight: 400;
						}
					}

					.item-step {
						margin-top: 17rpx;
						z-index: 9999;
						display: flex;
						align-items: center;

						.item-sub {
							width: 41rpx;
							height: 41rpx;
						}

						.item-num {
							width: 78rpx;
							font-size: 28rpx;
							color: #333333;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.item-add {
							width: 41rpx;
							height: 41rpx;
						}
					}
				}

				.now-buy {
					z-index: 9999;
					margin-top: 46rpx;


					width: 706rpx;
					height: 88rpx;
					background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
					border-radius: 16rpx;


					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}

		.sss {
			width: 100%;
			background-size: cover;
			background-repeat: no-repeat;
		}
	}

	.mains {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-bottom: 24rpx;

		// margin-left: 32rpx;
		.pay {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 104rpx;
			padding: 0 24rpx;


			.left {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				display: flex;
				align-items: center;

				.pay-icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}

			.select-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	
	.agreement{
		// margin: 40rpx;
		width: 670rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 46rpx;
		.agreement-icon{
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
			vertical-align: middle;
		}
		.agreement-color{
			color: #0080FF;
		}
	}
</style>