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.
 
 
 

834 lines
19 KiB

<template>
<view class="main">
<!-- nav -->
<navigation>{{ i18n.Withdrawal }}
<view slot="right" class="right" @click="goto('withdrawalRecord')">{{
i18n.Record
}}
</view>
</navigation>
<!-- headBtn -->
<!-- #ifdef H5 -->
<view class="head" style="margin-top: 100rpx;">
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="head">
<!-- #endif -->
<view class="headItem" @click="pageState = 'crypto',getWithConfig()"
:class="{ select: pageState === 'crypto' }">
{{ i18n.DigitalCurrency }}
</view>
<view class="headItem" @click="pageState = 'online',getWithConfig()"
:class="{ select: pageState === 'online' }">
{{ i18n.OnLine }}
</view>
</view>
<view class="DCContent" v-if="pageState === 'crypto'">
<!-- coin选择框 -->
<view class="input-item">
<u-input class="input inputbg" v-model="coinInfo.coinCode" color="#fff" fontSize="32rpx" border="none"
:placeholder="i18n.PleaseChooseCoin" :disabled="true">
</u-input>
<view class="selectCoinBtn" @click="USDTPopupShow = true">{{coinInfo.coinCode}}
</view>
</view>
<view class="coin-item">
<!-- choose地址 -->
<view class="title">{{ i18n.WithdrawAddress }}
<view class="choose" @click="goto('chooseAddress')">{{ i18n.Choose }}</view>
</view>
<!-- 地址 -->
<view class="address">
<text v-if="coinAddress">{{coinAddress}}</text>
<text v-else>{{i18n.Pleasechoose}}</text>
</view>
<!-- 分割线 -->
<u-divider text="" lineColor="#B9C1D9"></u-divider>
<!-- 可用数量 ${selectCoinInfo.enname}-->
<key-value-row :keyName="i18n.Quantity"
:value="`${i18n.Available} ${selectCoinInfo.useCapital}`"
rightColor="#A1A0A8"></key-value-row>
<!-- 数量输入框 -->
<view class="input-item">
<u-input class="input" v-model="coinInfo.tranAmt" color="#fff" fontSize="32rpx" border="none"
:placeholder="i18n.EnterTheQuantity">
</u-input>
<view class="all" @click="coinInfo.tranAmt=selectCoinInfo.useCapital">{{ i18n.ALL }}
</view>
</view>
<!-- 最低体现金额 +selectCoinInfo.enname-->
<key-value-row :keyName="i18n.MinimumWithdrawAmount" size="24rpx"
:value="selectCoinInfo.withdrawMinAmount" rightColor="#A1A0A8">
</key-value-row>
<!-- 手续费 +selectCoinInfo.enname-->
<key-value-row :keyName="i18n.HandlingFee" size="24rpx"
:value="withdrawFeeAmount" rightColor="#A1A0A8">
</key-value-row>
<view class="title">{{ i18n.PaymentPassword }}</view>
<view class="input-item">
<u-input class="input" type="password" v-model="coinInfo.payPassword" color="#fff" fontSize="32rpx"
border="none" :placeholder="i18n.enterPaymentPassword" style="width: 590rpx;">
</u-input>
</view>
</view>
<view class="message-item first">
{{ i18n.message1 }}
</view>
<view class="message-item">
{{ i18n.message2 }}
</view>
<view class="message-item last">
{{ i18n.message3 }}
</view>
<u-button class="withdrawBtn" color="#00E8A2" throttleTime="500" @click="withdraw('virtual')"
:disabled="virtualWithdraw">{{ i18n.withdraw }}
</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 withdrawInfo.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="coinInfo.coinCode==item.enname"></radio>
</label>
</radio-group>
</scroll-view>
<u-button class="button" color="#00E8A2" throttleTime="500" @click="USDTPopupShow = false">
{{ i18n.OK }}
</u-button>
</view>
</u-popup>
</view>
<view class="OLContent" v-if="pageState === 'online'">
<view class="bankCard" v-if="!ifNextStep">
<view class="header">
<view class="bankTitle">{{ i18n.BankCardWithdrawal }}</view>
<view class="BeneficiaryTitle">{{ i18n.Beneficiary }}</view>
</view>
<view class="addBankCardBtn" v-if="!hasBankCard" @click="goto('addBankCard')">{{ i18n.AddBankCard }}
</view>
<view class="bankCardInfo" v-if="hasBankCard">
<view class="username">{{withdrawInfo.bankCard.acctName}}</view>
<view class="BankCardCode">{{withdrawInfo.bankCard.acctId}}</view>
<key-value-row :keyName="withdrawInfo.bankCard.bankName" size="24rpx"
:value="withdrawInfo.bankCard.bankCode" rightColor="#F2FE8D" leftColor="#fff">
</key-value-row>
</view>
</view>
<u-button class="editBankCardBtn" v-if="!ifNextStep && hasBankCard" @click="goto('editBankCard')"
color="#323045" throttleTime="500">{{ i18n.EditCard }}
</u-button>
<view class="nextStep" v-if="ifNextStep">
<view class="inputBody">
<view class="title">{{ i18n.WithdrawableAmount }}</view>
<view class="withdrawableAmount-item">
<view class="withdrawableAmount">{{ withdrawInfo.useCapital}} {{coinTypeInfo.system_coin_code}}
</view>
</view>
<view class="title">{{ i18n.Amount }}</view>
<view class="input-item">
<u-input class="input" v-model="coinInfo.tranAmt" color="#fff" fontSize="32rpx" border="none"
:placeholder="i18n.enterAmount">
</u-input>
</view>
<view class="title">{{ i18n.PaymentPassword }}</view>
<view class="input-item">
<u-input class="input" type="password" v-model="coinInfo.payPassword" color="#fff"
fontSize="32rpx" border="none" :placeholder="i18n.enterPaymentPassword">
</u-input>
</view>
</view>
</view>
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="btnIsCanClick" @click="btnClick">
{{ ifNextStep ? i18n.Withdrawal : i18n.NextStep }}
</u-button>
</view>
</view>
</template>
<script>
import uniCopy from '@/utils/uni-copy'
import api from '@/utils/api'
import constant from '@/utils/constant.js';
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
import md5 from 'js-md5'
export default {
components: {
KeyValueRow
},
name: "withdrawal",
data() {
return {
// 提现手续费实时算
withdrawFeeAmount:0,
// 选择的币种信息
selectCoinInfo: {},
coinInfo: {
tranAmt: null,
coinCode: null,
type: 'crypto',
addressId: null,
payPassword: null,
},
// 提现配置信息
withdrawInfo: {
bankCard:{},
coins:[{}]
},
baseURL: '',
pageState: 'crypto',
coinAddress: '',
AvailableValue: 3399,
currentCoin: 'USDT',
coin: '',
USDTPopupShow: false,
USDTRadioValue: '',
hasBankCard: true,
ifNextStep: false,
withdrawableAmount: '4680671.89',
amount: '',
paymentPassword: '',
};
},
watch: {
'coinInfo.tranAmt': {
deep: true,
handler: function (n,i) {
this.withdrawFeeAmount=n*this.withdrawInfo.rate
}
}
},
computed: {
// 获取币种
coinTypeInfo() {
return uni.getStorageSync('coinTypeInfo')
},
// 检验虚拟币提现是否可以点击
virtualWithdraw() {
if (this.coinInfo.tranAmt && this.coinInfo.coinCode && this.coinInfo.type && this.coinInfo.addressId &&
this.coinInfo.payPassword) {
return false;
} else {
return true
}
},
i18n() {
return this.$t("withdrawal");
},
btnIsCanClick() { // 按钮是否可以点击
if (this.hasBankCard && !this.ifNextStep) { // 在第一步,有银行卡可以点击
return false;
}
if (this.coinInfo.tranAmt && this.coinInfo.coinCode && this.coinInfo.type && this.coinInfo.addressId &&
this.coinInfo.payPassword) {
// 在第二步,有值才可以点
return false;
} else {
return true
}
}
},
onLoad() {
this.baseURL = constant.BASE_URL
// 监听事件
uni.$on('coinAddressChang', (data) => {
this.coinAddress = data.coinAddress
this.coinInfo.addressId = data.coinid
})
this.getWithConfig();
},
onUnload() {
// 移除监听事件
uni.$off('coinAddressChang');
},
onShow() {
this.getWithConfig();
},
methods: {
// 提现
withdraw(e) {
let info;
if (e == 'virtual') {
info={
type: this.coinInfo.type,
tranAmt: this.coinInfo.tranAmt,
addressId: this.coinInfo.addressId,
coinCode: this.coinInfo.coinCode2,
payPassword:md5(this.coinInfo.payPassword),
}
}else{
info={
type: this.coinInfo.type,
tranAmt: this.coinInfo.tranAmt,
addressId: this.coinInfo.addressId,
payPassword:md5(this.coinInfo.payPassword),
}
}
api.withdraw(info).then(res => {
console.log(res)
uni.$u.toast(this.$t("login").Withdrawalsucceeded)
setTimeout(() => {
this.coinInfo = {
tranAmt: null,
coinCode: null,
addressId: null,
payPassword: null,
}
this.getWithConfig()
}, 600)
})
},
// 获取币种
radioChange(e) {
this.selectCoinInfo = e
this.coinInfo.coinCode = e.enname
this.coinInfo.coinCode2 = e.code
},
// 获取提现配置
getWithConfig() {
// 提现配置信息
// 重置信息 避免报错
this.withdrawInfo={
bankCard:{},
coins:[{}]
}
api.withdrawConfig({
type: this.pageState
}).then(res => {
if (res) {
// 虚拟币提现
if (this.pageState == 'crypto') {
// 进来默认选中第一个币
this.withdrawInfo = res
this.coinInfo.coinCode = this.withdrawInfo.coins[0].enname
this.selectCoinInfo = this.withdrawInfo.coins[0]
this.coinInfo.coinCode2 = this.withdrawInfo.coins[0].code
} else {
// 法币
this.withdrawInfo = res
}
}
})
},
goto(page) {
// console.log(page);
let url = '';
switch (page) {
case 'withdrawalRecord':
url = '/pages/withdrawal/withdrawalRecord'
break;
case 'chooseAddress':
url = '/pages/withdrawal/chooseAddress?coinCode2='+this.coinInfo.coinCode2 +'&'+ 'coinCode='+this.coinInfo.coinCode
break;
case 'addBankCard':
url = '/pages/withdrawal/addOrEditBankCard?mode=addBank'
break;
case 'editBankCard':
url = '/pages/withdrawal/addOrEditBankCard?mode=editBank'
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: this.i18n.CopySuccess,
duration: 3000,
})
},
error: (e) => {
uni.showToast({
title: e,
icon: 'none',
duration: 2000,
})
}
})
},
btnClick() {
if (!this.ifNextStep) { // 第一步是切换到提现菜单
this.ifNextStep = true
this.coinInfo.type=this.pageState
this.coinInfo.addressId = this.withdrawInfo.bankCard.id
} else { // 提现逻辑
this.withdraw()
}
}
},
}
</script>
<style lang="scss" scoped>
.inputbg{
background: #211F32 !important;
}
.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;
}
}
}
.DCContent {
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;
height: 54rpx;
top: 36rpx;
right: 80rpx;
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;
}
}
.all {
position: absolute;
display: inline;
font-size: 20rpx;
color: #00E8A2;
top: 0rpx;
right: 30rpx;
}
}
.coin-item {
background: #211F32;
border-radius: 10px;
overflow: hidden;
padding: 30rpx 40rpx;
.title {
position: relative;
font-size: 32rpx;
color: #A1A0A8;
margin-bottom: 32rpx;
.choose {
position: absolute;
top: 0;
right: 0;
font-size: 36rpx;
color: #fff;
padding-right: 60rpx;
&::after {
display: block;
position: absolute;
content: '';
background-image: url(../../static/charity/ic_ma_arrow_down.png);
background-repeat: no-repeat;
background-size: 32rpx;
width: 32rpx;
height: 32rpx;
top: 12rpx;
right: 10rpx;
transform: rotate(270deg);
}
}
}
.address {
position: relative;
background: #323045;
border-radius: 16px;
color: #00E8A2;
font-size: 28rpx;
padding: 8rpx 20rpx 5rpx 68rpx;
// 超出字符省略成...
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //兼容
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 1; //显示行数
-webkit-box-orient: vertical;
&::before {
display: block;
position: absolute;
content: '';
top: 20rpx;
left: 30rpx;
width: 16rpx;
height: 16rpx;
border-radius: 100%;
background: #00E8A2;
box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, .2);
}
}
.input-item {
margin-top: 36rpx;
background: #323045;
.input {
width: 486rpx;
}
}
}
.message-item {
padding: 0 16rpx;
font-size: 24rpx;
color: #A1A0A8;
line-height: 48rpx;
&.first {
margin-top: 30rpx;
}
&.last {
margin-bottom: 30rpx;
}
}
.withdrawBtn {
margin: 100rpx 0;
border-radius: 32rpx;
height: 112rpx;
line-height: 112rpx;
font-weight: 600;
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: 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;
font-weight: 600;
line-height: 112rpx;
color: #15141F !important;
}
}
}
}
.OLContent {
.bankCard {
overflow: hidden;
box-sizing: border-box;
height: 360rpx;
margin: 0 64rpx;
border-radius: 32rpx;
background-image: url(../../static/withdrawal/bg_card.png);
background-repeat: no-repeat;
background-size: 622rpx 360rpx;
.header {
box-sizing: border-box;
height: 164rpx;
margin: 0 32rpx 0;
padding-top: 32rpx;
.bankTitle {
line-height: 60rpx;
font-size: 44rpx;
font-weight: 700;
}
.BeneficiaryTitle {
font-size: 24rpx;
line-height: 50rpx;
}
}
.addBankCardBtn {
box-sizing: border-box;
position: relative;
width: 558rpx;
height: 116rpx;
line-height: 116rpx;
background: #211F32;
border-radius: 32rpx;
margin: 34rpx 32rpx;
padding-left: 40rpx;
opacity: 1;
&::after {
display: block;
position: absolute;
content: '';
background-image: url(../../static/withdrawal/add-circle.png);
background-repeat: no-repeat;
background-size: 48rpx;
width: 48rpx;
height: 48rpx;
top: 34rpx;
right: 52rpx;
}
&:active {
opacity: 0.6;
}
}
.bankCardInfo {
border-top: 2rpx solid #A1A0A8;
padding: 0 32rpx;
.username {
margin-top: 24rpx;
font-size: 24rpx;
}
.BankCardCode {
margin-top: 20rpx;
margin-bottom: 20rpx;
font-size: 24rpx;
color: #00E8A2;
}
}
}
.editBankCardBtn {
width: 622rpx;
height: 116rpx;
margin: 32rpx 64rpx;
border-radius: 16px;
font-size: 32rpx;
}
.nextStep {
.inputBody {
overflow: hidden;
background: #211F32;
border-radius: 32rpx;
padding: 32rpx;
margin-bottom: 32rpx;
.title {
font-size: 32rpx;
color: #A1A0A8;
margin-bottom: 20rpx;
}
.input-item {
height: 112rpx;
background: #323045;
border-radius: 32rpx;
padding-left: 40rpx;
margin-bottom: 20rpx;
.input {
height: 112rpx;
}
}
.withdrawableAmount-item {
height: 112rpx;
background: #323045;
border-radius: 32rpx;
padding-left: 40rpx;
margin-bottom: 20rpx;
.withdrawableAmount {
color: #00E8A2;
height: 112rpx;
line-height: 112rpx;
}
}
}
}
.button {
position: fixed;
bottom: 40rpx;
width: 686rpx;
box-sizing: border-box;
height: 112rpx;
background: #00E8A2;
border-radius: 32rpx;
font-weight: 700;
font-size: 32rpx;
color: #15141F !important;
margin: 0 32rpx;
}
}
}
</style>