(function ($) { // 配置常量 const Config = { COUNTDOWN_DURATION: 60, // 验证码倒计时1分钟 POPUP_INTERVAL: 30000, // 弹窗检查间隔30秒 WEBAPP_CODE: 'A044', }; // 倒计时 const countdownControllers = { sms: null, // 短信验证码倒计时 query: null // 查询验证码倒计时 }; // DOM 元素引用 const DomElements = { // 主容器 content: $('#content'), // 表单相关 infoSection: $('.info-npm1'), complaintForm: $('.complaint_registration_form'), progressQuery: $('.progress_query'), progressTable: $('.progress_table'), progressPrompt: $('.progress_prompt'), // 弹窗 precautionsPopup: $('.precautions_popup'), messageMask: $('.message_mask'), petitionMask: $('.petition_mask'), // 按钮 submitBtn: $('#submit_btn'), queryBtn: $('#query_btn'), registrationBtn: $('.registration_btn'), queryForm: $('.query_form'), petitionSubmission: $('.petition_submission'), vCodeBtn: $('.vCode'), messageBtn: $('.message_btn'), precautionsBtn: $('#precautions_btn'), uploadAttachments: $('.upload_attachments'), petitionInquiry: $('#petition_inquiry'), uploadMail: $('.upload_mail'), // 表单字段 theme: $('#theme'), unit: $('#unit'), name: $('#name'), idCard: $('#id_card'), phone: $('#phone'), verificationCode: $('#verification_code'), formContent: $('#form_content'), progressVal: $('.progress_val'), queryInp: $('.query_inp'), fileList: $('.file-list'), smsCodeInputs: $('.sms_code input'), // 其他元素 messageNumber: $('.message_number'), messageP4: $('.message_p4'), tableTheme: $('.table_theme'), precautionsClose: $('.precautions_close'), messageClose: $('.message_close'), petitionLose: $('.petition_lose') }; // 表单数据 const formData = { fileList: [], webappcode: Config.WEBAPP_CODE, title: '', company: '', cardId: '', nikename: '', phone: '', description: '', verifyCode: '' }; // 初始化函数 function init() { setupEventListeners(); initPopupChecker(); initUnitSelect(); } // 事件监听设置 function setupEventListeners() { // 弹窗相关 DomElements.precautionsBtn.on('click', hidePrecautionsPopup); DomElements.precautionsClose.on('click', hidePrecautionsPopup); DomElements.messageClose.on('click', hideMessagePopup); DomElements.petitionLose.on('click', hidePetitionMask); // 导航按钮 DomElements.submitBtn.on('click', showComplaintForm); DomElements.queryBtn.on('click', showProgressQuery); DomElements.registrationBtn.on('click', showInfoSection); DomElements.queryForm.on('click', resetQueryView); // 表单操作 DomElements.petitionSubmission.on('click', handleFormSubmission); DomElements.vCodeBtn.on('click', handleVerificationCode); DomElements.messageBtn.on('click', handleMessageButton); DomElements.petitionInquiry.on('click', handlePetitionInquiry); // 表单验证 DomElements.smsCodeInputs.on('input keyup paste', handleSmsCodeInput); DomElements.progressVal.on('input', validateQueryInput); $('input, textarea, select').on('input change', clearFieldError); // 内容查询 DomElements.tableTheme.on('click', showPetitionMask); } /* ========== 弹窗相关功能 ========== */ function togglePrecautionsPopup() { DomElements.precautionsPopup.css('display', 'block'); } function hidePrecautionsPopup() { DomElements.precautionsPopup.css('display', 'none'); } function hideMessagePopup() { DomElements.messageMask.css('display', 'none'); } function showPetitionMask(item) { // 填充弹窗内容 if (item) { $('.petition_box .p_title span').text(item.title); $('.petition_box .p_unit span').text(item.company || '暂无信息'); $('.petition_box .p_name span').text(item.nikename || '暂无信息'); $('.petition_box .p_id span').text(item.cardId || '暂无信息'); $('.petition_box .p_phone span').text(item.phone || '暂无信息'); $('.petition_box .p_content span').text(item.description || '暂无信息'); let str = ''; if (item.fileList) { item.fileList.forEach(file => { // 根据文件类型决定是否强制预览 if (file.suffix === '.docx' || file.suffix === '.pdf') { // 使用微软Office在线预览(适用于.docx) str += `
${file.fileName} 下载
`; } else { // 其他文件类型保持默认行为 str += `
${file.fileName} 查看
`; } }); $('.petition_box .p_attachment').css('display', 'block').html(str); } else { $('.petition_box .p_attachment').css('display', 'none'); } } DomElements.petitionMask.css('display', 'block'); } function hidePetitionMask() { DomElements.petitionMask.css('display', 'none'); } /* ========== 页面导航功能 ========== */ function showComplaintForm() { DomElements.infoSection.css('display', 'none'); DomElements.complaintForm.css('display', 'block'); } function showInfoSection() { DomElements.infoSection.css('display', 'block'); DomElements.complaintForm.css('display', 'none'); } function showProgressQuery() { DomElements.infoSection.css('display', 'none'); DomElements.progressQuery.css('display', 'block'); } function resetQueryView() { DomElements.infoSection.css('display', 'block'); DomElements.progressQuery.css('display', 'none'); DomElements.progressTable.css('display', 'none'); DomElements.progressPrompt.css('opacity', '0'); } /* ========== 表单验证和提交 ========== */ function handleFormSubmission(e) { let idCardNumber = DomElements.idCard.val().trim(); // 验证身份证号 if (!idCardNumber) { DomElements.idCard.css('border-color', '#ff4d4f'); alert('请输入身份证号码!'); return; } if (!isValidIDCard(idCardNumber)) { DomElements.idCard.css('border-color', '#ff4d4f'); alert('请输入正确的身份证号码格式!'); return; } e.preventDefault(); resetAllErrors(); if (validateRequiredFields()) { prepareformData(); submitformData(); } } function resetAllErrors() { $('input, textarea, select').css('border-color', '#ddd'); $('.error-text').remove(); } function validateRequiredFields() { let isValid = true; $('i').each(function () { if ($(this).text() === '*') { const $field = $(this).closest('p').next(); if ($field.is('select') && $field.val() === '') { markFieldError($field); isValid = false; } else if (($field.is('input, textarea')) && $field.val().trim() === '') { markFieldError($field); isValid = false; } } }); return isValid; } function markFieldError($element) { $element.css('border-color', '#ff4d4f'); $element.after('
此项为必填内容
'); $element.addClass('animate__animated animate__headShake'); setTimeout(() => { $element.removeClass('animate__animated animate__headShake'); }, 1000); } function clearFieldError() { if ($(this).val().trim() !== '') { $(this).css('border-color', '#ddd'); $(this).next('.error-text').remove(); } } function prepareformData() { formData.title = DomElements.theme.val(); formData.company = DomElements.unit.val(); formData.cardId = DomElements.idCard.val(); formData.nikename = DomElements.name.val(); formData.phone = DomElements.phone.val(); formData.verifyCode = DomElements.verificationCode.val(); formData.description = DomElements.formContent.val(); } function submitformData() { console.log('提交数据:', formData); $.ajax({ url: '/api/construction/letter/submitLetterMain', type: 'POST', contentType: 'application/json', data: JSON.stringify(formData), success: function (response) { console.log("表单提交接口成功返回", response); if (response.code === 0) { alert(response.msg); resetForm(); showInfoSection(); // 清除倒计时 if (countdownControllers.sms) { countdownControllers.sms.reset(); } } else if (response.code === -1) { alert('提交失败: ' + response.msg); } }, error: function (xhr, status, error) { alert('请求失败: ' + error); } }); } // 新增函数:重置表单和清除上传文件 function resetForm() { // 清空表单字段 DomElements.theme.val(''); DomElements.unit.val('保利国际'); // 重置为默认值 DomElements.name.val(''); DomElements.idCard.val(''); DomElements.phone.val(''); DomElements.verificationCode.val(''); DomElements.formContent.val(''); // 清除所有错误提示 resetAllErrors(); } function validateQueryInput() { if ($(this).val().trim() !== '') { DomElements.queryInp.css('border-color', 'transparent'); } } function isValidPhoneNumber(phone) { return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(phone); } function maskPhoneNumber(phone) { return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); } /* ========== 短信验证码输入 ========== */ function handleSmsCodeInput(e) { const $input = $(this); // 处理粘贴 if (e.type === 'paste') { handlePaste(e); return; } // 限制数字输入 if (e.type === 'input') { $input.val($input.val().replace(/\D/g, '')); } // 处理删除键 if (e.keyCode === 8 && $input.val() === '') { $input.prev().focus(); return; } // 自动跳转 if ($input.val().length === 1) { $input.next().focus(); } } function handlePaste(e) { e.preventDefault(); const pasteData = e.originalEvent.clipboardData.getData('text'); const numbers = pasteData.replace(/\D/g, '').split('').slice(0, 6); DomElements.smsCodeInputs.val(''); $.each(numbers, (i, num) => { DomElements.smsCodeInputs.eq(i).val(num); }); if (numbers.length === 6) { DomElements.smsCodeInputs.last().blur(); } else { DomElements.smsCodeInputs.eq(numbers.length).focus(); } } function checkAllCodeFilled() { const allFilled = DomElements.smsCodeInputs.toArray().every(input => $(input).val() !== ''); if (allFilled) { DomElements.smsCodeInputs.last().blur(); let verifyCode = getVerificationCode(); let phone = DomElements.progressVal.val().trim(); $.get(`/api/construction/letter/getLetterMainList?webappcode=${Config.WEBAPP_CODE}&phone=` + phone + "&verifyCode=" + verifyCode, function (response) { console.log("response", response) if (response.code === 0) { if (response.data.length !== 0) { let html_ = ""; response.data.forEach(item => { let text = ''; if (item.completeContent) { text = `

回复: ${item.completeContent} ${item.completeContent}

`; } let upTime = ''; if (item.updateTime) { upTime = `(${item.updateTime})`; } // 判断是否需要居中 const shouldCenter = !item.completeContent && !item.updateTime; const tdStyle = shouldCenter ? 'style="justify-content: center;"' : ''; let stateStr; if (item.state === '1') { stateStr = `受理中`; } else if (item.state === '2') { stateStr = `处理中`; } else if (item.state === '3') { stateStr = `已办结`; } else { stateStr = `驳回`; } html_ += `
${item.title}
${item.createTime}
${stateStr}${upTime} ${text}
`; }) $("#tableContent").html(html_); // 绑定动态生成的table_theme元素点击事件 $("#tableContent").off('click', '.table_theme').on('click', '.table_theme', function () { // 从data属性获取item数据 const itemData = $(this).data('item'); showPetitionMask(itemData); }); DomElements.messageMask.css('display', 'none'); DomElements.progressPrompt.css('opacity', '1'); DomElements.progressTable.css('display', 'block'); DomElements.smsCodeInputs.val(''); } else { let html_ = "

未查询到受理信息。

" $("#tableContent").html(html_) } } else if (response.code === -1) { alert(response.msg); } }); } } function getVerificationCode() { return DomElements.smsCodeInputs.toArray().reduce((code, input) => code + $(input).val(), ''); } /* ========== 倒计时功能 ========== */ function initCountdownTimer(type = 'query') { // 为不同类型创建不同的存储键名 const storageKey = `${type}Countdown_${type === 'query' ? 'inquiry' : 'form'}`; const phoneKey = `${type}LastPhone`; // 新增:存储上次发送的手机号 const storedTime = sessionStorage.getItem(storageKey); let countdown = storedTime ? parseInt(storedTime) : 0; let countdownTimer = null; function updateUI() { if (countdown > 0) { if (type === 'query') { DomElements.messageP4.text(`${countdown}秒后可以重新获取短信`); DomElements.messageBtn.text('我已知晓').prop('disabled', false); } else if (type === 'sms') { DomElements.vCodeBtn.text(`${countdown}秒后重新获取`) .prop('disabled', true) .css({ 'cursor': 'not-allowed', 'font-size': '14px', 'opacity': '0.5' }); } sessionStorage.setItem(storageKey, countdown); } else { if (type === 'query') { DomElements.messageP4.text('可以重新获取短信'); DomElements.messageBtn.text('重新获取').prop('disabled', false); } else if (type === 'sms') { DomElements.vCodeBtn.text('获取验证码') .prop('disabled', false) .css({ 'cursor': 'pointer', 'font-size': '16px', 'opacity': '1' }); } sessionStorage.removeItem(storageKey); } } function startCountdown(phoneNumber) { if (countdown <= 0) { countdown = Config.COUNTDOWN_DURATION; // 存储当前手机号 sessionStorage.setItem(phoneKey, phoneNumber); updateUI(); if (countdownTimer) clearInterval(countdownTimer); countdownTimer = setInterval(() => { countdown--; updateUI(); if (countdown <= 0) { clearInterval(countdownTimer); } }, 1000); } } // 检查手机号是否变更 function checkPhoneChanged(currentPhone) { const lastPhone = sessionStorage.getItem(phoneKey); return lastPhone && lastPhone !== currentPhone; } // 初始化UI状态 updateUI(); // 如果倒计时未结束,继续计时 if (countdown > 0 && !countdownTimer) { countdownTimer = setInterval(() => { countdown--; updateUI(); if (countdown <= 0) { clearInterval(countdownTimer); } }, 1000); } return { start: startCountdown, reset: function () { countdown = 0; updateUI(); clearInterval(countdownTimer); sessionStorage.removeItem(storageKey); sessionStorage.removeItem(phoneKey); }, checkPhoneChanged: checkPhoneChanged }; } /* ========== 查询功能 ========== */ function handlePetitionInquiry() { const phoneNumber = DomElements.progressVal.val().trim(); if (!phoneNumber) { DomElements.queryInp.css('border-color', '#ff4d4f'); alert('请输入手机号!'); return; } if (!isValidPhoneNumber(phoneNumber)) { DomElements.queryInp.css('border-color', '#ff4d4f'); alert('请输入正确的手机格式!'); return; } // 先检查用户是否有提交记录 userCommitHistory(phoneNumber, function (hasRecords) { if (!hasRecords) { return; // 没有记录,直接返回 } // 有记录,继续执行短信验证流程 if (!countdownControllers.query) { countdownControllers.query = initCountdownTimer('query'); } if (countdownControllers.query.checkPhoneChanged(phoneNumber)) { countdownControllers.query.reset(); } const currentCountdown = sessionStorage.getItem('queryCountdown_inquiry'); if (!currentCountdown || parseInt(currentCountdown) <= 0) { sendVerificationSMS(2, phoneNumber, function (success) { if (success) { countdownControllers.query.start(phoneNumber); DomElements.messageNumber.text(maskPhoneNumber(phoneNumber)); DomElements.messageMask.css('display', 'block'); } }); } else { DomElements.messageNumber.text(maskPhoneNumber(phoneNumber)); DomElements.messageMask.css('display', 'block'); } }); } /* ========== 验证用户是否有表单提交记录 ========== */ function userCommitHistory(phoneNumber, callback) { $.get(`/api/construction/letter/getLetterMainCount?webappcode=${Config.WEBAPP_CODE}&phone=${phoneNumber}`, function (response) { if (response.code === 0) { if (response.data === 0) { // 没有提交记录 alert('当前查询手机用户未提交受理信息单'); callback(false); // 验证失败回调 } else { callback(true); // 验证成功回调 } } else { alert('查询失败: ' + response.msg); callback(false); // 验证失败回调 } } ).fail(function () { alert('网络请求失败,请检查网络连接'); callback(false); // 验证失败回调 }); } // 发送验证码短信 function sendVerificationSMS(type, phoneNumber, callback) { console.log(`向手机号 ${phoneNumber} 发送${type === 1 ? '短信' : '查询'}验证码`); // 存储当前手机号 sessionStorage.setItem('lastPhoneNumber', phoneNumber); $.post('/api/construction/letter/sendSMS', { type: type, phone: phoneNumber }, function (response) { if (response.code === -1) { alert(response.msg); if (callback) callback(false); // 发送失败回调 return; } if (response.code === 0) { if (response.msg === '执行成功') { alert('短信发送成功'); } else { alert(response.msg); } if (callback) callback(true); // 发送成功回调 } else { alert('短信发送失败: ' + response.msg); if (callback) callback(false); // 发送失败回调 } }); } /* ========== 弹窗检查器 ========== */ function initPopupChecker() { let lastPopupTime = 0; let interval = null; function checkAndShowPopup() { const currentTime = Date.now(); const timeSinceLastPopup = currentTime - lastPopupTime; if (DomElements.complaintForm.css('display') === 'block' && timeSinceLastPopup >= Config.POPUP_INTERVAL) { showPopup(); } } function showPopup() { DomElements.precautionsPopup.css('display', 'block'); lastPopupTime = Date.now(); } // 每1秒检查一次 interval = setInterval(checkAndShowPopup, 1000); // 页面卸载时清理 $(window).on('beforeunload', () => { clearInterval(interval); }); } /* ========== 单位选择下拉框 ========== */ function initUnitSelect() { const mockData = [ { id: '保利国际', name: '保利国际' }, { id: '保利发展', name: '保利发展' }, { id: '保利置业', name: '保利置业' }, { id: '保利中轻', name: '保利中轻' }, { id: '保利工艺', name: '保利工艺' }, { id: '保利文化', name: '保利文化' }, { id: '保利久联', name: '保利久联' }, { id: '保利华信', name: '保利华信' }, { id: '保利财务', name: '保利财务' }, { id: '保利新大厦', name: '保利新大厦' }, { id: '保利投资', name: '保利投资' }, ]; $.each(mockData, (i, unit) => { DomElements.unit.append($('