MTP20_WEB_GLOBAL/src/packages/gcszt/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">
                        <span>{{ $t('mine.normal') }}</span>
                        <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>
            </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 && hasSignContract">
                    <template #title>
                        <Iconfont icon="g-icon-sign">{{ $t('mine.banksign') }}</Iconfont>
                    </template>
                </Cell>
                <Cell is-link :to="{ name: 'account-protocol', query: { memberUserId: getMemberUserId() } }"
                    v-if="userStore.userType != 2 && authStatus === AuthStatus.Certified">
                    <template #title>
                        <Iconfont icon="g-icon-order--line">{{ $t('mine.protocol') }}</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 { getMemberUserId } from '@/services/methods/user'
import { queryUsereSignRecords } from '@/services/api/account'
import eventBus from '@/services/bus'
import Iconfont from '@/components/base/iconfont/index.vue'

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

const headerRef = shallowRef<HTMLDivElement>()
/// 判断是否能签约
const hasSignContract = shallowRef(false)
// 实名认证状态
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) {
                    /// 已实名未签合同
                    if (!hasSignContract.value) {
                        dialog({
                            message: '根据平台规定，请先通过《入市协议》签署协议，谢谢！',
                            showCancelButton: true,
                            cancelButtonText: '暂不签署',
                            confirmButtonText: '立即签署'
                        })
                        .then(() => {
                            router.push({ name: 'account-protocol', query: { memberUserId: getMemberUserId()} })
                        })
                        .catch(() => {
                            router.push({ name: 'bank-wallet', query: { tab } })
                        })
                    } else {
                        router.push({ name: 'bank-wallet', query: { tab } })
                    }
                } else {
                    /// 未签约
                    if (!hasSignContract.value) {
                        dialog({
                            message: '根据平台规定，请先通过《入市协议》签署协议，谢谢！',
                            showCancelButton: true,
                            cancelButtonText: '关闭',
                            confirmButtonText: '立即签署'
                        }).then(() => {
                            router.push({ name: 'account-protocol', query: { memberUserId: getMemberUserId()} })
                        })
                    } else {
                        dialog({
                            message: '根据平台规定，请先通过《银行签约》签约银行，谢谢！',
                            showCancelButton: true,
                            cancelButtonText: '关闭',
                            confirmButtonText: '立即签约'
                        }).then(() => {
                            router.push({ name: 'bank-sign' })
                        })
                    }
                }
            }).catch(() => {
                hideLoading('加载失败', 'fail')
            })
        }, '正在加载...')
    } else {
        dialog({
            message: '请先实名认证，再进行该操作！',
            showCancelButton: true,
            confirmButtonText: '去实名'
        }).then(() => {
            router.push({ name: 'account-certification' })
        })
    }
}

const userLogout = () => {
    dialog({
        message: '是否退出当前账号？',
        showCancelButton: true
    }).then(() => {
        loginStore.clearAutoLoginData()
        eventBus.$emit('LogoutNotify')
    })
}

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

    /// 机构不需要签合同
    if (userStore.userInfo.usertype === 2) {
        hasSignContract.value = true
        return
    }

    /// 查询数据
    queryUsereSignRecords({
        data: {
            userId: loginStore.userId,
            memberUserId: getMemberUserId(),
            templatetype: 2
        }
    }).then((res) => {
        /// 判断是否能签约
        hasSignContract.value = !res.data.some(e => e.recordstatus != 3)
    })
})
</script>

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