新币+dapp app 前端
zzzz
2024-04-09 d5461636a6b75c2effd3154b07e481c09e9062f9
src/components/assetsCenter/overview.vue
@@ -3,55 +3,109 @@
    <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>
          <span class="text-grey font-30">{{ $t("总资产") }}(USDT)</span>
          <div @click.stop="changeEyes">
            <img :src="require('../../assets/image/assets-center/eye-open.png')" class="w-32 h-18" v-show="!eyetel" />
            <img :src="require('../../assets/image/assets-center/eye-close.png')" class="w-32 h-18" v-show="eyetel" />
            <img
              :src="require('../../assets/image/assets-center/eye-open.png')"
              class="w-32 h-18"
              v-show="!eyetel"
            />
            <img
              :src="require('../../assets/image/assets-center/eye-close.png')"
              class="w-32 h-18"
              v-show="eyetel"
            />
          </div>
        </div>
        <div class="right-clock" @click="goRouter('/exchange/exchangeHistory')">
          <img :src="require('../../assets/image/assets-center/Subtract.png')" class="w-44 h-38" />
          <img
            :src="require('../../assets/image/assets-center/Subtract.png')"
            class="w-44 h-38"
          />
        </div>
      </div>
      <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">{{ funds.total || '--' }}
        <span class="font-40 text-grey">≈{{ currency.currency_symbol }}{{ funds.total ? (funds.total *
          currency.rate).toFixed(2) : ' --' }}</span>
      <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">
        {{ funds.total || "--" }}
        <span class="font-40 text-grey"
          >≈{{ currency.currency_symbol
          }}{{
            funds.total ? (funds.total * currency.rate).toFixed(2) : " --"
          }}</span
        >
      </div>
      <div class="font-70 font-66 mt-18 textColor" v-else>********</div>
    </div>
    <div class="pl-33 pr-33 btn-box flex justify-between">
      <div class="text-white font-25 textColor tabBackground" @click="goRouter('/recharge/rechargeList')">
      <div
        class="text-white font-25 textColor tabBackground"
        @click="goRouter('/recharge/rechargePage?symbol=usdt')"
      >
        <div class="word-wrap">
          <img :src="require(`@/assets/theme/${theme}/image/assets/up.png`)" alt="">
          <span> {{ $t('充币') }}</span>
          <img
            :src="require(`@/assets/theme/${theme}/image/assets/up.png`)"
            alt=""
          />
          <span> {{ $t("充币") }}</span>
        </div>
      </div>
      <div class="text-white font-25 textColor tabBackground" @click="withdrawBtn">
      <div
        class="text-white font-25 textColor tabBackground"
        @click="withdrawBtn"
      >
        <div class="word-wrap">
          <img :src="require(`@/assets/theme/${theme}/image/assets/down.png`)" alt="">
          <span>{{ $t('提币') }}</span>
          <img
            :src="require(`@/assets/theme/${theme}/image/assets/down.png`)"
            alt=""
          />
          <span>{{ $t("提币") }}</span>
        </div>
      </div>
      <div class="text-white font-25 textColor tabBackground" @click="goRouter('/exchange/exchangePage')">
      <div
        class="text-white font-25 textColor tabBackground"
        @click="goRouter('/exchange/exchangePage')"
      >
        <div class="word-wrap">
          <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="">
          <span>{{ $t('闪兑') }}</span>
          <img
            :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)"
            alt=""
          />
          <span>{{ $t("闪兑") }}</span>
        </div>
      </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 flex justify-between" v-for="(item, index) in list" :key="index">
      <div class="assets-content-title font-35 titleColor">
        {{ $t("投资组合") }}
      </div>
      <div
        class="assets-list font-30 flex justify-between"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="items-center">
          <img :src="require('@/assets/image/assets-center/funds/' + item.icon + '.png')" class="w-44 h-44" />
          <div class="text-grey symbol-name font-30 textColor2">{{ $t(item.text) }}</div>
          <img
            :src="
              require('@/assets/image/assets-center/funds/' +
                item.icon +
                '.png')
            "
            class="w-44 h-44"
          />
          <div class="text-grey symbol-name font-30 textColor2">
            {{ $t(item.text) }}
          </div>
        </div>
        <div class="flex-col font-30 text-right" v-if="!eyetel">
          <div class="textColor">{{ funds[item.key] || '--' }} USDT</div>
          <div class="text-grey font-30 font-400 mb-0">≈{{ currency.currency_symbol }} {{ funds[item.key] ?
            (funds[item.key]
              * currency.rate).toFixed(2) : ' --' }}</div>
          <div class="textColor">{{ funds[item.key] || "--" }} USDT</div>
          <div class="text-grey font-30 font-400 mb-0">
            ≈{{ currency.currency_symbol }}
            {{
              funds[item.key]
                ? (funds[item.key] * currency.rate).toFixed(2)
                : " --"
            }}
          </div>
        </div>
        <div class="flex-col font-30 text-right" v-if="eyetel">
          <div class="textColor">******** USDT</div>
