Карточка заявки на Vue.js 3 и Tailwind
Есть сайт для заказов, написанный на Vue 3. Он пока не запущен в production. Диспетчер ставит заявку через CRM (другой сайт на Vue, но api общий) для исполнителей. Нужно написать карточку заявки для клиента. Данные для отображения карточки берутся через get запрос к api с одним параметром - id.
Весь backend код пишу я, от вас потребуется сделать frontend часть. Требуется хорошее знание Vue, опыт работы от 2 лет. Обязательным является наличие проекта (проектов) на Vue 3. Также необходимо знание Tailwind, потому как именно он используется в проекте. Если у вас есть проекты с использованием Tailwind, то вы в приоритете.
В карточке заявки должно быть:
Дизайн карточки желательно делать в том стиле, в котором сделан сам сайт. Это будет простой, минималистичный дизайн. Страница карточки должна правильно отображаться на экранах разных размеров. В первую очередь, надо чтобы карточка хорошо читалась с мобильных устройств. Во вторую - всех остальных.
Любые вопросы/уточнения можно задавать мне не стесняясь, буду рад ответить.
Я впервые отдаю задачу на аутсорс, поэтому был бы рад увидеть за сколько вы готовы сделать данную задачу.
С уважением, Дмитрий.
Весь backend код пишу я, от вас потребуется сделать frontend часть. Требуется хорошее знание Vue, опыт работы от 2 лет. Обязательным является наличие проекта (проектов) на Vue 3. Также необходимо знание Tailwind, потому как именно он используется в проекте. Если у вас есть проекты с использованием Tailwind, то вы в приоритете.
В карточке заявки должно быть:
- В состоянии заявки открыто/закрыто: описание заявки (html-текст), список имен и номеров исполнителей заявки, предложение ознакомиться с офертой с возможностью перейти на страницу оферты (страница уже есть) и обратно, галочка «с офертой ознакомлен и согласен». При нажатии на галочку, происходит запрос к api для сохранения в базу информации.
- В состоянии заявки «завершено», «готово к оплате» и «не оплачена»: описание заявки. Далее, если галочка не была нажата, тогда снова показывать галочку с текстом согласия и возможностью перейти на страницу оферты и обратно. Далее идет сумма которую необходимо оплатить за заявку и кнопка «Оплатить». Если согласия с офертой нет, т.е. галочка не нажата, тогда кнопка «оплатить» disabled. После кнопки оплатить идет текст «Спасибо за заявку! Мы будем благодарны если вы оцените качество выполненной работа». Дальше идет кнопка «Оценить качество», которая открывает визуальный блок ниже, в котором идут: кнопка «Оставить отзыв на vl.ru», дальше кнопка «Что понравилось?» и кнопка «Что не понравилось?».
Кнопка «Что понравилось» открывает визуальный блок с вертикальным списком вариантов что понравилось. Визуально это галочки (не radio-button): понравилось-1, понравилось-2, понравилось-3, …
Кнопка «Что не понравилось» открывает визуальный блок с вертикальным списком вариантов, что не понравилось. Это галочки (не radio-button): не-понравилось-1, не-понравилось-2, не-понравилось-3, …
Ниже этих кнопок идет кнопка «Оценить исполнителя», при нажатии на которую открывается визуальный блок с вертикальным списком исполнителей, где слева и справа на уровне каждого исполнителя идут маленькие кнопочки + и - соответственно. При нажатии на минус, появляется поле, куда можно оставить комментарий, например, «пришел пьяный».
После того как клиент оценил работу или не оценивал, он переходит к оплате заявки, нажимая кнопку «Оплатить» и попадает на страницу оплаты сервиса «Робокасса».
Дизайн карточки желательно делать в том стиле, в котором сделан сам сайт. Это будет простой, минималистичный дизайн. Страница карточки должна правильно отображаться на экранах разных размеров. В первую очередь, надо чтобы карточка хорошо читалась с мобильных устройств. Во вторую - всех остальных.
Любые вопросы/уточнения можно задавать мне не стесняясь, буду рад ответить.
Я впервые отдаю задачу на аутсорс, поэтому был бы рад увидеть за сколько вы готовы сделать данную задачу.
С уважением, Дмитрий.