516 lines
14 KiB
Vue
516 lines
14 KiB
Vue
<template>
|
||
<!-- <view class="log-out">
|
||
<view class="log-out-tip">代币余额不足，是否充值</view>
|
||
<view class="log-out-footer">
|
||
<view class="cancel" @click="closeTop">狠心离开</view>
|
||
<view class="shu"></view>
|
||
<view class="log-out-submit" @click="submitTop">去充值</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="main-top">
|
||
<view class="list">
|
||
<template v-for="(item,index) in list">
|
||
<view class="items" :class="{'item-active':listIndex === index}" :key="index" @click="handleItem(index)" v-if="index < 3">
|
||
<view class="tips" v-if="item.gift">赠送{{item.gift}}代币</view>
|
||
<view class="point">
|
||
<image src="@/static/an/point.gif" mode="" class="point-icon"></image>
|
||
{{item.coin}}
|
||
</view>
|
||
<view class="price">¥ {{item.price.settlement}}</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label">充值金额</view>
|
||
<view class="value">{{list[listIndex].price.sale}} 元</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label">充值代币</view>
|
||
<view class="value">{{list[listIndex].coin}} 代币</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label">充值奖励</view>
|
||
<view class="value">{{list[listIndex].gift}} 代币</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="buy" @click="pay">立即支付 ¥{{list[listIndex].price.sale}}</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { coinGearApi,payMethodApi,coinGearRechargeApi,coinPaidApi } from '@/API/user.js'
|
||
export default{
|
||
data(){
|
||
return{
|
||
list:[],
|
||
listIndex:0,
|
||
payList:[],
|
||
payType:'',
|
||
timer:null,
|
||
payinfoUrl:'',
|
||
orderSn:'',
|
||
timeSec:0
|
||
}
|
||
},
|
||
props:{
|
||
close:{
|
||
type:Boolean,
|
||
default:false
|
||
}
|
||
},
|
||
watch:{
|
||
timeSec(){
|
||
if(this.timeSec == 30){
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
this.$api.msg('未查询到支付结果')
|
||
}
|
||
},
|
||
close(){
|
||
uni.hideLoading()
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getCoinGear()
|
||
|
||
},
|
||
methods:{
|
||
getPayMethod(){
|
||
payMethodApi({type:'COIN_RECHARGE'}).then(res => {
|
||
console.log(res)
|
||
if(res.code === 200){
|
||
this.payList = []
|
||
// 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:false,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'})
|
||
// }
|
||
// })
|
||
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 === 'COIN') {
|
||
objToAdd = {
|
||
label: "代币支付",
|
||
type: 'COIN',
|
||
visible: false,
|
||
img: '../../static/an/point.gif',
|
||
width: '32rpx',
|
||
height: '34rpx'
|
||
};
|
||
} else if (item === 'NONE') {
|
||
objToAdd = {
|
||
label: "无需支付",
|
||
type: 'NONE',
|
||
visible: false,
|
||
img: '',
|
||
width: '32rpx',
|
||
height: '34rpx'
|
||
};
|
||
}
|
||
|
||
// 只有在objToAdd被赋值的情况下才添加到payList
|
||
if (objToAdd) {
|
||
if (objToAdd.type === 'WECHAT') {
|
||
// 如果是WECHAT类型，则先添加到数组第一位
|
||
this.payList.unshift(objToAdd);
|
||
} else {
|
||
// 其他类型添加到数组末尾
|
||
this.payList.push(objToAdd);
|
||
}
|
||
}
|
||
});
|
||
// this.payList
|
||
this.payList[0].visible = true
|
||
this.payType = this.payList[0].type
|
||
|
||
|
||
// if(this.payType !== 'NONE'){
|
||
// let item = this.list[this.listIndex]
|
||
// uni.showLoading()
|
||
// let data = {
|
||
// "gearId": item.id,
|
||
// "method": this.payType
|
||
// }
|
||
// // return
|
||
// coinGearRechargeApi(data).then(result => {
|
||
// uni.hideLoading()
|
||
// if(result.code === 200){
|
||
// if(result.data.payParams.payinfo){
|
||
// this.payinfoUrl = result.data.payParams.payinfo
|
||
// }
|
||
// this.orderSn = result.data.no
|
||
// }else{
|
||
// // this.$api.msg(result.message)
|
||
// }
|
||
// })
|
||
// }
|
||
|
||
|
||
|
||
}
|
||
})
|
||
},
|
||
payChange(index,item){
|
||
this.payIndex = index;
|
||
this.payType = item.type
|
||
this.payList.forEach((item, idx) => {
|
||
item.visible = idx === index;
|
||
});
|
||
this.payinfoUrl = ''
|
||
// if(this.payType !== 'NONE'){
|
||
// let itemId = this.list[this.listIndex]
|
||
// uni.showLoading()
|
||
// let data = {
|
||
// "gearId": itemId.id,
|
||
// "method": this.payType
|
||
// }
|
||
// // return
|
||
// coinGearRechargeApi(data).then(result => {
|
||
// uni.hideLoading()
|
||
// if(result.code === 200){
|
||
// if(result.data.payParams.payinfo){
|
||
// this.payinfoUrl = result.data.payParams.payinfo
|
||
// }
|
||
// this.orderSn = result.data.no
|
||
// }else{
|
||
// // this.$api.msg(result.message)
|
||
// }
|
||
// })
|
||
// }
|
||
|
||
|
||
},
|
||
getCoinGear(){
|
||
coinGearApi({page:1,size:999}).then(res => {
|
||
console.log(res)
|
||
if(res.code === 200){
|
||
res.data.content.forEach(item => {
|
||
item.gift = Number(item.gift)
|
||
})
|
||
this.list = res.data.content
|
||
this.getPayMethod()
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
closeTop(){
|
||
this.$emit('close')
|
||
},
|
||
submitTop(){
|
||
this.$emit('close')
|
||
uni.navigateTo({
|
||
url:`/pages/mine/topUp`
|
||
})
|
||
},
|
||
|
||
handleItem(index){
|
||
this.listIndex = index
|
||
},
|
||
pay(){
|
||
// if(this.payType === 'WECHAT'){
|
||
// uni.showLoading()
|
||
// // window.open(this.payinfoUrl)
|
||
// window.location.href = this.payinfoUrl
|
||
// this.getOrderPaid(this.orderSn)
|
||
// this.timer = setInterval(() => {
|
||
// this.getOrderPaid(this.orderSn)
|
||
// },3000);
|
||
// }else if(this.payType === 'ALIPAY'){
|
||
// uni.showLoading()
|
||
// // window.open(this.payinfoUrl)
|
||
// window.location.href = this.payinfoUrl
|
||
// this.getOrderPaid(this.orderSn)
|
||
// this.timer = setInterval(() => {
|
||
// this.getOrderPaid(this.orderSn)
|
||
// },3000);
|
||
// }else{
|
||
let item = this.list[this.listIndex]
|
||
uni.showLoading()
|
||
let data = {
|
||
"gearId": item.id,
|
||
"method": this.payType
|
||
}
|
||
// return
|
||
coinGearRechargeApi(data).then(res => {
|
||
this.timeSec = 0
|
||
if(res.code === 200){
|
||
if(res.data.payParams.payinfo){
|
||
location.href = res.data.payParams.payinfo
|
||
}
|
||
this.getOrderPaid(res.data.no)
|
||
this.timer = setInterval(() => {
|
||
this.timeSec += 3
|
||
this.getOrderPaid(res.data.no)
|
||
},3000);
|
||
}else{
|
||
// this.$api.msg(res.message)
|
||
}
|
||
})
|
||
// }
|
||
|
||
// uni.navigateTo({
|
||
// url:`/pages/mine/topUpOrder?id=${item.id}&price=${item.price.settlement}&coin=${item.coin}&gift=${item.gift}`
|
||
// })
|
||
},
|
||
getOrderPaid(no){
|
||
coinPaidApi({no}).then(payResult => {
|
||
if(payResult.data){
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
this.$emit('sucClose')
|
||
// this.$api.msg('支付成功')
|
||
uni.hideLoading()
|
||
}
|
||
}).catch(err => {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
},
|
||
onHide() {
|
||
console.log('close')
|
||
},
|
||
onUnload() {
|
||
console.log('close')
|
||
// 在页面离开时清除定时器
|
||
clearInterval(this.timer);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
.main-top{
|
||
padding: 62rpx 32rpx 32rpx 32rpx;
|
||
.list{
|
||
display: grid;
|
||
gap: 22rpx;
|
||
grid-template-rows: 1fr;
|
||
margin: 0px auto;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
|
||
|
||
// display: grid;
|
||
// gap: 12rpx;
|
||
// grid-template-rows: 1fr;
|
||
// margin: 0px auto;
|
||
// grid-template-columns: repeat(3, 1fr);
|
||
padding: 24rpx 0rpx;
|
||
.items{
|
||
width: 208rpx;
|
||
height: 168rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #E6E6E6;
|
||
position: relative;
|
||
margin-bottom: 32rpx;
|
||
.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: 0;
|
||
}
|
||
.point{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40rpx;
|
||
color: #000000;
|
||
padding-top: 40rpx;
|
||
.point-icon{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
// margin-right: 8rpx;
|
||
}
|
||
}
|
||
.price{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
margin-top: 6rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.item-active{
|
||
border: none;
|
||
border: 2rpx solid transparent;
|
||
background-image: url('@/static/new/topup/item-bg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
.buy{
|
||
width: 686rpx;
|
||
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;
|
||
}
|
||
.custom-toast{
|
||
|
||
}
|
||
}
|
||
|
||
</style> |