689 lines
17 KiB
Vue
689 lines
17 KiB
Vue
<template>
|
||
<view class="top-up-page">
|
||
<HeaderCom></HeaderCom>
|
||
<view class="header">
|
||
<view class="title">代币余额</view>
|
||
<view class="price">{{infoDetail.coins || 0}}</view>
|
||
</view>
|
||
<view class="line">选择充值金额</view>
|
||
<scroll-view scroll-y="true" class="main">
|
||
<view class="list">
|
||
<view class="items" :class="{'item-active':listIndex === index}" v-for="(item,index) in list"
|
||
:key="index" @click="handleItem(index)">
|
||
<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>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="footer">
|
||
<view class="footer-btn" @click="pay">立即支付</view>
|
||
</view>
|
||
<!-- 充值 -->
|
||
<popup-view v-model="isTopUp" mode="bottom" border-radius="15" z-index="1000">
|
||
<view style="padding-bottom: 32rpx;">
|
||
<view class="item">
|
||
<view class="label">充值金额</view>
|
||
<view class="value">{{list[listIndex].price.settlement}} 元</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="mains">
|
||
<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="payDlg">立即支付 ¥{{list[listIndex].price.sale}}</view>
|
||
<!-- <uni-link :href="payUrl" text="支付"></uni-link> -->
|
||
</view>
|
||
</popup-view>
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/mine/topUp"></page-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import HeaderCom from '@/pages/components/header.vue'
|
||
import {
|
||
userInfo,
|
||
coinGearApi,
|
||
payMethodApi,
|
||
coinGearRechargeApi,
|
||
coinPaidApi
|
||
} from '@/API/user.js'
|
||
import reportClickFn from '@/utils/report.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [],
|
||
listIndex: 0,
|
||
infoDetail: {
|
||
phone: "",
|
||
avatarResource: {}
|
||
},
|
||
isTopUp: false,
|
||
payList: [],
|
||
payIndex: 0,
|
||
timer: null,
|
||
optionUrl:{},
|
||
payUrl:'',
|
||
payinfoUrl:'',
|
||
orderNo:'',
|
||
timeSec:0
|
||
}
|
||
},
|
||
components: {
|
||
HeaderCom
|
||
},
|
||
watch:{
|
||
timeSec(){
|
||
if(this.timeSec == 30){
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
this.$api.msg('未查询到支付结果')
|
||
}
|
||
}
|
||
},
|
||
onShow() {
|
||
},
|
||
onLoad(option) {
|
||
this.getUserInfo()
|
||
this.getCoinGear()
|
||
// if(option.no){
|
||
// this.optionUrl = option
|
||
// this.getOrderPaid(this.optionUrl.no)
|
||
// this.timer = setInterval(() => {
|
||
// this.getOrderPaid(this.optionUrl.no)
|
||
// }, 3000);
|
||
// }
|
||
// price=${this.settlement}&coin=${this.coin}&gift=${this.gift}&no=${this.no}`
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
methods: {
|
||
getPayMethod() {
|
||
payMethodApi({
|
||
type: 'COIN_RECHARGE'
|
||
}).then(res => {
|
||
console.log(res)
|
||
this.payList = []
|
||
if (res.code === 200) {
|
||
// this.isTopUp = true
|
||
// 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 === '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
|
||
|
||
this.isTopUp = true
|
||
// 充值购买预览埋点
|
||
reportClickFn('coin_gear_review_clk')
|
||
|
||
}else{
|
||
this.$api.msg(res.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'){
|
||
// uni.showLoading()
|
||
// let data = {
|
||
// "gearId": this.list[this.listIndex].id,
|
||
// "method": this.payType
|
||
// }
|
||
// coinGearRechargeApi(data).then(res => {
|
||
// uni.hideLoading()
|
||
// if (res.code === 200) {
|
||
|
||
// if (res.data.payParams.payinfo) {
|
||
// if(this.payType === 'WECHAT'){
|
||
// this.payinfoUrl = res.data.payParams.payinfo
|
||
// this.orderNo = res.data.no
|
||
// }else if(this.payType === 'ALIPAY'){
|
||
// this.payinfoUrl = res.data.payParams.payinfo
|
||
// this.orderNo = res.data.no
|
||
// }
|
||
// }
|
||
// } else {
|
||
// // this.$api.msg(res.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
|
||
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 获取用户信息
|
||
getUserInfo() {
|
||
userInfo().then(res => {
|
||
if (res.code === 200) {
|
||
this.infoDetail = res.data
|
||
} else if (res.code == 400) {
|
||
uni.removeStorageSync('userInfo')
|
||
uni.removeStorageSync('info')
|
||
this.$api.msg(res.message)
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
handleItem(index) {
|
||
this.listIndex = index
|
||
},
|
||
pay() {
|
||
this.getPayMethod()
|
||
// if(this.payType !== 'NONE'){
|
||
// uni.showLoading()
|
||
// let data = {
|
||
// "gearId": this.list[this.listIndex].id,
|
||
// "method": this.payType
|
||
// }
|
||
// // return
|
||
// coinGearRechargeApi(data).then(res => {
|
||
// uni.hideLoading()
|
||
// if (res.code === 200) {
|
||
// this.isTopUp = true
|
||
// if (res.data.payParams.payinfo) {
|
||
// if(this.payType === 'WECHAT'){
|
||
// this.payinfoUrl = res.data.payParams.payinfo
|
||
// this.orderNo = res.data.no
|
||
// }else if(this.payType === 'ALIPAY'){
|
||
// this.payinfoUrl = res.data.payParams.payinfo
|
||
// this.orderNo = res.data.no
|
||
// }
|
||
// }
|
||
// } else {
|
||
// this.$api.msg(res.message)
|
||
// }
|
||
// })
|
||
// }else{
|
||
// this.isTopUp = true
|
||
// }
|
||
|
||
// let item = this.list[this.listIndex]
|
||
|
||
// uni.navigateTo({
|
||
// url:`/pages/mine/topUpOrder?id=${item.id}&price=${item.price.settlement}&coin=${item.coin}&gift=${item.gift}`
|
||
// })
|
||
},
|
||
|
||
payDlg() {
|
||
// console.log(this.payType)
|
||
// if(this.payType === 'WECHAT'){
|
||
// // window.open(this.payinfoUrl)
|
||
// window.location.href = this.payinfoUrl
|
||
// this.getOrderPaid(this.orderNo)
|
||
// this.timer = setInterval(() => {
|
||
// this.getOrderPaid(this.orderNo)
|
||
// }, 3000);
|
||
// }else if(this.payType === 'ALIPAY'){
|
||
// window.location.href = this.payinfoUrl
|
||
// // window.open(this.payinfoUrl)
|
||
// this.getOrderPaid(this.orderNo)
|
||
// this.timer = setInterval(() => {
|
||
// this.getOrderPaid(this.orderNo)
|
||
// }, 3000);
|
||
// }else{
|
||
this.timeSec = 0
|
||
uni.showLoading()
|
||
let data = {
|
||
"gearId": this.list[this.listIndex].id,
|
||
"method": this.payType
|
||
}
|
||
// return
|
||
coinGearRechargeApi(data).then(res => {
|
||
if (res.code === 200) {
|
||
if (res.data.payParams.payinfo) {
|
||
window.location.href = res.data.payParams.payinfo
|
||
this.getOrderPaid(res.data.no)
|
||
this.timer = setInterval(() => {
|
||
this.timeSec += 3
|
||
this.getOrderPaid(res.data.no)
|
||
}, 3000);
|
||
// this.payUrl = res.data.payParams.payinfo
|
||
// window.open(res.data.payParams.payinfo, '_blank');
|
||
// window.location.href = res.data.payParams.payinfo
|
||
|
||
// if(this.payType === 'WECHAT'){
|
||
// this.payinfoUrl = res.data.payParams.payinfo
|
||
// // location.href = res.data.payParams.payinfo
|
||
// this.getOrderPaid(res.data.no)
|
||
// this.timer = setInterval(() => {
|
||
// this.getOrderPaid(res.data.no)
|
||
// }, 3000);
|
||
// }else{
|
||
// let item = this.list[this.listIndex]
|
||
// uni.navigateTo({
|
||
// url:`/pages/testPay/testPay?no=${res.data.no}&settlement=${item.price.settlement}&coin=${item.coin}&gift=${item.gift}&url=${encodeURIComponent(res.data.payParams.payinfo)}`
|
||
// })
|
||
// }
|
||
|
||
|
||
}else{
|
||
this.getOrderPaid(res.data.no)
|
||
this.timer = setInterval(() => {
|
||
this.getOrderPaid(res.data.no)
|
||
}, 3000);
|
||
}
|
||
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
// }
|
||
|
||
|
||
},
|
||
getOrderPaid(no) {
|
||
uni.showLoading()
|
||
coinPaidApi({
|
||
no
|
||
}).then(payResult => {
|
||
if (payResult.data) {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
this.$api.msg('支付成功')
|
||
this.isTopUp = false
|
||
this.listIndex = 0
|
||
this.payIndex = 0
|
||
uni.hideLoading()
|
||
let item = this.list[this.listIndex]
|
||
uni.navigateTo({
|
||
url: `/pages/mine/topUpSuc?price=${item.price.settlement}&coin=${item.coin}&gift=${item.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-page {
|
||
background-image: url('@/static/new/topup/bg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
padding: 112rpx 32rpx 32rpx 32rpx;
|
||
|
||
.header {
|
||
width: 686rpx;
|
||
height: 204rpx;
|
||
background-image: url('@/static/new/topup/header.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
|
||
.title {
|
||
padding: 40rpx 0 0 48rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.price {
|
||
padding: 16rpx 0 0 44rpx;
|
||
font-size: 64rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
height: 80rpx;
|
||
width: 100%;
|
||
padding-top: 40rpx;
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.main {
|
||
height: calc(100vh - 604rpx);
|
||
|
||
.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%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
width: 100%;
|
||
height: 144rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: #fff;
|
||
|
||
.footer-btn {
|
||
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;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.mains {
|
||
width: 100%;
|
||
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;
|
||
margin-left: 32rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style> |