1

李凌

5 days ago 349c48e168b9f2580334422228acde7d1b21bede

 src/components/Transform/assetsCenter/assets.vue

@@ -1,171 +1,113 @@
<template>
  <div class="box-border">
    <div class="pl-33 pr-33 total_wrap">
      <div class="flex justify-between text-grey relative">
        <div class="flex">
          <span class="text-grey font-30">{{ $t('总资产') }}（USDT）</span>
          <div @click.stop="changeEyes">
            <img :src="handImg('../../../assets/image/assets-center/eye-open.png')" class="w-32 h-18" v-show="!eyetel" />
            <img :src="handImg('../../../assets/image/assets-center/eye-close.png')" class="w-32 h-18" v-show="eyetel" />
  <div class="funds-spot">
    <!-- 总资产卡片 -->
    <div class="balance-hero">
      <div class="balance-hero-top">
        <div class="balance-label">
          <span>{{ $t('总资产') }}（USDT）</span>
          <div class="eye-btn" @click.stop="changeEyes">
            <img :src="handImg('../../../assets/image/assets-center/eye-open.png')" v-show="!eyetel" />
            <img :src="handImg('../../../assets/image/assets-center/eye-close.png')" v-show="eyetel" />
          </div>
        </div>
        <div class="right-clock" @click="goRouter('/cryptos/exchangeHistory')">
          <img :src="handImg('../../../assets/image/assets-center/Subtract.png')" class="w-34 h-40" />
        <div class="history-btn" @click="goRouter('/cryptos/exchangeHistory')">
          <img :src="handImg('../../../assets/image/assets-center/Subtract.png')" />
        </div>
      </div>
      <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">
        {{ funds.money_all_coin || '--' }}
        <span class="font-40 text-grey">≈{{ currency.currency_symbol
        }}{{
  funds.money_all_coin
  ? Number(funds.money_all_coin * currency.rate).toFixed(2)
  : ' --'
}}</span>
      <div class="balance-amount" v-if="!eyetel">{{ funds.money_all_coin || '--' }}</div>
      <div class="balance-amount" v-else>********</div>
      <div class="balance-fiat" v-if="!eyetel">
        ≈{{ currency.currency_symbol }}{{
          funds.money_all_coin ? Number(funds.money_all_coin * currency.rate).toFixed(2) : ' --'
        }}
      </div>
      <div class="font-70 font-66 mt-18 textColor" v-else>********</div>
      <div class="balance-fiat" v-else>≈{{ currency.currency_symbol }} ********</div>
    </div>
    <div class="pl-33 pr-33 btn-box flex justify-between">
      <div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/recharge/rechargeList')">
        <div class="word-wrap">

    <!-- 快捷操作 -->
    <div class="quick-actions">
      <div class="action-item" @click="goRouter('/cryptos/recharge/rechargeList')">
        <div class="action-icon deposit">
          <img :src="handImg(`../../../assets/theme/${THEME}/image/assets/up.png`)" alt="" />
          <span> {{ $t('充币') }}</span>
        </div>
        <span>{{ $t('充币') }}</span>
      </div>
      <div class="text-white font-25 textColor tabBackground" @click="withdrawBtn">
        <div class="word-wrap">
      <div class="action-item" @click="withdrawBtn">
        <div class="action-icon withdraw">
          <img :src="handImg(`../../../assets/theme/${THEME}/image/assets/down.png`)" alt="" />
          <span>{{ $t('提币') }}</span>
        </div>
        <span>{{ $t('提币') }}</span>
      </div>
      <div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/exchangePage')">
        <div class="word-wrap">
      <div class="action-item" @click="goRouter('/cryptos/exchangePage')">
        <div class="action-icon swap">
          <img :src="handImg(`../../../assets/theme/${THEME}/image/assets/l_r.png`)" alt="" />
          <span>{{ $t('闪兑') }}</span>
        </div>
        <span>{{ $t('闪兑') }}</span>
      </div>
      <div class="action-item" @click="goRouter('/my/transfer')">
        <div class="action-icon transfer">
          <img :src="handImg('../../../assets/imgs/assets/huazhuan.png')" alt="" />
        </div>
        <span>{{ $t('划转') }}</span>
      </div>
    </div>
    <!--       <div class="divider-line"></div>-->
    <div class="pl-30 pr-30">
      <div class="assets-content-title font-35 titleColor">
        {{ $t('投资组合') }}
      </div>
      <div class="assets-list font-30" v-for="(item, index) in list" :key="index">
        <div class="flex justify-between">
          <div class="flex items-center">
            <img :src="item.symbol
              ? `${HOST_URL}/symbol/${item.symbol_data}.png`
              : handImg('../../../assets/loading-default.png')
              " class="w-72 h-72 rounded-full" />
            <div class="text-grey symbol-name font-30 textColor2">
              {{ item.symbol.toUpperCase() }}/USDT

    <!-- 币种列表 -->
    <div class="section-header">
      <span class="section-title">{{ $t('投资组合') }}</span>
      <span class="section-count">{{ list.length }}</span>
    </div>
    <div class="coin-list">
      <div class="coin-card" v-for="(item, index) in list" :key="index">
        <div class="coin-card-head">
          <div class="coin-info">
            <img
              :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handImg('../../../assets/loading-default.png')"
              class="coin-icon"
            />
            <div>
              <div class="coin-symbol">{{ item.symbol.toUpperCase() }}</div>
              <div class="coin-pair">/ USDT</div>
            </div>
          </div>
          <div class="flex-col font-30 text-right" v-if="!eyetel">
            <div class="textColor" v-if="item.symbol == 'btc'">
              {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
            </div>
            <div class="textColor" v-else-if="item.symbol == 'eth'">
              {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
            </div>
            <div class="textColor" v-else-if="item.symbol == 'usdt'">
              {{ item.volume ? Number(item.volume).toFixed(2) : '0.0' }}
            </div>
            <div class="textColor" v-else>
              {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
            </div>
            <div class="text-grey font-30 font-400 mb-0">
              ≈{{ currency.currency_symbol }}
              {{ item.usdt ? Number(item.usdt).toFixed(2) : '0.0' }}
            </div>
          <div class="coin-total" v-if="!eyetel">
            <div class="coin-total-val">{{ formatAmount(item.symbol, item.volume) }}</div>
            <div class="coin-total-fiat">≈{{ currency.currency_symbol }} {{ item.usdt ? Number(item.usdt).toFixed(2) : '0.00' }}</div>
          </div>
          <div class="flex-col font-30 text-right" v-else>
            <div class="textColor">******** USDT</div>
            <div class="text-grey">
              ≈{{ currency.currency_symbol }} ********
            </div>
          <div class="coin-total" v-else>
            <div class="coin-total-val">********</div>
            <div class="coin-total-fiat">≈{{ currency.currency_symbol }} ********</div>
          </div>
        </div>
        <div class="flex justify-between mt-40 pl-94">
          <template>
            <div class="flex-col font-30" v-if="!eyetel">
              <div class="text-grey">{{ $t('可用') }}</div>
              <div class="textColor" v-if="item.symbol == 'btc'">
                {{ item.usable ? Number(item.usable).toFixed(8) : '0.0' }}
              </div>
              <div class="textColor" v-else-if="item.symbol == 'eth'">
                {{ item.usable ? Number(item.usable).toFixed(8) : '0.0' }}
              </div>
              <div class="textColor" v-else-if="item.symbol == 'usdt'">
                {{ item.usable ? Number(item.usable).toFixed(2) : '0.0' }}
              </div>
              <div class="textColor" v-else>
                {{ item.usable ? Number(item.usable).toFixed(8) : '0.0' }}
              </div>
            </div>
            <div class="flex-col font-30" v-else>
              <div class="text-grey">{{ $t('可用') }}</div>
              <div class="textColor">
                {{ currency.currency_symbol }} ********
              </div>
            </div>
          </template>
          <template>
            <div class="flex-col font-30" v-if="!eyetel">
              <div class="text-grey">{{ $t('锁仓') }}</div>
              <div class="textColor" v-if="item.symbol === 'btc'">
                {{ item.lock_amount ? Number(item.lock_amount).toFixed(8) : '0.0' }}
              </div>
              <div class="textColor" v-else-if="item.symbol === 'eth'">
                {{ item.lock_amount ? Number(item.lock_amount).toFixed(8) : '0.0' }}
              </div>
              <div class="textColor" v-else-if="item.symbol == 'usdt'">
                {{ item.lock_amount ? Number(item.lock_amount).toFixed(2) : '0.0' }}
              </div>
              <div class="textColor" v-else>
                {{ item.lock_amount ? Number(item.lock_amount).toFixed(8) : '0.0' }}
              </div>
            </div>
            <div class="flex-col font-30" v-else>
              <div class="text-grey">{{ $t('锁仓') }}</div>
              <div class="textColor">
                {{ currency.currency_symbol }} ********
              </div>
            </div>
          </template>
          <template>
            <div class="flex-col font-30 text-right" v-if="!eyetel">
              <div class="text-grey">{{ $t('冻结') }}</div>
              <div class="textColor" v-if="item.symbol == 'btc'">
                {{ Number(item.frozenAmount + item.freeze_amount).toFixed(8) || '0.0' }}
              </div>
              <div class="textColor" v-else-if="item.symbol == 'eth'">
                {{ Number(item.frozenAmount + item.freeze_amount).toFixed(8) || '0.0' }}
              </div>
              <div class="textColor" v-else-if="item.symbol == 'usdt'">
                {{ Number(item.frozenAmount + item.freeze_amount).toFixed(2) || '0.0' }}
              </div>
              <div class="textColor" v-else>
                {{ Number(item.frozenAmount + item.freeze_amount).toFixed(8) || '0.0' }}
              </div>
            </div>
            <div class="flex-col font-30 text-right" v-else>
              <div class="text-grey">{{ $t('冻结') }}</div>
              <div class="textColor">
                {{ currency.currency_symbol }} ********
              </div>
            </div>
          </template>
        <div class="coin-stats">
          <div class="stat-item">
            <span class="stat-label">{{ $t('可用') }}</span>
            <span class="stat-value" v-if="!eyetel">{{ formatAmount(item.symbol, item.usable) }}</span>
            <span class="stat-value" v-else>********</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">{{ $t('锁仓') }}</span>
            <span class="stat-value" v-if="!eyetel">{{ formatAmount(item.symbol, item.lock_amount) }}</span>
            <span class="stat-value" v-else>********</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">{{ $t('冻结') }}</span>
            <span class="stat-value" v-if="!eyetel">{{ formatAmount(item.symbol, Number(item.frozenAmount || 0) + Number(item.freeze_amount || 0)) }}</span>
            <span class="stat-value" v-else>********</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { _getAllWallet } from '@/service/fund.api';
import { Dialog } from 'vant';
import { mapGetters } from 'vuex';
import { HOST_URL } from '@/config';
import { THEME } from '@/config/theme';
import { _getAllWallet } from '@/service/fund.api'
import { Dialog } from 'vant'
import { mapGetters } from 'vuex'
import { HOST_URL } from '@/config'
import { THEME } from '@/config/theme'

export default {
  name: 'Assets',
  components: {
@@ -180,178 +122,281 @@
      THEME,
      HOST_URL,
      list: [],
      total: '',
      status: '', //身份认证状态 0已申请未审核，1审核中，2审核通过，3审核未通过
      eyetel: false,
      active: 0
    };
      eyetel: false
    }
  },
  mounted() {
    this.getList();
    this.getList()
  },
  methods: {
    handImg(url) {
      return new URL(url, import.meta.url).href
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    goRouter(parmas) {
      if (parmas === '/cryptos/exchangeHistory') {
        this.$router.push({ path: parmas, query: { type: 1 } });
        this.$router.push({ path: parmas, query: { type: 1 } })
      } else {
        this.$router.push(parmas);
        this.$router.push(parmas)
      }
    },
    compare(p, type) {
      //这是比较函数
      return function (m, n) {
        var a = m[p];
        var b = n[p];
        if (a == b) {
          return;
        }
        if (type == 'up') {
          return b - a; //升序
        } else if (type == 'down') {
          return a - b; //降序
        } else {
          return a - b;
        }
      };
    },
    getList() {
      _getAllWallet({
        symbolType: 'cryptos'
      }).then((res) => {
        let list = res.extends;
        this.list = [...list].sort(this.compare('usdt', 'up'));
      });
    },
    changeEyes() {
      this.eyetel = !this.eyetel;
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        setTimeout(done, 1000);
      } else {
        done();
        var a = m[p]
        var b = n[p]
        if (a == b) return 0
        if (type == 'up') return b - a
        return a - b
      }
    },
    //跳转提币页面
    getList() {
      _getAllWallet({ symbolType: 'cryptos' }).then((res) => {
        let list = res.extends
        this.list = [...list].sort(this.compare('usdt', 'up'))
      })
    },
    formatAmount(symbol, val) {
      const num = Number(val) || 0
      if (symbol === 'usdt') return num.toFixed(2)
      if (symbol === 'btc' || symbol === 'eth') return num.toFixed(8)
      return num.toFixed(8)
    },
    changeEyes() {
      this.eyetel = !this.eyetel
    },
    withdrawBtn() {
      //身份已认证，直接跳转，未认证则提示跳身份认证页
      // if(this.funds.status==2) {
      //   this.$router.push({
      //     path:'/cryptos/withdraw/withdrawPage'
      //   });
      // }else{
      //   Dialog.confirm({
      //     confirmButtonText:this.$t('确定'),
      //     cancelButtonText:this.$t('取消'),
      //     title: this.$t('提示'),
      //     message: this.$t('请进行身份KYC认证'),
      //     beforeClose: (action, done) => {
      //       if (action === 'confirm') {
      //         done();
      //         this.$router.push({
      //           path:'/authentication'
      //         });
      //       } else {
      //         done();
      //       }
      //     },
      //   });
      // }
      this.$router.push({
        path: '/cryptos/withdraw/withdrawPage'
      });
      this.$router.push({ path: '/cryptos/withdraw/withdrawPage' })
    }
  }
};
}
</script>

