first commit
This commit is contained in:
246
src/pages/AccountPage.vue
Normal file
246
src/pages/AccountPage.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<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>
|
||||
<div class="flex column">
|
||||
<span class="q-ml-xs text-h5">
|
||||
Alex mart
|
||||
</span>
|
||||
<span class="q-ml-xs text-caption">
|
||||
@alexmart80
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<q-icon name = "mdi-message-outline" class="q-ma-xs"/>
|
||||
</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>
|
||||
<div
|
||||
class="bg-info q-pa-sm text-white"
|
||||
:style="{ borderRadius: '5px' }"
|
||||
>
|
||||
<q-item class="q-pa-none q-ma-none">
|
||||
<q-item-section
|
||||
avatar
|
||||
class="q-pr-none"
|
||||
:style="{ minWidth: 'inherit !important' }"
|
||||
>
|
||||
<q-icon name = "mdi-message-plus-outline" size="md"/>
|
||||
</q-item-section>
|
||||
<q-item-section class="q-pl-sm">
|
||||
<span>{{ $t('account__subscribe_info') }}</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">
|
||||
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
|
||||
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>
|
||||
</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 } 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'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
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 paymentSelect = ref(200)
|
||||
|
||||
async function change_auth () {
|
||||
console.log('update')
|
||||
await router.push({ name: 'login' })
|
||||
}
|
||||
|
||||
async function goProjects () {
|
||||
await router.push({ name: 'projects' })
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#warning {
|
||||
& >div .q-item {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user