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.
367 lines
8.0 KiB
367 lines
8.0 KiB
<template>
|
|
<view class="main">
|
|
<!-- nav -->
|
|
<navigation>{{ i18n.Transfer }}</navigation>
|
|
<view class="body">
|
|
<view class="form">
|
|
<!-- coin选择框 -->
|
|
<view class="text">{{ i18n.SelectCurrency }}</view>
|
|
<view class="input-item">
|
|
<u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none"
|
|
:placeholder="i18n.PleaseChooseCoin">
|
|
</u-input>
|
|
<view class="downSelect" @click="USDTPopupShow = true"></view>
|
|
</view>
|
|
<!-- form地址选择框 -->
|
|
<view class="text">{{ i18n.From }}</view>
|
|
<view class="input-item">
|
|
<u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none"
|
|
:placeholder="i18n.OptionAccount">
|
|
</u-input>
|
|
<view class="downSelect" @click="accountPopupShow = true"></view>
|
|
</view>
|
|
<!-- to地址选择框 -->
|
|
<view class="text">{{ i18n.To }}</view>
|
|
<view class="input-item">
|
|
<u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none"
|
|
:placeholder="i18n.TradingAccount">
|
|
</u-input>
|
|
<view class="downSelect" @click="accountPopupShow = true"></view>
|
|
</view>
|
|
<!-- 数量 -->
|
|
<view class="text">{{ i18n.TransferNumber }}</view>
|
|
<view class="input-item">
|
|
<u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none"
|
|
:placeholder="i18n.PleaseEnterNumber">
|
|
</u-input>
|
|
<view class="numberDownSelect">USDT <view class="all">{{i18n.ALL}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="Usable">{{ i18n.Usable }}
|
|
<view class="number">{{info.userCapital}}{{info.coinCode}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 按钮 -->
|
|
<u-button class="transferButton" color="#00E8A2" throttleTime="500">{{
|
|
i18n.Transfer
|
|
}}</u-button>
|
|
|
|
<!-- 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/bye.png" size="52rpx" width="52rpx"></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>
|
|
|
|
<!-- account账户按钮通知弹出层 -->
|
|
<u-popup class="accountPopup" :show="accountPopupShow" round="40rpx" mode="bottom"
|
|
@close="accountPopupShow = false" @open="accountPopupShow = true" bgColor="#211F32">
|
|
<view class="content">
|
|
<view class="close" @click="accountPopupShow = false"></view>
|
|
<scroll-view scroll-y="true" style="height: 200rpx;" scroll-with-animation="true"
|
|
@touchmove.stop.prevent="">
|
|
<radio-group class="radioGroup" @change="accountRadioChange" v-model="accountRadioValue">
|
|
<label class="checkBox" v-for="(item, index) in 3" :key="index">
|
|
<view class="name">Option account</view>
|
|
<radio color="#00E8A2" shape="square"></radio>
|
|
</label>
|
|
|
|
</radio-group>
|
|
</scroll-view>
|
|
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="accountPopupShow = false">OK
|
|
</u-button>
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import api from '@/utils/api'
|
|
export default {
|
|
name: "transfer",
|
|
data() {
|
|
return {
|
|
info:{},
|
|
coin: '',
|
|
USDTPopupShow: false,
|
|
accountPopupShow: false,
|
|
USDTRadioValue: '',
|
|
accountRadioValue: '',
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("me");
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.getInfo()
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
getInfo() {
|
|
api.getTransferConfig({}).then(res => {
|
|
console.log(res)
|
|
this.info=res
|
|
})
|
|
},
|
|
USDTRadioChange(e) {
|
|
console.log(e);
|
|
},
|
|
accountRadioChange(e) {
|
|
console.log(e);
|
|
}
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
.body {
|
|
.form {
|
|
margin: 232rpx 32rpx 0;
|
|
background: #211F32;
|
|
border-radius: 32rpx;
|
|
padding: 0 32rpx;
|
|
overflow: hidden;
|
|
|
|
.text {
|
|
margin: 32rpx 0 20rpx;
|
|
font-size: 32rpx;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
.input-item {
|
|
position: relative;
|
|
background: #323045;
|
|
border-radius: 32rpx;
|
|
|
|
.input {
|
|
width: 400rpx;
|
|
height: 112rpx;
|
|
padding-left: 40rpx !important;
|
|
}
|
|
|
|
.downSelect {
|
|
position: absolute;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
top: 36rpx;
|
|
right: 32rpx;
|
|
background-image: url(../../static/me/ic_input_arrow_down.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 32rpx;
|
|
|
|
|
|
}
|
|
|
|
.numberDownSelect {
|
|
position: absolute;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
top: 36rpx;
|
|
right: 148rpx;
|
|
|
|
.all {
|
|
padding-left: 16rpx;
|
|
display: inline;
|
|
font-size: 28rpx;
|
|
color: #00E8A2;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.Usable {
|
|
margin: 32rpx 0;
|
|
color: #FFFFFF;
|
|
font-size: 12px;
|
|
|
|
.number {
|
|
display: inline;
|
|
color: #00E8A2;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.transferButton {
|
|
box-sizing: border-box;
|
|
margin: 64rpx 32rpx;
|
|
width: 686rpx;
|
|
height: 112rpx;
|
|
line-height: 112rpx;
|
|
border-radius: 32rpx;
|
|
font-size: 32rpx;
|
|
color: #15141F !important;
|
|
}
|
|
|
|
.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: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
background: #323045;
|
|
padding: 16rpx;
|
|
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;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.accountPopup {
|
|
.content {
|
|
height: 484rpx;
|
|
|
|
.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: 200rpx;
|
|
|
|
.checkBox {
|
|
height: 84rpx;
|
|
width: 670rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 40rpx 32rpx;
|
|
|
|
.name {
|
|
width: 600rpx;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
/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: 20rpx 48rpx;
|
|
border-radius: 32rpx;
|
|
height: 112rpx;
|
|
line-height: 112rpx;
|
|
color: #15141F !important;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
</style>
|
|
|