fontend-web/src/pages/balances1.vue

<template>
  <div>
    <NavHeader></NavHeader>
    <main class="coins-main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">
          <BalancesTabds></BalancesTabds>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      </el-tabs>

      <div class="coins-main_inner balances">
        <div class="total">
          <p class="total_inner">
            <!-- 总资产 -->
            <span>{{ $t('balances.table.taotal') }}：</span>
            <span>{{ tatolPrice | formatV }} USDT</span>
            <!-- <span>USDT</span> -->
            <span class="total_secondary-text">
              <span class="total_symbol">≈</span>
              <!-- 切换汇率 -->
              <span v-if="!currentrate"
                >{{ (tatolPrice * hkdAmount) | formatV }} HKD</span
              >
              <span v-else-if="currentrate == 'HKD'"
                >{{ (tatolPrice * hkdAmount) | formatV }} HKD</span
              >
              <span v-else-if="currentrate == 'USD'"
                >{{ (tatolPrice * usdAmount) | formatV }} USD</span
              >
              <span v-else-if="currentrate == 'CNY'"
                >{{ (tatolPrice * cnyAmount) | formatV }} CNY</span
              >
              <span v-else>{{ (tatolPrice * eurAmount) | formatV }} EUR</span>
              <!-- <span>0.00</span>
              <span>CN</span>-->
            </span>
          </p>
        </div>

        <!-- 标题 -->
        <el-row class="cec-table" stripe>
          <el-col class="cec-title" stripe>
            <div class="title">{{ $t('balances.table.header_pair') }}</div>
            <div class="title">{{ $t('balances.table.header_last_yes') }}</div>
            <div class="title">{{ $t('balances.table.header_last_no') }}</div>
            <!-- <span>BTC估值</span> -->
            <div class="title">{{ $t('balances.table.header_last_ok') }}</div>
          </el-col>
        </el-row>

        <!-- 内容 -->
        <el-row
          class="cec-table"
          stripe
          v-if="btcMoney != '' || ethMoney != '' || eosMoney != ''"
        >
          <!-- btc钱包内容 -->
          <el-col
            class="cec-title"
            v-for="(itembtc, indexBtc) in btcMoney"
            :key="'info2-' + indexBtc"
          >
            <!-- 币种 -->
            <div>
              <el-button type="text" style="cursor: default;">{{
                itembtc.tokenSymbol
              }}</el-button>
            </div>

            <!-- 可用 -->
            <div>
              <el-button type="text" class="white size">{{
                itembtc.freeBalance | formatV
              }}</el-button>
            </div>
            <!-- 冻结 -->
            <div>
              <el-button type="text" class="white size">{{
                itembtc.freezeBalance | formatV
              }}</el-button>
            </div>
            <!-- <div>
              <el-button type="text" class="white size">o.oooooo</el-button>
            </div>-->
            <div>
              <!-- 充值 -->
              <el-button
                class="blue"
                @click="handleTableActionClick('deposit', itembtc)"
                type="text"
                >{{ $t('balances.table.header_last_recharge') }}</el-button
              >
              <!-- 提币   -->
              <el-button
                @click="handleTableActionClick('withdrawal', itembtc)"
                type="text"
                >{{ $t('balances.table.header_last_mention') }}</el-button
              >
              <!-- 交易  -->
              <a href="./trade">
                <el-button type="text">{{
                  $t('balances.table.header_last_deal')
                }}</el-button>
              </a>
              <!-- 财务记录 -->
              <a
                :href="
                  './balancesRecord/record?id=' +
                    itembtc.tokenSymbol +
                    '&addr=' +
                    itembtc.addr +
                    '&tokenId=' +
                    itembtc.tokenId
                "
              >
                <el-button type="text">{{
                  $t('balances.table.header_last_financial')
                }}</el-button>
              </a>
            </div>
          </el-col>

          <!-- eth钱包内容 -->
          <el-col class="cec-title" :data="ethMoney">
            <!-- 币种 -->
            <div>
              <el-button type="text" style="cursor: default;">{{
                ethMoney.tokenSymbol
              }}</el-button>
            </div>
            <!-- 可用 -->
            <div>
              <el-button type="text" class="white size">{{
                ethMoney.freeBalance | formatV
              }}</el-button>
            </div>
            <!-- 冻结 -->
            <div>
              <el-button type="text" class="white size">{{
                ethMoney.freezeBalance | formatV
              }}</el-button>
            </div>

            <div>
              <!-- 充值 -->
              <el-button
                @click="handleTableActionClick('deposit', ethMoney)"
                type="text"
                >{{ $t('balances.table.header_last_recharge') }}</el-button
              >
              <!-- 提币 -->
              <el-button
                @click="handleTableActionClick('withdrawal', ethMoney)"
                type="text"
                >{{ $t('balances.table.header_last_mention') }}</el-button
              >
              <!-- 交易 -->
              <a href="./trade">
                <el-button type="text">{{
                  $t('balances.table.header_last_deal')
                }}</el-button>
              </a>
              <!-- 财务记录 -->
              <a
                :href="
                  './balancesRecord/record?id=' +
                    ethMoney.tokenSymbol +
                    '&addr=' +
                    ethMoney.addr
                "
              >
                <el-button type="text">{{
                  $t('balances.table.header_last_financial')
                }}</el-button>
              </a>
            </div>
          </el-col>

          <!-- eos钱包内容 -->
          <el-col
            class="cec-title"
            v-for="(item, indexEos) in eosMoney"
            :key="indexEos"
          >
            <!-- 币种 -->
            <div>
              <el-button type="text" style="cursor: default;">{{
                item.tokenSymbol
              }}</el-button>
            </div>
            <!-- 可用 -->
            <div>
              <el-button type="text" class="white size">{{
                item.freeBalance | formatV
              }}</el-button>
            </div>
            <!-- 冻结 -->
            <div>
              <el-button type="text" class="white size">{{
                item.freezeBalance | formatV
              }}</el-button>
            </div>
            <!-- <div>
              <el-button type="text" class="white size">o.oooooo</el-button>
            </div>-->
            <div>
              <!-- 充值 -->
              <el-button
                @click="handleTableActionClick('deposit', item)"
                type="text"
                >{{ $t('balances.table.header_last_recharge') }}</el-button
              >
              <!-- 提币   -->
              <el-button
                @click="handleTableActionClick('withdrawal', item)"
                type="text"
                >{{ $t('balances.table.header_last_mention') }}</el-button
              >
              <!-- 交易  -->
              <a href="./trade">
                <el-button type="text">{{
                  $t('balances.table.header_last_deal')
                }}</el-button>
              </a>
              <!-- 财务记录 -->
              <a
                :href="
                  './balancesRecord/record?id=' +
                    item.tokenSymbol +
                    '&addr=' +
                    item.userOpenId +
                    '&addrId=' +
                    item.id
                "
              >
                <el-button type="text">{{
                  $t('balances.table.header_last_financial')
                }}</el-button>
              </a>
            </div>
          </el-col>
        </el-row>
        <!-- 判断是否有记录  ,无则显示  -->
        <el-row v-else>
          <el-col class="no-data">{{
            $t('balances.table.header_nodata')
          }}</el-col>
        </el-row>
      </div>
    </main>

    <!-- 充值 -->
    <el-dialog
      :title="$t('balances.table.header_last_recharge')"
      width="600px"
      :visible.sync="ctrl.depositDialogVisible"
    >
      <BalancesDepositWidget :taInfo="tatoo"></BalancesDepositWidget>
    </el-dialog>

    <!-- 提币 -->
    <el-dialog
      :title="$t('balances.table.header_last_mention')"
      width="980px"
      :visible.sync="ctrl.withdrawalDialogVisible"
      v-if="ctrl.withdrawalDialogVisible"
    >
      <BalancesWithdrawalWidget :tiInfo="titoo"></BalancesWithdrawalWidget>
    </el-dialog>
  </div>
