<template>
|
<div class="recharge box-border">
|
<assets-head :title="$t('充值通道')">
|
<img src="../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
|
@click="goRouter('/assetsCenter/rechargeWithdrawRecord?back=1')" />
|
</assets-head>
|
<div class="pl-36 pr-36">
|
<div class="recharge-title font-35 textColor">{{ $t('请选择充值币种') }}</div>
|
<div class="recharge-list flex justify-between">
|
<div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
|
@click="selectSymbol('usdt')">
|
<img src="../../assets/image/symbol/usdt.png" class="w-92 h-92" />
|
<div class="text-grey font-26 mt-32">{{ $t('USDT充值') }}</div>
|
</div>
|
<div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
|
@click="selectSymbol('btc')">
|
<img src="../../assets/image/symbol/btc.png" class="w-92 h-92" />
|
<div class="text-grey font-26 mt-32">{{ $t('BTC充值') }}</div>
|
</div>
|
<div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
|
@click="selectSymbol('eth')">
|
<img src="../../assets/image/symbol/eth.png" class="w-92 h-92" />
|
<div class="text-grey font-26 mt-32">{{ $t('ETH充值') }}</div>
|
</div>
|
<div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
|
@click="selectSymbol('usdc')">
|
<img src="../../assets/image/symbol/usdc.png" class="w-92 h-92" />
|
<div class="text-grey font-26 mt-32">{{ $t('USDC充值') }}</div>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="textColor mt-40">
|
<div class="pl-36 pr-36 h-90 lh-90 border-b-color flex justify-between" v-for="(item, index) in list"
|
:key="index" @click="toPath(item.url)">
|
<div class="flex items-center">
|
<img :src="item.imgPath" class="w-44 h-44 rounded-full mr-20" />
|
<span class="textColor1">{{ item.name }}</span>
|
</div>
|
<div>
|
<van-icon class="textColor1" name="arrow" />
|
</div>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import { Icon } from 'vant';
|
export default {
|
name: 'rechageList',
|
components: {
|
assetsHead,
|
[Icon.name]: Icon,
|
},
|
data() {
|
return {
|
list: [
|
{
|
name: 'Huobi',
|
url: 'https://www.huobi.com/en-us/',
|
imgPath: require('../../assets/image/huobi.png')
|
},
|
{
|
name: 'Binance',
|
url: 'https://www.binance.com/en',
|
imgPath: require('../../assets/image/bian.png')
|
},
|
{
|
name: 'Coinbase',
|
url: 'https://www.coinbase.com/',
|
imgPath: require('../../assets/image/coinbase.png')
|
},
|
{
|
name: 'Crypto',
|
url: 'https://www.crypto.com/',
|
imgPath: require('../../assets/image/crypto.png')
|
}
|
]
|
}
|
},
|
created() {
|
|
},
|
methods: {
|
toPath(url) {
|
const a = document.createElement('a');
|
a.href = url;
|
a.target = "_bank";
|
document.body.append(a);
|
a.click();
|
document.body.removeChild(a)
|
// if (navigator.userAgent.search('Html5Plus') != -1) {
|
// plus.runtime.openURL(url)
|
// } else {
|
// window.open(url)
|
// }
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
selectSymbol(symbol) {
|
this.$router.push({
|
path: "/recharge/rechargePage",
|
query: {
|
'symbol': symbol
|
}
|
});
|
},
|
goRouter(params) {
|
this.$router.push({
|
path: params
|
});
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.recharge {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.recharge-title {
|
margin: 86px 0 104px 0;
|
}
|
|
.recharge-list>div {
|
@include themify() {
|
border: 2px solid themed("bg_dark");
|
}
|
|
border-radius: 15px;
|
box-sizing: border-box;
|
}
|
</style>
|
