KeCheng/miniprogram/HuiYa/pages/make_convert/index.js

import { urlPrefix, ossAK, ossHost } from '../../config/index';
import Toast from 'tdesign-miniprogram/toast/index';
var sMD5 = require('../../utils/spark-md5.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    frontUrl: "",
    afterUrl: "",
    left: '86',
    styleList: [],
    styleSelectIndex: 0,
    example_source: '',
    example_thumb: '',

    input_img_count: 0,
    generate_img_count: 0,

    model_id: 0,
    prompt_id: 0,
    jd_count: 1,
    model_name: '',
    style: 'border: 2rpx solid rgba(220,220,220,1);border-radius: 12rpx;',
    gridConfig: {
      column: 1,
      width: 760,
      height: 90,
    },
    uploadStatus: true,
    imageStatus: false,
    generateStatus: false,

    thumb_image: '',
    thumb_list: [],
    memoList: [],

    gText: true,
    gLoading: false,

    promptList: [],

    cWidth: 0,
    cHeight: 0,

    historyImgSelectIndex: -1,
    historyImgList: []

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.loadStyleList();
    this.loadHistoryList();

  },

  //获取风格列表
  loadStyleList() {
    let that = this;
    wx.request({
      url: urlPrefix + '/QingLong/HuiYa/wxGetConvertChildModel',
      method: "POST",
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        token: wx.getStorageSync('token')
      },
      success(res) {
        if (res.data.token) {
          wx.setStorageSync('token', res.data.token);
        }
        if (res.data.success) {
          that.setData({ styleList: res.data.data, afterUrl: res.data.data[0].view_before_img_url, frontUrl: res.data.data[0].view_after_img_url, prompt_id: res.data.data[0].prompt_id });
          that.getStyleInfo();
        }
      }
    });

  },

  //获取历史相册
  loadHistoryList() {
    let that = this;
    wx.request({
      url: urlPrefix + '/QingLong/HuiYa/wxUserImgHistory',
      method: "POST",
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        token: wx.getStorageSync('token'),
        page: 1,
        limit: 6
      },
      success(res) {
        if (res.data.token) {
          wx.setStorageSync('token', res.data.token);
        }
        that.setData({
          historyImgList: res.data.data
        });
      }
    });
  },

  //获取风格的信息
  getStyleInfo() {
    let that = this;
    wx.request({
      url: urlPrefix + '/QingLong/HuiYa/wxGetModelPrompt',
      method: "POST",
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        token: wx.getStorageSync('token'),
        model_id: 49,
        prompt_id: this.data.prompt_id
      },
      success(res) {
        if (res.data.token) {
          wx.setStorageSync('token', res.data.token);
        }
        that.setData({
          jd_count: res.data.record.jd_count,
          input_img_count: res.data.record.input_img_count
        });
      }
    });
  },

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

  },

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

  },

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

  },

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

  },

  //上传图片
  uploadAddHandle(e) {
    let that = this;

    let _file = e.detail.files[0];
    let _fileUrl = _file.url;
    console.log(_fileUrl)
    let fileExtension = _file.name.split('.').pop();
    let fileName = this.getGuid() + "." + fileExtension;
    let key = "Images/Upload/" + fileName;

    if (fileExtension == 'png' || fileExtension == 'jpg' || fileExtension == 'jpeg') {
      wx.getImageInfo({
        src: _fileUrl,
        success(res) {
          let cW = res.width;
          let cH = res.height;

          let cWidth = cW;
          let cHeight = cH;

          //如果宽或高小于384为不允许
          if (cW < 384 || cH < 384) {
            Toast({
              context: that,
              selector: '#t-toast',
              message: '图片分辨率过小！',
            });
            return;
          } else {
            if (cW > cH) {
              if (cH > 1024) {
                cHeight = 1024;
                cWidth = parseInt((cW * 1024) / cH);
              }
            } else if (cW < cH) {
              if (cW > 1024) {
                cWidth = 1024;
                cHeight = parseInt((cH * 1024) / cW);
              }
            } else {
              cWidth = 1024;
              cHeight = 1024;
            }
          }

          that.setData({ cWidth: cWidth, cHeight: cHeight });
          const ctx = wx.createCanvasContext('attendCanvasId');
          ctx.drawImage(_fileUrl, 0, 0, cWidth, cHeight);
          ctx.draw(false, function () {
            setTimeout(() => {
              wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: cWidth,
                height: cHeight,
                destWidth: cWidth,
                destHeight: cHeight,
                canvasId: 'attendCanvasId',
                success(res) {
                  _fileUrl = res.tempFilePath;
                  wx.request({
                    url: urlPrefix + '/QingLong/HuiYa/wxGetSignature',
                    method: "POST",
                    data: {
                      token: wx.getStorageSync('token'),
                    },
                    header: {
                      'content-type': 'application/x-www-form-urlencoded'
                    },
                    success(res) {
                      if (res.data.token) {
                        wx.setStorageSync('token', res.data.token);
                      }

                      let signature = res.data.data.signature;
                      let policy = res.data.data.policy;

                      wx.uploadFile({
                        url: ossHost,
                        filePath: _fileUrl,
                        name: 'file',
                        formData: {
                          OSSAccessKeyId: ossAK,
                          key,
                          policy,
                          signature
                        },
                        success: (res) => {
                          if (res.statusCode === 204) {
                            let uploadBtnFlg = true;
                            let imgArr = that.data.thumb_list.concat('http://hzkc.oss-cn-beijing.aliyuncs.com/Images/Upload/' + fileName);
                            if (imgArr.length == that.data.input_img_count) {
                              uploadBtnFlg = false;
                            }
                            that.setData({
                              uploadStatus: uploadBtnFlg,
                              imageStatus: true,
                              thumb_list: imgArr
                            });
                          }
                        }
                      });
                    }
                  });
                }
              });
            }, 200);
          });
        }
      });
    } else {
      Toast({
        context: this,
        selector: '#t-toast',
        message: '只允许上传.png、.jpg、.jpep 格式！',
      });
    }
  },





  exampleHandle(e) {
    let _url = this.data.example_source;
    wx.previewImage({
      urls: [_url]
    });
  },

  closeIconTap(e) {
    let imgArr = this.data.thumb_list;
    imgArr.splice(e.target.id, 1);

    this.setData({
      uploadStatus: true,
      thumb_list: imgArr
    });
  },

  generateHandle(e) {
    let that = this;
    if (this.data.imageStatus) {
      if (this.data.thumb_list.length != this.data.input_img_count) {
        Toast({
          context: this,
          selector: '#t-toast',
          message: '需上传2张照片！',
        });
        return;
      } else {
        this.setData({ gText: false, gLoading: true });
        wx.request({
          url: urlPrefix + '/QingLong/HuiYa/wxAddTask',
          method: "POST",
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          data: {
            token: wx.getStorageSync('token'),
            model_id: 49,
            prompt_id: this.data.prompt_id,
            source_img_url: this.data.thumb_list.join(","),
            count: 1
          },
          success(res) {
            if (res.data.token) {
              wx.setStorageSync('token', res.data.token);
            }
            if (res.data.success) {
              that.setData({ generateStatus: true });
              Toast({
                context: this,
                duration: 3500,
                theme: 'success',
                selector: '#t-toast',
                message: res.data.estimation_finish_time,
              });
            } else {
              Toast({
                context: this,
                theme: 'fail',
                selector: '#t-toast',
                message: res.data.message,
              });
              return;
            }
          }
        });
      }
    } else {
      Toast({
        context: this,
        selector: '#t-toast',
        message: '请上传照片！',
      });
    }
  },

  toast_close(e) {
    if (this.data.generateStatus) {
      wx.navigateBack({
        delta: 1
      });
    }
  },

  historyImgHandle(e) {
    this.setData({ historyImgSelectIndex: e.currentTarget.dataset.index })
    if (this.data.input_img_count == 1) {
      this.setData({
        thumb_list: [this.data.historyImgList[e.currentTarget.dataset.index].source_img_url],
        uploadStatus: false,
        imageStatus: true
      });
    } else {
      if (this.data.thumb_list.length == 2) {
        this.setData({
          uploadStatus: false,
          imageStatus: true
        });
      } else {
        let imgArr = this.data.thumb_list.concat(this.data.historyImgList[e.currentTarget.dataset.index].source_img_url);
        this.setData({
          thumb_list: imgArr,
          uploadStatus: false,
          imageStatus: true
        });
      }
    }
  },

  ballMoveEvent(e) {
    let left = e.touches[0].pageX
    let rightLimit = wx.getSystemInfoSync().windowWidth - 222  //减去页面内边距

    if (left < 0) {
      left = 0;
    }
    if (left >= rightLimit) {
      left = rightLimit;
    }
    this.setData({
      left
    });
  },

  styleClickHandle(e) {
    let styleObj = this.data.styleList[e.target.id];
    this.setData({ afterUrl: styleObj.view_before_img_url, frontUrl: styleObj.view_after_img_url, styleSelectIndex: e.target.id, prompt_id: styleObj.prompt_id });
    this.getStyleInfo();
  },

  getGuid() {
    var guid = ""
    for (var i = 1; i <= 32; i++) {
      var n = Math.floor(Math.random() * 16.0).toString(16);
      guid += n;
      if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
        guid += "-";
    }
    return guid;
  },
});