116 lines
4.2 KiB
Vue
116 lines
4.2 KiB
Vue
<template>
|
|
<pn-page-card>
|
|
<template #title>
|
|
<pn-account-block-name/>
|
|
<q-btn
|
|
@click="logout()"
|
|
flat
|
|
round
|
|
icon="mdi-logout"
|
|
/>
|
|
</template>
|
|
|
|
<pn-scroll-list>
|
|
<q-list separator>
|
|
<q-item
|
|
v-for="item in displayItems"
|
|
:key="item.id"
|
|
@click="goTo(item.pathName)"
|
|
clickable
|
|
v-ripple
|
|
>
|
|
<q-item-section avatar>
|
|
<q-avatar
|
|
:icon="item.icon"
|
|
:color="item.iconColor ? item.iconColor: 'brand'"
|
|
text-color="white"
|
|
rounded
|
|
font-size ="26px"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
{{ $t(item.name) }}
|
|
</q-item-label>
|
|
<q-item-label class="text-caption" v-if="$te(item.description)">
|
|
{{ $t(item.description) }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</pn-scroll-list>
|
|
</pn-page-card>
|
|
|
|
<pn-small-dialog
|
|
v-model="showStopUsingDialog"
|
|
icon="mdi-close-box-outline"
|
|
color="negative"
|
|
title="account__stop_using_dialog_title"
|
|
message1="account__stop_using_dialog_message1"
|
|
message2="account__stop_using_dialog_message2"
|
|
mainBtnLabel="account__stop_using_dialog_btn_ok"
|
|
@clickMainBtn="onConfirmStopUsing"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, inject } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useAuthStore } from 'stores/auth'
|
|
import type { WebApp } from '@twa-dev/types'
|
|
|
|
const tg = inject('tg') as WebApp
|
|
|
|
const router = useRouter()
|
|
const authStore = useAuthStore()
|
|
|
|
interface ItemList {
|
|
id: number
|
|
name: string
|
|
description?: string
|
|
icon: string
|
|
iconColor?: string
|
|
pathName: string
|
|
display?: boolean
|
|
}
|
|
|
|
const items = computed(() => ([
|
|
{ id: 1, name: 'account__subscribe', description: 'account__subscribe_description', icon: 'mdi-crown-circle-outline', iconColor: 'orange', pathName: 'subscribe' },
|
|
{ id: 2, name: 'account__auth_change_method', description: 'account__auth_change_method_description', icon: 'mdi-account-sync-outline', iconColor: 'primary', pathName: 'change_account_auth_method', display: !authStore.customer?.email },
|
|
{ id: 3, name: 'account__auth_change_password', description: 'account__auth_change_password_description', icon: 'mdi-account-key-outline', iconColor: 'primary', pathName: 'change_account_password', display: !!authStore.customer?.email },
|
|
{ id: 4, name: 'account__auth_change_account', description: 'account__auth_change_account_description', icon: 'mdi-account-switch-outline', iconColor: 'primary', pathName: 'change_account_email', display: !!authStore.customer?.email },
|
|
{ id: 5, name: 'account__company_data', icon: 'mdi-account-group-outline', description: 'account__company_data_description', pathName: 'your_company' },
|
|
{ id: 6, name: 'account__settings', icon: 'mdi-cog-outline', description: 'account__settings_description', iconColor: 'info', pathName: 'settings' },
|
|
{ id: 7, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
|
|
{ id: 8, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
|
|
{ id: 9, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' },
|
|
{ id: 10, name: 'account__stop_using', icon: 'mdi-close-box-outline', description: 'account__stop_using_description', iconColor: 'negative', pathName: 'stop_using' }
|
|
]))
|
|
|
|
const displayItems = computed(() => (
|
|
items.value.filter((item: ItemList) => !('display' in item) || item.display === true)
|
|
))
|
|
|
|
const showStopUsingDialog = ref(false)
|
|
async function goTo (path: string) {
|
|
if (path !== 'stop_using') {
|
|
await router.push({ name: path })
|
|
} else {
|
|
showStopUsingDialog.value = true
|
|
}
|
|
}
|
|
|
|
async function logout () {
|
|
await authStore.logout()
|
|
await router.push({ name: 'login' })
|
|
}
|
|
|
|
function onConfirmStopUsing () {
|
|
tg.close()
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
</style>
|