gx

queenwuli

2022-03-31 4bbe241ca5533f6dff000ec6fb8bc73a014cd16d

 src/pages/index/account.vue

@@ -1,26 +1,26 @@
<template>
    <div>
        <div class="box">
            <h3 class="title">我的账户</h3>
            <h3 class="title">{{$t("message.MyAccount")}}</h3>
            <div class="box-content">
                <div class="row flex align-center justify-between">
                    <span class="name">总产量</span>
                    <span class="count">741522.920798 ETH</span>
                    <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">收入余额</span>
                    <span class="count">3789 USDT</span>
                    <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">可兑换</span>
                    <span class="count">62183 ETH</span>
                    <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">
            <van-tab title="兑换">
        <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">兑换</h3>
                    <h3 class="title">{{$t("message.Exchange")}}</h3>
                    <div class="box-content ">
                        <div class="exchange flex justify-between">
                            <div class="item flex-1">
@@ -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,21 +36,21 @@
                                    <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">全部兑换</span>
                        <button class="btn">兑换</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>价格：1ETH≈2562.47USDT</p>
                            <p>从0.1分开始，将您挖掘的ETH硬币转换为USDT</p>
                            <p>{{$t("message.Price")}}：1ETH ≈ {{info.newPrice}}USDT</p>
                            <p>{{$t("message.Tip1")}}</p>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="提现">
            <van-tab :title='$t("message.Withdraw")'>
                <div class="box">
                    <h3 class="title">提现</h3>
                    <h3 class="title">{{$t("message.Withdraw")}}</h3>
                    <div class="box-content">
                        <div class="exchange flex justify-between">
                            <div class="item flex-1">
@@ -58,66 +58,65 @@
                                    <img src="../../assets/images/icon5.png"/>
                                    <span>USDT</span>
                                </div>
                                <input placeholder="0.000"/>
                                <span class="all">提现金额</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="all">总余额</span>
                                <span class="amount">{{myAccountInfo.availableWallet || 0}}</span>
                                <span class="all">{{$t("message.TotalBalance")}}</span>
                            </div>
                        </div>
                        <button class="btn">确认</button>
                        <button class="btn" :disabled="!usdtAmount" @click="submitWithdraw">{{$t("message.Confirm")}}</button>
                        <div class="tips">
                            <p>USDT取款将在24小时内发送到您的USDT钱包地址，每天只
                                能取款一次，从100USDT开始，每位矿工的费用为30USDT</p>
                            <p>{{$t("message.Tip2", { min: 100, fee: info.changeFee })}}</p>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="记录">
                <div class="box">
                    <h3 class="title">记录</h3>
            <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 v-model:active="active" shrink color="#3D8AF2" title-active-color="#3D8AF2" title-inactive-color="#4F4F4F" line-width="32px">
                                <van-tab title="兑换">
                                    <div class="row flex align-center justify-between">
                                        <span class="name">时间</span>
                                        <span class="name">数量</span>
                                        <span class="name">状态</span>
                            <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="row flex align-center justify-between" v-for="item in 8">
                                        <span>2022-3-11 10:20</span>
                                        <span>1000</span>
                                        <span>成功</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>
                                <van-tab title="提现">
                                    <div class="row flex align-center justify-between">
                                        <span class="name">时间</span>
                                        <span class="name">数量</span>
                                        <span class="name">状态</span>
                                <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="row flex align-center justify-between" v-for="item in 8">
                                        <span>2022-3-11 10:20</span>
                                        <span>10000</span>
                                        <span>成功</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="采矿">
                                    <div class="row flex align-center justify-between">
                                        <span class="name">时间</span>
                                        <span class="name">类型</span>
                                        <span class="name">输出</span>
                                <van-tab :title='$t("message.Mining")'>
                                    <div class="list-row 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="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 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-tabs>
@@ -130,17 +129,194 @@
</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 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)
        }
    }
    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 {
                proxy.miningList = 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)
        }
    }
    onMounted(() => {
        proxy.initglobalSetData()
        initData()
    })
    return { 
        activeNames,
        myAccountInfo,
        exchangeList,
        withdrawList,
        miningList,
        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>
@@ -186,8 +362,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;
@@ -195,7 +372,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;
@@ -212,7 +396,6 @@
    }
    .all{
        display: block;
        color: #3769CF;
        font-size: 28px;
        margin-top: 15px;
    }
@@ -228,6 +411,9 @@
        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;
@@ -240,19 +426,30 @@
    .tab-wrap{
        margin: 20px -28px;
    }
    .row{
    .list-row{
        font-size: 24px;
        color: #080808;
        padding: 0 28px;
    }
    .row .name{
    .list-row .name{
        font-size: 28px;
        color: #999999
    }
    .row span:nth-child(1){
        width: 34%
    .list-row span:nth-child(1){
        width: 40%
    }
    .row span:nth-child(2){
        text-align: center
    .list-row span:nth-child(2){
        text-align: center;
        width: 45%
    }
    .list-row span:nth-child(3){
        text-align: center;
        width: 15%
    }
    .list-row:not(:last-child){
        margin: 30px 0;
    }
    .list-row:nth-child(1){
        margin: 30px 0;
    }
</style>