1238 lines
38 KiB
Vue
1238 lines
38 KiB
Vue
<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" v-if="boxType === 'buy' && isCard" @click="card">使用提示卡</view>
|
||
</view>
|
||
<view class="btn-main" v-if="boxType === 'buy'">
|
||
<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折</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折</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="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> -->
|
||
<!-- <view v-if="isPayDlgVisible" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: red;">
|
||
<isPayDlgVue @isOk="isPayStatus"></isPayDlgVue>
|
||
</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 isPayDlgVue from '@/pages/components/isPayDlg.vue'
|
||
|
||
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
|
||
}
|
||
},
|
||
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
|
||
},//是否点击打开新人福利
|
||
},
|
||
components:{isPayDlgVue},
|
||
watch:{
|
||
timeSec(){
|
||
if(this.timeSec == 30){
|
||
clearInterval(this.rookieTimer)
|
||
this.rookieTimer = null
|
||
this.$api.msg('未查询到支付结果')
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.payLink = ''
|
||
if(this.boxType === 'buy'){
|
||
// 普通盲盒
|
||
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: {
|
||
// 获取用户信息
|
||
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 === 'WECHAT') {
|
||
// 如果是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');
|
||
}
|
||
}else{
|
||
if(this.boxType === 'SPECIAL_PRICE'){
|
||
// 首次弹出薅羊毛订单预览数
|
||
reportClickFn('box_special_price_activity_review');
|
||
}
|
||
if(this.boxType === 'ROOKIE'){
|
||
// 首次弹出新人福利订单预览数
|
||
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)
|
||
}
|
||
})
|
||
// 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() {
|
||
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/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)
|
||
}
|
||
})
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 切换购买类型
|
||
goBuy(type,index) {
|
||
this.typeIndex = index
|
||
this.type = type
|
||
this.getDetail()
|
||
},
|
||
isPayStatus(){
|
||
this.getBoxOrderPaid(this.orderNo,'click')
|
||
},
|
||
// 立即支付
|
||
pay() {
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
uni.hideLoading()
|
||
clearInterval(this.rookieTimer)
|
||
this.rookieTimer = null
|
||
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.isPayDlgVisible = true
|
||
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()
|
||
this.$api.msg(result.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
}else{
|
||
let data = {
|
||
method: this.payType,
|
||
source:this.boxType
|
||
}
|
||
uni.showLoading()
|
||
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');
|
||
}
|
||
}else{
|
||
|
||
|
||
|
||
|
||
if(this.boxType === 'SPECIAL_PRICE'){
|
||
// 首次弹出薅羊毛订单预览调起支付数
|
||
reportClickFn('box_special_price_activity_review_pay');
|
||
}
|
||
if(this.boxType === 'ROOKIE'){
|
||
// 首次弹出新人福利订单预览调起支付数
|
||
reportClickFn('box_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');
|
||
}
|
||
}else{
|
||
if(this.boxType === 'SPECIAL_PRICE'){
|
||
// 首次弹出薅羊毛订单预览支付成功数
|
||
reportClickFn('box_special_price_activity_review_pay_accomplish');
|
||
}
|
||
if(this.boxType === 'ROOKIE'){
|
||
// 首次弹出新人福利订单预览支付成功数
|
||
reportClickFn('box_activity_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
|
||
}
|
||
this.isPayDlgVisible = false
|
||
console.log(`/pages/index/draw?no=${no}&boxId=${this.previewData.boxId}&type=${listLength}`)
|
||
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 {
|
||
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 {}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |