<template>
|
<view class="layout-page bg-panel-1" :style="themeStyle">
|
<view >
|
<v-header>
|
<template #title>
|
<span style="color: #000;">{{$t('assets.e5')}}{{coin}}</span>
|
</template>
|
<!-- <template #right>
|
<v-link to="/pages/assets/paypal">
|
Bank Transfer
|
</v-link>
|
</template> -->
|
</v-header>
|
</view>
|
<view class="layout-main">
|
<view style="margin: 20px; margin-bottom: 0px;">{{$t('common.select')}}</view>
|
<view class="coin border-b p-x-lg d-flex justify-between m-t-md" style="border: 2px solid #f3f3f3;margin: 20px;padding:10px; border-radius: 4px;" @click="coinListShow=true">
|
<view class=" color-light" style="color: #000;
|
font-size: 16px;
|
font-style: normal;
|
font-weight: 400;
|
line-height: 118.99%; /* 28.558px */
|
text-transform: uppercase;">{{coin}}</view>
|
<view class="d-flex align-center" style="color: var(--100, #2B303C);
|
font-size: 12px;
|
font-style: normal;
|
font-weight: 400;
|
line-height: normal;">
|
<van-icon name="arrow" />
|
</view>
|
</view>
|
<view class="bg-panel-3">
|
<view class="rounded-md">
|
<view style="margin: 20px; margin-bottom: 0px;">{{$t('assets.b7')}}</view>
|
<view
|
class="d-flex flex-wrap justify-between align-center p-x-lg p-y-md color-light"
|
v-if="coin=='USDT'"
|
>
|
<!-- <span>{{$t('assets.b7')}}</span> -->
|
<view class="group d-flex fn-12 color-light">
|
<!-- <view class="rounded-xs p-x-lg p-y-ms m-r-md"
|
:class="rechargeType==1?'bor-active':'bg-panel-3 border'"
|
size="mini"
|
@click="changeRechargeType(1)"
|
>OMNI</view> -->
|
<view class="rounded-xs p-x-lg p-y-ms m-r-md"
|
size="mini"
|
@click="changeRechargeType(2)"
|
:class="rechargeType==2?'bor-active':'bg-panel-3 border'"
|
>ERC20</view>
|
<view class="rounded-xs p-x-lg p-y-ms"
|
size="mini"
|
@click="changeRechargeType(3)"
|
:class="rechargeType==3?'bor-active':'bg-panel-3 border'"
|
>TRC20</view>
|
</view>
|
</view>
|
<!-- <view class="color-sell fn-12 p-x-lg" style="color: #DB7A20;
|
font-size: 11px;
|
font-style: normal;
|
font-weight: 400;
|
line-height: normal;"></view> -->
|
<view class="p-t-md p-b-md ">
|
<view class="fn-center">
|
<v-qr v-if="form.address" class="qr-box" :text="form.address||' '"></v-qr>
|
</view>
|
<view class="tips fn-center color-light m-y-xs" style="color: rgba(39, 42, 49, 0.60);
|
font-size: 15px;
|
font-style: normal;
|
font-weight: 400;
|
line-height: normal;">{{$t('assets.e6')}}</view>
|
<!-- <view class="tips fn-center color-theme-1 m-t-md">{{$t('recharge.a3')}}</view> -->
|
</view>
|
</view>
|
<view class="info p-b-md rounded-md">
|
<view class="address p-t-xs">
|
<!-- <view class="label w-100">{{$t('assets.e7')}}</view> -->
|
<view class="border-r w-10/12 autowidth p-x-md p-y-ms address-txt p-x-xs flex-fill color-light fn-center bg-form-panel-3 rounded-xs">{{form.address}}</view>
|
<!-- #ifndef H5 -->
|
<view style="border-radius: 10px;
|
background: linear-gradient(180deg, #ED493B 0%, #FA6D4A 100%);
|
box-shadow: 0px 4px 9px 0px rgba(239, 78, 61, 0.40);" class="w-9/12 bg-lin p-y-ms rounded-xs m-t-md autowidth color-white p-x-xs fn-16 fn-center" @click="$copy(form.address)">
|
{{$t('recharge.a4')}}<i class="iconfont color-white m-l-xs"></i>
|
</view>
|
<!-- #endif -->
|
<!-- #ifdef H5 -->
|
<view style="border-radius: 10px;" class="w-9/12 bg-lin p-y-ms rounded-xs m-t-md autowidth color-white p-x-xs fn-16 fn-center" @click="copy(form.address)">
|
{{$t('recharge.a4')}}<i class="iconfont color-white m-l-xs"></i>
|
</view>
|
<!-- #endif -->
|
</view>
|
<!-- <view class="address d-flex align-center justify-between p-t-xs m-b-md" style=" width: 70%;
|
margin: auto;
|
text-align: center;">
|
<view class="label w-30">
|
<img src="static/img/icon/num.png" alt="" class="h-20" /></view>
|
<v-input
|
type="number"
|
:placeholder="$t('assets.e8')"
|
class="border-b flex-fill p-y-xs color-light"
|
v-model="form.amount"
|
/>
|
</view>
|
<view class="address d-flex align-center justify-between p-t-xs m-b-md" style=" width: 70%;
|
margin: auto;
|
text-align: center;">
|
<view class="label w-30">
|
<img src="static/img/icon/pic.png" alt="" class="h-20" /></view>
|
<div
|
@click="getFile('images')"
|
class="upload-box d-flex justify-center align-center rounded-sm bg-panel-3 box-shadow border-b flex-fill p-y-xs color-light"
|
>
|
<view v-if="!form.images">{{$t('common.a8')}}</view>
|
<img v-else :src="form.images" alt style="max-width:100%" />
|
</div>
|
</view> -->
|
|
<!-- <view @click="recharge" style="width: 80% !important;border-radius: 10px;
|
border: 1px solid #EA4338;color: #EE4A3C;line-height: 38px;height: 38px;
|
font-size: 16px;
|
font-style: normal;
|
font-weight: 400;
|
box-shadow: 0px 4px 9px 0px rgba(23, 138, 255, 0.20); text-align: center; border-radius: 6px;margin: auto;">
|
{{$t('common.confirm')}}
|
</view> -->
|
|
</view>
|
<view class="m-y-md rounded-md">
|
<ul class="p-md fn-sm rounded-md m-y-xs p-x-lg">
|
<li>·
|
<span v-if="coin=='USDT'">{{$t('common.c0',{num:'10 '+coin})}}</span>
|
<span v-if="coin=='BTC'">{{$t('common.c0',{num:'0.0005 '+coin})}}</span>
|
<span v-if="coin=='ETH'">{{$t('common.c0',{num:'0.01 '+coin})}}</span>。
|
{{$t('recharge.a1')}}<span v-if="coin=='USDT'">{{text}}</span> {{coin}}{{$t('recharge.a2')}}
|
</li>
|
<li>·{{$t('assets.f0')}}。{{$t('assets.f1',{num:10,name:coin})}}。</li>
|
<li>·{{$t('assets.f3',{name:coin})}}。</li>
|
</ul>
|
|
</view>
|
|
</view>
|
<view class="m-b-lg" v-if="list.length">
|
<view class="title d-flex justify-between p-x-md p-y-xs align-center color-light">
|
<span class="fn-lg">{{$t('assets.f4')}}</span>
|
</view>
|
<view class="">
|
<table class="w-max">
|
<thead class="p-x-md">
|
<tr class="fn-sm p-x-md " >
|
<th class=" p-b-md fn-left p-l-md">{{$t('assets.c9')}}</th>
|
<th class=" p-b-md fn-left">{{$t('assets.d0')}}</th>
|
<th class=" p-b-md fn-right p-r-md">{{$t('assets.c0')}}</th>
|
</tr>
|
</thead>
|
<tbody class="">
|
<tr class="color-light trChange p-x-md" v-for="(item) in list" :key="item.id">
|
<td class="p-y-xs p-l-md rounded-tl-sm rounded-bl-sm">{{item.datetime|parseTime}}</td>
|
<td >
|
<view v-if="item.status==0">{{$t('assets.d1')}}</view>
|
<view v-if="item.status==1" class="color-buy">{{$t('assets.d2')}}</view>
|
<view v-if="item.status==2" class="color-sell">{{$t('assets.d3')}}</view>
|
</td>
|
<td class="fn-right p-r-md rounded-tr-sm rounded-br-sm">
|
{{item.amount}}
|
<span class="color-default">({{item.coin_name}})</span>
|
</td>
|
</tr>
|
<tr v-if="loadMore">
|
<td colspan="3" class="fn-center p-xs link-active" @click="more">{{$t('assets.d4')}}</td>
|
</tr>
|
</tbody>
|
</table>
|
</view>
|
</view>
|
</view>
|
<coin-list @imgs="change" ref="coinList" v-model="coin" @close="coinListShow=false" v-show="coinListShow" />
|
<van-toast id="van-toast" />
|
</view>
|
</template>
|
<script>
|
import coinList from "./coin-list";
|
import Wallet from "@/api/wallet";
|
import formData from "@/utils/class/date";
|
import Member from "@/api/member";
|
import {mapGetters} from 'vuex'
|
import {handleClipboard} from '../../utils/class/copy.js'
|
export default {
|
components: {
|
coinList,
|
},
|
data() {
|
return {
|
coinListShow: false,
|
coin: "",
|
rechargeType: 3,
|
address: "",
|
form: {
|
coin_id: "",
|
amount: "",
|
address: "",
|
images:"",
|
},
|
btc:"1HkmZkNtsMjqdD2HLw3sqou9pcRZYCe5z6",
|
eth:"0xc1B086BdD33Bc1153546839640020b3Af87fdFF7",
|
trx:"TAvopq1vkb2GLHx6qkkVHseoXKjYw1r5Yr",
|
coinaddress:{
|
'USDT':'TAvopq1vkb2GLHx6qkkVHseoXKjYw1r5Yr',
|
'USDC':'TAvopq1vkb2GLHx6qkkVHseoXKjYw1r5Yr',
|
'BTC':'1HkmZkNtsMjqdD2HLw3sqou9pcRZYCe5z6',
|
'ETH':'0xc1B086BdD33Bc1153546839640020b3Af87fdFF7',
|
'DOT':'13YLS7DTuB2az7KgVqQudeqztXNbyYATTPd9iKHpB5cZUxoo',
|
'LTC':'LXcRUb5Z9NXadrs5S9BaChrhhacBUmTYMC',
|
'TRX':'TAvopq1vkb2GLHx6qkkVHseoXKjYw1r5Yr',
|
'ARB':'0xfd2e5dd25bf2b316b685aa932cb2a2555f5654ba',
|
'AGIX':'0xfd2e5dd25bf2b316b685aa932cb2a2555f5654ba',
|
'DOGE':'DGrMeZx7xWTV5PdpjzanCxjKiEExyUD',
|
'SOL':'CKxeBTCLdMc7jCfkq8NXxQMRjq4GZKWWwBoasYrpHrRF',
|
'BCH':'14NToMd523DQwp3QfDYztkbroHdXoouSmw',
|
'ETC':'0xfd2e5dd25bf2b316b685aa932cb2a2555f5654ba',
|
},
|
list: [],
|
page: 1,
|
loadMore: true,
|
text:'TRC20_'
|
};
|
},
|
computed: {
|
activeCoin() {
|
if (!this.coin) return {};
|
return this.$refs.coinList.coinList.find(
|
(item) => item.coin_name == this.coin
|
);
|
},
|
...mapGetters(['themeStyle'])
|
},
|
filters: {
|
parseTime(val) {
|
return formData.parseTime(val);
|
},
|
},
|
watch: {
|
coin(n) {
|
if (n) {
|
this.form.address = "";
|
if (this.coin != "USDT") {
|
this.rechargeType = 1;
|
}
|
this.walletImageGet();
|
}
|
},
|
rechargeType(e){
|
if(e==1){
|
// this.text='OMIN_'
|
this.rechargeType = 3;
|
this.text='TRC20_'
|
}else if(e==2){
|
this.text='ERC20_'
|
}else{
|
this.text='TRC20_'
|
}
|
}
|
},
|
methods: {
|
copy(data){
|
handleClipboard(data, event, () => {
|
this.$toast.success(this.$t('common.a1'));
|
}, () => {
|
this.$toast.error(this.$t('common.a2'));
|
})
|
},
|
getFile(name) {
|
this.$getFile({count:9}).then((res) => {
|
this.upLoadImg(res, name);
|
})
|
},
|
// 上传图片
|
upLoadImg(chooseImageRes, name) {
|
Member.uploadImage(chooseImageRes).then((res) => {
|
this.form[name] = res.data.url;
|
this.$toast.success(this.$t('auth.c1'));
|
});
|
},
|
changeRechargeType(idx) {
|
this.rechargeType = idx ? idx : 3;
|
this.form.address = "";
|
this.walletImage(idx);
|
this.walletImage(idx);
|
},
|
// 获取充币地址
|
walletImage(idx) {
|
// let data = {
|
// coin_id: this.activeCoin.coin_id,
|
// address_type: idx ? idx : this.rechargeType,
|
// };
|
|
let coin_id = this.activeCoin.coin_id;
|
let address_type = idx ? idx : this.rechargeType;
|
|
// console.log(coin_id);
|
if(coin_id == 1) {
|
if(address_type == 2) {
|
this.form.address = this.eth;
|
} else {
|
this.form.address = this.trx;
|
}
|
} else if(coin_id == 3){
|
this.form.address = this.eth;
|
} else if(coin_id == 13) {
|
this.form.address = this.trx;
|
} else if(coin_id == 2) {
|
this.form.address = this.btc;
|
}
|
|
this.form.address = this.coinaddress[this.coin];
|
|
// Wallet.walletImage(data).then((res1) => {
|
// this.form.address = res1.data.address;
|
|
// console.log(res1.data.address);
|
// });
|
},
|
|
walletImageGet(idx) {
|
let data = {
|
coin_id: this.activeCoin.coin_id,
|
address_type: idx ? idx : this.rechargeType,
|
};
|
Wallet.walletImage(data).then((res1) => {
|
// this.eth = res1.data.eth;
|
// this.btc = res1.data.btc;
|
// this.trx = res1.data.trx;
|
this.walletImage();
|
//this.form.address = this.trx;
|
//console.log(res1.data.address);
|
});
|
},
|
// 充值
|
recharge() {
|
this.form.coin_id = this.activeCoin.coin_id;
|
console.log(this.form)
|
if(this.form.amount == ""){
|
return
|
}
|
if(this.form.amount <= 0){
|
return
|
}
|
if(this.form.images == ""){
|
return
|
}
|
Wallet.recharge(this.form, { btn: this.$refs.btn })
|
.then(() => {
|
this.$back();
|
this.$toast.success(this.$t('assets.d5')+"！");
|
this.reset();
|
})
|
.catch(() => {});
|
},
|
reset() {
|
this.loadMore = true;
|
this.page = 1;
|
this.depositHistory();
|
},
|
more() {
|
this.page++;
|
this.depositHistory();
|
},
|
// 获取充值记录
|
depositHistory() {
|
let data = {
|
page: this.page,
|
};
|
Wallet.depositHistory(data).then((res) => {
|
if (res.data.current_page == 1) this.list = [];
|
this.list = [...this.list, ...res.data.data];
|
if (res.data.data.length < res.data.per_page) this.loadMore = false;
|
});
|
},
|
change(e){
|
let coin_id = e.coin_id;
|
let address_type = this.rechargeType;
|
if(coin_id == 1) {
|
if(address_type == 2) {
|
this.form.address = this.eth;
|
} else {
|
this.form.address = this.trx;
|
}
|
} else if(coin_id == 3){
|
this.rechargeType = 1;
|
this.form.address = this.eth;
|
} else if(coin_id == 13) {
|
this.rechargeType = 1;
|
this.form.address = this.trx;
|
} else if(coin_id == 2) {
|
this.rechargeType = 1;
|
this.form.address = this.btc;
|
}
|
|
}
|
},
|
created() {
|
this.depositHistory();
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.address {
|
.label {
|
white-space: nowrap;
|
}
|
.address-txt {
|
word-break: break-all;
|
}
|
}
|
.qr-box {
|
height: 150px;
|
width: 150px;
|
margin: 0 auto;
|
border: 4px solid $white;
|
}
|
.trChange:nth-child(2n-1){
|
box-shadow: $shadow;
|
border-radius: $border-radius-xs;
|
td{
|
background: $panel-3;
|
padding-top: $padding-sm;
|
padding-bottom: $padding-sm;
|
}
|
}
|
.bor-active{
|
border: 1px solid $theme-1;
|
position: relative;
|
overflow: hidden;
|
color: $theme-1;
|
}
|
.bor-active::before{
|
content: '';
|
position: absolute;
|
right: 0;
|
bottom:-2px;
|
height: 0;
|
width: 0;
|
border: 10px solid;
|
border-color:transparent $theme-1 $theme-1 transparent;
|
text-align: center;
|
}
|
.bor-active::after{
|
content: '√';
|
position: absolute;
|
right: -4px;
|
bottom: -1px;
|
height: 15px;
|
width: 15px;
|
width: 20px;
|
transform: scale(0.7);
|
text-align: center;
|
color: white;
|
}
|
.border-b{
|
border-bottom: 5px solid $panel-3;
|
}
|
.autowidth{
|
margin: 0 auto;
|
}
|
.bg-lin{
|
background: linear-gradient(to right,#f6c769,#f3b644);
|
}
|
.color-black{
|
color: black;
|
}
|
button{
|
width: 80%;
|
}
|
</style>
|
