mini/pages/my/images/index.js

import userAPI from '../../../api/user';
import commonAPI from '../../../api/common';

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[],
    scrollViewHeight:0,
    autoBack:false,
    pager:{limit:10,loading:false,loadAll:false,pageIndex:0,refreshTrigger:false},

    uploadImg:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const windowInfo = wx.getWindowInfo();
    this.setData({
      autoBack:options.auto_back||false,
      scrollViewHeight:windowInfo.windowHeight
    });
    this.data.pager.loading = false;
    this.data.pager.loadAll = false;
    this.loadList();
  },
  refreshList(){
    this.data.pager.pageIndex = 0;
    this.data.pager.loadAll = false;
    this.setData({
      pager:this.data.pager
    });
    this.loadList();
  },
  loadList(){
    if(this.data.pager.loading||this.data.pager.loadAll){
      return;
    }
    this.data.pager.loading = true;
    this.setData({
      pager:this.data.pager
    });
    userAPI.getPersonImages({
      skip:this.data.pager.limit*this.data.pager.pageIndex,
      limit:this.data.pager.limit
    }).then((data)=>{

      if(this.data.pager.pageIndex==0){
        this.data.list = data;
      }else{
        this.data.list = this.data.list.concat(data);
      }
      this.data.pager.refreshTrigger = false;
      this.data.pager.loading = false;
      this.data.pager.pageIndex++;
      if(data.length<this.data.pager.limit){
        this.data.pager.loadAll = true;
      }

      this.setData({
        list:this.data.list,
        pager:this.data.pager
      })
    }).catch(()=>{
      this.setData({
        "pager.loading":false,
        "pager.refreshTrigger":false
      })
    })
  },

  setDefault(event){
    const item = event.currentTarget.dataset.item;
    const index = event.currentTarget.dataset.index;
    const defaultIndex = this.data.list.findIndex((item)=>item.is_default);
    userAPI.updatePersonImageDefault(item.id).then((data)=>{
      if(this.data.autoBack){
        wx.navigateBack()
      }else{
        wx.showToast({
          icon:'none',
          title: '修改成功'
        })
        this.setData({
          [`list[${defaultIndex}].is_default`]:false,
          [`list[${index}].is_default`]:true
        })
      }
    })
  },

  deleteImage(event){
    const index = event.currentTarget.dataset.index;
    const item = event.currentTarget.dataset.item;
    wx.showModal({
      title: '是否删除这个形象',
      complete: (res) => {
        if (res.confirm) {
          this.confirmDelete(item,index);
        }
      }
    })

  },
  confirmDelete(item,index){
    // this.selectComponent('#listView').loadMoreIfNeed();

    userAPI.deletePersonImage(item.id).then(async(data)=>{
      if(item.is_default){
        //找一个不是默认的形象
        const newDefaultIndex = this.data.list.findIndex((item=>!item.is_default));
        if(newDefaultIndex>-1){
          const newDefault = this.data.list[newDefaultIndex];
          await userAPI.updatePersonImageDefault(newDefault.id);
          this.setData({
            [`list[${newDefaultIndex}].is_default`]:true
          })
        }
      }

      if(this.data.pager.loadAll){
        this.data.list.splice(index,1);
        this.setData({
          list:this.data.list
        })
      }else{
        this.refreshList();
      }
    })
  },

  chooseImg(){
    wx.chooseMedia({
      count:1,
      success:(res)=>{
        wx.cropImage({
          cropScale:'3:4',
          src: res.tempFiles[0].tempFilePath,
          success:(_res)=>{
            _res.uploading = true;
            this.setData({
              uploadImg:_res
            })
            commonAPI.upload(_res).then((data)=>{
              this.setData({
                "uploadImg.serverUrl":data.url
              });
              userAPI.addPersonImages(data.url).then(()=>{
                this.setData({
                  uploadImg:{}
                })
                this.refreshList();
              })
            }).finally(()=>{
              this.setData({
                'uploadImg.uploading':false
              })
            });
            _res.task.onProgressUpdate((detail)=>{
              this.setData({
                uploadPercent:detail.progress
              })
            })
          }
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

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

  },

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

  }
})