1404 lines
38 KiB
Vue
1404 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 class="header-num">x {{listLengthObj[type]}}</view>
|
||
使用提示卡
|
||
</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" v-if="boxType === 'buy'">
|
||
<view class="label">连抽优惠</view>
|
||
<view class="value">¥ {{discountAmountObj[previewData.type] || "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="agreement" v-if="previewData.payDiscountTip">
|
||
{{previewData.payDiscountTip}}
|
||
</view> -->
|
||
|
||
<view class="popup-buy" @click="pay" v-if="boxType === 'buy'">
|
||
<template>立即开盒 ¥{{Number(previewData.total) || 0}}</template>
|
||
<template v-if="previewData.payDiscountTip">
|
||
<view style="font-size: 18rpx;color: #fff;">{{previewData.payDiscountTip}}</view>
|
||
</template>
|
||
</view>
|
||
<view class="popup-buy" @click="pay" v-else>
|
||
立即支付 ¥{{previewData.amount.sale || 0}}
|
||
<view style="font-size: 18rpx;color: #fff;">{{previewData.payDiscountTip}}</view>
|
||
</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,
|
||
noOpenListApi
|
||
} 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,
|
||
agreementVisible: false,
|
||
listLengthObj: {
|
||
SINGLE: 1,
|
||
TRIPLE: 3,
|
||
PENTA: 5,
|
||
NINE:9
|
||
},
|
||
isPayBtn: false,
|
||
discountAmountObj:{},
|
||
}
|
||
},
|
||
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: ''
|
||
},
|
||
typeNum: {
|
||
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') {
|
||
console.log("this.detailData:",this.detailData)
|
||
|
||
|
||
const result = {};
|
||
|
||
this.detailData.price.forEach(item => {
|
||
result[item.type] = item.discountAmount;
|
||
});
|
||
|
||
this.discountAmountObj = result
|
||
// 普通盲盒
|
||
if(this.typeNum){
|
||
this.type = this.typeNum
|
||
this.detailData.price.forEach((item,index) => {
|
||
if(item.type === this.typeNum){
|
||
this.typeIndex = index
|
||
}
|
||
})
|
||
|
||
}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
|
||
// WECHAT
|
||
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() {
|
||
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 === '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
|
||
if (this.boxType === 'buy') {
|
||
// 普通盲盒购买
|
||
let data = {
|
||
boxId: this.detailData.id,
|
||
type: this.activityType ? this.activityType : this.type,
|
||
method: this.payType
|
||
}
|
||
|
||
if (this.previewData.couponId) {
|
||
data['couponId'] = this.previewData.couponId
|
||
}
|
||
|
||
if (this.promptId) {
|
||
data['promptId'] = this.promptId
|
||
}
|
||
uni.showLoading({
|
||
mask: true
|
||
})
|
||
boxOrderApi(data).then(result => {
|
||
uni.hideLoading()
|
||
setTimeout(() => {
|
||
this.isPayBtn = false;
|
||
}, 2000);
|
||
// 盲盒调起支付埋点
|
||
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) {
|
||
if (result.data.payParams.method !== "NONE") {
|
||
window.location.href = 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()
|
||
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_clk_nine_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');
|
||
}
|
||
}
|
||
window.location.href = res.data.payParams.payinfo
|
||
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 {
|
||
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);
|
||
}
|
||
} else {
|
||
uni.hideLoading()
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
},
|
||
// 盲盒购买订单回调(如果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}`
|
||
})
|
||
} else {
|
||
if(this.previewData && this.previewData.boxId && no && listLength){
|
||
uni.navigateTo({
|
||
url: `/pages/index/draw?no=${no}&boxId=${this.previewData.boxId}&type=${listLength}`
|
||
})
|
||
}else{
|
||
// 直接跳转开奖结果
|
||
noOpenListApi().then(resss => {
|
||
console.log(resss)
|
||
if(resss.code === 200){
|
||
if(resss.data.length > 0){
|
||
uni.redirectTo({
|
||
url:`/pages/index/draw?noOpen=noOpen`
|
||
})
|
||
}
|
||
}else{
|
||
this.$api.msg(resss.message)
|
||
}
|
||
}).catch(err => {
|
||
|
||
})
|
||
}
|
||
}
|
||
|
||
// 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: 30rpx;
|
||
color: #0080FF;
|
||
|
||
.header-num {
|
||
text-align: center;
|
||
font-size: 40rpx;
|
||
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;
|
||
flex-direction: column;
|
||
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> |