</template>

<script>
// 子组件
import NavHeader from '@/components/common/header';
import BalancesDepositWidget from '@/components/balances/balances-deposit-widget';
import BalancesWithdrawalWidget from '@/components/balances/balances-withdrawal-widget';
import BalancesTabds from '@/components/balances/banlanes-tabds';
// 引入汇率
import {getExchangeRateCookie} from '@/utils/auth';

// 获取请求
import {getBtc, chargeBtc, chargeUsdt} from '@/api/btc.js';

import {getEth, chargeEth} from '@/api/eth.js';

import {getEos, upEosAddr, chargeEos} from '@/api/eos.js';

import {getLeftPrice} from '@/api/currency.js';

import {log} from 'util';

export default {
  name: 'balances',
  components: {
    NavHeader,
    BalancesDepositWidget,
    BalancesWithdrawalWidget,
    BalancesTabds,
  },

  data() {
    return {
      activeName: 'first',
      // balances: MockData.balances,
      ctrl: {
        depositDialogVisible: false,
        withdrawalDialogVisible: false,
      },
      tatoo: [], //充值总数组
      titoo: [], //提币数组
      ethMoney: [],
      eosMoney: [],
      btcMoney: [],
      eosAddr: [], //eos充值地址
      ethChange: {},
      eosChange: [],
      btcChange: [],
      usdtChange: [],
      DestroyIncomeStatistics: true,
      USDTPrie: [],
      ethMang: '', //eth总数量
      eosMang: '', //eos总数量
      btcMang: '', //btc总数量
      usdtMang: '', //usdt资产
      ethPrice: '', //eth资产
      eosPrice: '', //eos资产
      btcPrice: '', //btc资产
      tatolPrice: '', //总资产
      currentrate: '', //获取头部汇率
      cnyAmount: '', //汇率
      eurAmount: '',
      hkdAmount: '',
      usdAmount: '',
    };
  },
  created() {
    // 获取头部栏点击汇率
    this.currentrate = getExchangeRateCookie();

    this.initAddr();
    this.changeEth();
    this.initEth();
    this.changeEos();
    this.initEos();
    this.changeBtc();
    this.changeUsdt();
    this.initBtc();
    this.getUSDTPrie();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /**
     * 表格触发操作
     * @param {Object} row
     * @param {string} action - "deposit | withdrawal | trade"
     */
    handleTableActionClick(action, name) {
      switch (action) {
        case 'deposit':
          // 充值弹窗
          this.ctrl.depositDialogVisible = true;
          this.tatoo = name;
          // console.log(this.tatoo);

          break;
        case 'withdrawal':
          // 提币弹窗
          this.ctrl.withdrawalDialogVisible = true;
          this.titoo = name;
          // console.log(this.titoo);
          break;
        default:
      }
    },
    // 获取eth手续费等  供提币功能使用
    changeEth() {
      chargeEth().then(res => {
        this.ethChange = res.data.data;
      });
    },
    // 获取eth初始数据
    initEth() {
      getEth().then(res => {
        if (res.data.code === 200) {
          this.ethMoney = res.data.data;
          // 拿到资产数额
          this.ethMang = this.ethMoney.balance;
          // console.log(this.ethMang);

          //传递对象  ES6  新语法
          // this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
          this.ethMoney = Object.assign({}, this.ethMoney, {
            gasPrice: this.ethChange.gasPrice, //手续费
            minWdAmount: this.ethChange.minWdAmount, //最小提币
          });
          // console.log(this.ethMoney);
        }
      });
    },
    // 获取eos手续费等  供提币功能使用
    changeEos() {
      chargeEos().then(res => {
        this.eosChange = res.data.data;
        // console.log(this.eosChange);
      });
    },
    // 获取eos充值地址,只有eos需要
    initAddr() {
      upEosAddr().then(res => {
        if (res.data.code === 200) {
          this.eosAddr = res.data.data || {};
          // console.log(this.eosAddr);//null;
        }
      });
    },
    // 获取eos初始数据
    initEos() {
      getEos().then(res => {
        if (res.data.code === 200) {
          this.eosMoney = res.data.data;
          // console.log(this.eosMoney);
          // 赋值新的属性addr,跟btc,eth一致,方便渲染
          for (let i = 0; i <= this.eosMoney.length; i++) {
            // 拿到资产数额
            this.eosMang = this.eosMoney[i].balance;
            // console.log(this.eosMang);

            this.eosMoney[i]['gasPrice'] = this.eosChange.gasPrice;
            this.eosMoney[i]['minWdAmount'] = this.eosChange.minWdAmount;
            // // 再次复制新的属性
            // this.eosMoney[i] = Object.assign({}, this.eosMoney[i], {
            //   gasPrice: this.eosChange.gasPrice, //手续费
            //   minWdAmount: this.eosChange.minWdAmount, //最小提币
            // });
            this.eosMoney[i]['addr'] = this.eosAddr.accountName;
            // console.log(this.eosMoney);
            return this.eosMoney;
          }
        }
      });
    },
    // 获取btc手续费等  供提币功能使用
    changeBtc() {
      chargeBtc().then(res => {
        this.btcChange = res.data.data;
        // console.log(this.btcChange);
      });
    },
    // 获取USDT手续费等  供提币功能使用
    changeUsdt() {
      chargeUsdt().then(res => {
        this.usdtChange = res.data.data;
        // console.log(this.usdtChange);
      });
    },
    // 获取btc初始数据
    initBtc() {
      getBtc().then(res => {
        if (res.data.code === 200) {
          this.btcMoney = res.data.data;
          // 根据数组长度,分别给BTC,USDT对象添加新的属性
          for (let i = 0; i < this.btcMoney.length; i++) {
            if (i == 0) {
              // 拿到资产数额
              this.btcMang = this.btcMoney[i].balance;
              // console.log(this.btcMang);

              this.btcMoney[i]['gasPrice'] = this.btcChange.gasPrice;
              this.btcMoney[i]['minWdAmount'] = this.btcChange.minWdAmount;
              continue;
            } else if (i == 1) {
              // 拿到资产数额
              this.usdtMang = this.btcMoney[i].balance;
              // console.log(this.usdtMang);

              this.btcMoney[i]['gasPrice'] = this.usdtChange.gasPrice;
              this.btcMoney[i]['minWdAmount'] = this.usdtChange.minWdAmount;
            }
            // console.log(this.btcMoney);
            return this.btcMoney;
          }
        }
      });
    },
    // 获取行情USDT币种最新价
    getUSDTPrie() {
      getLeftPrice().then(res => {
        this.USDTPrie = res.data.data;
        // console.log(this.USDTPrie);

        // 获取币种汇率
        this.cnyAmount = this.USDTPrie[0].cnyAmount;
        this.eurAmount = this.USDTPrie[0].eurAmount;
        this.hkdAmount = this.USDTPrie[0].hkdAmount;
        this.usdAmount = this.USDTPrie[0].usdAmount;

        for (let i = 0; i < this.USDTPrie.length; i++) {
          // 获取btc转usdt资产
          if (this.USDTPrie[i].currencyPair == 'BTC-USDT') {
            // console.log(this.USDTPrie[i].amount);
            this.btcPrice = this.btcMang * this.USDTPrie[i].amount;
            // console.log('btc'+this.btcPrice);
          }
          // return this.btcPrice;
        }

        for (let i = 0; i < this.USDTPrie.length; i++) {
          // 获取eth转usdt资产
          if (this.USDTPrie[i].currencyPair == 'ETH-USDT') {
            // console.log(this.USDTPrie[i].amount);
            this.ethPrice = this.ethMang * this.USDTPrie[i].amount;
            // console.log('eth'+this.ethPrice);
          }
          // return this.ethPrice;
        }

        for (let i = 0; i < this.USDTPrie.length; i++) {
          // 获取eos转usdt资产
          if (this.USDTPrie[i].currencyPair == 'EOS-USDT') {
            // console.log(this.USDTPrie[i].amount);
            this.eosPrice = this.eosMang * this.USDTPrie[i].amount;
            // console.log('eos'+this.eosPrice);
          }
          // return this.eosPrice;
        }

        // 获取总资产
        this.tatolPrice =
          this.btcPrice + this.usdtMang + this.ethPrice + this.eosPrice;
        // console.log(this.tatolPrice);
      });
    },
  },
};
</script>

