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.
527 lines
16 KiB
527 lines
16 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 = 'coinRecharge'"
|
|
:class="{ select: pageState === 'coinRecharge' }">
|
|
{{ i18n.CoinRecharge }}
|
|
</view>
|
|
<view class="headItem" @click="pageState = 'cashRecharge'"
|
|
:class="{ select: pageState === 'cashRecharge' }">
|
|
{{ i18n.CashRecharge }}
|
|
</view>
|
|
</view>
|
|
<view class="coinContent" v-if="pageState === 'coinRecharge'">
|
|
<!-- coin选择框 -->
|
|
<view class="input-item">
|
|
<u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none"
|
|
:placeholder="i18n.PleaseChooseCoin">
|
|
</u-input>
|
|
<view class="selectCoinBtn" @click="USDTPopupShow = true">USDT
|
|
</view>
|
|
</view>
|
|
|
|
<view class="coin-item">
|
|
<view class="QRCode">
|
|
<u-image class="QRCodeImg" src="../../static/me/QR-code.png" width="310rpx" height="310rpx">
|
|
</u-image>
|
|
</view>
|
|
<view class="CoinAddressTitle">{{ i18n.CoinDepositAddress }}</view>
|
|
<view class="Copy" @click="copyAddress('123')">{{ i18n.CopyAddress }}</view>
|
|
<view class="CoinAddress">{{ 'MBDLNKJ9080FWO83RHFKSJLIRJF9S9890DKJ90' }}</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 10" :key="index">
|
|
<view class="icon">
|
|
<u-icon name="../../static/maskets/logo.png" size="64rpx" width="64rpx"></u-icon>
|
|
</view>
|
|
<view class="iconName">
|
|
<view class="top">USDT</view>
|
|
<view class="bottom">BTC</view>
|
|
</view>
|
|
|
|
<radio color="#00E8A2" shape="square"></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 === 'cashRecharge'">
|
|
<view class="enter">
|
|
<view class="selectTitle">{{ i18n.selectAmount }}</view>
|
|
<view class="numberSelect">
|
|
<view class="item" :class="{ select: selectNumberValue === 100 }" @click="selectNumberValue = 100">
|
|
$100
|
|
</view>
|
|
<view class="item" :class="{ select: selectNumberValue === 200 }" @click="selectNumberValue = 200">
|
|
$200
|
|
</view>
|
|
<view class="item" :class="{ select: selectNumberValue === 300 }" @click="selectNumberValue = 300">
|
|
$300
|
|
</view>
|
|
<view class="item" :class="{ select: selectNumberValue === 1000 }"
|
|
@click="selectNumberValue = 1000">
|
|
$1000</view>
|
|
<view class="item" :class="{ select: selectNumberValue === 5000 }"
|
|
@click="selectNumberValue = 5000">
|
|
$5000</view>
|
|
<view class="item" :class="{ select: selectNumberValue === 10000 }"
|
|
@click="selectNumberValue = 10000">
|
|
$10000</view>
|
|
</view>
|
|
<input class="input" v-model="selectNumberValue" focus :placeholder="i18n.EnterNumber" placeholder-style="color:#A1A0A8" />
|
|
</view>
|
|
<view class="RechargeMethod">
|
|
<view class="methodTitle">{{ i18n.RechargeMethod }}</view>
|
|
<view class="methodSelect">
|
|
<view class="item" :class="{ select: selectMethod === '1' }" @click="selectMethod = '1'">
|
|
Online payment1
|
|
</view>
|
|
<view class="item" :class="{ select: selectMethod === '2' }" @click="selectMethod = '2'">
|
|
Online payment2
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-button class="button" color="#00E8A2" throttleTime="500">{{ i18n.Submit }}
|
|
</u-button>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniCopy from '@/utils/uni-copy'
|
|
export default {
|
|
name: "recharge",
|
|
data() {
|
|
return {
|
|
pageState: 'coinRecharge',
|
|
coin: '',
|
|
USDTPopupShow: false,
|
|
USDTRadioValue: '',
|
|
selectNumberValue: 100,
|
|
selectMethod: '1',
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("recharge");
|
|
},
|
|
},
|
|
onLoad() {
|
|
},
|
|
onShow() { },
|
|
methods: {
|
|
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;
|
|
}
|
|
|
|
.selectCoinBtn {
|
|
position: absolute;
|
|
width: 170rpx;
|
|
height: 54rpx;
|
|
top: 36rpx;
|
|
right: 32rpx;
|
|
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: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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>
|
|
|