<style lang="scss" scoped>
@import "@/assets/init.scss";
@import '@/assets/init.scss';

#cryptos {
  .right-clock {
    position: absolute;
    top: 0;
    right: -3px;
.funds-spot {
  padding-top: 16px;
  padding-bottom: 40px;
}

.balance-hero {
  padding: 36px 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, #1a6dff 0%, #004aee 55%, #0035b8 100%);
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 74, 238, 0.28);
  margin-bottom: 28px;
}

.balance-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.balance-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 26px;
  opacity: 0.9;
}

.eye-btn img {
  width: 36px;
  height: 22px;
}

.history-btn img {
  width: 36px;
  height: 42px;
  opacity: 0.85;
}

.balance-amount {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.15;
  word-break: break-all;
}

.balance-fiat {
  margin-top: 10px;
  font-size: 28px;
  opacity: 0.85;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 8px;
  border-radius: 20px;
  @include themify() {
    background: themed('cont_background');
  }
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

  .total_wrap {
    margin-top: 44px;
  }

  .asset-title-box {
    margin: 40px 0;
  }

  .btn-box {
    margin-top: 44px;
  }

  .btn-box>div {
    width: 234px;
    padding: 20px 15px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8.8px;
    font-size: 26.5px;
    display: flex;
    justify-content: center;
    align-items: center;

    .word-wrap {
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 40px;
        height: 40px;
        margin-right: 22px;
      }

      span {
        font-size: 26.5px;
      }
  span {
    font-size: 24px;
    @include themify() {
      color: themed('text_color');
    }
  }
}

  .mr60 {
    margin-right: 60px;
.action-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 40px;
    height: 40px;
  }

  .divider-line {
    border-bottom: 1px solid $border-grey;
    padding-bottom: 80px;
  }
  &.deposit { background: rgba(26, 109, 255, 0.12); }
  &.withdraw { background: rgba(230, 84, 97, 0.12); }
  &.swap { background: rgba(46, 189, 133, 0.12); }
  &.transfer { background: rgba(255, 152, 0, 0.12); }
}

  .assets-content-title {
    margin-top: 60px;
    margin-bottom: 55px;
  }
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

  .assets-list {
    margin-bottom: 70px;
.section-title {
  font-size: 32px;
  font-weight: 600;
  @include themify() {
    color: themed('text_color');
  }
}

  .assets-list>div {
    display: flex;
.section-count {
  font-size: 24px;
  @include themify() {
    color: themed('text_color1');
  }
}

  .assets-list>div:nth-child(2) div:nth-child(1) {
    margin-bottom: 16px;
    font-size: 30px;
    font-weight: 700;
.coin-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.coin-card {
  padding: 28px 24px;
  border-radius: 20px;
  @include themify() {
    background: themed('cont_background');
  }
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

  .symbol-name {
    margin-left: 22px;
    //margin-top:10px;
.coin-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.12);
}

.coin-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.coin-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.coin-symbol {
  font-size: 32px;
  font-weight: 700;
  @include themify() {
    color: themed('text_color');
  }
}

.coin-pair {
  font-size: 24px;
  margin-top: 4px;
  @include themify() {
    color: themed('text_color1');
  }
}

.coin-total {
  text-align: right;
}

.coin-total-val {
  font-size: 30px;
  font-weight: 600;
  @include themify() {
    color: themed('text_color');
  }
}

.coin-total-fiat {
  margin-top: 6px;
  font-size: 24px;
  @include themify() {
    color: themed('text_color1');
  }
}

.coin-stats {
  display: flex;
  gap: 12px;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px;
  border-radius: 12px;
  @include themify() {
    background: themed('main_background');
  }
}

.stat-label {
  font-size: 22px;
  @include themify() {
    color: themed('text_color1');
  }
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  word-break: break-all;
  @include themify() {
    color: themed('text_color');
  }
}
</style>