590 lines
16 KiB
Vue
590 lines
16 KiB
Vue
<template>
|
|
<view class="box-order-confirm-page">
|
|
<HeaderCom></HeaderCom>
|
|
<view class="main">
|
|
<view class="box">
|
|
<image class="box-img" src="/static/box/box-bg.png" mode="aspectFit"></image>
|
|
<view class="detail">
|
|
<view class="name">{{detailData.name}}</view>
|
|
<view class="ponit">
|
|
<view class="price" v-if="activity === 'ROOKIE'">¥ {{detailData.amount.sale}}</view>
|
|
<view class="price" v-else>{{detailData.amount.sale}}代币</view>
|
|
<view class="num">X {{numObj[detailData.type]}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="coupon" v-if="!activity">
|
|
<view class="item">
|
|
<view class="label">优惠券</view>
|
|
<view class="value" v-if="activity">
|
|
无
|
|
<!-- <image src="@/static/my/back.png" mode="" class="back-icon"></image> -->
|
|
</view>
|
|
<view class="value" v-else>
|
|
{{detailData.couponName || "无"}}
|
|
<!-- <image src="@/static/my/back.png" mode="" class="back-icon"></image> -->
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">优惠金额</view>
|
|
<view class="value" v-if="activity">
|
|
0
|
|
</view>
|
|
<view class="value" v-else>
|
|
{{detailData.discountAmount || 0}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mains" v-if="activity === 'ROOKIE'">
|
|
<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="footer">
|
|
<view class="point">
|
|
<image src="@/static/an/point.gif" mode="" class="ponit-icon" v-if="activity !== 'ROOKIE'"></image>
|
|
<template v-if="activity === 'ROOKIE'">¥ {{detailData.amount.sale || 0}}</template>
|
|
<template v-else-if="activity === 'PREFERENTIAL_DAY'">{{detailData.amount.sale || 0}}代币</template>
|
|
<template v-else>{{detailData.total || 0}}代币</template>
|
|
</view>
|
|
<view class="buy " @click="pay">立即支付</view>
|
|
</view>
|
|
|
|
<img v-for="(imgSrc, index) in bgList" :key="index" :src="imgSrc" style="display: none;" />
|
|
<img v-for="(imgSrc, index) in btnList" :key="index" :src="imgSrc" style="display: none;" />
|
|
<img v-for="(imgSrc, index) in bgList" :key="index" :src="imgSrc" style="display: none;" />
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/index/boxOrderConfirm"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
myMixins
|
|
} from "@/mixins/mixins.js";
|
|
import {
|
|
boxOrderReviewApi,
|
|
boxOrderApi,
|
|
boxOrderPaidApi,
|
|
activityReviewApi,
|
|
activityBuyApi,
|
|
activityOrderApi
|
|
} from '@/API/index.js'
|
|
import { coinPaidApi,payMethodApi } from '@/API/user.js'
|
|
import HeaderCom from '@/pages/components/header.vue'
|
|
export default {
|
|
mixins: [myMixins],
|
|
data() {
|
|
return {
|
|
boxId: "",
|
|
type: "",
|
|
buyMethod: "",
|
|
detailData: {
|
|
coverResource: {},
|
|
amount: {}
|
|
},
|
|
statusObj: {
|
|
SINGLE: "一发入魂",
|
|
TRIPLE: "三连抽",
|
|
PENTA: "五连抽",
|
|
},
|
|
numObj:{
|
|
SINGLE: "1",
|
|
TRIPLE: "3",
|
|
PENTA: "5"
|
|
},
|
|
payList: [],
|
|
payType: '',
|
|
timer: null,
|
|
timers:null,
|
|
activity:'',
|
|
boxOrderNo:'',
|
|
promptId:'',
|
|
|
|
btnList: [
|
|
'static/an/btn/0.png', 'static/an/btn/1.png', 'static/an/btn/2.png', 'static/an/btn/3.png',
|
|
'static/an/btn/4.png', 'static/an/btn/5.png', 'static/an/btn/6.png', 'static/an/btn/7.png',
|
|
'static/an/btn/8.png', 'static/an/btn/9.png', 'static/an/btn/10.png', 'static/an/btn/11.png',
|
|
'static/an/btn/12.png', 'static/an/btn/13.png', 'static/an/btn/14.png', 'static/an/btn/15.png',
|
|
'static/an/btn/16.png', 'static/an/btn/17.png', 'static/an/btn/18.png', 'static/an/btn/19.png',
|
|
'static/an/btn/20.png', 'static/an/btn/21.png', 'static/an/btn/22.png', 'static/an/btn/23.png',
|
|
'static/an/btn/24.png', 'static/an/btn/25.png', 'static/an/btn/26.png', 'static/an/btn/27.png',
|
|
'static/an/btn/28.png', 'static/an/btn/29.png', 'static/an/btn/30.png', 'static/an/btn/31.png',
|
|
'static/an/btn/32.png', 'static/an/btn/33.png', 'static/an/btn/34.png', 'static/an/btn/35.png',
|
|
'static/an/btn/36.png', 'static/an/btn/37.png', 'static/an/btn/38.png', 'static/an/btn/39.png',
|
|
'static/an/btn/40.png', 'static/an/btn/41.png', 'static/an/btn/42.png', 'static/an/btn/43.png',
|
|
'static/an/btn/44.png', 'static/an/btn/45.png', 'static/an/btn/46.png', 'static/an/btn/47.png',
|
|
'static/an/btn/48.png', 'static/an/btn/49.png'
|
|
],
|
|
bgList:['static/new/bg.png','static/box/draw.png'],
|
|
}
|
|
},
|
|
components:{HeaderCom},
|
|
onLoad(opation) {
|
|
if(opation.promptId){
|
|
this.promptId = opation.promptId
|
|
}
|
|
this.boxId = opation.boxId
|
|
if(opation.activity){
|
|
// 活动盲盒订单预览
|
|
this.activity = opation.activity
|
|
this.getActivityReview()
|
|
}else{
|
|
this.type = opation.type
|
|
this.getDetail()
|
|
}
|
|
this.preloadImages()
|
|
this.getPayMethod()
|
|
},
|
|
methods: {
|
|
getPayMethod(){
|
|
payMethodApi({type:'COIN_RECHARGE'}).then(res => {
|
|
console.log(res)
|
|
if(res.code === 200){
|
|
res.data.forEach(item => {
|
|
if(item === 'ALIPAY'){
|
|
this.payList.push({label:'支付宝支付',type:'ALIPAY',visible:false,height: '30rpx',width: '30rpx',img: '../../static/new/pay/zfb.png',})
|
|
}else if(item === 'WECHAT'){
|
|
this.payList.push({label:'微信支付',type:'WECHAT',visible:true,width: '34rpx',height: '29rpx',img: '../../static/new/pay/wx.png',})
|
|
}else if(item === 'POINTS'){
|
|
this.payList.push({label:"积分支付",type:'POINTS',visible:false,img:'../../static/an/point.gif',width:'30rpx',height:'31rpx'})
|
|
}else if(item === 'NONE'){
|
|
this.payList.push({label:"无需支付",type:'NONE',visible:false,img:'',width:'32rpx',height:'34rpx'})
|
|
}else if(item === 'COIN'){
|
|
this.payList.push({label:"代币支付",type:'COIN',visible:false,img:'../../static/an/point.gif',width:'32rpx',height:'34rpx'})
|
|
}
|
|
})
|
|
// this.payList
|
|
this.payList[0].visible = true
|
|
console.log("this.payList[0].type:",this.payList)
|
|
this.payType = this.payList[0].type
|
|
}
|
|
})
|
|
},
|
|
preloadImages() {
|
|
this.bgList.forEach((imgSrc) => {
|
|
const img = new Image();
|
|
img.src = imgSrc;
|
|
});
|
|
this.btnList.forEach((imgSrc) => {
|
|
const img = new Image();
|
|
img.src = imgSrc;
|
|
});
|
|
},
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
// 活动盲盒订单预览
|
|
getActivityReview(){
|
|
activityReviewApi().then(res => {
|
|
if (res.code === 200) {
|
|
this.detailData = res.data
|
|
this.boxId = res.data.boxId
|
|
// this.detailData.methods.forEach(item => {
|
|
// if(item === 'ALIPAY'){
|
|
// this.payList.push({label:'支付宝支付',type:'ALIPAY',visible:false,height: '30rpx',width: '30rpx',img: '../../static/new/pay/zfb.png',})
|
|
// }else if(item === 'WECHAT'){
|
|
// this.payList.push({label:'微信支付',type:'WECHAT',visible:true,width: '34rpx',height: '29rpx',img: '../../static/new/pay/wx.png',})
|
|
// }else if(item === 'POINTS'){
|
|
// this.payList.push({label:"积分支付",type:'POINTS',visible:false,img:'../../static/an/point.gif',width:'30rpx',height:'31rpx'})
|
|
// }else if(item === 'NONE'){
|
|
// this.payList.push({label:"无需支付",type:'NONE',visible:false,img:'',width:'32rpx',height:'34rpx'})
|
|
// }else if(item === 'COIN'){
|
|
// this.payList.push({label:"代币支付",type:'COIN',visible:false,img:'../../static/an/point.gif',width:'32rpx',height:'34rpx'})
|
|
// }
|
|
// })
|
|
// this.payList[0].visible = true
|
|
// this.payType = this.payList[0].type
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
// 订单预览
|
|
getDetail() {
|
|
boxOrderReviewApi({
|
|
boxId: this.boxId,
|
|
type: this.type
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
this.detailData = res.data
|
|
this.detailData.methods.forEach(item => {
|
|
if (item === 'ALIPAY') {
|
|
this.payList.push({
|
|
label: "支付宝支付",
|
|
type: 'ALIPAY',
|
|
visible: false,
|
|
img: '../../static/index/zfb.png',
|
|
width: '30rpx',
|
|
height: '30rpx'
|
|
})
|
|
} else if (item === 'WECHAT') {
|
|
this.payList.push({
|
|
label: "微信支付",
|
|
type: 'WECHAT',
|
|
visible: false,
|
|
img: '../../static/index/wx.png',
|
|
width: '34rpx',
|
|
height: '29rpx'
|
|
})
|
|
} else if (item === 'POINTS') {
|
|
this.payList.push({
|
|
label: "积分支付",
|
|
type: 'POINTS',
|
|
visible: false,
|
|
img: '../../static/mine/jf.png',
|
|
width: '30rpx',
|
|
height: '31rpx'
|
|
})
|
|
} else if (item === 'NONE') {
|
|
this.payList.push({
|
|
label: "无需支付",
|
|
type: 'NONE',
|
|
visible: false,
|
|
img: '',
|
|
width: '30rpx',
|
|
height: '31rpx'
|
|
})
|
|
}
|
|
})
|
|
this.payList[0].visible = true
|
|
this.payType = this.payList[0].type
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
// 切换支付方式
|
|
payChange(index, item) {
|
|
this.payList.forEach((v, i) => {
|
|
v.visible = false;
|
|
})
|
|
this.payType = item.type
|
|
this.payList[index].visible = !this.payList[index].visible
|
|
},
|
|
pay() {
|
|
// 活动盲盒购买
|
|
if(this.activity === 'ROOKIE'){
|
|
|
|
let data = {
|
|
method: this.payType
|
|
}
|
|
uni.showLoading()
|
|
activityBuyApi(data).then(res => {
|
|
// uni.hideLoading()
|
|
if (res.code === 200) {
|
|
//
|
|
if(res.data.payParams.payinfo){
|
|
location.href = res.data.payParams.payinfo
|
|
// window.open(res.data.payParams.payinfo)
|
|
}
|
|
console.log(res)
|
|
this.boxOrderNo = res.data.boxOrderNo
|
|
this.nos = JSON.stringify(res.data)
|
|
this.getCoinPaid(res.data.no)
|
|
this.timers = setInterval(() => {
|
|
this.getCoinPaid(res.data.no)
|
|
}, 3000);
|
|
// uni.navigateTo({
|
|
// url: `/pages/index/paySuccess?no=${res.data.no}`
|
|
// })
|
|
} else {
|
|
this.$api.msg(res.message)
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
})
|
|
}else if(this.activity === 'PREFERENTIAL_DAY'){
|
|
let data = {
|
|
// method: this.payType,
|
|
method:'COIN'
|
|
}
|
|
activityOrderApi(data).then(res => {
|
|
uni.hideLoading()
|
|
if (res.code === 200) {
|
|
//
|
|
// this.boxOrderNo = res.data.boxOrderNo
|
|
// this.getBoxOrderPaid(res.data.no)
|
|
this.timer = setInterval(() => {
|
|
this.getBoxOrderPaid(res.data.no)
|
|
}, 3000);
|
|
// uni.navigateTo({
|
|
// url: `/pages/index/paySuccess?no=${res.data.no}`
|
|
// })
|
|
} else {
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
}else{
|
|
// 普通盲盒购买 //每日优惠
|
|
let data = {
|
|
boxId: this.boxId,
|
|
type: this.type,
|
|
// method: this.payTyp
|
|
method:'COIN'
|
|
}
|
|
// 如果有提示卡ID则传入
|
|
if(this.promptId){
|
|
data['promptId'] = this.promptId
|
|
}
|
|
if(this.detailData.couponId){
|
|
data['couponId'] = this.detailData.couponId
|
|
}
|
|
|
|
uni.showLoading()
|
|
boxOrderApi(data).then(res => {
|
|
uni.hideLoading()
|
|
if (res.code === 200) {
|
|
//
|
|
this.getBoxOrderPaid(res.data.no)
|
|
this.timer = setInterval(() => {
|
|
this.getBoxOrderPaid(res.data.no)
|
|
}, 3000);
|
|
// uni.navigateTo({
|
|
// url: `/pages/index/paySuccess?no=${res.data.no}`
|
|
// })
|
|
} else {
|
|
this.$api.msg(res.message)
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
|
|
},
|
|
// 查询活动盲盒支付订单
|
|
getCoinPaid(no) {
|
|
coinPaidApi({
|
|
no
|
|
}).then(payResult => {
|
|
if (payResult.data) {
|
|
clearInterval(this.timer); // 清除定时器
|
|
this.timer = null;
|
|
this.$api.msg('支付成功')
|
|
uni.redirectTo({
|
|
url: `/pages/index/boxPaySuccess?no=${this.boxOrderNo}&boxId=${this.boxId}&name=${this.detailData.name}&type=${this.detailData.type}&sale=${this.detailData.amount.sale}`
|
|
})
|
|
// uni.redirectTo({
|
|
// url: `/pages/index/order?no=${no}&boxId=${this.boxId}&name=${this.detailData.name}&type=${this.detailData.type}&sale=${this.detailData.amount.sale}`
|
|
// })
|
|
uni.hideLoading()
|
|
}
|
|
}).catch(err => {
|
|
clearInterval(this.timer); // 清除定时器
|
|
this.timer = null;
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
|
|
getBoxOrderPaid(no) {
|
|
boxOrderPaidApi({
|
|
no
|
|
}).then(payResult => {
|
|
if (payResult.data) {
|
|
clearInterval(this.timers); // 清除定时器
|
|
this.timers = null;
|
|
this.$api.msg('支付成功')
|
|
uni.redirectTo({
|
|
url: `/pages/index/boxPaySuccess?no=${no}&boxId=${this.boxId}&name=${this.detailData.name}&type=${this.detailData.type}&sale=${this.detailData.total}`
|
|
})
|
|
// uni.redirectTo({
|
|
// url: `/pages/index/order?no=${no}&boxId=${this.boxId}&name=${this.detailData.name}&type=${this.detailData.type}&sale=${this.detailData.amount.sale}`
|
|
// })
|
|
uni.hideLoading()
|
|
}
|
|
}).catch(err => {
|
|
clearInterval(this.timer); // 清除定时器
|
|
this.timer = null;
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
},
|
|
onUnload() {
|
|
// 在页面离开时清除定时器
|
|
clearInterval(this.timer);
|
|
clearInterval(this.timers)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.box-order-confirm-page {
|
|
padding-top: 112rpx;
|
|
.main {
|
|
padding: 0 32rpx 32rpx 32rpx;
|
|
|
|
|
|
.box {
|
|
width: 686rpx;
|
|
height: 160rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 32rpx;
|
|
|
|
|
|
.box-img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
background-image: url('@/static/new/shop-bg.png');
|
|
background-size: contain;
|
|
}
|
|
|
|
.detail {
|
|
margin-left: 24rpx;
|
|
|
|
.name {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
width: 470rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.ponit {
|
|
width: 470rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 32rpx;
|
|
|
|
.price {
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.num {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.coupon {
|
|
width: 686rpx;
|
|
height: 192rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
padding: 0 24rpx;
|
|
margin-top: 24rpx;
|
|
|
|
.item {
|
|
height: 96rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.label {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.value {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.back-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.footer {
|
|
width: 750rpx;
|
|
height: 144rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 32rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
.point {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
|
|
.ponit-icon {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
|
|
.buy {
|
|
width: 328rpx;
|
|
height: 96rpx;
|
|
background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
|
border-radius: 8rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |