You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
606 lines
13 KiB
606 lines
13 KiB
<template>
|
|
<view class="main">
|
|
<!-- nav -->
|
|
<navigation>{{ i18n.Recharge }}
|
|
<view slot="right" class="right" @click="goto('rechargeRecord')">{{ i18n.Record
|
|
}}
|
|
</view>
|
|
</navigation>
|
|
<!-- headBtn -->
|
|
<view class="head">
|
|
<view class="headItem" @click="pageState = 'crypto',getRechargeInfo()"
|
|
:class="{ select: pageState === 'crypto' }">
|
|
{{ i18n.CoinRecharge }}
|
|
</view>
|
|
<view class="headItem" @click="pageState = 'online',getRechargeInfo()"
|
|
:class="{ select: pageState === 'online' }">
|
|
{{ i18n.CashRecharge }}
|
|
</view>
|
|
</view>
|
|
<view class="coinContent" v-if="pageState === 'crypto'">
|
|
<!-- coin选择框 -->
|
|
<view class="input-item">
|
|
<u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none"
|
|
:placeholder="i18n.PleaseChooseCoin" :disabled="true">
|
|
</u-input>
|
|
<view class="selectCoinBtn" @click="USDTPopupShow = true">{{coin}}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="coin-item">
|
|
<view class="QRCode">
|
|
<u-image class="QRCodeImg" :src="qr" width="310rpx" height="310rpx">
|
|
</u-image>
|
|
</view>
|
|
<view class="CoinAddressTitle">{{ i18n.CoinDepositAddress }}</view>
|
|
<view class="Copy" @click="copyAddress(coinAddress)">{{ i18n.CopyAddress }}</view>
|
|
<view class="CoinAddress">{{ coinAddress }}</view>
|
|
<u-divider text="" :dashed="true"></u-divider>
|
|
<view class="ScanQR">{{ i18n.ScanQR }}</view>
|
|
</view>
|
|
<view class="message-item">
|
|
{{ i18n.message }}
|
|
</view>
|
|
|
|
<!-- USDT按钮通知弹出层 -->
|
|
<u-popup class="USDTPopup" :show="USDTPopupShow" round="40rpx" mode="bottom" @close="USDTPopupShow = false"
|
|
@open="USDTPopupShow = true" bgColor="#211F32">
|
|
<view class="content">
|
|
<view class="close" @click="USDTPopupShow = false"></view>
|
|
<scroll-view scroll-y="true" style="height: 432rpx;" scroll-with-animation="true"
|
|
@touchmove.stop.prevent="">
|
|
<radio-group class="radioGroup" @change="USDTRadioChange" v-model="USDTRadioValue">
|
|
<label class="checkBox" v-for="(item, index) in reInfo.coins" :key="index"
|
|
@click="radioChange(item)">
|
|
<view class="icon">
|
|
<u-icon :name="baseURL+'/coins/'+item.code+'.png'" size="52rpx" width="52rpx">
|
|
</u-icon>
|
|
</view>
|
|
<view class="iconName">
|
|
<view class="top">{{item.enname}}</view>
|
|
<view class="bottom">{{item.useCapital}}{{" "}}{{item.code}}</view>
|
|
</view>
|
|
<radio color="#00E8A2" shape="square" :checked="coin==item.enname"></radio>
|
|
</label>
|
|
|
|
</radio-group>
|
|
</scroll-view>
|
|
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="USDTPopupShow = false">OK
|
|
</u-button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
|
|
<view class="cashContent" v-if="pageState === 'online'">
|
|
<view class="enter">
|
|
<view class="selectTitle">{{ i18n.selectAmount }}</view>
|
|
<view class="numberSelect">
|
|
<view :class="{ select: item === onlineInfo.tranAmt }" class="item" v-for="item,index in reInfo.fastAmount" @click="getAmount(item,index)">
|
|
{{item}}{{coinTypeInfo.system_coin_code}}
|
|
</view>
|
|
</view>
|
|
<input class="input" v-model="onlineInfo.tranAmt" focus :placeholder="i18n.EnterNumber"
|
|
placeholder-style="color:#A1A0A8" />
|
|
</view>
|
|
<view class="RechargeMethod">
|
|
<view class="methodTitle">{{ i18n.RechargeMethod }}</view>
|
|
<view class="methodSelect">
|
|
<view class="item" v-for="item,index in reInfo.payTypes" :class="{ select:item.payType === onlineInfo.payType }" @click="getCoinType(item,index)" >
|
|
{{item.typeName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="recharge">{{ i18n.Submit }}
|
|
</u-button>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniCopy from '@/utils/uni-copy'
|
|
import api from '@/utils/api'
|
|
import constant from '@/utils/constant.js';
|
|
import QR from '@/utils/qrCode/wxqrcode.js'
|
|
export default {
|
|
name: "recharge",
|
|
data() {
|
|
return {
|
|
// 充值地址
|
|
coinAddress: null,
|
|
baseURL: '',
|
|
reInfo: {},
|
|
qr: null,
|
|
pageState: 'crypto',
|
|
// 显示类型
|
|
coin: '',
|
|
// 传后台的虚拟币code
|
|
coinCode: '',
|
|
USDTPopupShow: false,
|
|
USDTRadioValue: '',
|
|
selectNumberValue: 100,
|
|
selectMethod: '1',
|
|
// 法币在线充值下单参数
|
|
onlineInfo: {
|
|
payType: null,
|
|
tranAmt: null,
|
|
},
|
|
|
|
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("recharge");
|
|
},
|
|
// 获取币种
|
|
coinTypeInfo() {
|
|
return uni.getStorageSync('coinTypeInfo')
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.baseURL = constant.BASE_URL
|
|
this.getRechargeInfo()
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
// 法币充值
|
|
recharge(){
|
|
api.recharge(this.onlineInfo).then(res => {
|
|
uni.$u.toast(this.$t("login").Rechargesucceeded)
|
|
setTimeout(()=>{
|
|
this.getRechargeInfo()
|
|
},1200)
|
|
})
|
|
},
|
|
// 获取选择充值的钱
|
|
getAmount(t,i) {
|
|
this.onlineInfo.tranAmt=t
|
|
},
|
|
// 获取充值类型
|
|
getCoinType(t,i){
|
|
this.onlineInfo.payType=t.payType
|
|
},
|
|
radioChange(e) {
|
|
this.coin = e.enname
|
|
this.coinCode = e.code
|
|
if (!e.address) {
|
|
let coinInfo = {
|
|
coinCode: e.code
|
|
}
|
|
// 返回的币种没有充值地址就用接口传code换取虚拟币充值地址
|
|
api.rechargeAddress(coinInfo).then(res => {
|
|
this.coinAddress = res.address
|
|
this.qr = this.reInfo.generateQRCodeUrl + this.coinAddress
|
|
})
|
|
} else {
|
|
this.coinAddress = e.address
|
|
this.qr = this.reInfo.generateQRCodeUrl + this.coinAddress
|
|
}
|
|
},
|
|
// 获取二维码
|
|
getQr(e) {
|
|
this.qr = QR.createQrCodeImg(e)
|
|
},
|
|
getRechargeInfo(e) {
|
|
api.rechargeConfig({
|
|
type: this.pageState
|
|
}).then(res => {
|
|
this.reInfo = res
|
|
if (this.pageState == 'crypto') {
|
|
if (this.reInfo.coins[0].address) {
|
|
this.coinAddress = this.reInfo.coins[0].address
|
|
let img = this.reInfo.generateQRCodeUrl + this.reInfo.coins[0].address
|
|
this.coin = this.reInfo.coins[0].enname
|
|
this.coinCode = this.reInfo.coins[0].code
|
|
this.getQr(img)
|
|
} else {
|
|
let coinInfo = {
|
|
coinCode: this.reInfo.coins[0].code
|
|
}
|
|
// 返回的币种没有充值地址就用接口传code换取虚拟币充值地址
|
|
api.rechargeAddress(coinInfo).then(res => {
|
|
this.coinAddress = res.address
|
|
this.qr = this.reInfo.generateQRCodeUrl + this.coinAddress
|
|
})
|
|
}
|
|
} else {
|
|
this.reInfo.fastAmount = this.reInfo.fastAmount.split(',')
|
|
this.onlineInfo.tranAmt=this.reInfo.fastAmount[0]
|
|
this.onlineInfo.payType=this.reInfo.payTypes[0].payType
|
|
}
|
|
|
|
|
|
})
|
|
},
|
|
goto(page) {
|
|
// console.log(page);
|
|
let url = '';
|
|
switch (page) {
|
|
case 'rechargeRecord':
|
|
url = '/pages/recharge/rechargeRecord'
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
if (url) {
|
|
// console.log(url);
|
|
uni.navigateTo({
|
|
url,
|
|
});
|
|
}
|
|
|
|
},
|
|
USDTRadioChange(e) {
|
|
console.log(e);
|
|
},
|
|
|
|
copyAddress(value = "") {
|
|
console.log(value)
|
|
uniCopy({
|
|
content: value,
|
|
success: (res) => {
|
|
uni.showToast({
|
|
title: "复制成功",
|
|
duration: 3000,
|
|
})
|
|
},
|
|
error: (e) => {
|
|
uni.showToast({
|
|
title: e,
|
|
icon: 'none',
|
|
duration: 2000,
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
|
|
.right {
|
|
position: absolute;
|
|
right: 32rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.head {
|
|
margin-top: 200rpx;
|
|
margin-left: 60rpx;
|
|
width: 632rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding: 48rpx 0;
|
|
|
|
.headItem {
|
|
width: 300rpx;
|
|
height: 68rpx;
|
|
line-height: 68rpx;
|
|
background: #211F32;
|
|
border-radius: 16rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
color: #A1A0A8;
|
|
|
|
&.select {
|
|
background: #00E8A2;
|
|
color: #15141F;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.coinContent {
|
|
padding: 0 32rpx;
|
|
|
|
.input-item {
|
|
overflow: hidden;
|
|
position: relative;
|
|
height: 124rpx;
|
|
line-height: 124rpx;
|
|
background: #211F32;
|
|
margin-bottom: 48rpx;
|
|
border-radius: 32rpx;
|
|
padding: 0 40rpx;
|
|
|
|
/deep/.u-form-item__body {
|
|
padding: 0;
|
|
}
|
|
|
|
.input {
|
|
width: 460rpx;
|
|
height: 124rpx;
|
|
display: inline-block;
|
|
background: #211F32 !important;
|
|
}
|
|
|
|
.selectCoinBtn {
|
|
position: absolute;
|
|
height: 54rpx;
|
|
top: 36rpx;
|
|
right: 65rpx;
|
|
line-height: 56rpx;
|
|
font-size: 36rpx;
|
|
padding: 0;
|
|
color: #fff;
|
|
|
|
&::after {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
background-image: url(../../static/me/ic_input_arrow_down.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 32rpx;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
top: 12rpx;
|
|
right: -40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.coin-item {
|
|
height: 622rpx;
|
|
background: #211F32;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
padding: 0 40rpx;
|
|
|
|
.QRCode {
|
|
margin: 60rpx auto 32rpx;
|
|
width: 310rpx;
|
|
}
|
|
|
|
.CoinAddressTitle {
|
|
width: 340rpx;
|
|
height: 40rpx;
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
color: #00E8A2;
|
|
}
|
|
|
|
.Copy {
|
|
position: relative;
|
|
height: 40rpx;
|
|
display: inline-block;
|
|
color: #00E8A2;
|
|
font-size: 20rpx;
|
|
margin-left: 70rpx;
|
|
padding-left: 40rpx;
|
|
|
|
&::before {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
background-image: url(../../static/recharge/ic_copy.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 32rpx;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
top: 0rpx;
|
|
left: 0rpx;
|
|
}
|
|
}
|
|
|
|
.CoinAddress {
|
|
margin-top: 12rpx;
|
|
font-size: 20rpx;
|
|
// transform: scale(0.83333);
|
|
// transform-origin: 0 0;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
.ScanQR {
|
|
font-size: 20rpx;
|
|
// transform: scale(0.83333);
|
|
// transform-origin: 0 0;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
}
|
|
|
|
.message-item {
|
|
margin: 32rpx 0 120rpx;
|
|
padding: 0 16rpx;
|
|
font-size: 24rpx;
|
|
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
.USDTPopup {
|
|
.content {
|
|
height: 730rpx;
|
|
|
|
.close {
|
|
margin: 48rpx 346rpx;
|
|
width: 58rpx;
|
|
height: 20rpx;
|
|
background-image: url(../../static/charity/Turn.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 58rpx 20rpx;
|
|
}
|
|
|
|
.radioGroup {
|
|
height: 432rpx;
|
|
|
|
.checkBox {
|
|
height: 84rpx;
|
|
width: 670rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 40rpx 32rpx;
|
|
|
|
.icon {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.iconName {
|
|
width: 520rpx;
|
|
|
|
.top {
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.bottom {
|
|
font-size: 24rpx;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/deep/.uni-radio-input {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 16rpx;
|
|
background: #323045;
|
|
}
|
|
|
|
/deep/.uni-radio-input-checked::before {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.button {
|
|
width: 654rpx;
|
|
margin: 40rpx 48rpx;
|
|
border-radius: 32rpx;
|
|
height: 112rpx;
|
|
line-height: 112rpx;
|
|
color: #15141F !important;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.cashContent {
|
|
.enter {
|
|
box-sizing: border-box;
|
|
height: 422rpx;
|
|
margin: 0 32rpx;
|
|
background: #211F32;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx 32rpx;
|
|
|
|
.selectTitle {
|
|
font-size: 24rpx;
|
|
|
|
}
|
|
|
|
.numberSelect {
|
|
margin-top: 32rpx;
|
|
height: 168rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
.item {
|
|
height: 68rpx;
|
|
line-height: 68rpx;
|
|
width: 186rpx;
|
|
color: #A1A0A8;
|
|
background: #323045;
|
|
border-radius: 40rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
|
|
&.select {
|
|
background: #FF844B;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input {
|
|
height: 112rpx;
|
|
background: #323045;
|
|
border-radius: 32rpx;
|
|
padding-left: 40rpx;
|
|
margin-top: 32rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.RechargeMethod {
|
|
box-sizing: border-box;
|
|
height: 178rpx;
|
|
margin: 32rpx;
|
|
background: #211F32;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx 32rpx;
|
|
|
|
.methodTitle {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.methodSelect {
|
|
margin-top: 32rpx;
|
|
height: 112rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
.item {
|
|
height: 68rpx;
|
|
line-height: 68rpx;
|
|
width: 306rpx;
|
|
color: #A1A0A8;
|
|
background: #323045;
|
|
border-radius: 40rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
|
|
&.select {
|
|
background: #FF844B;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.button {
|
|
width: 686rpx;
|
|
box-sizing: border-box;
|
|
height: 112rpx;
|
|
margin: 16rpx 32rpx;
|
|
background: #00E8A2;
|
|
border-radius: 32rpx;
|
|
font-weight: 700;
|
|
font-size: 32rpx;
|
|
color: #15141F !important;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
</style>
|
|
|