daliangzao/customized/pages/boxMade/boxMade.js

// pages/customized/made/made.js
import * as util from '../../../utils/util.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataPositionObj: {},
    propSize: {},
    isActive: '5', // 默认是正面
    obverseImgObject: {
      '5': '/customized/images/customized/box_white_big_1.png',
      /*正面 */
      '6': '/customized/images/customized/box_white_big_2.png',
      /*反面 */
    },
    imgTouch: {}, // 图片的对象,分为正面，侧面，手柄，底部
    fontTouch: {}, //文字的对象，分为正面，侧面，手柄，底部
    imgAnimationData: {}, // 图片的旋转
    fontAnimationData: {}, // 文字的旋转
    touchStatic: true,
    fontContent: '可定制区域',
    rpx: 1, // 获取页面的rpx
    imgSrcArray: [],
    imgBuildArray: [], // 生成后图片的数组
    simulation: { // 模拟字体，获取字体的宽高
      fontContent: '',
      fontSize: '',
      height: '',
      width: '',
    },
    box: { // 盒子默认是白色正面
      static: true,
      left: 'box-white-1-left',
      right: 'box-white-1-right'
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        let rpx = res.windowWidth / 750;
        that.setData({
          rpx: rpx
        });
        console.log(rpx, 'rpx')
      },
    })
    if ('id' in options) {
      this.setData({
        isActive: options.id
      })
    }


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let that = this;
    // console.log('页面开始准备中'
    that.imgAnimation = 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"
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('onshow')
    let that = this;
    let cupNum = util.changeCup(that.data.isActive);
    console.log(cupNum)
    that.setData({
      dataPositionObj: cupNum.dataPositionObj,
      propSize: cupNum.propSize
    })
    that.getDataTouch(that)
  },

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

  },

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

  },

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

  },

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

  },

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

  },
  // changeCupImg(index){
  //   console.log(this.data.imgTouch,"this.data.imgTouch")
  //   let rpx = this.data.rpx;
  //   let canvasBg = this.data.obverseImgObject[index];
  //   const ctx = wx.createCanvasContext('madeContent');
  //   ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx)
  //   ctx.draw()
  // },
  changeCup(e) {
    // data-id== 1正面，2背面，3手柄，4杯底
    // this.changeCupImg(e.currentTarget.dataset.id);
    let that = this;
    let cupNum = util.changeCup(e.currentTarget.dataset.id);
    let box = {};
    if (e.currentTarget.dataset.id == 5) {
      box = {
        left: 'box-white-1-left',
        right: 'box-white-1-right'
      }
    }
    if (e.currentTarget.dataset.id == 6) {
      box = {
        left: 'box-white-2-left',
        right: 'box-white-2-right'
      }
    }
    that.setData({
      isActive: e.currentTarget.dataset.id,
      dataPositionObj: cupNum.dataPositionObj,
      propSize: cupNum.propSize,
      box: box
    })
    that.getDataTouch(that)

  },
  addImgRouter() {
    console.log('添加图片');
    wx.setStorageSync('box',this.data.box)
    wx.navigateTo({
      url: '/customized/pages/boxMade/boxMadeImg/boxMadeImg?id=' + this.data.isActive,
    })
  },
  addFontRouter() {
    console.log('添加文字');
    wx.setStorageSync('box', this.data.box)
    wx.navigateTo({
      url: '/customized/pages/boxMade/boxMadeFont/boxMadeFont?id=' + this.data.isActive,
    })
  },
  getDataTouch(that) {
    let madeTouchImg = wx.getStorageSync('madeCupImgData' + that.data.isActive)
    let madeTouchFont = wx.getStorageSync('madeCupFontData' + that.data.isActive)
    console.log(madeTouchImg, madeTouchFont, "madeTouchFontmadeTouchFont")
    if (madeTouchImg || madeTouchFont) {
      that.setData({
        touchStatic: false
      })
      if (madeTouchImg) {
        that.imgAnimation.rotate(madeTouchImg.angle).step();
        that.setData({
          imgAnimationData: that.imgAnimation.export(),
        })
      }
      if (madeTouchFont) {
        that.fontAnimation.rotate(madeTouchFont.angle).step();
        that.setData({
          fontAnimationData: that.fontAnimation.export(),
        })
        that.setData({
          'simulation.fontContent': madeTouchFont.fontContent,
          'simulation.fontSize': madeTouchFont.fontSize
        })
        that.getTouchFontInformation(that)
      }


    } else {
      that.setData({
        touchStatic: true
      })
    }

    that.setData({
      imgTouch: madeTouchImg ? madeTouchImg : {}, //存储图片数据
      fontTouch: madeTouchFont ? madeTouchFont : {},
    })
  },
  finishDesign() { // 完成设计
    let that = this;
    let designObj = {
        '5': '正面',
        '6': '背面',
      },
      designVal = '',
      madeStatic = false;
    for (let i = 5; i < 7; i++) {
      if (!wx.getStorageSync('madeCupImgData' + i) && !wx.getStorageSync('madeCupFontData' + i)) {
        designVal += designObj[i] + ','
      } else {
        madeStatic = true; // 表示已经有设计过的页面
      }
    }
    if (madeStatic) {
      if (!designVal) {
        console.log('可以完成')
        wx.navigateTo({
          url: '/customized/pages/boxMade/boxComb/boxComb'
        })
      } else {
        wx.showModal({
          title: '温馨提示',
          content: '您的' + designVal.substring(0, designVal.length - 1) + '还没有设计，是否确定不设计了？',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定,不设计了，直接完成')
              // wx.showToast({
              //   title: '图片合成中...',
              //   icon: 'loading'
              // })
              // that.getBuildImg(that)
              wx.navigateTo({
                url: '/customized/pages/boxMade/boxComb/boxComb'
              })
            } else {
              console.log('用户点击取消')
            }
          }
        })
      }
    } else {
      wx.showToast({
        title: '您还没有设计',
        icon: 'none'
      })
    }
  },
  getTouchFontInformation(that) {
    let query = wx.createSelectorQuery();
    query.select('#simulation').boundingClientRect()
    query.exec(function (res) {
      console.log(res, "获取font的宽高");
      that.setData({
        'simulation.height': res[0].height,
        'simulation.width': res[0].width
      });
      wx.setStorageSync('simulationFont' + that.data.isActive, that.data.simulation);
    })
  },
})