refactor(membership-exit): обновление интерфейса и логики выхода из кооператива
Изменены компоненты, связанные с выходом из кооператива. В меню заменены иконки и пути для поддержки и выхода. Обновлены метаданные и названия для кнопок и страниц, чтобы улучшить пользовательский интерфейс. В ExitButton добавлены параметры для настройки иконки и метки. Упрощена структура MembershipExitPage с акцентом на ключевые шаги выхода. Исправлены комментарии и типы для лучшего понимания кода.
This commit is contained in:
Alex Ant
@@ -179,6 +179,20 @@ export default async function (): Promise<IWorkspaceConfig[]> {
|
||||
roles: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
// Предпоследний пункт: выход из кооператива (не путать с «Выйти из
|
||||
// кабинета» в RailUserCard). Иконка group_remove — не logout.
|
||||
meta: {
|
||||
title: 'Выход из кооператива',
|
||||
icon: 'group_remove',
|
||||
roles: [],
|
||||
requiresAuth: true,
|
||||
},
|
||||
path: 'membership-exit',
|
||||
name: 'membership-exit',
|
||||
component: markRaw(MembershipExitPage),
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
meta: {
|
||||
title: 'Поддержка',
|
||||
@@ -192,21 +206,6 @@ export default async function (): Promise<IWorkspaceConfig[]> {
|
||||
component: markRaw(SupportTrigger),
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
// Крайний пункт меню. Иконка group_remove (выход из кооператива) —
|
||||
// отлична от двери-logout нижней кнопки «Выйти» (выход из кабинета),
|
||||
// чтобы действия не путались.
|
||||
meta: {
|
||||
title: 'Выход из кооператива',
|
||||
icon: 'group_remove',
|
||||
roles: [],
|
||||
requiresAuth: true,
|
||||
},
|
||||
path: 'membership-exit',
|
||||
name: 'membership-exit',
|
||||
component: markRaw(MembershipExitPage),
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -2,15 +2,15 @@
|
||||
div
|
||||
BaseButton(
|
||||
v-if='walletStore.isWalletAgreementSigned',
|
||||
variant='danger',
|
||||
:variant='variant',
|
||||
:size='micro ? "sm" : "md"',
|
||||
aria-label='Выход из кооператива',
|
||||
:aria-label='label',
|
||||
@click='open'
|
||||
)
|
||||
template(#icon-left)
|
||||
q-icon(name='logout', size='18px')
|
||||
span(v-if='!micro').q-ml-sm Выход из кооператива
|
||||
q-tooltip(v-if='micro') Выход из кооператива
|
||||
q-icon(:name='icon', size='18px')
|
||||
span(v-if='!micro').q-ml-sm {{ label }}
|
||||
q-tooltip(v-if='micro') {{ label }}
|
||||
|
||||
BaseDialog(
|
||||
v-model='showDialog',
|
||||
@@ -90,12 +90,20 @@ import {
|
||||
type IGenerateMembershipExitApplicationResult,
|
||||
} from '../model';
|
||||
|
||||
import type { BaseButtonVariant } from 'src/shared/ui/base/BaseButton/BaseButton.types';
|
||||
|
||||
interface Props {
|
||||
micro?: boolean;
|
||||
label?: string;
|
||||
variant?: BaseButtonVariant;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
micro: false,
|
||||
label: 'Выход из кооператива',
|
||||
variant: 'danger',
|
||||
icon: 'logout',
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
@@ -1,77 +1,57 @@
|
||||
<template lang="pug">
|
||||
.membership-exit-page
|
||||
AuthCard(:max-width='480')
|
||||
//- Шапка: иконка-предупреждение + заголовок + краткое пояснение.
|
||||
template(#head)
|
||||
.exit-intro__icon
|
||||
q-icon(name='logout', size='28px')
|
||||
h2.exit-intro__title Добровольный выход из кооператива
|
||||
p.exit-intro__text
|
||||
| Выход производится по вашему заявлению. После одобрения Советом аккаунт
|
||||
| блокируется, а паевой взнос возвращается в срок, установленный Уставом
|
||||
| кооператива.
|
||||
.banner.banner--warn
|
||||
q-icon.banner__icon(name='info', size='18px')
|
||||
.banner__body
|
||||
| Участие в кооперативе добровольное — так же, как вступление, так и выход.
|
||||
| Вы вправе прекратить участие, подав заявление; после одобрения Советом
|
||||
| паевой взнос возвращается в срок, установленный Уставом.
|
||||
|
||||
//- Тело: ключевые шаги/условия процедуры.
|
||||
ul.exit-intro__points
|
||||
BaseCard(title='Как проходит выход')
|
||||
ul.exit-points
|
||||
li
|
||||
q-icon(name='description', size='18px')
|
||||
span Заявление формируется автоматически — вы прочитаете и подпишете его.
|
||||
span
|
||||
| Выход оформляется вашим заявлением. Система подготовит его автоматически —
|
||||
| вам нужно внимательно прочитать текст и подписать простой электронной подписью.
|
||||
li
|
||||
q-icon(name='mark_email_unread', size='18px')
|
||||
span Запуск процедуры подтверждается по ссылке из письма.
|
||||
span
|
||||
| Запуск процедуры подтверждается по ссылке из письма. Совет рассмотрит
|
||||
| заявление; до принятия решения доступ к кабинету будет ограничен.
|
||||
li
|
||||
q-icon(name='payments', size='18px')
|
||||
span Возврат паевого взноса поступит по вашим реквизитам.
|
||||
li
|
||||
span
|
||||
| Паевой взнос вернётся на ваши реквизиты
|
||||
| в срок, установленный Уставом кооператива.
|
||||
li.exit-points__note
|
||||
q-icon(name='block', size='18px')
|
||||
span Возврат к участию после выхода невозможен — потребуется новая регистрация.
|
||||
span
|
||||
| После выхода вернуться к участию нельзя — для возобновления участия
|
||||
| потребуется пройти регистрацию заново.
|
||||
|
||||
//- Футер: запуск подачи заявления.
|
||||
template(#footer)
|
||||
ExitButton
|
||||
.membership-exit-page__actions
|
||||
ExitButton(
|
||||
label='Написать заявление',
|
||||
variant='primary',
|
||||
icon='edit_note'
|
||||
)
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AuthCard } from 'src/shared/ui/domain/AuthCard';
|
||||
import { BaseCard } from 'src/shared/ui/base/BaseCard';
|
||||
import { ExitButton } from 'src/features/Membership/ExitFromCoop';
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.membership-exit-page {
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: var(--p-5);
|
||||
padding: var(--p-6);
|
||||
}
|
||||
|
||||
.exit-intro__icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: var(--p-r-lg);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin: 0 auto var(--p-3);
|
||||
background: var(--p-warn-soft);
|
||||
color: var(--p-warn);
|
||||
}
|
||||
|
||||
.exit-intro__title {
|
||||
margin: 0;
|
||||
font-size: var(--p-fs-h2);
|
||||
line-height: var(--p-lh-h2);
|
||||
letter-spacing: var(--p-ls-h2);
|
||||
font-weight: 600;
|
||||
color: var(--p-ink);
|
||||
}
|
||||
.exit-intro__text {
|
||||
margin: var(--p-2) 0 0;
|
||||
font-size: var(--p-fs-body-sm);
|
||||
line-height: var(--p-lh-body-sm);
|
||||
color: var(--p-ink-2);
|
||||
}
|
||||
|
||||
.exit-intro__points {
|
||||
.exit-points {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -79,7 +59,8 @@ import { ExitButton } from 'src/features/Membership/ExitFromCoop';
|
||||
flex-direction: column;
|
||||
gap: var(--p-3);
|
||||
}
|
||||
.exit-intro__points li {
|
||||
|
||||
.exit-points li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--p-2);
|
||||
@@ -87,12 +68,25 @@ import { ExitButton } from 'src/features/Membership/ExitFromCoop';
|
||||
line-height: var(--p-lh-body-sm);
|
||||
color: var(--p-ink-2);
|
||||
}
|
||||
.exit-intro__points li .q-icon {
|
||||
|
||||
.exit-points li .q-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
color: var(--p-ink-3);
|
||||
}
|
||||
|
||||
.exit-points__note {
|
||||
color: var(--p-ink-3);
|
||||
}
|
||||
|
||||
.membership-exit-page__actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: var(--p-4);
|
||||
margin-top: var(--p-4);
|
||||
border-top: 1px solid var(--p-line);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.membership-exit-page {
|
||||
padding: var(--p-4);
|
||||
|
||||
@@ -25,6 +25,6 @@ export interface RailUserCardProps {
|
||||
collapsed?: boolean;
|
||||
/** Показывать ли блок «Выйти» под карточкой */
|
||||
showSignout?: boolean;
|
||||
/** Подпись для signout (default «Выйти») */
|
||||
/** Подпись для signout (default «Выйти из кабинета») */
|
||||
signoutLabel?: string;
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@ button.rail__signout(
|
||||
@click="emit('signout')"
|
||||
)
|
||||
q-icon(name='logout')
|
||||
| {{ signoutLabel ?? 'Выйти' }}
|
||||
| {{ signoutLabel ?? 'Выйти из кабинета' }}
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
:balance-route='{ name: "wallet", params: { coopname: info.coopname } }',
|
||||
primary-action-label='Пополнить',
|
||||
show-signout,
|
||||
signout-label='Выйти',
|
||||
signout-label='Выйти из кабинета',
|
||||
@primary-action='onDeposit',
|
||||
@signout='onLogout'
|
||||
)
|
||||
@@ -294,7 +294,7 @@ async function onLogout(): Promise<void> {
|
||||
.left-drawer-menu__hidden-dialogs {
|
||||
display: none;
|
||||
}
|
||||
/* Кнопка «Выйти» из RailUserCard — урезаем нижний padding, чтобы версия
|
||||
/* Кнопка «Выйти из кабинета» из RailUserCard — урезаем нижний padding, чтобы версия
|
||||
шла сразу под ней без лишнего вертикального зазора. */
|
||||
:deep(.rail__signout) {
|
||||
padding-bottom: var(--p-1, 4px);
|
||||
|
||||
Reference in New Issue
Block a user