mini/pages/try/index/index.js

import userAPI from "../../../api/user";
import commonAPI from "../../../api/common";
import {rpxToPx} from '../../../utils/util';

// pages/try/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    personImage:{},
    topClothing:{},
    bottomClothing:{},
    uploadPercent:0,
    defaultPersonImage:'',
    imgHeight:0,
    trying:false,
    history:[],
    currentHistory:{},

    hasTryon:false,
    personImageUploading:false,

    isViewPersonImage:false,

    isShowComment:false,
    tryonComment:{},
    tryonCommentLoading:false,

    pageHeight:0,

    tryonStatus:userAPI.tryOnStatus
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options);
    const windowInfo = wx.getWindowInfo();
    console.log(windowInfo);
    const imgWidth = windowInfo.windowWidth - rpxToPx(80);
    const imgHeight = imgWidth*4/3;
    console.log(imgWidth,imgHeight);
    this.setData({
      imgHeight,
      pageHeight:windowInfo.screenHeight
    })
    this.getDefaultPersonImage();
    this.getHistory();
  },
  getHistory(){
    userAPI.tryonHistory().then((data)=>{
      let hasTryon = false;
      data.map((item)=>{
        if(!item.completion_url&&item.status!=userAPI.tryOnStatus.error){
          hasTryon = true;
          this.checkResult(item.id)
        }
      })
      this.setData({
        history:data,
        hasTryon
      })
    })
  },
  chooseImg(){
    wx.chooseMedia({
      count:1,
      success:(res)=>{
        wx.cropImage({
          cropScale:'3:4',
          src: res.tempFiles[0].tempFilePath,
          success:(_res)=>{
            _res.uploading = true;
            this.setData({
              personImage:_res
            })
            commonAPI.upload(_res).then((data)=>{
              this.setData({
                "personImage.serverUrl":data.url
              });
              userAPI.addPersonImages(data.url).then(()=>{
                return this.getDefaultPersonImage();
              })
            }).finally(()=>{
              this.setData({
                'personImage.uploading':false
              })
            });
            _res.task.onProgressUpdate((detail)=>{
              this.setData({
                uploadPercent:detail.progress
              })
            })
          }
        })
      }
    })
  },

  chooseTopClothing(){
    if(this.data.currentHistory&&this.data.currentHistory.id){
      this.viewImage(this.data.currentHistory.top_clothing_url);
    }else{
      this.chooseAndUpload('topClothing');
    }
  },
  chooseBottomClothing(){
    if(this.data.currentHistory&&this.data.currentHistory.id){
      this.viewImage(this.data.currentHistory.bottom_clothing_url);
    }else{
      this.chooseAndUpload('bottomClothing');
    }
  },

  chooseAndUpload(key){
    wx.chooseMedia({
      count:1,
      success:(res)=>{
        let file = res.tempFiles[0];
        file.uploading = true;
        this.setData({
          [key]:file
        })
        commonAPI.upload(file).then((data)=>{
          this.setData({
            [`${key}.serverUrl`]:data.url
          })
        }).finally(()=>{
          this.setData({
            [`${key}.uploading`]:false
          })
        });
      }
    })
  },

  tryon(){
    if(!this.data.topClothing.serverUrl&&!this.data.bottomClothing.serverUrl){
      wx.showToast({
        title: '请先选择衣服',
      })
      return;
    }
    this.setData({
      trying:true
    })
    userAPI.tryon({
      top_clothing_url:this.data.topClothing.serverUrl,
      bottom_clothing_url:this.data.bottomClothing.serverUrl
    }).then((data)=>{
      this.setData({
        topClothing:{},
        bottomClothing:{}
      })
      this.getHistory();
    }).finally(()=>{
      this.setData({
        trying:false
      })
    })
  },

  checkResult(id){
    this.setData({
      hasTryon:true
    })
    setTimeout(()=>{
      userAPI.checkTryon(id).then((data)=>{
        if(data.completion_url||data.status==userAPI.tryOnStatus.error){
          this.getHistory();
        }else{
          this.checkResult(id);
        }
      })
    },1000);
  },

  selectHistory(event){
    const item = event.currentTarget.dataset.item;
    this.setData({
      currentHistory:item
    })
  },

  addNew(){
    this.setData({
      currentHistory:{}
    })
  },

  deleteHistory(event){
    const item = event.currentTarget.dataset.item;
    wx.showModal({
      title:'你确定删除这个搭配吗？',
      complete: (res) => {
        if (res.confirm) {
          userAPI.deleteTryon(item.id).then(()=>{
            wx.showToast({
              icon:'none',
              title: '删除成功',
            })
            this.getHistory();
          })
        }
      }
    })
  },
  viewPersonImage(){
    this.setData({
      isViewPersonImage:true
    })
  },
  viewCompleteImage(){
    this.setData({
      isViewPersonImage:false
    })
  },
  showComment(){
    if(this.data.tryonCommentLoading)return;
    this.setData({
      tryonCommentLoading:true
    })
    userAPI.getTryonComment(this.data.currentHistory.id).then((data)=>{
      wx.hideTabBar({
        success:()=>{
          this.setData({
            isShowComment:true,
            tryonComment:data
          })
        }
      });
    }).finally(()=>{
      this.setData({
        tryonCommentLoading:false
      })
    })
  },
  commentViewLeave(){
    wx.showTabBar();
    wx.rewriteRoute({
      url:'/pages/try/index/index',
      preserveQuery:true
    });
    this.options.shared_history_id = '';
  },

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

  },
  
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if(this.options&&this.options.shared_history_id){
      userAPI.tryonDetail(this.options.shared_history_id).then((data)=>{
        wx.hideTabBar({
          success:()=>{
            this.setData({
              isShowComment:true,
              tryonComment:data
            })
          }
        });
      })
    }
  },
  getDefaultPersonImage(){
    userAPI.getDefaultPersonImage().then((data)=>{
      this.setData({
        defaultPersonImage:data.image_url
      })
    });
  },
  setTop(url){
    this.setData({
      topClothing:{
        serverUrl:url,
        tempFilePath:url
      },
      currentHistory:{}
    })
  },
  setBottom(url){
    this.setData({
      bottomClothing:{
        serverUrl:url,
        tempFilePath:url
      },
      currentHistory:{}
    })
  },
  viewImageInView(event){
    this.viewImage(event.currentTarget.dataset.item);
  },
  viewImage(url){
    wx.previewImage({
      urls: [url],
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    if(this.data.currentHistory.id){
      return {
        title:'美搭，美达，美美哒',
        imageUrl:this.data.currentHistory.completion_url,
        path:`/pages/try/index/index?shared_history_id=${this.data.currentHistory.id}`
      }
    }
  }
})