| | |
| | | <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> |
| | |
| | | </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() { |
| | |
| | | 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); |
| | | } |
| | |
| | | this.eyetel = !this.eyetel; |
| | | }, |
| | | beforeClose(action, done) { |
| | | if (action === 'confirm') { |
| | | if (action === "confirm") { |
| | | setTimeout(done, 1000); |
| | | } else { |
| | | done(); |
| | |
| | | // }); |
| | | // } |
| | | this.$router.push({ |
| | | path: '/withdraw/withdrawPage' |
| | | path: "/withdraw/withdrawPage", |
| | | }); |
| | | }, |
| | | |
| | | }, |
| | | |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | margin-top: 44px; |
| | | } |
| | | |
| | | .btn-box>div { |
| | | .btn-box > div { |
| | | width: 234px; |
| | | padding: 20px 15px; |
| | | box-sizing: border-box; |
| | |
| | | } |
| | | |
| | | .divider-line { |
| | | border-bottom: 1px solid #E5E7ED; |
| | | border-bottom: 1px solid #e5e7ed; |
| | | padding-bottom: 80px; |
| | | } |
| | | |
| | |
| | | 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; |