| Соединение с портлетом |
|---|
| url | http://youtube.com/watch?v=TZ9wEZ6QDoE |
|---|
|
Шаг 1.
Добавьте кнопку Персональные данные на экран главного меню. Для этого добавьте следующий текст в файл MainMenu.vue.
| Блок кода |
|---|
|
<button
class="main-menu__button"
@click="toData"
>
Персональные<br>данные
</button> |
Шаг 2.
Реализуйте метод для кнопки Персональные данные. Для этого добавьте следующий текст в methods в defineComponent компонента MainMenu.
| Блок кода |
|---|
|
toData (): void {
this.$router.push('/data')
} |
Шаг 3.
Добавьте путь до страницы Персональные данные в router\index.ts. Для этого добавьте следующий текст в const routes: Array<RouteRecordRaw>.
| Блок кода |
|---|
|
{
path: '/data',
name: 'Data',
component: () => import('../views/DataEntry.vue')
} |
Шаг 4.
Поменяйте раскладку (grid-template-columns) с 2 на 3 в файле MainMenu.vue, чтобы три кнопки (Об отеле, Поболтать и Персональные данные) располагались в одну строку.
| Блок кода |
|---|
|
grid-template-columns: repeat(3, 1fr); |
Шаг 5.
Добавьте страницу DataEntry.vue в папку views. На странице находятся три поля для ввода (Фамилия, Имя, Отчество), кнопка Подтвердить и ссылка на текст согласия на обработку персональных данных (открывается в виде модального окна). Добавьте следующий текст в этот файл.
| Блок кода |
|---|
|
<template>
<Header title="Ввод данных" show-back-button/>
<section class="data-entry">
<div class="data-entry__input-wrapper">.
<pb-input
v-model="surname"
:input-options="{
label: 'Фамилия'
}"
:mask-options="{
type: 'text'
}"
/>
<pb-input
v-model="name"
:input-options="{
label: 'Имя'
}"
:mask-options="{
type: 'text'
}"
/>
<pb-input
v-model="patronymic"
:input-options="{
label: 'Отчество'
}"
:mask-options="{
type: 'text'
}"
/>
</div>
<p class="data-entry__text">
Нажимая кнопку «Подтвердить» вы даете <a class="data-entry__link" @click.prevent="toggleModal">согласие на обработку персональных данных</a>
</p>
<pb-button
class="_lg"
:disabled="!isNotEmptyFields"
@click="confirm"
>
Подтвердить
</pb-button>
</section>
<Modal v-if="isShowModal" @close-modal="toggleModal"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Header from '@/components/Header.vue'
import Modal from '@/components/Modal.vue'
import { mapGetters } from 'vuex'
import { GETTERS as USER_GETTERS, MODULE_NAME as USER } from '@/store/modules/user'
export default defineComponent({
name: 'DataEntry',
components: {
Header,
Modal
},
data () {
return {
name: '',
surname: '',
patronymic: '',
isShowModal: false
}
}
})
</script>
<style lang="scss" scoped>
.data-entry {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: calc(100% - 100px);
padding: 0 20px;
&__input-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
&__text {
margin-top: 58px;
margin-bottom: 24px;
font-weight: 600;
font-size: 24px;
line-height: 41px;
}
&__link {
color: #2D68FF;
}
}
</style> |
Шаг 6.
Реализуйте метод для отображения модального окна с текстом согласия на обработку персональных данных. Для этого добавьте следующий текст в methods в defineComponent компонента DataEntry.
| Блок кода |
|---|
|
toggleModal (): void {
this.isShowModal = !this.isShowModal
} |
Шаг 7.
Добавьте computed-свойство, которое будет возвращать user из store для подстановки данных пользователя в поля, если пользователь уже есть в базе. Для этого добавьте следующий текст в defineComponent компонента DataEntry.
| Блок кода |
|---|
|
computed: {
...mapGetters(USER, {
person: USER_GETTERS.GET_USER
})
} |
Шаг 8.
Добавьте computed-свойство для disabled кнопки которое будет возвращать проверку на заполненность данных. Для этого добавьте следующий текст в computed в defineComponent компонента DataEntry.
| Блок кода |
|---|
|
isNotEmptyFields (): boolean {
return Boolean(this.surname.length) && Boolean(this.name.length) && Boolean(this.patronymic.length)
} |
Шаг 9.
Реализуйте метод для сохранения пользователя в localStorage. После успешного сохранения происходит переход на экран Успех. Для этого добавьте следующий текст в methods в defineComponent компонента DataEntry.
| Блок кода |
|---|
|
confirm (): void {
localStorage.setItem(`${this.person?.id}`, JSON.stringify({
...this.person,
surname: this.surname,
name: this.name,
patronymic: this.patronymic
}))
this.$router.push('/success')
} |
Шаг 10.
Добавьте путь до страницы Успех в router\index.ts. Для этого добавьте следующий текст в const routes: Array<RouteRecordRaw>.
| Блок кода |
|---|
|
{
path: '/success',
name: 'Success',
component: () => import('../views/SuccessScreen.vue')
} |
Шаг 11.
Добавьте страницу SuccessScreen.vue (экран Успех) в папку views. На странице находятся картинка, текст и кнопка для перехода на главную страницу. Добавьте следующий текст в этот файл.
| Блок кода |
|---|
|
<template>
<section class="success">
<img src="@/assets/success.svg" width="120" height="120" alt="">
<h2>Данные успешно сохранены</h2>
<pb-button
class="_lg"
@click="$router.push('/')"
>
На главную
</pb-button>
</section>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'SuccessScreen',
})
</script>
<style lang="scss" scoped>
.success {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
& h2 {
margin-top: 32px;
margin-bottom: 48px;
}
}
</style> |
Шаг 12.
Реализуйте подстановку полей при монтировании компонента DataEntry, если пользователь существует. Для этого добавьте следующий текст в mounted в defineComponent компонента DataEntry.
| Блок кода |
|---|
|
const personFromLocalStorage = JSON.parse(localStorage.getItem(this.person?.id ?? '') || 'null')
if (personFromLocalStorage != null) {
this.surname = personFromLocalStorage.surname ?? ''
this.name = personFromLocalStorage.name ?? ''
this.patronymic = personFromLocalStorage.patronymic ?? ''
} |