From c3bc7b593bf9067bfdaa8bd7def32dd19844ad75 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Mon, 18 Apr 2022 11:37:49 +0800
Subject: [PATCH] gx
---
src/pages/index/account.vue | 297 +++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 258 insertions(+), 39 deletions(-)
diff --git a/src/pages/index/account.vue b/src/pages/index/account.vue
index 3123676..4e4af7e 100644
--- a/src/pages/index/account.vue
+++ b/src/pages/index/account.vue
@@ -5,19 +5,19 @@
<div class="box-content">
<div class="row flex align-center justify-between">
<span class="name">{{$t("message.TotalOutput")}}</span>
- <span class="count">741522.920798 ETH</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">3789 USDT</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">62183 ETH</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">
+ <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>
@@ -28,7 +28,7 @@
<img src="../../assets/images/icon4.png"/>
<span>ETH</span>
</div>
- <input placeholder="0.000"/>
+ <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">
@@ -36,13 +36,13 @@
<img src="../../assets/images/icon5.png"/>
<span>USDT</span>
</div>
- <span class="amount">0.0000</span>
+ <span class="amount">{{ethToUsdtAmount}}</span>
</div>
</div>
- <span class="all">{{$t("message.RedeemAll")}}</span>
- <button class="btn">{{$t("message.Exchange")}}</button>
+ <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≈2562.47USDT</p>
+ <p>{{$t("message.Price")}}：1ETH ≈ {{info.newPrice}}USDT</p>
<p>{{$t("message.Tip1")}}</p>
</div>
</div>
@@ -58,40 +58,40 @@
<img src="../../assets/images/icon5.png"/>
<span>USDT</span>
</div>
- <input placeholder="0.000"/>
- <span class="all">{{$t("message.WithdrawalAmount")}}</span>
+ <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">0.0000</span>
+ <span class="amount">{{myAccountInfo.availableWallet || 0}}</span>
<span class="all">{{$t("message.TotalBalance")}}</span>
</div>
</div>
- <button class="btn">{{$t("message.Confirm")}}</button>
+ <button class="btn" :disabled="!usdtAmount" @click="submitWithdraw">{{$t("message.Confirm")}}</button>
<div class="tips">
- <p>{{$t("message.Tip2")}}</p>
+ <p>{{$t("message.Tip2", { min: 100, fee: info.changeFee })}}</p>
</div>
</div>
</div>
</van-tab>
<van-tab :title='$t("message.Record")'>
- <div class="box">
+ <div class="box" style="min-height: 320px">
<h3 class="title">{{$t("message.Record")}}</h3>
<div class="box-content">
<div class="tab-wrap">
- <van-tabs v-model:active="active" shrink color="#3D8AF2" title-active-color="#3D8AF2" title-inactive-color="#4F4F4F" line-width="32px">
+ <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 8">
- <span>2022-3-11 10:20</span>
- <span>1000</span>
+ <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>
@@ -101,22 +101,34 @@
<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 8">
- <span>2022-3-11 10:20</span>
- <span>10000</span>
- <span>{{$t("message.Succeed")}}</span>
+ <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 flex align-center justify-between">
+ <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 flex align-center justify-between" v-for="item in 8">
- <span>2022-3-11 10:20</span>
- <span></span>
- <span></span>
+ <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>
@@ -129,17 +141,200 @@
</template>
<script scope>
-import { ref } from 'vue';
-export default {
+import { ref, reactive, onMounted, getCurrentInstance, defineComponent, computed} from 'vue';
+export default defineComponent({
name: 'account',
- setup() {
- const activeNames = ref(['1']);
- return { activeNames };
+ 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>
@@ -185,8 +380,9 @@
margin-right: 8px;
}
.exchange .item input{
+ max-width: 280px;
width: 100%;
- color: #999999;
+ color: #080808;
font-size: 48px;
border: 0;
border-bottom: 1px solid #E9E9E9;
@@ -194,7 +390,14 @@
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;
@@ -211,7 +414,6 @@
}
.all{
display: block;
- color: #3769CF;
font-size: 28px;
margin-top: 15px;
}
@@ -226,6 +428,9 @@
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;
@@ -249,12 +454,26 @@
color: #999999
}
.list-row span:nth-child(1){
- width: 34%
+ width: 40%
}
.list-row span:nth-child(2){
- text-align: center
+ 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>
\ No newline at end of file
--
Gitblit v1.9.1