wxamp-ymtxUser/pagesA/pages/askingSyAdd/askingSyAdd.js

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
    });
  }
});