<template>
		<view class="buy-popup">
			<image src="@/static/review/close.png" mode="aspectFit" class="close-icon" @click="close"></image>
			<view class="main-top">
				<view class="header">确认订单</view>
				<view class="headerline">{{detailData.slogan}}</view>
				<view class="box-detail">
					<view class="detail">
						<image v-if="previewData.coverResource" :src="previewData.coverResource.url" mode="aspectFit" class="box-img"></image>
						<view class="box-info">
							<view class="box-name">{{previewData.name}}</view>
							<view class="box-price">
								<view class="price">¥ {{Number(previewData.amount.sale)}}</view>
								<view class="box-num" v-if="previewData.type">数量 X{{priceTypeNum[previewData.type]}}</view>
							</view>
						</view>
					</view>
					
					<!-- 支付 -->
					<view class="pay-main" v-if="payList.length > 0">
						<view class="pay" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
							<view class="pay-name">
								<image :src="item.img" mode="aspectFit" class="pay-icon"></image>
								{{item.label}}
							</view>
							<view class="select-icon">
								<view class="dian" v-if="item.visible"></view>
							</view>
							<!-- <image src="@/static/home/yes.png" mode="" class="select-icon" v-if="item.visible"></image>
							<image src="@/static/home/no.png" mode="" class="select-icon" v-else></image> -->
						</view>
					</view>
					
					<view class="list-item">
						<view class="item-label">
							商品总价<text class="label-small" v-if="previewData.type"> 共{{priceTypeNum[previewData.type]}}件</text>
						</view>
						<view class="item-value">¥ {{Number(amountTotal || 0)}}</view>
					</view>
					<view class="list-item">
						<view class="item-label">
							活动优惠
						</view>
						<view class="item-value red">-¥ {{Number(previewData.discountAmount || 0)}}</view>
					</view>
					<!-- <view class="list-item">
						<view class="item-label">
							合计
						</view>
						<view class="item-value">¥ {{Number(previewData.amount.settlement || 0)}}</view>
					</view> -->
				</view>
			</view>
			
			<view class="main-bottom">
				<view class="agreement" @click="agreementVisible = !agreementVisible">
					<view class="agreement-icon" style="display: inline-block;">
						<view class="dian" v-if="agreementVisible"></view>
					</view>
					我已满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="total">
					合计：¥{{Number(previewData.amount.settlement || 0)}}，<text class="red">共减¥ {{Number(previewData.discountAmount || 0)}}</text>
				</view>
				<view class="pay-btn" @click="pay">
					<view class="pay-txt">立即支付 ¥{{previewData.amount.settlement || 0}}</view>
					<!-- <view class="payDiscountTip">11111</view> -->
					<view v-if="previewData.payDiscountTip" class="payDiscountTip">{{previewData.payDiscountTip}}</view>
				</view>
				<view class="footer-txt">支付后请在“仓库”中进行手动回收或发货</view>
			</view>
			<!-- priceTypeNum -->
			<!-- discountAmount -->
			
			
			
			<!-- <view class="header-info">
				<image v-if="previewData.coverResource" :src="previewData.coverResource.url" mode="aspectFit"
					class="info-img"></image>
				<view class="info-right">
					<view class="right-name">{{previewData.name}}</view>
					<view class="right-price">原价 ¥{{Number(previewData.amount.sale)}}</view>
					<view class="right-price" style="text-align: right;color: red;height: 36rpx;"><template v-if="previewData.discountAmount">立减 ¥<text style="color: red;">{{Number(previewData.discountAmount)}}</text></template></view>
					<view class="item">
						<image src="@/static/home/d-x.png" mode="" class="d-x"></image>
						<view class="label">实付金额</view>
						<view class="value">¥ {{previewData.amount.settlement || 0}}</view>
					</view>
				</view>
				<image src="@/static/home/c-x.png" mode="" class="c-x"></image>
			</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/home/yes.png" mode="" class="select-icon" v-if="item.visible"></image>
					<image src="@/static/home/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="goPage">《支付服务协议》</text>
			</view>
			<view class="popup-buy" @click="pay">立即开盒 ¥{{previewData.amount.settlement || 0}}</view> -->
		</view>
