wxamp-ymtxMerchant/pagesB/pages/publishAdd/publishAdd.js

import http from '../../../utils/api'
const baseUrl = require('../../../utils/baseUrl')

Page({
  data: {
    baseUrl,
    currentTab: 'article',

    // 文章相关
    articleForm: {
      title: '',
      subtitle: '',
      category: '',
      content: '',
      coverImage: ''  // 这里存储服务器返回的文件名
    },
    articleCoverTemp: '', // 本地临时路径，用于预览
    articleCategory: null,
    articleCategories: [],

    // 视频相关
    videoForm: {
      title: '',
      description: '',
      category: '',
      videoUrl: '', // 这里存储服务器返回的视频文件名
      coverImage: '' // 这里存储服务器返回的封面文件名
    },
    videoCoverTemp: '', // 本地临时路径，用于预览
    videoUrlTemp: '', // 本地临时路径，用于显示
    videoCategory: null,
    videoCategories: [],

    // UI状态
    submitting: false,
    isUploading: false, // 防止重复上传
    showLoadingMask: false, // 显示加载遮罩层
    loadingText: '发布中...', // 加载提示文字
    
    // 表单验证状态
    articleFormValid: false,
    videoFormValid: false,
  },

  onLoad() {
    this.getArticleCategories()
    this.getVideoCategories()
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    // 页面卸载时重置状态
    this.setData({
      submitting: false,
      showLoadingMask: false
    });
  },

  // 获取文章分类
  getArticleCategories() {
    http.articleZd({
      data: {
        dictType: 'article_category'
      },
      success: res => {
        if (res.rows) {
          this.setData({
            articleCategories: res.rows
          })
        }
      }
    })
  },

  // 获取视频分类
  getVideoCategories() {
    http.videoZd({
      data: {
        dictType: 'video_category'
      },
      success: res => {
        if (res.rows) {
          this.setData({
            videoCategories: res.rows
          })
        }
      }
    })
  },

  // 切换标签
  switchTab(e) {
    const type = e.currentTarget.dataset.type
    if (type === this.data.currentTab) return
    this.setData({ currentTab: type })
  },

  // 验证文章表单
  validateArticleForm() {
    const { articleForm } = this.data
    const isValid = !!(articleForm.title?.trim() && articleForm.category && articleForm.content?.trim())
    this.setData({ articleFormValid: isValid })
    return isValid
  },

  // 验证视频表单
  validateVideoForm() {
    const { videoForm } = this.data
    const isValid = !!(videoForm.title?.trim() && videoForm.category && videoForm.videoUrl)
    this.setData({ videoFormValid: isValid })
    return isValid
  },

  // 文章输入处理
  onArticleInput(e) {
    const field = e.currentTarget.dataset.field
    const value = e.detail.value
    this.setData({
      [`articleForm.${field}`]: value
    }, () => {
      this.validateArticleForm()
    })
  },

  // 视频输入处理
  onVideoInput(e) {
    const field = e.currentTarget.dataset.field
    const value = e.detail.value
    this.setData({
      [`videoForm.${field}`]: value
    }, () => {
      this.validateVideoForm()
    })
  },

  // 文章分类选择
  onArticleCategoryChange(e) {
    const index = e.detail.value
    const category = this.data.articleCategories[index]
    this.setData({
      'articleForm.category': category.dictValue,
      articleCategory: category
    }, () => {
      this.validateArticleForm()
    })
  },

  // 视频分类选择
  onVideoCategoryChange(e) {
    const index = e.detail.value
    const category = this.data.videoCategories[index]
    this.setData({
      'videoForm.category': category.dictValue,
      videoCategory: category
    }, () => {
      this.validateVideoForm()
    })
  },

  // 选择封面图片（文章或视频）
  chooseCover(e) {
    if (this.data.isUploading) {
      wx.showToast({
        title: '正在上传中，请稍候',
        icon: 'none'
      });
      return;
    }

    const type = e.currentTarget.dataset.type
    
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      sizeType: ['compressed'],
      success: (res) => {
        if (res.tempFiles && res.tempFiles.length > 0) {
          this.setData({
            isUploading: true
          });
          
          // 显示加载提示
          wx.showLoading({
            title: '上传图片中...',
            mask: true
          });

          // 上传图片
          this.uploadImage(res.tempFiles[0].tempFilePath, type);
        }
      }
    });
  },

  // 上传单张图片
  uploadImage(tempPath, type) {
    wx.uploadFile({
      url: baseUrl + '/common/upload',
      header: {
        'Authorization': 'Bearer ' + wx.getStorageSync('token')
      },
      filePath: tempPath,
      name: 'file',
      success: (uploadRes) => {
        try {
          const result = JSON.parse(uploadRes.data);
          if (result.code === 200 || result.fileName) {
            const serverPath = result.fileName || result.url;
            
            if (type === 'article') {
              // 文章封面
              this.setData({
                articleCoverTemp: tempPath,
                'articleForm.coverImage': serverPath,
                isUploading: false
              });
            } else {
              // 视频封面
              this.setData({
                videoCoverTemp: tempPath,
                'videoForm.coverImage': serverPath,
                isUploading: false
              }, () => {
                this.validateVideoForm();
              });
            }
            
            wx.hideLoading();
            wx.showToast({
              title: '上传成功',
              icon: 'success'
            });
          } else {
            throw new Error(result.msg || '上传失败');
          }
        } catch (error) {
          wx.hideLoading();
          this.setData({
            isUploading: false
          });
          wx.showToast({
            title: error.message || '上传失败',
            icon: 'none'
          });
        }
      },
      fail: (error) => {
        wx.hideLoading();
        this.setData({
          isUploading: false
        });
        wx.showToast({
          title: '网络请求失败',
          icon: 'none'
        });
      }
    });
  },

  // 选择视频
  chooseVideo() {
    if (this.data.isUploading) {
      wx.showToast({
        title: '正在上传中，请稍候',
        icon: 'none'
      });
      return;
    }

    wx.chooseMedia({
      count: 1,
      mediaType: ['video'],
      sourceType: ['album', 'camera'],
      maxDuration: 300,
      success: (res) => {
        if (res.tempFiles && res.tempFiles.length > 0) {
          this.setData({
            isUploading: true,
            videoUrlTemp: res.tempFiles[0].tempFilePath // 先显示本地路径
          });
          
          // 显示加载提示
          wx.showLoading({
            title: '上传视频中...',
            mask: true
          });

          // 上传视频
          this.uploadVideo(res.tempFiles[0].tempFilePath);
        }
      }
    });
  },

  // 上传视频
  uploadVideo(tempPath) {
    wx.uploadFile({
      url: baseUrl + '/common/upload',
      header: {
        'Authorization': 'Bearer ' + wx.getStorageSync('token')
      },
      filePath: tempPath,
      name: 'file',
      success: (uploadRes) => {
        try {
          const result = JSON.parse(uploadRes.data);
          if (result.code === 200 || result.fileName) {
            const serverPath = result.fileName || result.url;
            
            this.setData({
              'videoForm.videoUrl': serverPath,
              isUploading: false
            }, () => {
              this.validateVideoForm();
            });
            
            wx.hideLoading();
            wx.showToast({
              title: '上传成功',
              icon: 'success'
            });
          } else {
            throw new Error(result.msg || '上传失败');
          }
        } catch (error) {
          wx.hideLoading();
          this.setData({
            videoUrlTemp: '', // 上传失败清空临时路径
            isUploading: false
          });
          wx.showToast({
            title: error.message || '上传失败',
            icon: 'none'
          });
        }
      },
      fail: (error) => {
        wx.hideLoading();
        this.setData({
          videoUrlTemp: '', // 上传失败清空临时路径
          isUploading: false
        });
        wx.showToast({
          title: '网络请求失败',
          icon: 'none'
        });
      }
    });
  },

  // 提交文章
  submitArticle() {
    const { articleForm, submitting, isUploading } = this.data
    
    if (submitting) return

    // 检查是否还有图片正在上传
    if (isUploading) {
      wx.showToast({
        title: '图片正在上传中，请稍后提交',
        icon: 'none'
      });
      return;
    }

    // 表单验证
    if (!this.validateArticleForm()) {
      if (!articleForm.title?.trim()) {
        this.showError('请输入文章标题')
      } else if (!articleForm.category) {
        this.showError('请选择文章分类')
      } else if (!articleForm.content?.trim()) {
        this.showError('请输入文章内容')
      }
      return
    }

    // 显示加载遮罩层
    this.setData({
      submitting: true,
      showLoadingMask: true,
      loadingText: '发布中...'
    });

    // 构建提交数据
    const submitData = {
      title: articleForm.title.trim(),
      subtitle: articleForm.subtitle?.trim() || '',
      content: articleForm.content.trim(),
      coverImage: articleForm.coverImage || '',
      category: articleForm.category
    }

    // 调用接口
    http.articleAdd({
      data: submitData,
      success: (res) => {
        if (res.code == 200) {
          this.setData({
            loadingText: '发布成功'
          });
          
          setTimeout(() => {
            this.setData({
              submitting: false,
              showLoadingMask: false
            });
            
            wx.showToast({
              title: '发布成功',
              icon: 'success',
              duration: 1500,
              success: () => {
                setTimeout(() => {
                  wx.navigateBack()
                }, 1500);
              }
            });
          }, 1000);
        } else {
          this.setData({
            loadingText: '发布失败'
          });
          
          setTimeout(() => {
            this.setData({
              submitting: false,
              showLoadingMask: false
            });
            
            wx.showToast({
              title: res.msg || '发布失败，请重试',
              icon: 'none',
              duration: 2000
            });
          }, 1000);
        }
      },
      fail: (err) => {
        this.setData({
          loadingText: '网络错误'
        });
        
        setTimeout(() => {
          this.setData({
            submitting: false,
            showLoadingMask: false
          });
          
          wx.showToast({
            title: '网络异常，请检查网络后重试',
            icon: 'none',
            duration: 2000
          });
        }, 1000);
      }
    })
  },

  // 提交视频
  submitVideo() {
    const { videoForm, submitting, isUploading } = this.data

    if (submitting) return

    // 检查是否还有图片或视频正在上传
    if (isUploading) {
      wx.showToast({
        title: '文件正在上传中，请稍后提交',
        icon: 'none'
      });
      return;
    }

    // 表单验证
    if (!this.validateVideoForm()) {
      if (!videoForm.title?.trim()) {
        this.showError('请输入视频标题')
      } else if (!videoForm.category) {
        this.showError('请选择视频分类')
      } else if (!videoForm.videoUrl) {
        this.showError('请选择视频')
      }
      return
    }

    // 显示加载遮罩层
    this.setData({
      submitting: true,
      showLoadingMask: true,
      loadingText: '发布中...'
    });

    // 构建提交数据
    const submitData = {
      title: videoForm.title.trim(),
      description: videoForm.description?.trim() || '',
      videoUrl: videoForm.videoUrl,
      coverImage: videoForm.coverImage || '',
      category: videoForm.category
    }

    // 调用接口
    http.videoAdd({
      data: submitData,
      success: (res) => {
        if (res.code == 200) {
          this.setData({
            loadingText: '发布成功'
          });
          
          setTimeout(() => {
            this.setData({
              submitting: false,
              showLoadingMask: false
            });
            
            wx.showToast({
              title: '发布成功',
              icon: 'success',
              duration: 1500,
              success: () => {
                setTimeout(() => {
                  wx.navigateBack()
                }, 1500);
              }
            });
          }, 1000);
        } else {
          this.setData({
            loadingText: '发布失败'
          });
          
          setTimeout(() => {
            this.setData({
              submitting: false,
              showLoadingMask: false
            });
            
            wx.showToast({
              title: res.msg || '发布失败，请重试',
              icon: 'none',
              duration: 2000
            });
          }, 1000);
        }
      },
      fail: (err) => {
        this.setData({
          loadingText: '网络错误'
        });
        
        setTimeout(() => {
          this.setData({
            submitting: false,
            showLoadingMask: false
          });
          
          wx.showToast({
            title: '网络异常，请检查网络后重试',
            icon: 'none',
            duration: 2000
          });
        }, 1000);
      }
    })
  },

  // 显示错误提示
  showError(msg) {
    wx.showToast({
      title: msg,
      icon: 'none',
      duration: 2000
    });
  }
})