608 lines
14 KiB
Vue
608 lines
14 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">¥{{detailData.price[0].settlement}}/个</view> -->
|
|
<!-- <view class="right-price" v-else>原价 ¥{{Number(previewData.amount.sale)}}/个</view> -->
|
|
|
|
</view>
|
|
</view>
|
|
<view class="header-tip">
|
|
<view class="header-num">x {{listLengthObj[type]}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="btn-main">
|
|
<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="agreement">
|
|
*试玩结果仅供参考
|
|
</view>
|
|
|
|
|
|
<view class="popup-buy" @click="pay">
|
|
<template>马上试玩</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
boxOrderReviewApi,
|
|
boxOrderApi,
|
|
boxOrderPaidApi,
|
|
activityReviewApi,
|
|
activityBuyApi,
|
|
activityOrderApi,
|
|
activityReviewSourceApi,
|
|
activitySourceBuyApi,
|
|
freeBoxApi,
|
|
boxesDetail
|
|
} 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: 2,
|
|
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
|
|
},
|
|
isPayBtn: false
|
|
}
|
|
},
|
|
props: {
|
|
isActivityReport: {
|
|
type: Boolean,
|
|
default: false
|
|
}, //新活动调起支付埋点
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isCard: {
|
|
type: Boolean,
|
|
default: true
|
|
}, //是否显示使用提示卡
|
|
detailData: {
|
|
type: Object,
|
|
default: () => {
|
|
coverResource: {}
|
|
}
|
|
},
|
|
boxType: {
|
|
type: String,
|
|
default: ''
|
|
}, //buy 为不同购买 ROOKIE 新手盲盒 PREFERENTIAL_DAY 每日优惠 SPECIAL_PRICE 薅羊毛
|
|
isDetail: {
|
|
type: Boolean,
|
|
default: false
|
|
}, //是否详情进入
|
|
isActivityClick: {
|
|
type: Boolean,
|
|
default: false
|
|
}, //是否点击打开新人福利
|
|
payNum: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
promptId: {
|
|
type: String,
|
|
default: ''
|
|
}, //提示卡ID
|
|
isActivity: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
activityId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
activityType: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
},
|
|
components: {
|
|
isPayDlgVue
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
mounted() {
|
|
this.payLink = ''
|
|
this.type = this.detailData.price[2].type
|
|
this.typeIndex = 2
|
|
this.getDetail()
|
|
|
|
},
|
|
methods: {
|
|
// 订单预览
|
|
getDetail() {
|
|
boxesDetail({
|
|
id: this.detailData.id
|
|
},{}).then(res => {
|
|
if (res.code === 200) {
|
|
this.previewData = res.data
|
|
|
|
} 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);
|
|
this.$emit('isOk')
|
|
uni.navigateTo({
|
|
url:`/pages/index/drawFree?type=${this.type}&boxId=${this.detailData.id}`
|
|
})
|
|
// uni.showLoading({
|
|
// mask:true
|
|
// })
|
|
// freeBoxApi({boxId:this.detailData.id,type:this.type}).then(res => {
|
|
// uni.hideLoading()
|
|
// if(res.code === 200){
|
|
// console.log(res)
|
|
// uni.navigateTo({
|
|
// url:`/pages/index/drawFree?type=${this.type}&boxId=${this.detailData.id}`
|
|
// })
|
|
// }else{
|
|
// 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 {
|
|
uni.navigateTo({
|
|
url: `/pages/index/draw?no=${no}&boxId=${this.previewData.boxId}&type=${listLength}`
|
|
})
|
|
}
|
|
|
|
// uni.redirectTo({
|
|
// url: `/pages/index/boxPaySuccess?no=${no}&boxId=${this.previewData.boxId}&name=${this.previewData.name}&type=${this.previewData.type}&sale=${this.previewData.total}`
|
|
// })
|
|
uni.hideLoading()
|
|
} else {
|
|
// if(type == 'click'){
|
|
// this.$api.msg('未查询到支付结果')
|
|
// }
|
|
}
|
|
}).catch(err => {
|
|
clearInterval(this.timer); // 清除定时器
|
|
this.timer = null;
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
// 查询新手盲盒支付订单
|
|
getCoinPaid(no) {
|
|
coinPaidApi({
|
|
no
|
|
}).then(payResult => {
|
|
if (payResult.data) {
|
|
// 活动实际支付埋点
|
|
reportClickFn('box_activity_review_pay_accomplish_clk')
|
|
if (this.isActivityClick) {
|
|
// 点击打开新人福利订单预览支付成功数
|
|
reportClickFn('box_clk_activity_review_pay_accomplish');
|
|
} else {
|
|
// 首次弹出新人福利订单预览支付成功数
|
|
reportClickFn('box_activity_review_pay_accomplish');
|
|
}
|
|
clearInterval(this.rookieTimer); // 清除定时器
|
|
this.rookieTimer = null;
|
|
this.$emit('isOk')
|
|
this.$api.msg('支付成功')
|
|
uni.navigateTo({
|
|
url: `/pages/index/draw?no=${this.boxOrderNo}&boxId=${this.previewData.boxId}&type=1`
|
|
})
|
|
// uni.redirectTo({
|
|
// url: `/pages/index/boxPaySuccess?no=${this.boxOrderNo}&boxId=${this.previewData.boxId}&name=${this.previewData.name}&type=${this.previewData.type}&sale=${this.previewData.amount.sale}`
|
|
// })
|
|
uni.hideLoading()
|
|
}
|
|
}).catch(err => {
|
|
clearInterval(this.timer); // 清除定时器
|
|
this.timer = null;
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
},
|
|
onUnload() {
|
|
// 在页面离开时清除定时器
|
|
clearInterval(this.timer);
|
|
clearInterval(this.rookieTimer)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.buy-popup {
|
|
// background-color: #fff;
|
|
// position: absolute;
|
|
// bottom: 0;
|
|
// left: 0;
|
|
// border-radius: 30rpx 0rpx 30rpx 0rpx;
|
|
padding: 32rpx;
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.header-info {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.info-img {
|
|
width: 158rpx;
|
|
height: 158rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.info-right {
|
|
margin-left: 24rpx;
|
|
display: flex;
|
|
// align-items: center;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
// height: 158rpx;
|
|
font-weight: bold;
|
|
font-size: 42rpx;
|
|
color: #000000;
|
|
|
|
.right-name {}
|
|
|
|
.right-price {
|
|
font-size: 28rpx;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-tip {
|
|
font-size: 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;
|
|
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> |