MTP20_WEB_GLOBAL/src/packages/tss/views/mine/Index.vue

<template>
    <app-view class="mine">
        <template #header>
            <app-navbar :title="$t('mine.title')" :show-back-button="false" @ready="onReady" />
        </template>
        <div ref="headerRef" class="mine-header">
            <div class="mine-header__wrapper">
                <div class="profile">
                    <div class="profile-user">
                        <div class="profile-user__avatar" @click="routerTo('user-avatar')">
                            <img class="g-image--avatar" :src="userStore.userAvatar" />
                        </div>
                        <div class="profile-user__info">
                            <div class="top">
                                <span>{{ userStore.customerName }}</span>
                                <Icon name="checked" color="var(--van-tag-success-color)"
                                    v-if="authStatus === AuthStatus.Certified" />
                                <Icon name="warning" color="var(--van-tag-warning-color)" v-else />
                            </div>
                            <div class="bottom">{{ loginStore.loginId }}</div>
                        </div>
                    </div>
                    <div class="profile-account">
                        <div class="profile-account-first">
                            <span>{{ $t('account.account') }}</span>
                            <Icon name="checked" size="14" color="#CC0000" ></Icon>
                        </div>
                        <span>{{ currentAccount.accountid ?? 0 }}</span>
                    </div>
                </div>
                <div class="bank">
                    <ul>
                        <li>
                            <span>{{ $t('mine.balance') }}</span>
                            <span>{{ currentAccount.currentbalance?.toFixed(2) }}</span>
                        </li>
                        <li>
                            <span>{{ $t('mine.netWorth') }}</span>
                            <span>{{ currentAccount.hazardValue?.toFixed(2) }}</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <span>{{ $t('mine.freezeMargin') }}</span>
                            <span>{{ currentAccount.freezeMargin?.toFixed(2) }}</span>
                        </li>
                        <li>
                            <span>{{ $t('mine.usedMargin') }}</span>
                            <span>{{ currentAccount.usedmargin?.toFixed(2) }}</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <span>{{ $t('mine.availableFunds') }}</span>
                            <span>{{ currentAccount.avaiableMoney?.toFixed(2) }}</span>
                        </li>
                        <li>
                            <span>{{ $t('mine.riskRate') }}</span>
                            <span :class="currentAccount.hazardRatioColor">
                                {{ parsePercent(currentAccount.hazardRatio) }}
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="button">
                    <Button type="danger" size="small" round @click="doInOutMoney('0')">{{ $t('mine.cashin') }}</Button>
                    <Button size="small" round @click="doInOutMoney('1')">{{ $t('mine.cashout') }}</Button>
                </div>
            </div>
        </div>
        <app-block class="mine-iconbar">
            <ul>
                <li @click="routerTo('order-position')">
                    <Iconfont label-direction="bottom" icon="g-icon-position--line">{{ $t('mine.myposition') }}</Iconfont>
                </li>
                <li @click="routerTo('order-list')">
                    <Iconfont label-direction="bottom" icon="g-icon-order--line">{{ $t('mine.myorder') }}</Iconfont>
                </li>
                <li @click="routerTo('order-delivery')">
                    <Iconfont label-direction="bottom" icon="g-icon-delivery--line">{{ $t('mine.delivery') }}</Iconfont>
                </li>
            </ul>
        </app-block>
        <app-block class="g-navmenu">
            <CellGroup>
                <Cell is-link :to="{ name: 'bank-capital' }">
                    <template #title>
                        <Iconfont icon="g-icon-capital">{{ $t('mine.fundsinfo') }}</Iconfont>
                    </template>
                </Cell>
                <Cell is-link :to="{ name: 'account-authresult' }" v-if="authStatus === AuthStatus.Submitted">
                    <template #title>
                        <Iconfont icon="g-icon-certification">{{ $t('mine.authentication') }}</Iconfont>
                    </template>
                </Cell>
                <Cell is-link :to="{ name: 'account-certification' }" v-else-if="authStatus !== AuthStatus.Certified">
                    <template #title>
                        <Iconfont icon="g-icon-certification">{{ $t('mine.authentication') }}</Iconfont>
                    </template>
                </Cell>
                <Cell is-link :to="{ name: 'bank-sign' }" v-if="authStatus === AuthStatus.Certified">
                    <template #title>
                        <Iconfont icon="g-icon-sign">{{ $t('mine.banksign') }}</Iconfont>
                    </template>
                </Cell>
                <Cell is-link :to="{ name: 'mine-profile' }">
                    <template #title>
                        <Iconfont icon="g-icon-profile">{{ $t('mine.personalinformation') }}</Iconfont>
                    </template>
                </Cell>
                <Cell is-link :to="{ name: 'rules-zcxy' }">
                    <template #title>
                        <Iconfont icon="g-icon-zcxy">{{ $t('rules.zcxy') }}</Iconfont>
                    </template>
                </Cell>
                <Cell is-link :to="{ name: 'rules-yszc' }">
                    <template #title>
                        <Iconfont icon="g-icon-yszc">{{ $t('rules.yszc') }}</Iconfont>
                    </template>
                </Cell>
                <Cell is-link :to="{ name: 'rules-fwrx' }">
                    <template #title>
                        <Iconfont icon="g-icon-fwrx">{{ $t('rules.fwrx') }}</Iconfont>
                    </template>
                </Cell>
                <Cell is-link :to="{ name: 'mine-setting' }">
                    <template #title>
                        <Iconfont icon="g-icon-setting">{{ $t('mine.settings') }}</Iconfont>
                    </template>
                </Cell>
                <Cell is-link :to="{ name: 'rules-gywm' }">
                    <template #title>
                        <Iconfont icon="g-icon-gywm">{{ $t('mine.aboutus') }}</Iconfont>
                    </template>
                </Cell>
            </CellGroup>
        </app-block>
        <div class="mine-footer">
            <Button class="button-logout" type="danger" size="small" round @click="userLogout">{{ $t('common.logout') }}</Button>
        </div>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, onActivated, computed } from 'vue'
