<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">
|
<div
|
class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
|
@click="selectSymbol('eth', '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('btc', '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', 'bnb')"
|
>
|
<img src="../../assets/image/symbol/bnb.png" class="w-92 h-92" />
|
<div class="text-grey font-26 mt-32">{{ $t("BNB充值") }}</div>
|
</div>-->
|
<div
|
class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
|
@click="selectSymbol('usdt', '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('usdc', '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>
|
</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(coin, symbol) {
|
this.$router.push({
|
path: "/recharge/rechargePage",
|
query: {
|
coin: coin,
|
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 {
|
flex-wrap: wrap;
|
.item-view {
|
margin: 0 20px;
|
margin-bottom: 20px;
|
}
|
}
|
.recharge-list > div {
|
@include themify() {
|
border: 2px solid themed("bg_dark");
|
}
|
|
border-radius: 15px;
|
box-sizing: border-box;
|
}
|
</style>
|
