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: 184,
      left: 305,
      width: 218,
      height: 218,

    },
    propSize: {
      top: '5cm',
      right: '5cm',
      bottom: '5cm',
      left: '5cm',
    },
    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, // 选中图片后的路径
    imgTouch: {
      isActive: '1', // 1表示是正面
      src: null,
      x: 0,
      y: 0,
      clientX: 0,
      clientY: 0,
      width: null, // 图片的宽度
      height: null,
      scale: 1, // 图片宽高比例
      angle: 0, // 旋转度数
    },
    fontTouch:{},//文字对象
    fontAnimationData:{},
  },

  /**
   * 生命周期函数--监听页面加载
   */
  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"
    })
    that.fontAnimation = 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({
          imgTouch: madeTouchImg,
          animationData: this.animation.export(),
          dataPositionObj: cupNum.dataPositionObj,
          propSize: cupNum.propSize,
          madeStatic: true,
        });
      } else {
        that.setData({
          'imgTouch.isActive': options.id,
          dataPositionObj: cupNum.dataPositionObj,
          propSize: cupNum.propSize
        });
      }
      


    }
  },

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

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

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

  },

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

  },

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

  },

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

  },

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

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

    // console.log(this.data.touch)
  },
  imgDelete() { // 图片删除
    let that = this;
    that.setData({
      'imgTouch.src': null,
      madeStatic: false, // 表示已经有图片
    })
  },
  imgEnlarge(e) {
    let that = this;
    console.log(e.detail.value, 'eee')
    that.setData({
      'imgTouch.width': e.detail.value,
      'imgTouch.height': e.detail.value / that.data.imgTouch.scale
    })
  },
  imgRotate(e) { // 旋转
    this.animation.rotate(e.detail.value).step();
    this.setData({
      animationData: this.animation.export(),
      'imgTouch.angle': e.detail.value
    })
  },
  getImgList() { // 根据userid 获取图片列表
    // /queryCustomGoodsUserListByUserId
    wx.showLoading({
      title: '加载中...',
      icon: 'none'
    })
    let that = this
    wx.request({
      url: host + '/queryImgListByPlaceIdAndGoodsId',
      data: {
        userId: app.globalData.user_id,
        customGoodsId: 1, // 商品id
        customGoodsImgPlaceId: that.data.imgTouch.isActive * 1 - 1
      },
      type: 'get',
      success(res) {
        console.log(res, '图片列表请求结束')
        that.setData({
          imageArray: res.data
        })
      },
      complete() {
        wx.hideLoading()
      }
    })

  },
  uploadImg() {
    console.log('点击上传图片');
    let that = this;
    wx.chooseImage({
      success(res) {
        const tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: host + 'adminFileUpload', // 仅为示例，非真实的接口地址
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            file: tempFilePaths[0],
            userId: app.globalData.user_id,
            customGoodsId: wx.getStorageSync('detail').id,
            customGoodsImgPlaceId: that.data.imgTouch.isActive * 1 - 1
          },
          success(res) {
            console.log(res, '我上传完了')
            let src = host + res.data
            that.getScale(that, src);
            that.setData({
              'imgTouch.src': src,
              madeStatic: true, // 表示已经有图片
            })
            that.getImgList()
          }
        })
      }
    })
  },
  selectImgBtn(e) {
    console.log('选中图片', e.currentTarget.dataset.id);
    this.setData({
      imageId: e.currentTarget.dataset.id,
      imageSrc: e.currentTarget.dataset.src
    })
    this.addImg();
    // '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({
          'imgTouch.width': that.data.dataPositionObj.width,
          'imgTouch.height': res.height * that.data.dataPositionObj.width / res.width,
          'imgTouch.scale': res.width / res.height, // 宽高比例
        })
        console.log(that.data.imgTouch)
      }
    })
  },
  addImg() { // 添加图片
    let that = this;
    if (that.data.imageSrc) {
      that.setData({
        'imgTouch.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.imgTouch.isActive, this.data.imgTouch);
      wx.navigateBack()
      // wx.redirectTo({
      //   url: '/customized/pages/made/made?id=' + this.data.touch.isActive
      // })
    } else {
      wx.showToast({
        title: '您还没有选择图片进行设计',
        icon: 'none'
      })
    }
  },
  getDataTouch(that) {
    let madeTouchFont = wx.getStorageSync('madeCupFontData' + that.data.imgTouch.isActive)
    console.log(madeTouchFont,"madeTouchFont")
    if (madeTouchFont) {
      console.log(that.fontAnimation,"that.fontAnimation")
        that.fontAnimation.rotate(madeTouchFont.angle).step();
        that.setData({
          fontAnimationData: that.fontAnimation.export(),
          fontTouch: madeTouchFont ? madeTouchFont : {},
          madeStatic: true,
        })
    } 
  },
})