1213 lines
36 KiB
Vue
1213 lines
36 KiB
Vue
<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> |