<style lang="scss">
.balances {
  .total {
    padding-bottom: 0.3%;
    margin-top: 2.2%;
    &_inner {
      margin: 0;
      line-height: 40px;
      font-size: 28px;
      color: #333;
    }

    &_secondary-text {
      font-size: 24px;
      color: #999;
      padding-left: 5px;
    }

    &_symbol {
      padding: 0.7%;
    }
  }
}
.cec-table {
  .cec-title {
    font-size: 14px;
    color: #333;
    letter-spacing: 0;
    // padding: 25px 16px;
    padding: 1.75% 1.15%;
    display: flex;
    // justify-content: center;
    // align-content: center;
    font-size: 16px;
    color: #333;
    letter-spacing: 0;
    &:nth-of-type(2n + 1) {
      background-color: #fff;
    }
    div {
      // margin-right: 50px;
      margin-right: 2.5%;
    }
    div:first-child {
      flex: 2;
    }
    div:nth-child(2) {
      flex: 2;
    }
    div:nth-child(3) {
      flex: 2;
    }
    // div:nth-child(4) {
    //   width: 263px;
    // }

    div:nth-child(4) {
      flex: 5;
      span {
        margin-right: 30px;
        font-size: 14px;
        color: #c7282c;
        letter-spacing: 0;
        cursor: pointer;
      }
    }
  }
}
.white {
  color: #333;
  cursor: default;
}
.size {
  font-size: 16px;
}
.title {
  font-size: 14px;
  color: #333;
  letter-spacing: 0;
}
// .no-data {
//   color: #333;
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   padding: 25px 0;
//   font-size: 14px;
//   border-bottom: 1px solid #1f3e5a;
// }
.coins-main {
  padding: 0 1.4%;
}
.coins-main_inner {
  padding-top: 1.4%;
}
.el-button--text {
  color: #333;
  &:hover {
    color: #333;
  }
  &:active {
    color: #333;
  }
}
.el-button {
  &:hover {
    color: #333;
  }
  &:active {
    color: #333;
  }
}

// Estimated Value
</style>