<template>
|
<div>
|
<div class="box">
|
<h3 class="title">{{$t("message.MyAccount")}}</h3>
|
<div class="box-content">
|
<div class="row flex align-center justify-between">
|
<span class="name">{{$t("message.TotalOutput")}}</span>
|
<span class="count">{{myAccountInfo.totalMine || 0}} ETH</span>
|
</div>
|
<div class="row flex align-center justify-between">
|
<span class="name">{{$t("message.IncomeBalance")}}</span>
|
<span class="count">{{myAccountInfo.availableWallet || 0}} USDT</span>
|
</div>
|
<div class="row flex align-center justify-between">
|
<span class="name">{{$t("message.Exchangeable")}}</span>
|
<span class="count">{{myAccountInfo.availableMine || 0}} ETH</span>
|
</div>
|
</div>
|
</div>
|
<van-tabs type="card" color="#3D8AF2" title-active-color="#FFFFFF" title-inactive-color="#080808" @click-tab="onClickTab">
|
<van-tab :title='$t("message.Exchange")'>
|
<div class="box">
|
<h3 class="title">{{$t("message.Exchange")}}</h3>
|
<div class="box-content ">
|
<div class="exchange flex justify-between">
|
<div class="item flex-1">
|
<div>
|
<img src="../../assets/images/icon4.png"/>
|
<span>ETH</span>
|
</div>
|
<input placeholder="0.000" type="number" v-model.number="ethAmount"/>
|
</div>
|
<img src="../../assets/images/icon6.png" class="exchange-icon"/>
|
<div class="item flex-1 flex align-end flex-v">
|
<div>
|
<img src="../../assets/images/icon5.png"/>
|
<span>USDT</span>
|
</div>
|
<span class="amount">{{ethToUsdtAmount}}</span>
|
</div>
|
</div>
|
<span class="all" style="color: #3D8AF2" @click="allExchange">{{$t("message.RedeemAll")}}</span>
|
<button class="btn" :disabled="!ethAmount || isRequesting" @click="submitExchange">{{$t("message.Exchange")}}</button>
|
<div class="tips">
|
<p>{{$t("message.Price")}}：1ETH ≈ {{info.newPrice}}USDT</p>
|
<p>{{$t("message.Tip1")}}</p>
|
</div>
|
</div>
|
</div>
|
</van-tab>
|
<van-tab :title='$t("message.Withdraw")'>
|
<div class="box">
|
<h3 class="title">{{$t("message.Withdraw")}}</h3>
|
<div class="box-content">
|
<div class="exchange flex justify-between">
|
<div class="item flex-1">
|
<div>
|
<img src="../../assets/images/icon5.png"/>
|
<span>USDT</span>
|
</div>
|
<input placeholder="0.000" type="number" v-model.number="usdtAmount"/>
|
<span class="all" style="color: #3D8AF2" @click="allWithdraw">{{$t("message.WithdrawalAll")}}</span>
|
</div>
|
<div class="item flex-1 flex align-end flex-v">
|
<div>
|
<img src="../../assets/images/icon5.png"/>
|
<span>USDT</span>
|
</div>
|
<span class="amount">{{myAccountInfo.availableWallet || 0}}</span>
|
<span class="all">{{$t("message.TotalBalance")}}</span>
|
</div>
|
</div>
|
<button class="btn" :disabled="!usdtAmount" @click="submitWithdraw">{{$t("message.Confirm")}}</button>
|
<div class="tips">
|
<p>{{$t("message.Tip2", { min: 100, fee: info.changeFee })}}</p>
|
</div>
|
</div>
|
</div>
|
</van-tab>
|
<van-tab :title='$t("message.Record")'>
|
<div class="box" style="min-height: 320px">
|
<h3 class="title">{{$t("message.Record")}}</h3>
|
<div class="box-content">
|
<div class="tab-wrap">
|
<van-tabs shrink color="#3D8AF2" title-active-color="#3D8AF2" title-inactive-color="#4F4F4F" line-width="32px">
|
<van-tab :title='$t("message.Exchange")'>
|
<div class="list-row flex align-center justify-between">
|
<span class="name">{{$t("message.Time")}}</span>
|
<span class="name">{{$t("message.Quantity")}}</span>
|
<span class="name">{{$t("message.Status")}}</span>
|
</div>
|
<div class="list-row flex align-center justify-between" v-for="item in exchangeList">
|
<span>{{item.createTime}}</span>
|
<span>{{item.amount}}</span>
|
<span>{{$t("message.Succeed")}}</span>
|
</div>
|
</van-tab>
|
<van-tab :title='$t("message.Withdraw")'>
|
<div class="list-row flex align-center justify-between">
|
<span class="name">{{$t("message.Time")}}</span>
|
<span class="name">{{$t("message.Quantity")}}</span>
|
<span class="name">{{$t("message.Status")}}</span>
|
</div>
|
<div class="list-row flex align-center justify-between" v-for="item in withdrawList">
|
<span>{{item.createTime}}</span>
|
<span>{{item.amount}}</span>
|
<span>{{item.status == 1 ? $t("message.Withdrawing") : (item.status == 2 ? $t("message.Succeed") : $t("message.Fail"))}}</span>
|
</div>
|
</van-tab>
|
<van-tab :title='$t("message.Mining")'>
|
<div class="list-row list-row2 flex align-center justify-between">
|
<span class="name">{{$t("message.Time")}}</span>
|
<span class="name">{{$t("message.Type")}}</span>
|
<span class="name">{{$t("message.Output")}}</span>
|
</div>
|
<div class="list-row list-row2 flex align-center justify-between" v-for="item in miningList">
|
<span>{{item.createTime}}</span>
|
<span>{{$t("message.Mining")}}</span>
|
<span>{{item.amount}} ETH</span>
|
</div>
|
</van-tab>
|
<van-tab :title='$t("message.Reward")'>
|
<div class="list-row list-row2 flex align-center justify-between">
|
<span class="name">{{$t("message.Time")}}</span>
|
<span class="name">{{$t("message.Type")}}</span>
|
<span class="name">{{$t("message.Output")}}</span>
|
</div>
|
<div class="list-row list-row2 flex align-center justify-between" v-for="item in rewardList">
|
<span>{{item.createTime}}</span>
|
<span>{{$t("message.Reward")}}</span>
|
<span>{{item.amount}} ETH</span>
|
</div>
|
</van-tab>
|
</van-tabs>
|
</div>
|
</div>
|
</div>
|
</van-tab>
|
</van-tabs>
|
</div>
|
</template>
|
|
<script scope>
|
import { ref, reactive, onMounted, getCurrentInstance, defineComponent, computed} from 'vue';
|
export default defineComponent({
|
name: 'account',
|
props: [
|
'simulateData'
|
],
|
setup(props, context) {
|
console.log(props)
|
const activeNames = ref(['1'])
|
const { proxy } = getCurrentInstance();
|
let exchangeList = ref([])
|
let withdrawList = ref([])
|
let miningList = ref([])
|
let rewardList = ref([]);
|
let myAccountInfo = ref({});
|
let info = ref({});
|
let ethAmount = ref();
|
let usdtAmount = ref();
|
let isRequesting = ref(false);
|
let ethToUsdtAmount = computed(() => {
|
if (!ethAmount.value || isNaN(ethAmount.value)) {
|
return '0.0000'
|
}
|
return (ethAmount.value * proxy.info.newPrice).toFixed(4)
|
})
|
|
function initData () {
|
if(props.simulateData) {
|
const {walletInfoVo: myAccountInfo,changes: exchangeList,withdraws: withdrawList,mines: miningList} = props.simulateData || {};
|
proxy.myAccountInfo = myAccountInfo || {};
|
proxy.exchangeList = exchangeList || [];
|
proxy.withdrawList = withdrawList || [];
|
proxy.miningList = miningList || [];
|
} else {
|
getWalletInfo()
|
getRecordList(1)
|
getRecordList(2)
|
getRecordList(3)
|
getRecordList(4)
|
}
|
}
|
function getWalletInfo(){
|
proxy.$axios({
|
url: '/dapi/member/walletInfo',
|
method: 'post'
|
}).then((res) => {
|
if(res.code == 200) {
|
proxy.myAccountInfo = res.data;
|
}
|
})
|
}
|
function getRecordList (type) {
|
proxy.$axios({
|
url: '/dapi/member/recordInPage',
|
method: 'post',
|
data: {
|
pageNum: 1,
|
pageSize: 100,
|
type: type
|
}
|
}).then((res) => {
|
if(res.code == 200) {
|
let result = res.data;
|
if (type == 1) {
|
proxy.exchangeList = result;
|
} else if (type == 2) {
|
proxy.withdrawList = result;
|
} else if (type == 3) {
|
proxy.miningList = result;
|
} else {
|
proxy.rewardList = result;
|
}
|
}
|
})
|
}
|
function allExchange () {
|
if(!proxy.myAccountInfo.availableMine) {
|
this.$toast(this.$t('message.NOETH'));
|
return;
|
}
|
ethAmount.value = proxy.myAccountInfo.availableMine
|
}
|
function submitExchange () {
|
if(Number(ethAmount.value) > Number(proxy.myAccountInfo.availableMine)) {
|
this.$toast(this.$t('message.NOETH2'));
|
return;
|
}
|
proxy.isRequesting = true;
|
this.$axios({
|
url: '/dapi/member/change',
|
method: 'post',
|
data: {
|
amount: ethAmount.value
|
}
|
}).then((res) => {
|
ethAmount.value = '';
|
proxy.isRequesting = false;
|
if (res.code == 200) {
|
this.$toast(this.$t('message.ExchangeSuc'));
|
getWalletInfo()
|
getRecordList(1)
|
} else if(res.code == 401){
|
this.$toast(this.$t('message.ApproveTip'));
|
} else {
|
this.$toast(res.message);
|
}
|
}).catch((err) => {
|
proxy.isRequesting = false;
|
})
|
}
|
function allWithdraw () {
|
if(!proxy.myAccountInfo.availableWallet) {
|
return;
|
}
|
usdtAmount.value = proxy.myAccountInfo.availableWallet
|
}
|
function submitWithdraw () {
|
if(Number(usdtAmount.value) < 100) {
|
this.$toast(this.$t('message.MinWithdrawCount') + '100USDT');
|
return;
|
}
|
if(Number(usdtAmount.value) > Number(proxy.myAccountInfo.availableWallet)) {
|
this.$toast(this.$t('message.NOETH2'));
|
return;
|
}
|
proxy.isRequesting = true;
|
this.$axios({
|
url: '/dapi/member/withdraw',
|
method: 'post',
|
data: {
|
amount: usdtAmount.value
|
}
|
}).then((res) => {
|
usdtAmount.value = '';
|
proxy.isRequesting = false;
|
if(res.code == 200) {
|
this.$toast(this.$t('message.Withdrawing2'));
|
getWalletInfo()
|
getRecordList(2)
|
} else if(res.code == 401){
|
this.$toast(this.$t('message.ApproveTip'));
|
} else {
|
this.$toast(res.message);
|
}
|
}).catch(() => {
|
proxy.isRequesting = false;
|
})
|
}
|
|
function onClickTab (item) {
|
if(item.name === 2) {
|
getRecordList(1)
|
getRecordList(2)
|
getRecordList(3)
|
getRecordList(4)
|
}
|
}
|
onMounted(() => {
|
proxy.initglobalSetData()
|
initData()
|
})
|
return {
|
activeNames,
|
myAccountInfo,
|
exchangeList,
|
withdrawList,
|
miningList,
|
rewardList,
|
info,
|
ethAmount,
|
ethToUsdtAmount,
|
usdtAmount,
|
getWalletInfo,
|
allExchange,
|
submitExchange,
|
allWithdraw,
|
submitWithdraw,
|
onClickTab,
|
isRequesting
|
};
|
},
|
methods: {
|
initglobalSetData () {
|
this.$axios({
|
url: '/dapi/common/globalSetting',
|
method: 'get'
|
}).then((res) => {
|
if(res.code == 200) {
|
this.info = res.data;
|
}
|
})
|
}
|
}
|
})
|
</script>
|
|
<style scoped>
|
.box{
|
background: #FFFFFF;
|
border-radius: 20px;
|
padding: 24px 34px 32px;
|
text-align: left;
|
margin: 24px 24px 32px;
|
}
|
.box:not(:last-child){
|
margin-bottom: 60px
|
}
|
.box .title{
|
font-size: 32px;
|
position: relative;
|
margin: 0
|
}
|
.box .title::before{
|
content: '';
|
width: 10px;
|
height: 10px;
|
background: #FEAA4A;
|
display: block;
|
border-radius: 50%;
|
position: absolute;
|
left: -20px;
|
top: 50%;
|
}
|
.box-content{
|
|
}
|
.exchange{
|
margin: 54px 0 0;
|
}
|
.exchange .item{
|
color: #999999;
|
font-size: 28px;
|
}
|
.exchange .item img{
|
width: 40px;
|
vertical-align: middle;
|
margin-right: 8px;
|
}
|
.exchange .item input{
|
max-width: 280px;
|
width: 100%;
|
color: #080808;
|
font-size: 48px;
|
border: 0;
|
border-bottom: 1px solid #E9E9E9;
|
padding: 20px 0;
|
margin: 40px 0 0;
|
font-weight: bold;
|
}
|
.exchange .item input::placeholder{
|
color: #999999
|
}
|
.exchange .item .amount{
|
max-width: 280px;
|
overflow:hidden;
|
text-overflow:ellipsis;
|
white-space:nowrap;
|
width: 100%;
|
color: #FEAA4A;
|
font-size: 32px;
|
border-bottom: 1px solid #E9E9E9;
|
padding: 20px 0;
|
line-height: 56px;
|
margin: 40px 0 0;
|
text-align: right;
|
font-weight: bold;
|
}
|
.exchange-icon{
|
width: 64px;
|
height: 64px;
|
}
|
.all{
|
display: block;
|
font-size: 28px;
|
margin-top: 15px;
|
}
|
.btn{
|
width: 100%;
|
font-size: 32px;
|
font-weight: bold;
|
color: #F5F6F7;
|
background: #3D8AF2;
|
border-radius: 48px;
|
padding: 26px;
|
border: 0;
|
box-shadow: 0px 3px 15px rgba(55, 105, 207, 0.3);
|
margin: 62px 0 0;
|
}
|
.btn:disabled{
|
opacity: 0.5
|
}
|
.tips{
|
color: #AFAFAF;
|
font-size: 24px;
|
margin-top: 48px;
|
}
|
.tips p{
|
margin: 0;
|
line-height: 32px;
|
}
|
.tab-wrap{
|
margin: 20px -28px;
|
}
|
.list-row{
|
font-size: 24px;
|
color: #080808;
|
padding: 0 28px;
|
}
|
.list-row .name{
|
font-size: 28px;
|
color: #999999
|
}
|
.list-row span:nth-child(1){
|
width: 40%
|
}
|
.list-row span:nth-child(2){
|
text-align: center;
|
width: 45%
|
}
|
.list-row span:nth-child(3){
|
text-align: right;
|
width: 15%
|
}
|
.list-row:not(:last-child){
|
margin: 30px 0;
|
}
|
.list-row:nth-child(1){
|
margin: 30px 0;
|
}
|
.list-row2 span:nth-child(2){
|
width: 22%
|
}
|
.list-row2 span:nth-child(3){
|
width: 38%
|
}
|
</style>
|
