const app = getApp(); Page({ data: { contact: '', phone: '', description: '', imageList: [], showNotification: true, countDown: 3, isFormValid: false, category: '投诉', categoryValue: '1', isPreviewMode: false, title: '', content: '', replyTime: '', replyContent: '', formSubmitted: false, isSubmitting: false, lastSubmitTime: 0, categoryMap: [ {name: '投诉', value: '1'}, {name: '建议', value: '2'} ], }, onLoad: function (options) { this.startCountDown(); // 检查是否是预览模式 if (options.mode === 'preview') { const id = options.id; // 获取数据 this.getDataById(id); // 设置为预览模式 this.setData({ isPreviewMode: true }); } else { // 非预览模式才检查表单有效性 this.checkFormValidity(); } }, onShow: function () { // 检查是否是从成功页面返回 if (this.data.formSubmitted) { // 重置表单数据 this.resetForm(); // 重置提交状态标记 this.setData({ formSubmitted: false }); } }, startCountDown: function () { let that = this; let timer = setInterval(function () { if (that.data.countDown > 0) { that.setData({ countDown: that.data.countDown - 1 }); } else { clearInterval(timer); } }, 1000); }, goBack: function () { wx.navigateBack(); }, radioChange: function (e) { const value = e.detail.value; const selectedCategory = this.data.categoryMap.find(item => item.value === value || item.name === value); this.setData({ category: selectedCategory.name, categoryValue: selectedCategory.value }); this.checkFormValidity(); }, inputContact: function (e) { this.setData({ contact: e.detail.value }); this.checkFormValidity(); }, inputPhone: function (e) { const value = e.detail.value; const phoneNumber = value.replace(/\D/g, ''); this.setData({ phone: phoneNumber }); this.checkFormValidity(); }, validatePhone: function (phone) { const phoneReg = /^1[3-9]\d{9}$/; return phoneReg.test(phone); }, inputDescription: function (e) { this.setData({ description: e.detail.value }); this.checkFormValidity(); }, chooseImage: function () { let that = this; if (that.data.imageList.length >= 10) { wx.showToast({ title: '最多只能上传10张图片', icon: 'none' }); return; } wx.chooseMedia({ count: 10 - that.data.imageList.length, mediaType: ['image'], sourceType: ['album', 'camera'], sizeType: ['compressed'], success: function (res) { let tempFiles = res.tempFiles; let validFiles = []; for (let i = 0; i < tempFiles.length; i++) { const file = tempFiles[i]; if (file.size <= 10 * 1024 * 1024) { validFiles.push(file); } else { wx.showToast({ title: '图片大小不能超过10M', icon: 'none' }); } } if (validFiles.length > 0) { wx.showLoading({ title: '图片压缩中...', mask: true }); let processedFiles = new Array(validFiles.length); let processCount = 0; // 处理每个图片 validFiles.forEach((file, index) => { that.compressImage(file.tempFilePath).then(compressedPath => { processCount++; // 获取压缩后图片的信息 wx.getFileInfo({ filePath: compressedPath, success: (fileInfo) => { console.log('原始大小:', file.size / 1024, 'KB'); console.log('压缩后大小:', fileInfo.size / 1024, 'KB'); // 在对应位置添加压缩后的图片路径 processedFiles[index] = { tempFilePath: compressedPath, size: fileInfo.size }; // 检查是否所有图片都已处理完成 if (processCount === validFiles.length) { // 过滤掉可能的空值,并按顺序合并 let newImageList = that.data.imageList.concat(processedFiles.filter(item => item)); that.setData({ imageList: newImageList }); wx.hideLoading(); } }, fail: (err) => { console.error('获取文件信息失败:', err); processCount++; // 如果失败,也要检查是否处理完所有图片 if (processCount === validFiles.length) { wx.hideLoading(); } } }); }).catch(err => { console.error('图片压缩失败:', err); processCount++; if (processCount === validFiles.length) { wx.hideLoading(); } }); }); } } }); }, // 使用canvas进行图片压缩 compressImage: function(imagePath) { return new Promise((resolve, reject) => { // 获取图片信息 wx.getImageInfo({ src: imagePath, success: (res) => { // 先获取原图大小,单位KB wx.getFileInfo({ filePath: imagePath, success: (fileInfo) => { const originalSize = fileInfo.size / 1024; // 原始大小,单位KB // 根据原图大小确定压缩质量 let targetQuality = 0.8; // 默认压缩质量 if (originalSize <= 500) { // 如果原图已经小于500KB,保持较高质量 targetQuality = 0.9; } else if (originalSize <= 1024) { // 1MB以下,适当压缩 targetQuality = 0.7; } else if (originalSize <= 2048) { // 2MB以下,中等压缩 targetQuality = 0.5; } else if (originalSize <= 5120) { // 5MB以下,较大压缩 targetQuality = 0.3; } else { // 超过5MB,大幅压缩 targetQuality = 0.2; } // 创建canvas上下文 wx.createSelectorQuery() .select('#compressCanvas') .fields({ node: true, size: true }) .exec((canvasRes) => { if (!canvasRes || !canvasRes[0] || !canvasRes[0].node) { // 如果找不到canvas节点,则返回原图 resolve(imagePath); return; } const canvas = canvasRes[0].node; const ctx = canvas.getContext('2d'); const image = canvas.createImage(); image.onload = () => { // 计算要缩放的尺寸,保持宽高比 let ratio = 1; // 根据原图大小调整尺寸 if (originalSize > 5120) { // 5MB以上 ratio = Math.min(1, 1200 / res.width, 1200 / res.height); } else if (originalSize > 2048) { // 2MB以上 ratio = Math.min(1, 1500 / res.width, 1500 / res.height); } else if (originalSize > 1024) { // 1MB以上 ratio = Math.min(1, 1800 / res.width, 1800 / res.height); } else { ratio = Math.min(1, 2000 / res.width, 2000 / res.height); } const targetWidth = Math.round(res.width * ratio); const targetHeight = Math.round(res.height * ratio); // 设置canvas尺寸 canvas.width = targetWidth; canvas.height = targetHeight; // 清除画布 ctx.clearRect(0, 0, targetWidth, targetHeight); // 绘制图片 ctx.drawImage(image, 0, 0, targetWidth, targetHeight); // 压缩参数 const compressOptions = { canvas: canvas, width: targetWidth, height: targetHeight, destWidth: targetWidth, destHeight: targetHeight, fileType: 'jpg', quality: targetQuality }; // 第一次尝试压缩 const tryCompress = (quality, attempt = 1) => { compressOptions.quality = quality; wx.canvasToTempFilePath({ ...compressOptions, success: (result) => { // 检查压缩后的大小 wx.getFileInfo({ filePath: result.tempFilePath, success: (compressedInfo) => { const compressedSize = compressedInfo.size / 1024; // 压缩后大小,单位KB console.log(`压缩后大小 (质量:${quality})`, compressedSize, 'KB'); // 如果压缩后大小仍大于500KB且尝试次数未达上限,继续压缩 if (compressedSize > 500 && attempt < 3) { // 递减质量 const newQuality = Math.max(0.1, quality - 0.2); console.log(`尝试重新压缩,质量降低至${newQuality}`); tryCompress(newQuality, attempt + 1); } // 如果压缩后小于200KB且质量非最高,尝试提高质量 else if (compressedSize < 200 && quality < 0.9 && attempt < 3) { // 递增质量 const newQuality = Math.min(0.9, quality + 0.2); console.log(`尝试重新压缩,质量提高至${newQuality}`); tryCompress(newQuality, attempt + 1); } else { // 返回压缩后的图片 resolve(result.tempFilePath); } }, fail: (error) => { console.error('获取压缩后图片信息失败:', error); resolve(result.tempFilePath); } }); }, fail: (error) => { console.error('Canvas转图片失败:', error); // 如果转换失败则返回原图 resolve(imagePath); } }); }; // 开始尝试压缩 tryCompress(targetQuality); }; image.onerror = () => { console.error('图片加载失败'); resolve(imagePath); }; image.src = imagePath; }); }, fail: (error) => { console.error('获取原始图片信息失败:', error); resolve(imagePath); } }); }, fail: (error) => { console.error('获取图片信息失败:', error); resolve(imagePath); } }); }); }, previewImage: function (e) { let index = e.currentTarget.dataset.index; wx.previewImage({ current: this.data.imageList[index], urls: this.data.imageList }); }, deleteImage: function (e) { let index = e.currentTarget.dataset.index; let imageList = this.data.imageList; imageList.splice(index, 1); this.setData({ imageList: imageList }); }, checkFormValidity: function () { const { contact, phone, description, category } = this.data; // 只检查必填项:联系人、联系电话和内容说明 const isValid = contact.trim() !== '' && this.validatePhone(phone) && description.trim() !== ''; this.setData({ isFormValid: isValid }); return isValid; }, onInputChange: function (e) { const { field } = e.currentTarget.dataset; const { value } = e.detail; this.setData({ [field]: value }); this.checkFormValidity(); }, bindPickerChange: function (e) { this.checkFormValidity(); }, // 添加submitForm方法 submitForm: function () { // 如果正在提交中,直接返回 if (this.data.isSubmitting) { return; } if (!this.checkFormValidity()) { let errorMsg = ''; if (!this.data.contact.trim()) { errorMsg = '请填写联系人'; } else if (!this.validatePhone(this.data.phone)) { errorMsg = '请输入正确的联系电话'; } else if (!this.data.description.trim()) { errorMsg = '请填写内容说明'; } wx.showToast({ title: errorMsg, icon: 'none' }); return; } const now = Date.now(); const lastSubmitTime = this.data.lastSubmitTime; // 如果距离上次提交时间小于 2 秒,直接返回 if (now - lastSubmitTime < 2000) { // wx.showToast({ // title: '请勿重复提交', // icon: 'none', // }); return; } // 更新上次提交时间 this.setData({ lastSubmitTime: now, }); const fileManager = wx.getFileSystemManager(); this.data.imageList.map(imgInfo => { const base64 = fileManager.readFileSync(imgInfo.tempFilePath, 'base64'); imgInfo.base64 = base64; return imgInfo; }) const submitData = { category: this.data.categoryValue, contact: this.data.contact, phone: this.data.phone, description: this.data.description, images: this.data.imageList, userName: app.globalData.currentAccountInfo.username, userNum: app.globalData.currentAccountInfo.usernumber }; debugger // 设置正在提交中 防止重复点击提交按钮 this.setData({ isSubmitting: true, }); console.log('提交的数据:', submitData); wx.showLoading({ title: '提交中...', }); wx.request({ url: app.globalData.interfaceUrls.feedback, method: 'POST', header: { 'content-type': 'application/json', // 默认值 'token': app.globalData.userWxInfo.token, 'source': "wc", '!SAAS_LOGIN_TOKEN_!': app.globalData.currentAccountInfo.dsKey }, data: submitData, success(res) { wx.hideLoading(); if (res.data.code == '200') { wx.navigateTo({ url: '/pages/tousujianyiSuccess/tousujianyiSuccess', }); } }, fail(error) { wx.hideLoading() utils.simleInfo('登记失败,请稍后再试') }, complete: () => { this.setData({ isSubmitting: false, // 提交完成,重置标志位,可继续提交 formSubmitted: true // 在提交成功后设置标记,返回将重置表单 }); }, }) // 在提交成功后设置标记,返回将重置表单 // this.setData({ // formSubmitted: true // }); }, submitRepair: function () { this.submitForm(); }, // 根据ID获取数据 getDataById: function (id) { // 这里应该是从服务器获取数据 // 但为了演示,我们从本地数据中获取 const pages = getCurrentPages(); const prevPage = pages[pages.length - 2]; // 获取上一个页面 if (prevPage && prevPage.data.noticeList) { const item = prevPage.data.noticeList.find(item => item.id == id); if (item) { const formatTime = (timeString) => { if (!timeString) return ''; // 如果时间为空,返回空字符串 const date = new Date(timeString); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份补零 const day = String(date.getDate()).padStart(2, '0'); // 日期补零 return `${year}-${month}-${day}`; }; let categoryName = '投诉'; const categoryItem = this.data.categoryMap.find(cat => cat.value === item.category); if (categoryItem) { categoryName = categoryItem.name; } this.setData({ category: categoryName, categoryValue: item.category || '1', contact: item.feedbackperson || '', description: item.replynote || '', phone: item.contactnumber || '', imageList: item.attachments || [], replyTime: formatTime(item.replytime) || '', replyContent: item.replycontent || '' }); } } }, resetForm: function () { this.setData({ contact: '', phone: '', description: '', imageList: [], category: '投诉', categoryValue: '1' }); } });