Обновления формы: проверка полиса, автодополнение адресов, улучшения UX

- Перемещена проверка полиса в начало формы (перед телефоном и банком)
- Поля телефона и банка скрыты до успешной проверки полиса
- SMS не отправляется, если полис невалидный
- Добавлено автодополнение адресов через DaData
- Обновлен API ключ DaData
- Изменена метка 'Код документа' на 'Документ, удостоверяющий личность'
- Убраны цифры из отображения типов документов (коды отправляются в n8n)
- Удалены отладочные console.log
- Исправлена логика показа формы после подтверждения SMS
- Улучшена валидация полиса
This commit is contained in:
2025-12-17 13:08:50 +03:00
parent 62935971b1
commit a3ba651a22
7 changed files with 298 additions and 250 deletions

118
index.php
View File

@@ -79,25 +79,37 @@
<div class="sms-check">
<div class="form-item">
<span class="form-item__label">Ваш номер телефона</span>
<span class="form-item__sublabel" style="color: #ff6b00; font-weight: bold;">🧪 ТЕСТОВЫЙ РЕЖИМ: SMS не отправляется, код будет показан в модальном окне</span>
<input type="text" class="form-input js-phone-mask js-append" data-ws_type="client" data-ws_name="mobile" name="phonenumber" placeholder="912 345-67-89">
<span class="form-item__label">Номер полиса</span>
<input type="text" class="form-input js-inndb-mask js-append" data-ws_name="cf_1885" data-ws_type="other" name="police_number" placeholder="Введите номер полиса" value="">
<span class="form-item__warning"></span>
</div>
<div class="form-item">
<span class="form-item__label">Банк для получения выплаты</span>
<span class="form-item__sublabel">
Выплата страхового возмещения производится через Сервис Быстрых Платежей (СБП)<br>
Выберите ваш банк для получения выплаты.<br>
Начните вводить название для поиска по всем банкам
</span>
<input type="text" class="form-input js-bank-autocomplete js-append" data-ws_type="other" data-ws_name="bank_name" name="bank_name" data-crmname="cf_bank_name" placeholder="Начните вводить название банка..." autocomplete="off">
<input type="hidden" class="js-append" name="bank_id" data-ws_type="other" data-ws_name="bank_id" data-crmname="cf_bank_id" value="">
<div class="form-item__dropdown"></div>
<span class="form-item__warning"></span>
</div>
<div class="form-item">
<a class="btn js-send-sms">Отправить смс</a>
<button class="btn js-check-in w-100">Проверить наличие полиса</button>
</div>
<div class="js-result"></div>
<div class="policy-validated-fields d-none">
<div class="form-item">
<span class="form-item__label">Ваш номер телефона</span>
<span class="form-item__sublabel" style="color: #ff6b00; font-weight: bold;">🧪 ТЕСТОВЫЙ РЕЖИМ: SMS не отправляется, код будет показан в модальном окне</span>
<input type="text" class="form-input js-phone-mask js-append" data-ws_type="client" data-ws_name="mobile" name="phonenumber" placeholder="912 345-67-89">
<span class="form-item__warning"></span>
</div>
<div class="form-item">
<span class="form-item__label">Банк для получения выплаты</span>
<span class="form-item__sublabel">
Выплата страхового возмещения производится через Сервис Быстрых Платежей (СБП)<br>
Выберите ваш банк для получения выплаты.<br>
Начните вводить название для поиска по всем банкам
</span>
<input type="text" class="form-input js-bank-autocomplete js-append" data-ws_type="other" data-ws_name="bank_name" name="bank_name" data-crmname="cf_bank_name" placeholder="Начните вводить название банка..." autocomplete="off">
<input type="hidden" class="js-append" name="bank_id" data-ws_type="other" data-ws_name="bank_id" data-crmname="cf_bank_id" value="">
<div class="form-item__dropdown"></div>
<span class="form-item__warning"></span>
</div>
<div class="form-item">
<a class="btn js-send-sms">Отправить смс</a>
</div>
</div>
<div class="modal" id="confirm_sms" style="display:none;">
<div class="form-item sms-checking">
@@ -123,17 +135,6 @@
<div class="sms-success d-none">
<div class="db-validate">
<div class="form-item">
<span class="form-item__label">Номер полиса</span>
<input type="text" class="form-input js-inndb-mask js-append" data-ws_name="cf_1885" data-ws_type="other" name="police_number" placeholder="" value="">
</div>
<div class="form-item">
<button class="btn js-check-in w-100">Проверить наличие полиса</button>
</div>
<div class="js-result"></div>
</div>
<div class="db-success d-none">
<div class="form-step active " data-step="1">
@@ -302,13 +303,13 @@
</div>
<div class="form-item">
<span class="form-item__label">Код документа, удостоверяющего личность</span>
<span class="form-item__label">Документ, удостоверяющий личность</span>
<div class="select-wrap">
<select name="claim" class="form-input js-append" data-ws_name="cf_1899" data-crmname="cf_1899" data-ws_type="project">
<option value="21" data-val="21" data->21-Паспорт гражданина Российской Федерации</option>
<option value="07" data-val="07">07-Военный билет</option>
<option value="24" data-val="24">24-Удостоверение личности военнослужащего Российской Федерации</option>
<option value="91" data-val="91">91-Иные документы</option>
<option value="21" data-val="21">Паспорт гражданина Российской Федерации</option>
<option value="07" data-val="07">Военный билет</option>
<option value="24" data-val="24">Удостоверение личности военнослужащего Российской Федерации</option>
<option value="91" data-val="91">Иные документы</option>
</select>
</div>
<span class="form-item__warning"></span>
@@ -984,7 +985,7 @@
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/suggestions-jquery@20.2.1/dist/js/jquery.suggestions.min.js"></script>
<script src="libs/heic2any/heic2any-master/dist/heic2any.min.js"></script>
<script src="js/common.js"></script>
<script src="js/common.js?v=<?php echo filemtime(__DIR__ . '/js/common.js'); ?>"></script>
<style>
.t-input-block{
overflow:visible !important;
@@ -1156,57 +1157,6 @@ if($demodata) {
<?php } ?>
<script>
$(document).ready(function() {
// Простая диагностика для поля "Описание ситуации"
function checkDescriptionField() {
const descriptionField = $('textarea[name="description"]');
console.log('=== ДИАГНОСТИКА ПОЛЯ "ОПИСАНИЕ СИТУАЦИИ" ===');
console.log('Всего полей textarea[name="description"]:', descriptionField.length);
descriptionField.each(function(index) {
const $field = $(this);
const $step = $field.closest('.form-step');
console.log(`Поле ${index + 1}:`);
console.log(' - ID:', $field.attr('id'));
console.log(' - Родительский .form-step найден:', $step.length > 0);
if ($step.length > 0) {
console.log(' - data-step:', $step.attr('data-step'));
console.log(' - Классы:', $step.attr('class'));
} else {
console.log(' - ПРОБЛЕМА: Не найден родительский .form-step!');
// Проверяем структуру DOM
let current = $field;
let level = 0;
while (current.length > 0 && level < 10) {
console.log(` Уровень ${level}:`, current[0].tagName, current[0].className);
current = current.parent();
level++;
}
}
});
// Проверяем все .form-step
const allSteps = $('.form-step');
console.log('Всего .form-step на странице:', allSteps.length);
allSteps.each(function(index) {
console.log(`Шаг ${index + 1}: data-step="${$(this).attr('data-step')}", классы="${$(this).attr('class')}"`);
});
console.log('=== КОНЕЦ ДИАГНОСТИКИ ===');
}
// Запускаем диагностику при загрузке
setTimeout(checkDescriptionField, 500);
// И при переключении шагов
$(document).on('click', '.next-step, .prev-step', function() {
setTimeout(checkDescriptionField, 100);
});
});
</script>
</body>