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: {},
    imgTouch: {}, // 图片的对象,分为正面，侧面，手柄，底部
    fontTouch: {}, //文字的对象，分为正面，侧面，手柄，底部
    imgAnimationData: {}, // 图片的旋转
    fontAnimationData: {}, // 文字的旋转
    touchStatic: true,
    fontContent: '可定制区域',
    rpx: 1, // 获取页面的rpx
    imgSrcArray: [],
    imgBuildArray: [], // 生成后图片的数组
    simulation: { // 模拟字体，获取字体的宽高
      fontContent: '',
      fontSize: '',
      height: '',
      width: '',
    },
    dataId:['5','6']
  },

  /**
   * 生命周期函数--监听页面加载
   */
  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,
        dataId: options.dataId.split(',')
      })
    }


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  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,"changeCup")
    that.setData({
      dataPositionObj: cupNum.dataPositionObj,
      propSize: cupNum.propSize,
      obverseImgObject: util.changeImg
    })
    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) {
    console.log(e,"点击了e")
    let that = this;
    let cupNum = util.changeCup(e.currentTarget.dataset.id);
    that.setData({
      isActive: e.currentTarget.dataset.id,
      dataPositionObj: cupNum.dataPositionObj,
      propSize: cupNum.propSize,
    })
    that.getDataTouch(that)

  },
  addImgRouter() {
    console.log('添加图片');
    wx.setStorageSync('box',this.data.box)
    wx.navigateTo({
      url: '/customized/pages/boxMade/boxMadeImg/boxMadeImg?id=' + this.data.isActive+'&dataId='+this.data.dataId,
    })
  },
  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 = ['正面','背面'],
      designVal = '',
      madeStatic = false;
    for (let i = that.data.dataId[0] * 1; i <= that.data.dataId[1] * 1; i++) {
      if (!wx.getStorageSync('madeCupImgData' + i) && !wx.getStorageSync('madeCupFontData' + i)) {
        designVal += designObj[i - that.data.dataId[0] * 1] + ','
      } else {
        madeStatic = true; // 表示已经有设计过的页面
      }
    }
    if (madeStatic) {
      if (!designVal) {
        console.log('可以完成')
        wx.navigateTo({
          url: '/customized/pages/boxMade/boxComb/boxComb?dataId=' + that.data.dataId
        })
      } else {
        wx.showModal({
          title: '温馨提示',
          content: '您的' + designVal.substring(0, designVal.length - 1) + '还没有设计，是否确定不设计了？',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定,不设计了，直接完成')
              wx.navigateTo({
                url: '/customized/pages/boxMade/boxComb/boxComb?dataId=' + that.data.dataId
              })
            } 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);
    })
  },
})