Шаг 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
. На странице находятся три поля для ввода (Фамилия, Имя, Отчество), кнопка Подтвердить и ссылка на текст согласия на обработку персональных данных (открывается в виде модального окна). Добавьте следующий текст в этот файл.
Шаг 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
. На странице находятся картинка, текст и кнопка для перехода на главную страницу. Добавьте следующий текст в этот файл.
Шаг 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 ?? '' }
Добавить комментарий