v3
This commit is contained in:
@@ -19,258 +19,70 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<q-btn flat icon="mdi-logout"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<pn-scroll-list>
|
||||
<div class="w100 flex column items-center q-pb-md q-pt-sm q-px-md" >
|
||||
<div class="flex w100 justify-between items-center q-pl-sm">
|
||||
<div class="text-caption text-bold">
|
||||
{{ $t('account__user_settings') }}</div>
|
||||
<q-btn
|
||||
@click = "goProjects()"
|
||||
flat round
|
||||
color="primary"
|
||||
icon="mdi-check"
|
||||
/>
|
||||
</div>
|
||||
<q-transition-group
|
||||
tag="div"
|
||||
class="flex w100 company-container"
|
||||
enter-active-class="animate__animated animate__fadeIn"
|
||||
leave-active-class="animate__animated animate__fadeOut"
|
||||
appear
|
||||
<q-list separator>
|
||||
<q-item
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
@click="goTo(item.pathName)"
|
||||
clickable
|
||||
v-ripple
|
||||
>
|
||||
<template v-if="company">
|
||||
<pn-image-selector
|
||||
key="image"
|
||||
class="q-mr-sm company-logo"
|
||||
:size="40"
|
||||
:iconsize="40"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<q-input
|
||||
key="input"
|
||||
v-model="company"
|
||||
dense
|
||||
filled
|
||||
class="q-mb-md col-grow company-input"
|
||||
:label="$t('account__your_company')"
|
||||
:style="{ marginLeft: !company ? '0' : '48px', transition: 'all 0.3s' }"
|
||||
/>
|
||||
</q-transition-group>
|
||||
<q-expansion-item
|
||||
dense
|
||||
id="warning"
|
||||
class="q-mt-sm w100 q-pa-sm"
|
||||
style="border: solid 1px var(--q-warning)"
|
||||
>
|
||||
<template #header>
|
||||
<q-item-section>
|
||||
<div class="flex row w100 items-center">
|
||||
<q-icon name="mdi-alert-decagram-outline" color="warning " size="sm" />
|
||||
<span class="q-pl-xs">{{$t('account__change_auth')}}</span>
|
||||
</div>
|
||||
<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>
|
||||
</template>
|
||||
<q-card class="q-pa-none">
|
||||
<q-card-section class="q-pa-sm">
|
||||
<div class="flex justify-center column">
|
||||
<span>{{$t('account__change_auth_message_1')}}</span>
|
||||
<span>{{$t('account__change_auth_message_2')}}</span>
|
||||
<div class="flex justify-end">
|
||||
<q-btn
|
||||
@click="showChangeAuthDialog = true"
|
||||
flat
|
||||
color="primary"
|
||||
no-caps
|
||||
class="q-pb-none"
|
||||
>
|
||||
{{$t('account__change_auth_btn')}} ►
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
|
||||
<div id="qty_chats" class="flex column q-pt-lg w100 q-pl-sm">
|
||||
<div class="text-caption text-bold flex items-center">
|
||||
<span>{{ $t('account__chats') }}</span>
|
||||
</div>
|
||||
<div class="flex row justify-between">
|
||||
<qty-chat-card
|
||||
v-for = "chat in chats"
|
||||
:key = chat.title
|
||||
:qty = chat.qty
|
||||
:bgColor = chat.color
|
||||
:title = chat.title
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="subscribe" class="flex column q-pt-lg w100 q-pl-sm">
|
||||
<div class="text-caption text-bold">
|
||||
{{ $t('account__subscribe') }}
|
||||
</div>
|
||||
|
||||
<q-item class="q-pa-sm text-caption">
|
||||
<q-item-section
|
||||
avatar
|
||||
class="q-pr-none"
|
||||
:style="{ minWidth: 'inherit !important' }"
|
||||
>
|
||||
<q-icon name = "mdi-crown-circle-outline" color="orange" size="md"/>
|
||||
</q-item-section>
|
||||
<q-item-section class="q-pl-sm">
|
||||
<span>{{ $t('account__subscribe_info') }}</span>
|
||||
<span>{{ $t('account__subscribe_select_payment_1') }}</span>
|
||||
<q-icon name = "mdi-star" class="text-orange" size="sm"/>
|
||||
<span>{{ $t('account__subscribe_select_payment_2') }}</span>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<div class="flex w100 justify-between items-center no-wrap q-pt-sm">
|
||||
<div class="flex column">
|
||||
<div>
|
||||
{{ $t('account__subscribe_current_balance') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<q-icon name = "mdi-crown-circle-outline" color="orange" size="sm"/>
|
||||
<div class="text-bold q-pa-xs text-h6">
|
||||
50
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="payment-selector">
|
||||
<div class="q-py-sm">
|
||||
|
||||
</div>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="item in payment"
|
||||
:key="item.id"
|
||||
>
|
||||
<q-radio
|
||||
v-model="paymentSelect"
|
||||
:val="item.stars"
|
||||
dense
|
||||
>
|
||||
<option-payment
|
||||
:qty="item.qty"
|
||||
:stars="item.stars"
|
||||
:discount="item.discount"
|
||||
/>
|
||||
</q-radio>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
{{ $t(item.name) }}
|
||||
</q-item-label>
|
||||
<q-item-label class="text-caption">
|
||||
{{ $t(item.description) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</pn-scroll-list>
|
||||
|
||||
<q-dialog v-model="showChangeAuthDialog">
|
||||
<q-card>
|
||||
<q-card-section align="center">
|
||||
<div class="text-h6 text-negative ">{{ $t('account__change_auth_warning') }}</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none" align="center">
|
||||
{{ $t('account__change_auth_warning_message') }}
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="center">
|
||||
<q-btn
|
||||
flat
|
||||
:label="$t('back')"
|
||||
color="primary"
|
||||
v-close-popup
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
:label="$t('continue')"
|
||||
color="primary"
|
||||
v-close-popup
|
||||
@click="change_auth()"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject } from 'vue'
|
||||
import qtyChatCard from 'components/admin/account-page/qtyChatCard.vue'
|
||||
import optionPayment from 'components/admin/account-page/optionPayment.vue'
|
||||
import { inject, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from 'stores/auth'
|
||||
// import { useAuthStore } from 'stores/auth'
|
||||
import type { WebApp } from '@twa-dev/types'
|
||||
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
// const authStore = useAuthStore()
|
||||
|
||||
const tg = inject('tg') as WebApp
|
||||
const tgUser = tg.initDataUnsafe.user
|
||||
const company = ref<string>('')
|
||||
const showChangeAuthDialog = ref<boolean>(false)
|
||||
|
||||
const chats = ref([
|
||||
{ title: 'account__chats_active', qty: 8, color: 'var(--q-primary)' },
|
||||
{ title: 'account__chats_archive', qty: 2, color: 'grey' },
|
||||
{ title: 'account__chats_free', qty: 5, color: 'green' },
|
||||
{ title: 'account__chats_total', qty: 15, color: 'var(--q-info)' },
|
||||
])
|
||||
const payment=ref([
|
||||
{ id: 1, qty: 50, stars: 200, discount: 0 },
|
||||
{ id: 2, qty: 120, stars: 400, discount: 20 },
|
||||
{ id: 3, qty: 220, stars: 500, discount: 30 }
|
||||
])
|
||||
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: '' },
|
||||
{ id: 3, name: 'account__auth_change_password', description: 'account__auth_change_password_description', icon: 'mdi-account-key-outline', iconColor: 'primary', pathName: 'change_account_password' },
|
||||
{ id: 4, name: 'account__auth_change_account', description: 'account__auth_change_account_description', icon: 'mdi-account-switch-outline', iconColor: 'primary', pathName: 'change_account_email' },
|
||||
{ id: 5, name: 'account__company_data', icon: 'mdi-account-group-outline', description: 'account__company_data_description', pathName: 'your_company' },
|
||||
{ id: 6, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
|
||||
{ id: 7, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
|
||||
{ id: 8, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' }
|
||||
]))
|
||||
|
||||
const paymentSelect = ref(200)
|
||||
|
||||
async function change_auth () {
|
||||
console.log('update')
|
||||
console.log(authStore)
|
||||
await router.push({ name: 'login' })
|
||||
}
|
||||
|
||||
async function goProjects () {
|
||||
await router.push({ name: 'projects' })
|
||||
async function goTo (path: string) {
|
||||
await router.push({ name: path })
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#warning {
|
||||
& >div .q-item {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.company-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
:deep(.animate__animated) {
|
||||
--animate-duration: 0.4s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user