import http from '../../../utils/api' const baseUrl = require('../../../utils/baseUrl') Page({ /** * 页面的初始数据 */ data: { formData: { animalType: '', animalAge: '', animalGender: '', description: '', images: [] // 这里应该存储服务器返回的文件名数组 }, symptomsLength: 0, isSubmitting: false, isFormValid: false, tempImages: [], // 新增:临时存储本地图片路径 isUploading: false, // 新增:防止重复上传 showLoadingMask: false, // 新增:显示加载遮罩层 loadingText: '提交中...' // 新增:加载提示文字 }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { // 初始化表单验证 this.checkFormValidity(); }, // 宠物类型输入 onPetTypeInput(e) { const value = e.detail.value; this.setData({ 'formData.animalType': value }, () => { this.checkFormValidity(); }); }, // 宠物年龄输入 onPetAgeInput(e) { const value = e.detail.value; this.setData({ 'formData.animalAge': value }, () => { this.checkFormValidity(); }); }, // 选择性别 selectGender(e) { const value = e.currentTarget.dataset.value; this.setData({ 'formData.animalGender': value }, () => { this.checkFormValidity(); }); }, // 症状描述输入 onSymptomsInput(e) { const value = e.detail.value; this.setData({ 'formData.description': value, symptomsLength: value.length }, () => { this.checkFormValidity(); }); }, // 选择图片并上传 chooseImage() { if (this.data.isUploading) { wx.showToast({ title: '正在上传中,请稍候', icon: 'none' }); return; } wx.chooseMedia({ mediaType: ['image'], sourceType: ['album', 'camera'], success: (res) => { if (res.tempFiles && res.tempFiles.length > 0) { this.setData({ isUploading: true }); // 显示加载提示 wx.showLoading({ title: '上传图片中...', mask: true }); // 逐个上传图片 this.uploadImages(res.tempFiles); } } }); }, // 上传图片到服务器 uploadImages(files) { console.log(1111,files); const uploadPromises = files.map(file => { return new Promise((resolve, reject) => { wx.uploadFile({ url: baseUrl + '/common/upload', header: { 'Authorization': 'Bearer ' + wx.getStorageSync('token') }, filePath: file.tempFilePath, name: 'file', success: (uploadRes) => { console.log(2222,uploadRes); try { const result = JSON.parse(uploadRes.data); if (result.code === 200 || result.fileName) { resolve({ tempPath: file.tempFilePath, serverPath: result.fileName }); } else { reject(new Error('上传失败: ' + (result.msg || '服务器错误'))); } } catch (error) { reject(new Error('解析服务器响应失败')); } }, fail: (error) => { reject(new Error('网络请求失败')); } }); }); }); // 等待所有图片上传完成 Promise.all(uploadPromises) .then(results => { // 更新临时图片列表(用于预览) const newTempPaths = results.map(item => item.tempPath); const newTempImages = [...this.data.tempImages, ...newTempPaths]; // 更新服务器返回的图片路径 const newServerPaths = results.map(item => item.serverPath); const newFormImages = [...this.data.formData.images, ...newServerPaths]; console.log(555,this.data.formData.images); console.log(666,newServerPaths); this.setData({ tempImages: newTempImages, 'formData.images': newFormImages, isUploading: false }); wx.hideLoading(); wx.showToast({ title: '上传成功', icon: 'success' }); }) .catch(error => { wx.hideLoading(); this.setData({ isUploading: false }); wx.showToast({ title: error.message || '上传失败', icon: 'none' }); }); }, // 移除图片 removeImage(e) { const index = e.currentTarget.dataset.index; // 移除临时图片 const tempImages = [...this.data.tempImages]; tempImages.splice(index, 1); // 移除服务器图片路径 const images = [...this.data.formData.images]; images.splice(index, 1); this.setData({ tempImages, 'formData.images': images }); }, // 预览图片 previewImage(e) { const index = e.currentTarget.dataset.index; const urls = this.data.tempImages; if (urls && urls.length > 0 && urls[index]) { wx.previewImage({ current: urls[index], urls: urls }); } }, // 检查表单有效性 checkFormValidity() { const { animalType, animalAge, animalGender, description } = this.data.formData; const isValid = animalType.trim() && animalAge && animalGender && description.trim(); this.setData({ isFormValid: !!isValid }); }, // 表单提交 submitForm(e) { if (this.data.isSubmitting || !this.data.isFormValid) { return; } // 检查是否还有图片正在上传 if (this.data.isUploading) { wx.showToast({ title: '图片正在上传中,请稍后提交', icon: 'none' }); return; } // 显示加载遮罩层 this.setData({ isSubmitting: true, showLoadingMask: true, loadingText: '提交中...' }); // 准备提交数据 const submitData = { ...this.data.formData, images: this.data.formData.images.join(',') // 将数组转为字符串,如果需要的话 }; http.wzdAdd({ data: submitData, success: (res) => { console.log('提交成功', res); if(res.code==200){ // 提交成功后的处理 this.setData({ loadingText: '提交成功' }); setTimeout(() => { this.setData({ isSubmitting: false, showLoadingMask: false }); wx.showToast({ title: '提交成功', icon: 'success', duration: 1500, success: () => { // 返回上一页 wx.navigateBack(); } }); }, 1000); } else { this.setData({ loadingText: '提交失败' }); setTimeout(() => { this.setData({ isSubmitting: false, showLoadingMask: false }); wx.showToast({ title: res.msg || '提交失败,请重试', icon: 'none', duration: 2000 }); }, 1000); } }, fail: (err) => { this.setData({ loadingText: '网络错误' }); setTimeout(() => { this.setData({ isSubmitting: false, showLoadingMask: false }); wx.showToast({ title: '网络异常,请检查网络后重试', icon: 'none', duration: 2000 }); }, 1000); } }); }, /** * 生命周期函数--监听页面卸载 */ onUnload() { // 页面卸载时重置状态 this.setData({ isSubmitting: false, showLoadingMask: false }); } });