MTP20_WEB_GLOBAL/src/packages/digital/views/setting/index.vue

<template>
    <app-view class="setting" background="primary">
        <template #header>
            <app-navbar :title="t('mine.settings')" />
        </template>
        <CellGroup :title="t('mine.account')">
            <Cell is-link :to="{ name: 'account-certification' }"
                v-if="userStore.userAccount.hasauth === AuthStatus.Uncertified && userStore.userAccount.modifystatus === 1">
                <template #title>
                    <app-iconfont icon="g-icon-certification">{{ $t('user.authentication.title') }}</app-iconfont>
                </template>
            </Cell>
            <Cell is-link :to="{ name: 'account-authresult' }" v-else>
                <template #title>
                    <app-iconfont icon="g-icon-certification">{{ $t('user.authentication.title') }}</app-iconfont>
                </template>
            </Cell>
            <Cell is-link :to="{ name: 'user-password' }">
                <template #title>
                    <app-iconfont icon="g-icon-password">{{ $t('user.password.title') }}</app-iconfont>
                </template>
            </Cell>
            <Cell is-link :to="{ name: 'user-cancel' }">
                <template #title>
                    <app-iconfont icon="g-icon-cancel">{{ $t('user.cancel.title') }}</app-iconfont>
                </template>
            </Cell>
        </CellGroup>
        <CellGroup :title="t('mine.system')">
            <Cell is-link :to="{ name: 'setting-theme' }" :value="themeValue">
                <template #title>
                    <app-iconfont icon="g-icon-dark">{{ $t('digital.dark') }}</app-iconfont>
                </template>
            </Cell>
            <Cell is-link :to="{ name: 'setting-luanguage' }" v-if="globalStore.getSystemInfo('i18nEnabled')">
                <template #title>
                    <app-iconfont icon="g-icon-lang">{{ $t('mine.setting.language') }}</app-iconfont>
                </template>
                <template #value>
                    {{ language }}
                </template>
            </Cell>
            <Cell is-link @click="userLogout">
                <template #title>
                    <app-iconfont icon="g-icon-cancel">{{ $t('common.logout') }}</app-iconfont>
                </template>
            </Cell>
        </CellGroup>
    </app-view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { Cell, CellGroup } from 'vant'
import { dialog } from '@/utils/vant'
import { AppTheme } from '@/constants/theme'
import { AuthStatus } from '@/constants/account'
import { useRequest } from '@/hooks/request'
import { getI18nConfigs } from '@/services/api/common'
import { useUserStore, useGlobalStore, i18n } from '@/stores'
import eventBus from '@/services/bus'
import AppIconfont from '@/components/base/iconfont/index.vue'

const { t } = i18n.global
const globalStore = useGlobalStore()
const userStore = useUserStore()

const { dataList } = useRequest(getI18nConfigs)

// 当前语言
const language = computed(() => {
    const locale = dataList.value.find((e) => e.langcode === i18n.global.locale)
    return locale?.langname ?? i18n.global.locale
})

const themeValue = computed(() => {
    switch (globalStore.appTheme) {
        case AppTheme.Light:
            return t('digital.closed')
        case AppTheme.Dark:
            return t('digital.actived')
        default:
            return t('digital.system')
    }
})

const userLogout = () => {
    dialog({
        message: t('banksign.tips5'),
        showCancelButton: true,
    }).then(() => {
        eventBus.$emit('LogoutNotify')
    })
}

userStore.getUserData()
</script>

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