</template>

<script>
	import {
		boxOrderReviewApi,
		boxOrderApi,
		boxOrderPaidApi,
		activityReviewApi,
		activityBuyApi,
		activityOrderApi,
		activityReviewSourceApi,
		activitySourceBuyApi
	} from '@/API/index.js'
	import { coinPaidApi,payMethodApi,userInfo } from '@/API/user.js'
	import reportClickFn from '@/utils/report.js'
	import { mathAdd } from '@/utils/mathUtils.js'
	import {
		showWebview
	} from '@/utils/webViewCom.js'
	import '@/static/quill.snow.css'
	export default {
		data() {
			return {
				type: '',
				typeIndex:0,
				previewData: {
					amount:{}
				}, //预览订单
				timer: null, //盲盒购买
				rookieTimer:null,//新手盲盒购买
				payList:[],//支付方式
				payType:'',
				boxOrderNo:'',
				isTopUp:false,
				infoDetail:{},
				payLink:'',
				orderSn:'',
				payinfoUrl:'',
				timeSec:0,
				userInfo:{},
				isTip:true,
				agreementVisible:false,
				isPayBtn:false,
				priceTypeNum:{
					SINGLE: "1",
					TRIPLE: "3",
					PENTA: "5",
					NINE: "9"
				},
				amountTotal:0
			}
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			isCard: {
				type: Boolean,
				default: true
			},//是否显示使用提示卡
			detailData: {
				type: Object,
				default: () => {
					coverResource: {}
				}
			},
			boxType:{
				type: String,
				default: ''
			},//buy 为不同购买   ROOKIE 新手盲盒   PREFERENTIAL_DAY 每日优惠  SPECIAL_PRICE 薅羊毛
			isDetail:{
				type: Boolean,
				default: false
			},//是否详情进入
			isActivityClick:{
				type: Boolean,
				default: false
			},//是否点击打开新人福利
			payNum:{
				type: Number,
				default: 0
			}
		},
		
		watch:{
			  timeSec(){
				  if(this.timeSec == 30){
					  clearInterval(this.rookieTimer)
					  this.rookieTimer = null
					  this.$api.msg('未查询到支付结果')
				  }
			  },
			  payNum(){
				  this.pay()
			  },
		},
		mounted() {
			this.payLink = ''
			if(this.boxType === 'ROOKIE'){
				// 活动购买预览
				reportClickFn('box_activity_review_clk')
				// 新手盲盒
				this.getActivityReview()
				// this.getPayMethod()
			}
			if(this.boxType === 'PREFERENTIAL_DAY'){
				// 活动购买预览
				reportClickFn('box_activity_review_clk')
				// 每日优惠
				this.getActivityReview()
			}
			if(this.boxType === 'SPECIAL_PRICE'){
				// 活动购买预览
				// reportClickFn('box_activity_review_clk')
				// 每日优惠
				this.getActivityReview()
			}
			if(this.boxType === 'PERIOD'){
				// 活动购买预览
				// reportClickFn('box_activity_review_clk')
				// 每日优惠
				this.getActivityReview()
			}
			if(this.boxType === 'NINE'){
				// 活动购买预览
				// reportClickFn('box_activity_review_clk')
				// 每日优惠
				this.getActivityReview()
			}
			
		},
		methods: {
			// 用户协议 隐私政策
			agreementCk(type){
				uni.navigateTo({
					url:`/pages/agreement/${type}`
				})
			},
			close(){
				this.$emit('close')
			},
			goPage(type){
				uni.navigateTo({
					url:`/pages/agreement/nonage`
				})
			},
			payTypeClick(){
				if (this.boxType === 'PREFERENTIAL_DAY') {
					 //每日优惠
					let data = {
						method: this.payType
					}
					uni.showLoading()
					activityOrderApi(data).then(result => {
						console.log("result.data:",result.data)
						// debugger
						// window.location.href = result.data.payParams.payinfo
						if(result.data.payParams.method !=="NONE"){
							window.location.href = result.data.payParams.payinfo
						}
							let clearTime = 0
						// 活动调起支付埋点
						reportClickFn('box_activity_review_pay_clk')
						if (result.code === 200) {
							this.timer = setInterval(() => {
								this.getBoxOrderPaid(result.data.no)
								clearTime += 3
								if(clearTime == 30){
									uni.hideLoading()
									clearInterval(this.timer)
									this.timer = null
									this.$api.msg("未查询到支付结果")
								}
							}, 3000);
						} else {
							this.$api.msg(result.message)
						}
					})
				} else if(this.boxType === 'buy') {
					// 普通盲盒购买
					let data = {
						boxId: this.detailData.id,
						type: this.type,
						method: this.payType
					}
					if (this.previewData.couponId) {
						data['couponId'] = this.previewData.couponId
					}
				
					uni.showLoading()
					boxOrderApi(data).then(result => {
						// 盲盒调起支付埋点
						reportClickFn('box_buy_review_pay_clk')
						if(this.isDetail){
							// 指定盲盒详情订单预览调起支付
							reportClickFn(`boxId_detail_review_pay_${this.detailData.id}`)
						}else{
							// 指定盲盒订单预览调起支付
							reportClickFn(`boxId_review_pay_${this.detailData.id}`)
						}
						
						if (result.code === 200) {
							
							// console.log("result.data:",result.data)
							// debugger
							if(result.data.payParams.method !=="NONE"){
								window.location.href = result.data.payParams.payinfo
							}
							
							let clearTime = 0
							this.getBoxOrderPaid(result.data.no)
							this.timer = setInterval(() => {
								this.getBoxOrderPaid(result.data.no)
								clearTime += 3
								if(clearTime == 30){
									uni.hideLoading()
									clearInterval(this.timer)
									this.timer = null
									this.$api.msg("未查询到支付结果")
								}
							}, 3000);
						} else {
							this.$api.msg(result.message)
						}
					}).catch(err => {
						uni.hideLoading()
					})
				}
			},
			// 使用提示卡
			card(){
				this.$emit('isOk')
				uni.navigateTo({
					url:`/pages/index/card?boxId=${this.previewData.boxId}&type=${this.type}&couponId=${this.previewData.couponId}`
				})
			},
			// 获取支付方式
			getPayMethod(){
				payMethodApi({type:'COIN_RECHARGE'}).then(res => {
					console.log(res)
					if(res.code === 200){
						this.payList = []
						res.data.forEach(item => {
						            let objToAdd = null;
						
						            if (item === 'ALIPAY') {
						                objToAdd = {
						                    label: '支付宝支付',
						                    type: 'ALIPAY',
						                    visible: false,
						                    height: '30rpx',
						                    width: '30rpx',
						                    img: '../../static/home/zfb.png',
						                };
						            } else if (item === 'WECHAT') {
						                objToAdd = {
						                    label: '微信支付',
						                    type: 'WECHAT',
						                    visible: false,
						                    width: '34rpx',
						                    height: '29rpx',
						                    img: '../../static/home/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: '../../static/home/wxzf.png',
						                    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
						this.payType = this.payList[0].type
					}
				})
			},
			// 切换支付方式
			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 = ''
			},
			// 活动盲盒订单预览
			getActivityReview(){
				activityReviewSourceApi({source:this.boxType}).then(res => {
					console.log("activityReviewSourceApi",res)
					if (res.code === 200) {
						if(this.isActivityClick){
							if(this.boxType === 'SPECIAL_PRICE'){
								// 点击打开薅羊毛订单预览数
								reportClickFn('box_special_price_clk_activity_review');
							}
							if(this.boxType === 'ROOKIE'){
								// 点击打开新人福利订单预览数
								reportClickFn('box_clk_activity_review');
							}
							if(this.boxType === 'NINE'){
								// 点击打开九连抽订单预览数
								reportClickFn('box_clk_nine_review');
							}
							if(this.boxType === 'PERIOD'){
								// 点击打开周期活动订单预览数
								reportClickFn('box_clk_period_review');
							}
							
						}else{
							if(this.boxType === 'SPECIAL_PRICE'){
								// 首次弹出薅羊毛订单预览数
								reportClickFn('box_special_price_activity_review');
							}
							if(this.boxType === 'ROOKIE'){
								// 首次弹出新人福利订单预览数
								reportClickFn('box_activity_review');
							}
							if(this.boxType === 'NINE'){
								// 首次弹出九连抽订单预览数
								reportClickFn('box_nine_review');
							}
							if(this.boxType === 'PERIOD'){
								// 首次弹出周期活动订单预览数
								reportClickFn('box_period_review');
							}
							
						}
						
						userInfo().then(result => {
							if (result.code === 200) {
								this.previewData = res.data
								this.userInfo = result.data
								
								// previewData.discountAmount
								let discountAmount = this.previewData.discountAmount || 0
								let settlement = this.previewData.amount.settlement || 0
								this.amountTotal = mathAdd(discountAmount,settlement)
								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/home/zfb.png',
								                };
								            } else if (item === 'WECHAT') {
								                objToAdd = {
								                    label: '微信支付',
								                    type: 'WECHAT',
								                    visible: false,
								                    width: '34rpx',
								                    height: '29rpx',
								                    img: '../../static/home/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: '../../static/home/wxzf.png',
								                    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
								
								
							} else {
								this.$api.msg(result.message)
							}
						})
						// this.boxId = res.data.boxId
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			// 订单预览
			getDetail() {
				boxOrderReviewApi({
					boxId: this.detailData.id,
					type: this.type
				}).then(res => {
					console.log(res.data)
					if (res.code === 200) {
						userInfo().then(result => {
							if (result.code === 200) {
								this.previewData = res.data
								this.userInfo = result.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/home/zfb.png',
								                };
								            } else if (item === 'WECHAT') {
								                objToAdd = {
								                    label: '微信支付',
								                    type: 'WECHAT',
								                    visible: false,
								                    width: '34rpx',
								                    height: '29rpx',
								                    img: '../../static/home/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: '../../static/home/wxzf.png',
								                    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
								
								
							} else {
								this.$api.msg(result.message)
							}
						})
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			// 切换购买类型
			goBuy(type,index) {
				this.typeIndex = index
				this.type = type
				this.getDetail()
			},
			// 立即支付
			pay() {
				if(this.isPayBtn){
					return
				}
				this.isPayBtn = true
				setTimeout(()=>{
					this.isPayBtn = false;
				}, 2000);
				if(!this.agreementVisible){
					this.$api.msg("请阅读并同意《用户协议》、《隐私政策》、《儿童个人信息保护规则》、《支付服务协议》")
					return
				}
				clearInterval(this.timer)
				this.timer = null
				uni.hideLoading()
				clearInterval(this.rookieTimer)
				this.rookieTimer = null
					let data = {
						method: this.payType,
						source:this.boxType
					}
					// uni.showLoading({
					// 	mask:true
					// })
					this.timeSec = 0
					activitySourceBuyApi(data).then(res => {
						if (res.code === 200) {
							if (res.data.payParams.payinfo) {
								// 活动调起支付埋点
								reportClickFn('box_activity_review_pay_clk')
								if(this.isActivityClick){
									
									if(this.boxType === 'SPECIAL_PRICE'){
										// 首次弹出薅羊毛订单预览调起支付数
										reportClickFn('box_clk_special_price_activity_review_pay');
									}
									if(this.boxType === 'ROOKIE'){
										// 点击打开新人福利订单预览调起支付数
										reportClickFn('box_clk_activity_review_pay');
									}
									if(this.boxType === 'NINE'){
										// 点击打开九连抽订单预览调起支付数
										reportClickFn('box_clk_nine_review_pay');
									}
									if(this.boxType === 'PERIOD'){
										// 点击打开周期活动订单预览调起支付数
										reportClickFn('box_clk_period_review_pay');
									}
								}else{
									if(this.boxType === 'SPECIAL_PRICE'){
										// 首次弹出薅羊毛订单预览调起支付数
										reportClickFn('box_special_price_activity_review_pay');
									}
									if(this.boxType === 'ROOKIE'){
										// 首次弹出新人福利订单预览调起支付数
										reportClickFn('box_activity_review_pay');
									}
									if(this.boxType === 'NINE'){
										// 首次弹出九连抽订单预览调起支付数
										reportClickFn('box_nine_activity_review_pay');
									}
									if(this.boxType === 'PERIOD'){
										// 首次弹出周期活动订单预览调起支付数
										reportClickFn('box_period_activity_review_pay');
									}
								}
								window.location.href = res.data.payParams.payinfo
								// showWebview(res.data.payParams.payinfo)
								// 新增支付弹框
								let listLength = 1
								if(this.previewData.type === 'SINGLE'){
									listLength = 1
								}else if(this.previewData.type === 'TRIPLE'){
									listLength = 3
								}else{
									listLength = 5
								}
								this.$emit('payStatus',{no:res.data.no,type:listLength,boxId:this.previewData.boxId})
								// 新增支付弹框
								let clearTime = 0
								this.getBoxOrderPaid(res.data.no)
								this.rookieTimer = setInterval(() => {
									console.log("result.data.no:",res.data.no)
									this.getBoxOrderPaid(res.data.no)
									clearTime += 3
									if(clearTime == 30){
										uni.hideLoading()
										clearInterval(this.rookieTimer)
										this.rookieTimer = null
										// this.$api.msg("未查询到支付结果")
									}
								}, 3000);
							}else{
								// this.boxOrderNo = res.data.boxOrderNo
								let clearTime = 0
								this.getBoxOrderPaid(res.data.no)
								this.rookieTimer = setInterval(() => {
									this.getBoxOrderPaid(res.data.no)
									clearTime += 3
									if(clearTime == 30){
										uni.hideLoading()
										clearInterval(this.rookieTimer)
										this.rookieTimer = null
										this.$api.msg("未查询到支付结果")
									}
								}, 3000);
							}
						} else {
							uni.hideLoading()
							this.$api.msg(res.message)
						}
					}).catch(err => {
						uni.hideLoading()
					})
			},
			// 盲盒购买订单回调
			getBoxOrderPaid(no) {
				boxOrderPaidApi({
					no
				}).then(payResult => {
					if (payResult.data) {
						// 活动实际支付埋点
						if (this.boxType === 'PREFERENTIAL_DAY') {
							reportClickFn('box_activity_review_pay_accomplish_clk')
						}
						// 盲盒实际支付埋点
						if (this.boxType === 'buy') {
							reportClickFn('box_buy_review_pay_accomplish_clk')
							
							if(this.isDetail){
								// 指定盲盒详情订单预览支付成功
								reportClickFn(`boxId_detail_review_pay_accomplish_${this.detailData.id}`)
							}else{
								// 指定盲盒订单预览支付成功
								reportClickFn(`boxId_review_pay_accomplish_${this.detailData.id}`)
							}
						}
						if(this.isActivityClick){
							if(this.boxType === 'SPECIAL_PRICE'){
								// 点击打开薅羊毛订单预览支付成功数
								reportClickFn('box_special_price_clk_activity_review_pay_accomplish');
							}
							if(this.boxType === 'ROOKIE'){
								// 点击打开新人福利订单预览支付成功数
								reportClickFn('box_clk_activity_review_pay_accomplish');
							}
							if(this.boxType === 'NINE'){
								// 点击打开九连抽订单预览支付成功数
								reportClickFn('box_clk_nine_review_pay_accomplish');
							}
							if(this.boxType === 'PERIOD'){
								// 点击打开周期活动订单预览支付成功数
								reportClickFn('box_clk_period_review_pay_accomplish');
							}
						}else{
							if(this.boxType === 'SPECIAL_PRICE'){
								// 首次弹出薅羊毛订单预览支付成功数
								reportClickFn('box_special_price_activity_review_pay_accomplish');
							}
							if(this.boxType === 'ROOKIE'){
								// 首次弹出新人福利订单预览支付成功数
								reportClickFn('box_activity_review_pay_accomplish');
							}
							if(this.boxType === 'NINE'){
								// 首次弹出九连抽订单预览支付成功数
								reportClickFn('box_nine_review_pay_accomplish');
							}
							if(this.boxType === 'PERIOD'){
								// 首次弹出周期活动订单预览支付成功数
								reportClickFn('box_period_review_pay_accomplish');
							}
						}
						clearInterval(this.timer); // 清除定时器
						this.timer = null;
						clearInterval(this.rookieTimer); // 清除定时器
						this.rookieTimer = null;
						this.$emit('isOk')
						this.$api.msg('支付成功')
						let listLength = 1
						if(this.previewData.type === 'SINGLE'){
							listLength = 1
						}else if(this.previewData.type === 'TRIPLE'){
							listLength = 3
						}else{
							listLength = 5
						}
						if(this.previewData.type === "NINE"){
							uni.navigateTo({
								url: `/pages/index/drawNine?no=${no}&boxId=${this.previewData.boxId}&type=${listLength}&isActivity=activity`
							})
						}else{
							uni.navigateTo({
								url: `/pages/index/draw?no=${no}&boxId=${this.previewData.boxId}&type=${listLength}&isActivity=activity`
							})
						}
						
						uni.hideLoading()
					}
				}).catch(err => {
					clearInterval(this.timer); // 清除定时器
					this.timer = null;
					uni.hideLoading()
				})
			},
			// 查询新手盲盒支付订单
			getCoinPaid(no) {
				coinPaidApi({
					no
				}).then(payResult => {
					if (payResult.data) {
						// 活动实际支付埋点
						reportClickFn('box_activity_review_pay_accomplish_clk')
						if(this.isActivityClick){
							// 点击打开新人福利订单预览支付成功数
							reportClickFn('box_clk_activity_review_pay_accomplish');
						}else{
							// 首次弹出新人福利订单预览支付成功数
							reportClickFn('box_activity_review_pay_accomplish');
						}
						clearInterval(this.rookieTimer); // 清除定时器
						this.rookieTimer = null;
						this.$emit('isOk')
						this.$api.msg('支付成功')
						uni.navigateTo({
							url: `/pages/index/draw?no=${this.boxOrderNo}&boxId=${this.previewData.boxId}&type=1`
						})
						uni.hideLoading()
					}
				}).catch(err => {
					clearInterval(this.timer); // 清除定时器
					this.timer = null;
					uni.hideLoading()
				})
			},
		},
		onUnload() {
			// 在页面离开时清除定时器
			clearInterval(this.timer);
			clearInterval(this.rookieTimer)
		}
	}
</script>

<style lang="scss" scoped>
	.buy-popup {
		width: 750rpx;
		height: 889rpx;
		// background: linear-gradient(to bottom, #91E6FF 0%, #FFFFFF 100%);
		// border-radius: 20rpx 20rpx 0px 0px;
		// padding: 17rpx 34rpx 30rpx 35rpx;
		background-image: url('@/static/review/bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding-bottom: 20rpx;
		.close-icon{
			position: absolute;
			width: 69rpx;
			height: 69rpx;
			top: 0;
			right: 0;
		}
		.main-top{
			.header{
				width: 100%;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 29rpx;
				color: #FFFFFF;
			}
			.headerline{
				font-size: 41rpx;
				color: #FFFFFF;
				font-family: YouSheBiaoTiHei;
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background-image: url('@/static/review/header.png');
				background-size: 100%;
				background-repeat: no-repeat;
			}
			.box-detail{
				margin-top: 20rpx;
				padding: 0 37rpx 0 45rpx;
				.detail{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.box-img{
						width: 106rpx;
						height: 106rpx;
					}
					.box-info{
						margin-left: 16rpx;
						padding-top: 8rpx;
						width: 546rpx;
						.box-name{
							font-size: 26rpx;
							color: #FFFFFF;
						}
						.box-price{
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 26rpx;
							color: #FFFFFF;
							margin-top: 33rpx;
							.price{
								
							}
							.box-num{
								
							}
						}
					}
				}
				.pay-main{
					.pay{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 14rpx;
						.pay-name{
							font-size: 26rpx;
							color: #fff;
							display: flex;
							align-items: center;
							.pay-icon{
								margin-right: 10rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}
						.select-icon{
							width: 23rpx;
							height: 23rpx;
							border: 1px solid #fff;
							border-radius: 50%;
							padding: 5rpx;
							.dian{
								border-radius: 50%;
								background-color: #fff;
								width: 100%;
								height: 100%;
							}
						}
					}
					
				}
				.list-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;
					.item-label{
						font-size: 26rpx;
						color: #fff;
						.label-small{
							font-size: 17rpx;
						}
					}
					.item-value{
						font-size: 29rpx;
						color: #fff;
					}
					.red{
						color: #C23E4B;
					}
				}
			}
		}
		.main-bottom{
			padding: 0 37rpx 0 45rpx;
			.agreement{
				// display: flex;
				// align-items: center;
				font-size: 23rpx;
				line-height: 34rpx;
				color: #FFFFFF;
				.agreement-color{
					color: #C23E4B;
				}
				.agreement-icon{
					margin-right: 6rpx;
					width: 23rpx;
					height: 23rpx;
					border: 1px solid #fff;
					border-radius: 50%;
					padding: 5rpx;
					.dian{
						border-radius: 50%;
						background-color: #fff;
						width: 100%;
						height: 100%;
					}
				}
			}
			.total{
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #fff;
				.red{
					color: #C23E4B;
				}
			}
			.pay-btn{
				width: 660rpx;
				height: 125rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background-image: url('@/static/review/btn.png');
				background-size: 100%;
				background-repeat: no-repeat;
				margin-top: 10rpx;
				.pay-txt{
					color: #fff;
					font-size: 44rpx;
				}
				.payDiscountTip{
					color: #fff;
					font-size: 20rpx;
					margin-top: 6rpx;
				}
			}
			.footer-txt{
				font-size: 20rpx;
				color: #FFFFFF;
				margin-top: 15rpx;
				text-align: center;
			}
		}
		

		.header-info{
			position: relative;
			display: flex;
			.info-img{
				width: 247rpx;
				height: 237rpx;
			}
			.info-right{
				margin-left: 57rpx;
				width: 368rpx;
				padding-top: 29rpx;
				.right-name{
					width: 368rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 600;
					font-size: 34rpx;
					color: #000000;
				}
				.right-price{
					font-weight: 500;
					font-size: 26rpx;
					color: #000000;
					margin-top: 14rpx;
				}
				.item{
					position: relative;
					margin-top: 22rpx;
					width: 368rpx;
					height: 65rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.label{
						font-weight: 600;
						font-size: 20rpx;
						color: #000000;
					}
					.value{
						font-weight: 600;
						font-size: 20rpx;
						color: #000000;
					}
					.d-x{
						position: absolute;
						top: 0;
						left: 0;
						width: 368rpx;
						height: 2rpx;
					}
				}
			}
			.c-x{
				position: absolute;
				bottom: 0;
				left: 0;
				height: 2rpx;
				width: 682rpx;
			}
		}
		.mains{
			padding-top: 34rpx;
			.pay{
				margin-bottom: 42rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 26rpx;
					color: #000000;
					.pay-icon{
						width: 49rpx;
						height: 49rpx;
						margin-right: 15rpx;
					}
				}
				.select-icon{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.popup-buy{
			width: 700rpx;
			height: 85rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-image: url('@/static/home/a-btn.png');
			background-repeat: no-repeat;
			background-size: 100%;
			font-family: YouSheBiaoTiHei;
			font-size: 46rpx;
			color: #FFFFFF;
		}
	}
	
	// .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>