@@ -62,33 +116,58 @@
  </div>
</template>
<script>
import Axios from "@/API/assets"
import { Dialog } from 'vant';
import Axios from "@/API/assets";
import { Dialog } from "vant";
import { mapGetters } from "vuex";
export default {
  name: 'AssetsPage',
  name: "AssetsPage",
  components: {
    [Dialog.name]: Dialog,
  },
  props: ['funds'],
  props: ["funds"],
  data() {
    return {
      // total:"",
      // status:"", //身份认证状态 0已申请未审核,1审核中,2审核通过,3审核未通过
      eyetel: false,
      active: 0,
    }
    };
  },
  computed: {
    ...mapGetters('home', ['currency', 'theme']),
    ...mapGetters("home", ["currency", "theme"]),
    list() {
      return [
        { id: 1, text: this.$t('现货账户'), icon: 'spot', key: 'money_all_coin' },
        { id: 2, text: this.$t('合约账户 (U本位)'), icon: 'contract_u', key: 'money_contract' },
        { id: 3, text: this.$t('交割合约账户'), icon: 'contract_d', key: 'money_futures' },
        { id: 4, text: this.$t('理财账户'), icon: 'invest', key: 'money_finance' },
        { id: 5, text: this.$t('矿机资产'), icon: 'mining', key: 'money_miner' },
      ]
        {
          id: 1,
          text: this.$t("现货账户"),
          icon: "spot",
          key: "money_all_coin",
        },
        {
          id: 2,
          text: this.$t("合约账户 (U本位)"),
          icon: "contract_u",
          key: "money_contract",
        },
        {
          id: 3,
          text: this.$t("交割合约账户"),
          icon: "contract_d",
          key: "money_futures",
        },
        {
          id: 4,
          text: this.$t("理财账户"),
          icon: "invest",
          key: "money_finance",
        },
        {
          id: 5,
          text: this.$t("矿机资产"),
          icon: "mining",
          key: "money_miner",
        },
      ];
    },
  },
  mounted() {
@@ -100,8 +179,8 @@
      this.$router.go(-1);
    },
    goRouter(parmas) {
      if (parmas === '/exchange/exchangeHistory') {
        this.$router.push({ path: parmas, query: { type: 0 } })
      if (parmas === "/exchange/exchangeHistory") {
        this.$router.push({ path: parmas, query: { type: 0 } });
      } else {
        this.$router.push(parmas);
      }
@@ -125,7 +204,7 @@
      this.eyetel = !this.eyetel;
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
      if (action === "confirm") {
        setTimeout(done, 1000);
      } else {
        done();
@@ -157,13 +236,11 @@
      //   });
      // }
      this.$router.push({
        path: '/withdraw/withdrawPage'
        path: "/withdraw/withdrawPage",
      });
    },
  },
}
};
</script>
<style lang="scss" scoped>
@@ -185,7 +262,7 @@
  margin-top: 44px;
}
.btn-box>div {
.btn-box > div {
  width: 234px;
  padding: 20px 15px;
  box-sizing: border-box;
@@ -218,7 +295,7 @@
}
.divider-line {
  border-bottom: 1px solid #E5E7ED;
  border-bottom: 1px solid #e5e7ed;
  padding-bottom: 80px;
}
@@ -231,11 +308,11 @@
  margin-bottom: 35px;
}
.assets-list>div {
.assets-list > div {
  display: flex;
}
.assets-list>div:nth-child(2) div:nth-child(1) {
.assets-list > div:nth-child(2) div:nth-child(1) {
  margin-bottom: 16px;
  font-size: 30px;
  font-weight: 700;