453530270@qq.com
3 years ago
2 changed files with 953 additions and 434 deletions
@ -0,0 +1,511 @@ |
|||||
|
<template> |
||||
|
<v-page> |
||||
|
<v-header :title="$t('base.d2')" :left-arrow="false"></v-header> |
||||
|
<!-- <view style="height: var(--status-bar-height)"></view> --> |
||||
|
<view |
||||
|
class="box-size head bg-panel-3 h-aut p-x-md m-x-md d-flex justify-between flex-wrap align-center bgb3 rounded-ms color-light" |
||||
|
:class="theme == 'light' ? 'bgb3-white' : ''" style="position: relative"> |
||||
|
<view class="d-flex p-t-md justify-center align-center w-max"> |
||||
|
<text class="fn-16 color-default d-block">{{ $t("base.d6") }}(BTC)</text> |
||||
|
<view class="fn-18 m-l-md d-flex" @click="setHide(!hideMoney)"> |
||||
|
<van-icon v-if="!hideMoney" name="eye-o"/> |
||||
|
<van-icon v-else name="closed-eye"/> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="m-t-md d-flex flex-wrap justify-center fn-center w-max"> |
||||
|
<text class="fn-28 w-max">{{ filterMoney(account.total_assets_btc, true) }}</text> |
||||
|
<text class="fn-sm m-l-md w-max"> |
||||
|
<!-- ≈{{ filterMoney(account.total_assets_usd) }} USD --> |
||||
|
≈{{ filterMoney(account.total_assets_usd, false) }} USDT |
||||
|
</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="m-t-ms p-b-ms w-max " style="margin-top: 10px"> |
||||
|
<view class="d-flex justify-between align-center rounded-lg"> |
||||
|
<v-link tag="view" to="/pages/assets/recharge" v-if="status == 2" @click="getAuthInfo" |
||||
|
class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center shadow-panel-4"> |
||||
|
<!-- :class="tabActive==0?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''" --> |
||||
|
<view class="m-r-xs d-flex align-center"> |
||||
|
<img src="static/img/13.png" alt="" class="h-25"/> |
||||
|
</view> |
||||
|
<text class="color-light fn-middle fn-ms">{{ |
||||
|
$t("base.b5") |
||||
|
}} |
||||
|
</text> |
||||
|
</v-link> |
||||
|
<v-link tag="view" to="/pages/auth/senior" v-if="status!=2" @click="getAuthInfo" |
||||
|
class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center shadow-panel-4"> |
||||
|
<!-- :class="tabActive==0?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''" --> |
||||
|
<view class="m-r-xs d-flex align-center"> |
||||
|
<img src="static/img/13.png" alt="" class="h-25"/> |
||||
|
</view> |
||||
|
<text class="color-light fn-middle fn-ms">{{ |
||||
|
$t("base.b5") |
||||
|
}} |
||||
|
</text> |
||||
|
</v-link> |
||||
|
<v-link tag="view" to="/pages/assets/draw" |
||||
|
class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center shadow-panel-4"> |
||||
|
<view class="m-r-xs d-flex align-center"> |
||||
|
<img src="static/img/5.png" alt="" class="h-25"/> |
||||
|
</view> |
||||
|
<text class="color-light fn-ms">{{ |
||||
|
$t("base.b6") |
||||
|
}} |
||||
|
</text> |
||||
|
</v-link> |
||||
|
<v-link tag="view" to="/pages/transfer/index" |
||||
|
class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center shadow-panel-4"> |
||||
|
<view class="m-r-xs d-flex align-center"> |
||||
|
<img src="static/img/hua.png" alt="" class="h-25"/> |
||||
|
</view> |
||||
|
<text class="color-light fn-ms">{{ |
||||
|
$t("base.d8") |
||||
|
}} |
||||
|
</text> |
||||
|
</v-link> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="layout-main"> |
||||
|
<scroll-view @refresherrefresh="onRefresh" :refresher-enabled="refresherEnabled&&scrollTop<50" |
||||
|
:refresher-triggered="refreshing" refresher-background="transparent" :refresher-threshold="50"> |
||||
|
<!-- 头部 --> |
||||
|
<view class="tab m-x-md m-t-md rounded-ms d-flex justify-between bgb3 p-xs" |
||||
|
:class="theme == 'light' ? 'bgb3-white' : ''"> |
||||
|
<view class="w-33 fn-center p-y-xxs" |
||||
|
:class="tabActive==0?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''" |
||||
|
@click="tabActive=0"> |
||||
|
{{$t('base.d7')}} |
||||
|
</view> |
||||
|
<view class="w-33 fn-center p-y-xxs m-l-xs" |
||||
|
:class="tabActive==1?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''" |
||||
|
@click="tabActive=1"> |
||||
|
{{$t('base.e4')}} |
||||
|
</view> |
||||
|
<!-- <view class="w-33 fn-center p-y-xxs m-l-xs" :class="tabActive==2?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''" |
||||
|
@click="tabActive=2"> |
||||
|
{{$t('otc.d5')}} |
||||
|
</view> --> |
||||
|
</view> |
||||
|
<view class="top"> |
||||
|
<!-- <van-tabs |
||||
|
:active="tabActive" |
||||
|
@change="changtTab" |
||||
|
:border="false" |
||||
|
v-if="show" |
||||
|
:line-width="30" |
||||
|
swipeable |
||||
|
animated |
||||
|
class="tabs-main d-flex justify-between align-center flex-col" |
||||
|
> |
||||
|
<van-tab :title="$t('base.d7')" :name="0"> --> |
||||
|
<view class="box-shadow p-t-ms wallet m-y-md" v-if="tabActive==0"> |
||||
|
<view class="m-x-md m-b-xs m-t-sm"> |
||||
|
<!--bgb3 :class="theme == 'light' ? 'bgb3-white' : ''" --> |
||||
|
<view class="shadow-panel-nei p-xs p-x-md rounded-ms bg-form-panel-3" |
||||
|
style="position: relative"> |
||||
|
<text class="fn-20 d-block color-light m-t-xs"> |
||||
|
<!-- ≈{{ filterMoney(account.funds_account_usd) }} --> |
||||
|
≈{{ (account.funds_account_usd).toFixed(2) }} |
||||
|
</text> |
||||
|
<text class="fn-sm d-block color-gray-6 m-t-xs">{{ $t("base.d6") }}(USDT)</text> |
||||
|
|
||||
|
<!-- <text class="fn-20 d-block color-light m-t-md" |
||||
|
>{{ filterMoney(account.funds_account_btc) }} BTC</text |
||||
|
> --> |
||||
|
<!-- fn-sm d-block m-t-xs color-gray-6 --> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="h-30 p-x-xs d-flex justify-between align-center"> |
||||
|
<van-field :value="searchText" @input="searchText = $event.detail" left-icon="search" |
||||
|
:placeholder="$t('base.d9')" input-class="fn-12 " |
||||
|
class="flex-fill color-gray-6 rounded-md pos fn-12 m-r-lg" |
||||
|
style="padding-left: 0"/> |
||||
|
<van-checkbox :value="hide" @change="hide = !hide" icon-size="16"> |
||||
|
<text class="color-gray-6 m-r-xs">{{ $t("base.e0") }} 0 {{ $t("base.e1") }}</text> |
||||
|
</van-checkbox> |
||||
|
</view> |
||||
|
<router-link :to="{ |
||||
|
path: '/pages/assets/bill', |
||||
|
query: { coin_name: item.coin_name }, |
||||
|
}" v-show="ifShow(item)" class="p-t-xs d-block rounded-md text-none" v-for="(item, index) in list" |
||||
|
:key="index"> |
||||
|
<view class="m-x-md d-flex justify-between align-center p-b-xs"> |
||||
|
<view> |
||||
|
<img :src="item.image" class="w-20 h-20 rounded-max fn-middle"/> |
||||
|
<text class="fn-18 fn-bold color-light fn-middle p-l-sm">{{ |
||||
|
item.coin_name |
||||
|
}} |
||||
|
</text> |
||||
|
</view> |
||||
|
<!-- <view> |
||||
|
<text class="fn-lg color-light fn-middle">{{ |
||||
|
add( |
||||
|
item.usable_balance, |
||||
|
item.freeze_balance, |
||||
|
item.priceDecimals |
||||
|
) |
||||
|
}}</text> |
||||
|
<van-icon |
||||
|
class="p-l-xs fn-middle" |
||||
|
name="arrow" |
||||
|
size="16" |
||||
|
color="#646566" |
||||
|
/> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
<view class="p-x-md d-flex justify-between align-center"> |
||||
|
<view class="w-4/12"> |
||||
|
<p class="color-gray-6" style="padding: 5px 0"> |
||||
|
{{ $t("base.b9") }} |
||||
|
</p> |
||||
|
<p class="fn-lg color-light overflow-scroll">{{ (item.usable_balance).toFixed(2) }} |
||||
|
</p> |
||||
|
</view> |
||||
|
<view class="w-4/12 fn-center"> |
||||
|
<p class="color-gray-6" style="padding: 5px 0"> |
||||
|
{{ $t("base.e2") }} |
||||
|
</p> |
||||
|
<p class="fn-lg color-light overflow-scroll">{{ item.freeze_balance }}</p> |
||||
|
</view> |
||||
|
<view class="w-4/12 fn-right"> |
||||
|
<p class="color-gray-6" style="padding: 5px 0"> |
||||
|
{{ $t("base.e3") }}(USD) |
||||
|
</p> |
||||
|
<p class="fn-lg color-light overflow-scroll"> |
||||
|
{{ omitTo(item.usd_estimate, item.priceDecimals) | priceDecimals}} |
||||
|
</p> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="h-4 m-t-xs"></view> |
||||
|
</router-link> |
||||
|
</view> |
||||
|
<!-- </van-tab> |
||||
|
|
||||
|
<van-tab :title="$t('base.e4')" :name="1" class="p-t-md"> --> |
||||
|
<view class="m-x-md" v-if="tabActive==1"> |
||||
|
<view class="bgb3 p-x-md p-y-xs m-y-xs rounded-ms" :class="theme == 'light' ? 'bgb3-white' : ''" |
||||
|
style="position: relative"> |
||||
|
<view class="fn-sm d-flex justify-between color-gray-6 m-t-xs"> |
||||
|
<span> USDT </span> |
||||
|
<v-link class="color-buy" to="/pages/assets/account-bill">{{ $t("base.e4") }} |
||||
|
<van-icon class="fn-middle" name="arrow" size="16"/> |
||||
|
</v-link> |
||||
|
</view> |
||||
|
<span class="fn-20 d-block color-light m-t-md">{{ filterMoney(account.contract_account_usd) |
||||
|
}}{{ account.symbol }}</span> |
||||
|
<view class="d-flex justify-between m-t-xs"> |
||||
|
<v-link to="/pages/transfer/index" class="d-flex"> |
||||
|
<view class="m-r-xs align-center"> |
||||
|
<img :src="$localImgUrl('fill4.png')" alt="" class="h-18"/> |
||||
|
</view> |
||||
|
<!-- <van-icon class="color-theme-1 fn-26 fn-middle m-r-xs" name="exchange" /> --> |
||||
|
<text class="color-light fn-middle">{{ |
||||
|
$t("base.d8") |
||||
|
}} |
||||
|
</text> |
||||
|
</v-link> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="m-x-md" v-if="tabActive==2"> |
||||
|
<view class="bgb3 p-x-md p-y-xs m-y-xs rounded-ms" :class="theme == 'light' ? 'bgb3-white' : ''" |
||||
|
style="position: relative"> |
||||
|
<view class="fn-sm d-flex justify-between color-gray-6 m-t-xs"> |
||||
|
<span> USDT </span> |
||||
|
<v-link class="color-buy" to="/pages/assets/currency-bill">{{ $t("otc.d5") }} |
||||
|
<van-icon class="fn-middle" name="arrow" size="16"/> |
||||
|
</v-link> |
||||
|
</view> |
||||
|
|
||||
|
<text class="d-flex m-t-ms fn-12"> |
||||
|
<span class="fn-20 color-light m-r-xs">{{ filterMoney(otc.otc_usable_balance) |
||||
|
}}{{ account.symbol }}</span> |
||||
|
({{$t('contract.e4')}}) |
||||
|
</text> |
||||
|
<text class="d-flex m-t-ms fn-12"> |
||||
|
<span class="fn-20 color-light m-r-xs">{{ filterMoney(otc.otc_freeze_balance) |
||||
|
}}{{ account.symbol }}</span> |
||||
|
({{$t('otc.d6')}}) |
||||
|
</text> |
||||
|
<view class="d-flex justify-between m-t-xs"> |
||||
|
<v-link to="/pages/transfer/index" class="d-flex"> |
||||
|
<view class="m-r-xs align-center"> |
||||
|
<img :src="$localImgUrl('fill4.png')" alt="" class="h-18"/> |
||||
|
</view> |
||||
|
<!-- <van-icon class="color-theme-1 fn-26 fn-middle m-r-xs" name="exchange" /> --> |
||||
|
<text class="color-light fn-middle">{{ |
||||
|
$t("base.d8") |
||||
|
}} |
||||
|
</text> |
||||
|
</v-link> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- </van-tab> |
||||
|
</van-tabs> --> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</v-page> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { |
||||
|
mapState, |
||||
|
mapActions |
||||
|
} from "vuex"; |
||||
|
import Wallet from "@/api/wallet"; |
||||
|
import math from "@/utils/class/math.js"; |
||||
|
import Contract from "@/api/contract.js"; |
||||
|
import Profile from "@/api/profile"; |
||||
|
|
||||
|
export default { |
||||
|
name: "mine", |
||||
|
data() { |
||||
|
return { |
||||
|
userInfo: {}, |
||||
|
account: {}, |
||||
|
list: [], |
||||
|
tabActive: 0, // 切换选择 |
||||
|
searchText: "", |
||||
|
hide: false, |
||||
|
show: false, |
||||
|
accountDetail: {}, |
||||
|
scrollTop: 0, |
||||
|
refreshing: false, |
||||
|
otc: {}, |
||||
|
status: 0, |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState({ |
||||
|
hideMoney: "hideMoney", |
||||
|
theme: "theme", |
||||
|
}), |
||||
|
}, |
||||
|
props: { |
||||
|
isShow: { |
||||
|
default: true, |
||||
|
type: Boolean, |
||||
|
required: false, |
||||
|
}, |
||||
|
refresherEnabled: { |
||||
|
default: true, |
||||
|
required: false, |
||||
|
type: Boolean |
||||
|
}, |
||||
|
}, |
||||
|
watch: { |
||||
|
isShow(n, o) { |
||||
|
if (n) { |
||||
|
this.upDateData(); |
||||
|
} |
||||
|
}, |
||||
|
tabActive() { |
||||
|
this.upDateData(); |
||||
|
} |
||||
|
}, |
||||
|
filters: { |
||||
|
priceDecimals(val) { |
||||
|
console.info(val); |
||||
|
return (parseFloat(val)).toFixed(2) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getAuthInfo() { |
||||
|
|
||||
|
Profile.getAuthInfo().then(res => { |
||||
|
// this.detail = res.data |
||||
|
this.status = res.data.status |
||||
|
console.log(this.status, '9999') |
||||
|
console.log(res.data, '9999') |
||||
|
}) |
||||
|
}, |
||||
|
onRefresh() { |
||||
|
if (this.refreshing) return; |
||||
|
this.refreshing = true; |
||||
|
this.fundAccount() |
||||
|
this.personalAssets() |
||||
|
setTimeout(() => { |
||||
|
this.refreshing = false; |
||||
|
}, 1000) |
||||
|
}, |
||||
|
scroll(event) { |
||||
|
this.scrollTop = event.detail.scrollTop |
||||
|
}, |
||||
|
omitTo: math.omitTo, |
||||
|
// 计算和 |
||||
|
add: math.add, |
||||
|
...mapActions({ |
||||
|
setHide: "hideMoney", |
||||
|
}), |
||||
|
filterMoney(val, type) { |
||||
|
if (this.hideMoney) return "******"; |
||||
|
if (type) { |
||||
|
return this.omitTo(val, 8); |
||||
|
} else { |
||||
|
return this.omitTo(val, 2); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
ifShow(item) { |
||||
|
// 搜索过滤 |
||||
|
let show = |
||||
|
item.coin_name |
||||
|
.toLocaleLowerCase() |
||||
|
.indexOf(this.searchText.toLocaleLowerCase()) != -1; |
||||
|
if (!this.hide) return true && show; |
||||
|
|
||||
|
// 0余额资金过滤 |
||||
|
let hasMoney = |
||||
|
this.add(item.usable_balance, item.freeze_balance, item.priceDecimals) * |
||||
|
1 != |
||||
|
0; |
||||
|
return hasMoney && show; |
||||
|
}, |
||||
|
fundAccount() { |
||||
|
Wallet.fundAccount().then((res) => { |
||||
|
this.list = res.data.list; |
||||
|
this.otc = res.data |
||||
|
}); |
||||
|
}, |
||||
|
personalAssets(e) { |
||||
|
Wallet.personalAssets().then((res) => { |
||||
|
this.account = res.data; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 获取合约列表 |
||||
|
accounts() { |
||||
|
Contract.contractAccount().then((res) => { |
||||
|
this.accountDetail = res.data; |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
changtTab($ev) { |
||||
|
this.tabActive = $ev.detail.name; |
||||
|
this.upDateData(); |
||||
|
}, |
||||
|
// 刷新数据 |
||||
|
upDateData() { |
||||
|
if (this.tabActive == 1) { |
||||
|
this.accounts(); |
||||
|
} else if (this.tabActive == 0) { |
||||
|
this.personalAssets(); |
||||
|
this.fundAccount(); |
||||
|
} else { |
||||
|
this.fundAccount(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
this.show = true; |
||||
|
}, |
||||
|
created() { |
||||
|
this.upDateData(); |
||||
|
this.getAuthInfo() |
||||
|
this.fundAccount() |
||||
|
this.personalAssets() |
||||
|
this.accounts() |
||||
|
}, |
||||
|
|
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.tabs-main { |
||||
|
::v-deep.van-tabs { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
::v-deep.van-tabs__wrap, |
||||
|
::v-deep.van-tabs__content { |
||||
|
// width: 100%; |
||||
|
} |
||||
|
|
||||
|
::v-deep.van-tabs__content { |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
::v-deep.van-pull-refresh { |
||||
|
height: calc(100vh - 200px); |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
::v-deep.van-cell { |
||||
|
background: transparent; |
||||
|
|
||||
|
&::after { |
||||
|
border-width: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep .van-cell__left-icon { |
||||
|
color: $white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bgb3 { |
||||
|
background: url(../../static/img/bgb3.png) no-repeat; |
||||
|
background-size: 100% auto; |
||||
|
background-position: right bottom; |
||||
|
|
||||
|
&.bgb3-white { |
||||
|
background-image: url(../../static/img/light/bgb3.png); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bgb4 { |
||||
|
background: url(../../static/img/bgb4.png) no-repeat; |
||||
|
background-size: 100% auto; |
||||
|
background-position: right bottom; |
||||
|
} |
||||
|
|
||||
|
.pos { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.posa { |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.rounded-ms { |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
|
.p-y-xxs { |
||||
|
padding: 5px 0; |
||||
|
} |
||||
|
|
||||
|
.w-33 { |
||||
|
width: 30%; |
||||
|
} |
||||
|
|
||||
|
.w-50 { |
||||
|
width: 50%; |
||||
|
} |
||||
|
|
||||
|
.wallet { |
||||
|
border-radius: 30px; |
||||
|
} |
||||
|
|
||||
|
.text-none { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
::v-deep .van-cell { |
||||
|
background-color: $panel-3; |
||||
|
} |
||||
|
|
||||
|
::v-deep .van-cell { |
||||
|
background-color: transparent; |
||||
|
padding: 0 10px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue