277 lines
6.7 KiB
Vue
277 lines
6.7 KiB
Vue
<template>
|
||
<view class="top-up-order-page">
|
||
<HeaderCom></HeaderCom>
|
||
<view class="main">
|
||
<!-- <view>{{txt}}</view> -->
|
||
<view class="item">
|
||
<view class="label">充值金额</view>
|
||
<view class="value">{{form.price}}元</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label">充值代币</view>
|
||
<view class="value">{{form.coin}}代币</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label">充值奖励</view>
|
||
<view class="value">{{form.gift}}代币</view>
|
||
</view>
|
||
</view>
|
||
<view class="main">
|
||
<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">
|
||
<text class="total">合计</text>
|
||
<text class="sym">¥</text>
|
||
{{form.price}}
|
||
</view>
|
||
<view class="buy" @click="pay">立即支付</view>
|
||
</view>
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/mine/topUpOrder"></page-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import HeaderCom from '@/pages/components/header.vue'
|
||
import { payMethodApi,coinGearRechargeApi,coinPaidApi } from '@/API/user.js'
|
||
export default{
|
||
data(){
|
||
return{
|
||
payList:[],
|
||
payIndex:0,
|
||
form:{
|
||
id:'',
|
||
price:'',
|
||
coin:'',
|
||
gift:''
|
||
},
|
||
timer:null,
|
||
payType:'',
|
||
// txt:'',
|
||
|
||
|
||
// {
|
||
// "code": 200,
|
||
// "message": "操作成功",
|
||
// "data": {
|
||
// "no": "4240510769570189889",
|
||
// "payParams": {
|
||
// "payChannelId": "1788815560356773889",
|
||
// "amount": "0.01",
|
||
// "method": "ALIPAY",
|
||
// "payinfo": "https://qr.alipay.com/bax04910aiclgdbeeva130de",
|
||
// "code": "ALIPAY_TONG_LIAN",
|
||
// "success": false
|
||
// }
|
||
// }
|
||
// }
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
},
|
||
components:{HeaderCom},
|
||
mounted() {
|
||
this.getPayMethod()
|
||
},
|
||
onLoad(option) {
|
||
this.form = option
|
||
// id=${item.id}&price=${item.price.settlement}&coin=${item.coin}&gift=${item.gift}
|
||
},
|
||
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
|
||
}
|
||
})
|
||
},
|
||
payChange(index,item){
|
||
this.payIndex = index;
|
||
this.payType = item.type
|
||
this.payList.forEach((item, idx) => {
|
||
item.visible = idx === index;
|
||
});
|
||
},
|
||
pay(){
|
||
// console.log(this.payType)
|
||
uni.showLoading()
|
||
let data = {
|
||
"gearId": this.form.id,
|
||
"method": this.payType
|
||
}
|
||
// return
|
||
coinGearRechargeApi(data).then(res => {
|
||
if(res.code === 200){
|
||
this.txt = JSON.stringify(res.data)
|
||
if(res.data.payParams.payinfo){
|
||
location.href = res.data.payParams.payinfo
|
||
// window.open(res.data.payParams.payinfo)
|
||
}
|
||
this.getOrderPaid(res.data.no)
|
||
this.timer = setInterval(() => {
|
||
this.getOrderPaid(res.data.no)
|
||
},3000);
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
|
||
},
|
||
getOrderPaid(no){
|
||
coinPaidApi({no}).then(payResult => {
|
||
if(payResult.data){
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
this.$api.msg('支付成功')
|
||
uni.hideLoading()
|
||
uni.redirectTo({
|
||
url:`/pages/mine/topUpSuc?price=${this.form.price}&coin=${this.form.coin}&gift=${this.form.gift}`
|
||
})
|
||
}
|
||
}).catch(err => {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
},
|
||
onUnload() {
|
||
// 在页面离开时清除定时器
|
||
clearInterval(this.timer);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background-color: #F5F5F5;
|
||
}
|
||
.top-up-order-page{
|
||
padding: 112rpx 32rpx 32rpx 32rpx;
|
||
.main{
|
||
width: 686rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
.item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 80rpx;
|
||
padding: 0 24rpx;
|
||
.label{
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
font-weight: 500;
|
||
}
|
||
.value{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
.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: 40rpx;
|
||
color: #000000;
|
||
.total{
|
||
font-weight: normal;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
.sym{
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
margin: 0 6rpx 0 10rpx;
|
||
}
|
||
|
||
.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: 16rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style> |