Colorful-childhood/pages/album/album.js

// pages/album/album.js
// 获取显示区域长宽
const device = wx.getSystemInfoSync()
const W = device.windowWidth
const H = device.windowHeight - 50

let cropper = require('../../component/welCropper/welCropper.js');

console.log(device)

const HOST = require('../../utils/const.js').apiUrl;
import httpRequestApi from '../../utils/APIRequest';
Page({
  /**
   * 页面的初始数据
   */
  data: {
    stateFlag: true,
    photoList: [],
    photoBoxToken: []
  },

  //更改相册
  setState: function () {
    this.setData({
      stateFlag: !this.data.stateFlag
    })
    const photoBox = this.data.stateFlag ? 'OPEN' : 'PRIVACY';
    wx.setStorageSync('photoBox', photoBox);
    httpRequestApi.setPhoto(photoBox).success(res => {
      const photoBoxToken = this.data.stateFlag ? [] : res.data.data.photoBoxToken.toString().split('');
      this.setData({
        photoBoxToken,
      })
    });
  },
  //上传相册
  addPhoto: function (e) {
    let that = this
    let mode = e.currentTarget.dataset.mode
    //如果用户没有填写信息不能上传图片
    const userInfo = wx.getStorageSync('userInfo');
    if(!userInfo.data.data.mobileNo || !userInfo.data.data.avatar) {
      wx.navigateTo({
        url: '/pages/setName/setName'
      })
      return false;
    };
    //提示图片上传不能超过15张
    if(this.data.photoList.length >= 15) {
      wx.showModal({  
        title: '温馨提示',  
        content: '只能上传15张图片'
      }) 
      return false;
    };
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success:  (res) => {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths;
        //启动上传等待中...  
        wx.showToast({  
          title: '正在上传...',  
          icon: 'loading',  
          mask: true,  
          duration: 1000 
        }) 
        //调用图片截取方法
        that.showCropper({
          src: tempFilePaths[0],
          mode: mode,
          sizeType: ['original', 'compressed'],   //'original'(default) | 'compressed'
          callback: (res) => {
            if (mode == 'rectangle') {
              // wx.previewImage({
              //   current: res,
              //   urls: [res]
              // })

              that.hideCropper() //隐藏，项目里是点击完成就上传，所以如果回调是上传，那么隐藏掉就行了，不用previewImage
              wx.showToast({  
                title: '玩命加载中...',  
                icon: 'loading',  
                mask: true,  
                duration: 1000 
              }) 
              //上传文件
              wx.uploadFile({  
                url: HOST + 'wx/file/upload',  
                filePath: res,  
                name: 'uploadfile_ant',  
                header: {  
                  "Content-Type": "multipart/form-data"  
                },  
                success: (res) => {  
                  const data = JSON.parse(res.data);
                  if(data.success) {
                    //上传文件成功后放到相册里
                    httpRequestApi.addPhotoList({
                      path: data.data
                    }).success((res) => {
                      if(res.data.success) {
                        //再次调用相册列表
                        that.getPhotoList();
                      }
                    }).fail(() => {
                      wx.showModal({  
                        title: '错误提示',  
                        content: '图片上传到相册失败'
                      }) 
                    });
                  } 
                },  
                fail: function (res) {  
                  wx.hideToast();  
                  wx.showModal({  
                    title: '错误提示',  
                    content: '上传图片失败'
                  })  
                }  
              }); 



                /*
                const that = this; 
                tempFilePaths.forEach(item => {
                  //上传文件
                  wx.uploadFile({  
                    url: HOST + 'wx/file/upload',  
                    filePath: item,  
                    name: 'uploadfile_ant',  
                    header: {  
                      "Content-Type": "multipart/form-data"  
                    },  
                    success: (res) => {  
                      uploadImgCount++; 
                      const data = JSON.parse(res.data);
                      if(data.success) {
                        //上传文件成功后放到相册里
                        httpRequestApi.addPhotoList({
                          path: data.data
                        }).success((res) => {
                          if(res.data.success) {
                            //再次调用相册列表
                            that.getPhotoList();
                          }
                        }).fail(() => {
                          wx.showModal({  
                            title: '错误提示',  
                            content: '图片上传到相册失败'
                          }) 
                        });
                      } 
                    },  
                    fail: function (res) {  
                      wx.hideToast();  
                      wx.showModal({  
                        title: '错误提示',  
                        content: '上传图片失败'
                      })  
                    }  
                  });  
                });
                */

            }
            else {
              wx.showModal({
                title: '',
                content: JSON.stringify(res),
              })

            }
          }
        })
        // wx.navigateTo({
        //   url: '/pages/clipPhoto/clipPhoto?imageUrl=' + tempFilePaths[0] 
        // })
      }
    })
  },

  //预览图片
  preview: function ({ currentTarget }) {
    // const index = currentTarget.dataset.index;
    // console.log(this.data.photoList[index].path);
    const imageUrl = [];
    for (let item of this.data.photoList) {
      imageUrl.push(item.path)      
    }
    wx.previewImage({
      urls: imageUrl
    })
  },

  //删除相册
  removePhoto: function ({ currentTarget }) {
    httpRequestApi.removePhotoList(currentTarget.dataset.id).success((res) => {
      console.log('删除册列表', res);
      if(res.data.success) {
        this.getPhotoList();
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    // 初始化组件数据和绑定事件
    cropper.init.apply(that, [W, H]);
    //获取相册列表
    this.getPhotoList();
    //初始化相册是否加密
    const photoBox = (wx.getStorageSync('photoBox') === 'OPEN' ? true : false);
    this.setData({
      stateFlag: photoBox
    })
    if(!photoBox) {
      httpRequestApi.setPhoto(wx.getStorageSync('photoBox')).success(res => {
        const photoBoxToken = this.data.stateFlag ? [] : res.data.data.photoBoxToken.toString().split('');
        this.setData({
          photoBoxToken,
        })
      });
    }
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  //获取相册列表
  getPhotoList: function () {
    httpRequestApi.getPhotoList({
      pageNo: 1,
      pageSize: 15
    }).success((res) => {
      console.log('相册列表', res.data.data.list);
      this.setData({
        photoList: res.data.data.list
      })
    })
  }

})