daliangzao/customized/pages/made/madeImg/madeImg.js

// pages/customized/made/madeImg/madeImg.js
import * as util from '../../../../utils/util.js'
let app = getApp();
let host = app.globalData.servsers; // 请求的url
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataPositionObj: { //正面数据
      top: '156rpx',
      left: '286rpx',
      width: '',
      height: '',
      
    },
    propSize: {
      top: '8cm',
      right: '8cm',
      bottom: '8cm',
      left: '8cm',
    },
    host:null,
    obverseImgObject: {
      '1': '/customized/images/customized/cup_black_big.png',/*正面 */
      '2': '/customized/images/customized/cup_black_side.png',/*侧面面 */
      '3': '/customized/images/customized/cup_black_handle.png',/*手柄 */
      '4': '/customized/images/customized/cup_black_bottom.png',/*底部 */
    },
    fontContent: '可定制区域',
    madeImg: null, // 定制图 
    madeStatic: false, // 定制状态，表示是否已经定制了,false 表示没有定制
    animationData: {},//旋转动画
    imageArray:[],//请求数据后的图片列表
    imageId: null, // 用户选中图片的id
    imageSrc:null, // 选中图片后的路径
    touch:{
      isActive: '1', // 1表示是正面
      src: null,
      x:0,
      y:0,
      clientX:0,
      clientY:0,
      width:null, // 图片的宽度
      height:null,
      scale:1, // 图片宽高比例
      angle: 0, // 旋转度数
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this
    that.animation = wx.createAnimation({
      timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
    })
    if('id' in options){
      let cupNum = util.changeCup(options.id);
      let madeTouchImg = wx.getStorageSync('madeCupImgData' + options.id);
      if (madeTouchImg){
        that.animation.rotate(madeTouchImg.angle).step();
        that.setData({
          touch: madeTouchImg,
          animationData: this.animation.export(),
          dataPositionObj: cupNum.dataPositionObj,
          propSize: cupNum.propSize,
          madeStatic:true,
        });
      }else {
        that.setData({
          'touch.isActive': options.id,
          dataPositionObj: cupNum.dataPositionObj,
          propSize: cupNum.propSize
        });
      }
      

      
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let that = this;
    that.setData({
      host:host,
    })
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getImgList();
  },

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

  },

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

  },

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

  },

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

  },

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

  },
  // touch 事件
  fontTouchstart(e) {
    //1.获取鼠标点击下去的
    this.setData({
      "touch.clientX": e.touches[0].clientX - this.data.touch.x,
      "touch.clientY": e.touches[0].clientY - this.data.touch.y
    });
    console.log(this.data.touch, "touch")
  },
  fontTouchmove(e) {
    // 鼠标移动的位置
    this.setData({
      "touch.x": e.changedTouches[0].clientX - this.data.touch.clientX,
      "touch.y": e.changedTouches[0].clientY - this.data.touch.clientY
    });

    // console.log(this.data.touch)
  },
  imgDelete(){ // 图片删除
    let that = this;
    that.setData({
      'touch.src': null,
      madeStatic: false, // 表示已经有图片
    })
  },
  imgEnlarge(e){
    let that = this;
    console.log(e.detail.value,'eee')
    that.setData({
      'touch.width': e.detail.value,
      'touch.height': e.detail.value/that.data.touch.scale
    })
  },
  imgRotate(e) { // 旋转
    this.animation.rotate(e.detail.value).step();
    this.setData({
      animationData: this.animation.export(),
      'touch.angle': e.detail.value
    })
  },
  getImgList(){ // 根据userid 获取图片列表
    // /queryCustomGoodsUserListByUserId
    let that = this
    wx.request({
      url: host+'/queryCustomGoodsUserListByUserId',
      data:{
        userId: app.globalData.user_id,
      },
      type:'get',
      success(res){
        console.log(res,'图片列表请求结束')
        that.setData({
          imageArray:res.data
        })
      }
    })
   
  },
  uploadImg(){
    console.log('点击上传图片');
    let that = this;
    wx.chooseImage({
      success(res) {
        const tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: host + '/fileUpload', // 仅为示例，非真实的接口地址
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            file: tempFilePaths[0],
            userId: app.globalData.user_id,
          },
          success(res) {
            console.log(res,'我上传完了')
            that.getImgList()
          }
        })
      }
    })
  },
  selectImgBtn(e){
    console.log('选中图片', e.currentTarget.dataset.id);
    this.setData({
      imageId: e.currentTarget.dataset.id,
      imageSrc: e.currentTarget.dataset.src
    })
    // 'touch.src': e.currentTarget.dataset.src,
      // madeStatic: true, // 表示已经有图片
    // this.getScale(this, e.currentTarget.dataset.src);
  },
  getScale(that,src){ // 获取图片的比例
    wx.getImageInfo({
      src: src,
      success: function (res) {
        console.log(res, "fff")
        that.setData({
          'touch.width': res.width,
          'touch.height': res.height,
          'touch.scale': res.width / res.height, // 宽高比例
        })
        console.log(that.data.touch)
      }
    })
  },
  addImg(){ // 添加图片
    let that = this;
    if (that.data.imageSrc){
      that.setData({
        'touch.src': that.data.imageSrc,
        madeStatic: true, // 表示已经有图片
      })
      that.getScale(that, that.data.imageSrc)
    } else {
      wx.showToast({
        title: '您还没有选中图片',
        icon: 'none'
      })
    }
  },
  madeConfirm(){
    // 确认设计
    if (this.data.madeStatic){ // 设计完成存储数据
      wx.setStorageSync('madeCupImgData'+this.data.touch.isActive, this.data.touch);
      wx.navigateBack()
      // wx.redirectTo({
      //   url: '/customized/pages/made/made?id=' + this.data.touch.isActive
      // })
    } else {
      wx.showToast({
        title: '您还没有选择图片进行设计',
        icon:'none'
      })
    } 
  }
})