admin/tgCrewAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2

Browse Source
This commit is contained in:
CCTVcalc
2025-04-14 10:27:58 +03:00
parent f977d6b3d4
commit 7e798a7a83
55 changed files with 5625 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/pages/AccountPage.vue
View File

@@ -3,43 +3,63 @@
<template #title>
<div class="flex justify-between items-center text-white q-pa-sm w100">
<div class="flex items-center justify-center row">
<q-avatar size="48px" class="q-mr-xs">
<img src="https://cdn.quasar.dev/img/avatar2.jpg">
<q-avatar v-if="tgUser?.photo_url" size="48px" class="q-mr-xs">
<q-img :src="tgUser.photo_url"/>
</q-avatar>
<div class="flex column">
<span class="q-ml-xs text-h5">
Alex mart
{{
tgUser?.first_name +
(tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
tgUser?.last_name
}}
</span>
<span class="q-ml-xs text-caption">
@alexmart80
{{ tgUser?.username }}
</span>
</div>
</div>
<q-btn
@click = "goProjects()"
flat round
icon="mdi-check"
/>
</div>
</template>
<pn-scroll-list>
<div class="w100 flex column items-center q-pb-md q-pt-sm q-px-md" >
<div class="text-caption text-bold self-start q-pl-sm q-pb-sm">
{{ $t('account__user_settings') }}
</div>
<div class="flex w100">
<q-input
v-model="company"
dense
filled
class = "q-mb-md q-mr-md col-grow"
:label = "$t('account__your_company')"
/>
<pn-image-selector v-if="company" :size="40" :iconsize="40"/>
<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
>
<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"
@@ -78,7 +98,6 @@
<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>
<q-icon name = "mdi-message-outline" class="q-ma-xs"/>
</div>
<div class="flex row justify-between">
<qty-chat-card
@@ -95,54 +114,42 @@
<div class="text-caption text-bold">
{{ $t('account__subscribe') }}
</div>
<div
class="bg-info q-pa-sm text-white"
:style="{ borderRadius: '5px' }"
>
<q-item class="q-pa-none q-ma-none">
<q-item class="q-pa-sm text-caption">
<q-item-section
avatar
class="q-pr-none"
:style="{ minWidth: 'inherit !important' }"
>
<q-icon name = "mdi-message-plus-outline" size="md"/>
<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>
<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 class="text-caption text-grey">
{{ $t('account__subscribe_about') }} 3 {{ $t('months') }}
</div>
</div>
<div class="flex items-center">
<div class="text-bold q-pa-sm text-h6">
<q-icon name = "mdi-crown-circle-outline" color="orange" size="sm"/>
<div class="text-bold q-pa-xs text-h6">
50
</div>
<span class="text-grey">
<q-icon name = "mdi-message-outline"/>
<q-icon name = "mdi-close"/>
<span>
{{ $t('month') }}
</span>
</span>
</div>
</div>
<div id="payment-selector">
<div class="q-py-sm">
<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>
</div>
<q-list>
<q-item
@@ -199,16 +206,21 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref, inject } from 'vue'
import qtyChatCard from 'components/admin/account-page/qtyChatCard.vue'
import optionPayment from 'components/admin/account-page/optionPayment.vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from 'stores/auth'
import type { WebApp } from '@twa-dev/types'
const router = useRouter()
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' },
@@ -225,6 +237,7 @@
async function change_auth () {
console.log('update')
console.log(authStore)
await router.push({ name: 'login' })
}
@@ -232,7 +245,6 @@
await router.push({ name: 'projects' })
}
</script>
<style lang="scss">
@@ -241,6 +253,24 @@
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>