import { Cell, CellGroup, Button, Icon } from 'vant'
import { fullloading, dialog } from '@/utils/vant'
import { parsePercent } from '@/filters'
import { useNavigation } from '@mobile/router/navigation'
import { AuthStatus } from '@/constants/account'
import { queryBankAccountSign } from '@/services/api/bank'
import { useLoginStore, useAccountStore, useUserStore,  } from '@/stores'
import eventBus from '@/services/bus'
import Iconfont from '@/components/base/iconfont/index.vue'
import { i18n } from '@/stores'

const { global: { t } } = i18n
const { router, routerTo } = useNavigation()
const loginStore = useLoginStore()
const userStore = useUserStore()
const accountStore = useAccountStore()
const { currentAccount } = accountStore.$toRefs()

const headerRef = shallowRef<HTMLDivElement>()
const authStatus = computed(() => userStore.userAccount.hasauth) // 实名认证状态

const onReady = (el: HTMLDivElement) => {
    // 设置背景图位置
    headerRef.value?.style.setProperty('background-position', `0 -${el.clientHeight}px`)
}

/// 进行出入金操作判断
const doInOutMoney = (tab: string) => {
    if (authStatus.value === AuthStatus.Certified) {
        fullloading((hideLoading) => {
            queryBankAccountSign().then((res) => {
                hideLoading()
                const { signstatus } = res.data[0] ?? {}
                /// 只有已签约的情况下才可以进行出入金
                if (signstatus && signstatus === 4) {
                    router.push({ name: 'bank-wallet', query: { tab } })
                } else {
                    dialog({
                        message: t('banksign.tips1'),
                        showCancelButton: true,
                        cancelButtonText: t('operation.cancel'),
                        confirmButtonText: t('banksign.tips2')
                    }).then(() => {
                        router.push({ name: 'bank-sign' })
                    })
                }
            }).catch(() => {
                hideLoading(t('common.loadingfailed'), 'fail')
            })
        }, t('common.loading'))
    } else {
        dialog({
            message: t('banksign.tips3'),
            showCancelButton: true,
            cancelButtonText: t('operation.cancel'),
            confirmButtonText: t('banksign.tips4')
        }).then(() => {
            router.push({ name: 'account-certification' })
        })
    }
}

const userLogout = () => {
    dialog({
        message: t('banksign.tips5'),
        cancelButtonText: t('operation.cancel'),
        confirmButtonText: t('operation.confirm'),
        showCancelButton: true
    }).then(() => {
        loginStore.clearAutoLoginData()
        eventBus.$emit('LogoutNotify')
    })
}

onActivated(() => {
    if (authStatus.value !== AuthStatus.Certified) {
        userStore.getUserData()
    }
    accountStore.getAccountList()
})
</script>

<style lang="less">
@import './index.less';
</style>