xc-app/pages/index/components/buyBoxRun.vue

1569 lines
48 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="buy-popup" @click.stop="">
<view class="header">
<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" v-if="boxType === 'buy'">¥{{detailData.price[0].settlement}}/个</view>
<view class="right-price" v-else>原价 ¥{{Number(previewData.amount.sale)}}/个</view>
</view>
</view>
<view class="header-tip">x {{listLengthObj[activityType]}}</view>
<!-- <view class="header-tip" v-if="boxType === 'buy' && isCard" @click="card">使用提示卡</view> -->
</view>
<view class="btn-main" v-if="boxType === 'buy' && !activityType">
<template v-for="(item,index) in detailData.price">
<view class="btn-buy one" :class="{'buy-active':typeIndex === index}" v-if="item.type === 'SINGLE'" @click="goBuy(item.type,index)">
一发入魂
</view>
<view class="btn-buy three" :class="{'buy-active':typeIndex === index}" v-if="item.type === 'TRIPLE'" @click="goBuy(item.type,index)">
<view class="tips">9.5折</view>
欧气三连
</view>
<view class="btn-buy five" :class="{'buy-active':typeIndex === index}" v-if="item.type === 'PENTA'" @click="goBuy(item.type,index)">
<view class="tips">8.8折</view>
霸气五连
</view>
</template>
</view>
<view class="item" v-if="boxType === 'buy'">
<view class="label">优惠券</view>
<view class="value">{{previewData.couponName || "无"}}</view>
</view>
<view class="item" v-if="boxType === 'buy'">
<view class="label">优惠金额</view>
<view class="value">{{previewData.discountAmount || 0}}</view>
</view>
<view class="item">
<view class="label">实付金额</view>
<view class="value" v-if="boxType === 'buy'">¥ {{Number(previewData.total) || 0}}</view>
<view class="value" v-else>¥ {{previewData.amount.sale || 0}}</view>
<!-- <view class="value" v-if="boxType === 'ROOKIE'">¥ {{previewData.amount.sale || 0}}</view>
<view class="value" v-else-if="boxType === 'PREFERENTIAL_DAY'">{{previewData.amount.sale || 0}} 代币</view>
<view class="value" v-else>¥ {{Number(previewData.total) || 0}}</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-buy" @click="pay" v-if="boxType === 'buy'">
<template>立即开盒 ¥{{Number(previewData.total) || 0}}</template>
</view>
<view class="popup-buy" @click="pay" v-else>立即支付 ¥{{previewData.amount.sale || 0}}</view>
<!-- <view class="popup-buy" @click="pay" v-else-if="boxType === 'PREFERENTIAL_DAY'">
<template>立即开盒 ¥{{Number(previewData.amount.sale) || 0}}</template>
</view>
<view class="popup-buy" @click="pay" v-else>
<template>立即开盒 ¥{{Number(previewData.total) || 0}}</template>
</view> -->
<!-- <template v-if="isPayDlgVisible">
<isPayDlgVue @isOk="isPayStatus" @isCancel="isCancelCk" v-if="isPayDlgVisible"></isPayDlgVue>
</template> -->
</view>
</template>
<script>
import {
boxOrderReviewApi,
boxOrderApi,
boxOrderPaidApi,
activityReviewApi,
activityBuyApi,
activityOrderApi,
activityReviewSourceApi,
activitySourceBuyApi,
activityTaskCreateApi
} from '@/API/index.js'
import { coinPaidApi,payMethodApi,userInfo } from '@/API/user.js'
import reportClickFn from '@/utils/report.js'
import isPayDlgVue from '@/pages/components/isPayDlg.vue'
import {
showWebview
} from '@/utils/webViewCom.js'
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,
orderNo:'',
isPayDlgVisible:false,
listLengthObj:{
SINGLE:1,
TRIPLE:3,
PENTA:5
},
agreementVisible:false,
isPayBtn:false
}
},
props: {
isActivityReport: {
type: Boolean,
default: false
},//新活动调起支付埋点
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
},
promptId:{
type: String,
default: ''
},//提示卡ID
isActivity:{
type: String,
default: ''
},
activityId:{
type: String,
default: ''
},
activityType:{
type: String,
default: ''
},
isNormal:{
type: Boolean,
default: true
},//是否是大奖
curTaskId:{
type: String,
default: ''
},//
},
components:{isPayDlgVue},
watch:{
// timeSec(){
// if(this.timeSec == 30){
// clearInterval(this.rookieTimer)
// this.rookieTimer = null
// this.$api.msg('未查询到支付结果')
// }
// }
payNum(){
console.log("asadasdsad")
this.pay()
},
},
mounted() {
this.payLink = ''
if(this.boxType === 'buy'){
// 普通盲盒
if(this.activityType){
this.type = this.activityType
}else{
this.type = this.detailData.price[0].type
}
this.typeIndex = 0
this.getDetail()
// 盲盒购买预览
reportClickFn('box_buy_review_clk')
if(this.isDetail){
// 指定盲盒详情购买预览
reportClickFn(`boxId_detail_review_${this.detailData.id}`)
}else{
// 指定盲盒购买预览
reportClickFn(`boxId_review_${this.detailData.id}`)
}
}
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()
}
},
methods: {
// 用户协议 隐私政策
agreementCk(type){
uni.navigateTo({
url:`/pages/agreement/${type}`
})
},
// 用户协议 隐私政策
goPage(type){
uni.navigateTo({
url:`/pages/agreement/nonage`
})
},
// 获取用户信息
// getUserInfo() {
// userInfo().then(res => {
// if (res.code === 200) {
// this.infoDetail = res.data
// if(this.boxType === 'PREFERENTIAL_DAY'){
// this.payTypeClick()
// }
// if(this.boxType === 'buy'){
// this.payTypeClick()
// }
// } else {
// this.$api.msg(res.message)
// }
// })
// },
// 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.orderNo = result.data.no
// 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/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
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');
}
}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');
}
}
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/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
} else {
this.$api.msg(result.message)
}
})
// this.boxId = res.data.boxId
}else{
this.$api.msg(res.message)
}
})
// activityReviewApi().then(res => {
// if (res.code === 200) {
// if(this.isActivityClick){
// // 点击打开新人福利订单预览数
// reportClickFn('box_clk_activity_review');
// }else{
// // 首次弹出新人福利订单预览数
// reportClickFn('box_activity_review');
// }
// 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/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 === 'WECHAT') {
// // 如果是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)
// }
// }).catch(err => {
// })
},
// 订单预览
getDetail() {
let datas = {
boxId: this.detailData.id,
type: this.type
}
if(!this.isNormal){
datas['coupon'] = false
}
boxOrderReviewApi(datas).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/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
} else {
this.$api.msg(result.message)
}
})
} else {
this.$api.msg(res.message)
}
})
},
// 切换购买类型
goBuy(type,index) {
this.typeIndex = index
this.type = type
this.getDetail()
},
isCancelCk(){
this.isPayDlgVisible = false
},
isPayStatus(){
this.getBoxOrderPaid(this.orderNo,'click')
},
// 立即支付
pay() {
if(this.isPayBtn){
return
}
this.isPayBtn = true
if(!this.agreementVisible){
this.$api.msg("请阅读并同意《用户协议》、《隐私政策》、《儿童个人信息保护规则》、《支付服务协议》")
this.isPayBtn = false
return
}
clearInterval(this.timer)
this.timer = null
uni.hideLoading()
clearInterval(this.rookieTimer)
this.rookieTimer = null
console.log("this.boxType:",this.boxType)
console.log("this.isActivity:",this.isActivity)
console.log("this.isNormal:",typeof this.isNormal)
if(this.boxType === 'buy'){
if(this.isNormal){
// 普通盲盒购买
console.log("bbbbbbbbbbbbb")
let data = {
boxId: this.detailData.id,
type: this.activityType ? this.activityType : this.type,
method: this.payType,
source: "ACTIVITY"
}
if (this.previewData.couponId) {
data['couponId'] = this.previewData.couponId
}
if(this.promptId){
data['promptId'] = this.promptId
}
// uni.showLoading({
// mask: true
// })
boxOrderApi(data).then(result => {
if(this.isActivity === 'runActivity'){
// 新活动支付调起埋点
reportClickFn(`activity_pay_clk${this.activityId}`)
}
setTimeout(()=>{
this.isPayBtn = false;
}, 2000);
// if(this.previewData.type === 'SINGLE'){
// listLength = 1
// }else if(this.previewData.type === 'TRIPLE'){
// listLength = 3
// }else{
// listLength = 5
// }
// this.isPayDlgVisible = false
// uni.navigateTo({
// url: `/pages/index/draw?no=${no}&boxId=${this.previewData.boxId}&type=${listLength}`
// })
// 盲盒调起支付埋点
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
// showWebview(result.data.payParams.payinfo)
}
let clearTime = 0
this.orderNo = result.data.no
this.isPayDlgVisible = true
// 新增支付弹框
let listLength = 1
if(this.activityType){
if(this.activityType === 'SINGLE'){
listLength = 1
}else if(this.activityType === 'TRIPLE'){
listLength = 3
}else{
listLength = 5
}
}else{
if(this.previewData.type === 'SINGLE'){
listLength = 1
}else if(this.previewData.type === 'TRIPLE'){
listLength = 3
}else{
listLength = 5
}
}
this.$emit('payStatus',{no:result.data.no,type:listLength,boxId:this.previewData.boxId})
// 新增支付弹框
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 {
uni.hideLoading()
setTimeout(()=>{
this.isPayBtn = false;
}, 2000);
this.$api.msg(result.message)
}
}).catch(err => {
setTimeout(()=>{
this.isPayBtn = false;
}, 2000);
uni.hideLoading()
})
}else{
console.log("asdsadasdasdasdasd")
let data = {
boxId: this.detailData.id,
type: this.activityType ? this.activityType : this.type,
method: this.payType,
activityId:this.curTaskId
}
if (this.previewData.couponId) {
data['couponId'] = this.previewData.couponId
}
if(this.promptId){
data['promptId'] = this.promptId
}
// uni.showLoading({
// mask: true
// })
activityTaskCreateApi(data).then(result => {
// 新活动支付调起埋点
reportClickFn(`activity_pay_clk${this.activityId}`)
setTimeout(()=>{
this.isPayBtn = false;
}, 2000);
// if(this.previewData.type === 'SINGLE'){
// listLength = 1
// }else if(this.previewData.type === 'TRIPLE'){
// listLength = 3
// }else{
// listLength = 5
// }
// this.isPayDlgVisible = false
// uni.navigateTo({
// url: `/pages/index/draw?no=${no}&boxId=${this.previewData.boxId}&type=${listLength}`
// })
// 盲盒调起支付埋点
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
// showWebview(result.data.payParams.payinfo)
}
let clearTime = 0
this.orderNo = result.data.no
this.isPayDlgVisible = true
// 新增支付弹框
let listLength = 1
if(this.activityType){
if(this.activityType === 'SINGLE'){
listLength = 1
}else if(this.activityType === 'TRIPLE'){
listLength = 3
}else{
listLength = 5
}
}else{
if(this.previewData.type === 'SINGLE'){
listLength = 1
}else if(this.previewData.type === 'TRIPLE'){
listLength = 3
}else{
listLength = 5
}
}
this.$emit('payStatus',{no:result.data.no,type:listLength,boxId:this.previewData.boxId})
// 新增支付弹框
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 {
setTimeout(()=>{
this.isPayBtn = false;
}, 2000);
uni.hideLoading()
this.$api.msg(result.message)
}
}).catch(err => {
setTimeout(()=>{
this.isPayBtn = false;
}, 2000);
uni.hideLoading()
})
}
}else{
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_nine_activity_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');
}
}
// uni.hideLoading()
// this.boxOrderNo = res.data.boxOrderNo
window.location.href = res.data.payParams.payinfo
console.log("aaa:",res)
// this.boxOrderNo = res.data.boxOrderNo
// this.getCoinPaid(res.data.no)
// this.rookieTimer = setInterval(() => {
// this.timeSec += 3
// this.getCoinPaid(res.data.no)
// }, 3000);
let clearTime = 0
this.orderNo = res.data.no
this.isPayDlgVisible = true
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.orderNo = res.data.no
this.isPayDlgVisible = true
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);
// this.getCoinPaid(res.data.no)
// this.rookieTimer = setInterval(() => {
// this.getCoinPaid(res.data.no)
// }, 3000);
}
} else {
uni.hideLoading()
this.$api.msg(res.message)
}
}).catch(err => {
uni.hideLoading()
})
// let data = {
// method: this.payType
// }
// uni.showLoading()
// this.timeSec = 0
// activityBuyApi(data).then(res => {
// if (res.code === 200) {
// if (res.data.payParams.payinfo) {
// // 活动调起支付埋点
// reportClickFn('box_activity_review_pay_clk')
// if(this.isActivityClick){
// // 点击打开新人福利订单预览调起支付数
// reportClickFn('box_clk_activity_review_pay');
// }else{
// // 首次弹出新人福利订单预览调起支付数
// reportClickFn('box_activity_review_pay');
// }
// uni.hideLoading()
// this.boxOrderNo = res.data.boxOrderNo
// window.location.href = res.data.payParams.payinfo
// this.boxOrderNo = res.data.boxOrderNo
// this.getCoinPaid(res.data.no)
// this.rookieTimer = setInterval(() => {
// this.timeSec += 3
// this.getCoinPaid(res.data.no)
// }, 3000);
// }else{
// this.boxOrderNo = res.data.boxOrderNo
// this.getCoinPaid(res.data.no)
// this.rookieTimer = setInterval(() => {
// this.getCoinPaid(res.data.no)
// }, 3000);
// }
// } else {
// uni.showLoading()
// this.$api.msg(res.message)
// }
// }).catch(err => {
// uni.hideLoading()
// })
}
// if (this.boxType === 'ROOKIE') {
// // 新手盲盒购买
// let data = {
// method: this.payType
// }
// uni.showLoading()
// this.timeSec = 0
// activityBuyApi(data).then(res => {
// if (res.code === 200) {
// if (res.data.payParams.payinfo) {
// // 活动调起支付埋点
// reportClickFn('box_activity_review_pay_clk')
// if(this.isActivityClick){
// // 点击打开新人福利订单预览调起支付数
// reportClickFn('box_clk_activity_review_pay');
// }else{
// // 首次弹出新人福利订单预览调起支付数
// reportClickFn('box_activity_review_pay');
// }
// uni.hideLoading()
// this.boxOrderNo = res.data.boxOrderNo
// window.location.href = res.data.payParams.payinfo
// this.boxOrderNo = res.data.boxOrderNo
// this.getCoinPaid(res.data.no)
// this.rookieTimer = setInterval(() => {
// this.timeSec += 3
// this.getCoinPaid(res.data.no)
// }, 3000);
// }else{
// this.boxOrderNo = res.data.boxOrderNo
// this.getCoinPaid(res.data.no)
// this.rookieTimer = setInterval(() => {
// this.getCoinPaid(res.data.no)
// }, 3000);
// }
// } else {
// }
// }).catch(err => {
// uni.hideLoading()
// })
// } else{
// this.getUserInfo()
// }
},
// 盲盒购买订单回调(如果type为click则是点击)
getBoxOrderPaid(no,type) {
boxOrderPaidApi({
no
}).then(payResult => {
console.log("payResult")
if (payResult.data) {
if(type != 'click'){
// 活动实际支付埋点
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');
}
}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.isActivity === 'runActivity'){
// // 新活动支付调起埋点
// reportClickFn(`activity_pay_clk${this.activityId}`)
// }
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
}
this.isPayDlgVisible = false
if(this.isActivity){
uni.navigateTo({
url: `/pages/index/draw?no=${no}&boxId=${this.previewData.boxId}&type=${listLength}&isActivity=${this.isActivity}&isNormal=${this.isNormal}`
})
}else{
uni.navigateTo({
url: `/pages/index/draw?no=${no}&boxId=${this.previewData.boxId}&type=${listLength}`
})
}
// uni.redirectTo({
// url: `/pages/index/boxPaySuccess?no=${no}&boxId=${this.previewData.boxId}&name=${this.previewData.name}&type=${this.previewData.type}&sale=${this.previewData.total}`
// })
uni.hideLoading()
}else{
// if(type == 'click'){
// this.$api.msg('未查询到支付结果')
// }
}
}).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.redirectTo({
// url: `/pages/index/boxPaySuccess?no=${this.boxOrderNo}&boxId=${this.previewData.boxId}&name=${this.previewData.name}&type=${this.previewData.type}&sale=${this.previewData.amount.sale}`
// })
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 {
// background-color: #fff;
// position: absolute;
// bottom: 0;
// left: 0;
// border-radius: 30rpx 0rpx 30rpx 0rpx;
padding: 32rpx;
.header {
display: flex;
align-items: center;
justify-content: space-between;
.header-info {
display: flex;
align-items: center;
.info-img {
width: 158rpx;
height: 158rpx;
border-radius: 10rpx;
}
.info-right {
margin-left: 24rpx;
display: flex;
// align-items: center;
justify-content: space-between;
flex-direction: column;
height: 158rpx;
font-weight: bold;
font-size: 42rpx;
color: #000000;
.right-name {}
.right-price {
font-size: 28rpx;
font-weight: normal;
}
}
}
.header-tip {
font-size: 50rpx;
color: #000;
font-weight: bold;
}
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
width: 685rpx;
height: 80rpx;
font-weight: bold;
font-size: 28rpx;
color: #333333;
.label {}
.value {}
}
.popup-buy {
z-index: 9999;
margin-top: 16rpx;
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;
}
.btn-main {
display: flex;
align-items: center;
justify-content: center;
margin-top: 40rpx;
.btn-buy {
margin: 0 20rpx;
// background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
border-radius: 16rpx;
width: 30%;
height: 80rpx;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8rpx;
font-size: 28rpx;
// color: #FFFFFF;
color: #999999;
border: 2rpx solid #E6E6E6;
.tips {
position: absolute;
width: 158rpx;
height: 40rpx;
background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%);
border-radius: 20rpx 0px 20rpx 0px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #FFFFFF;
top: -20rpx;
left: 0rpx;
}
}
.buy-active{
background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
color: #fff;
}
.one {}
.three {}
.five {}
}
.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;
}
}
}
.log-out{
width: 590rpx;
height: 300rpx;
background: #FFFFFF;
border-radius: 16rpx;
.log-out-tip{
height: 200rpx;
font-weight: 500;
font-size: 32rpx;
color: rgba(0,0,0,0.85);
line-height: 200rpx;
text-align: center;
}
.log-out-footer{
display: flex;
align-items: center;
justify-content: space-between;
border-top: 2rpx solid rgba(0,0,0,0.06);
height: 100rpx;
.cancel{
width: 294rpx;
height: 100rpx;
line-height: 100rpx;
font-weight: 500;
font-size: 32rpx;
color: #000000;
text-align: center;
border-right: 1px solid rgba(0,0,0,0.06);
}
.log-out-submit{
width: 294rpx;
height: 100rpx;
line-height: 100rpx;
font-weight: 500;
font-size: 32rpx;
color: #E55353;
text-align: center;
}
}
}
}
.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>