添加图片

app.json

@@ -109,7 +109,11 @@
         "pages/address/add/add",
         "pages/order/order",
         "pages/result/result",
-        "pages/goodsDetail/goodsDetail"
+        "pages/goodsDetail/goodsDetail",
+        "pages/boxMade/boxMade",
+        "pages/boxMade/boxMadeImg/boxMadeImg",
+        "pages/boxMade/boxMadeFont/boxMadeFont",
+        "pages/boxMade/boxComb/boxComb"
       ]
     }
   ],

customized/pages/boxMade/boxComb/boxComb.js

@@ -0,0 +1,432 @@
+// customized/pages/made/combination/combination.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,
+    },
+    imgTouch: {
+      isActive: "1",
+      src: "https://dlz.info666.com//temp/d945bfb0-5cc6-406d-a814-cf63b099041f.jpg",
+      x: -82,
+      y: 17,
+      clientX: 195,
+      clientY: 121,
+      width: 517,
+      height: 208.17866666666666,
+      scale: 2.4834437086092715,
+      angle: 27
+    },
+    fontTouch: {
+      isActive: "1",
+      fontContent: "Gg",
+      isColor: "#ffffff",
+      x: 10,
+      y: 10,
+      angle: 0,
+      fontSize: 100,
+      clientX: 0,
+      clientY: 0,
+      width: 138.34375,
+      height: 132
+    },
+    rpx: 1,
+    obverseImgObject:['', '/customized/images/customized/cup_black_big.png', '/customized/images/customized/cup_black_side.png', '/customized/images/customized/cup_black_handle.png', '/customized/images/customized/cup_black_bottom.png'],
+    // obverseImgObject: {
+    //   '1': ,
+    //   /*正面 */
+    //   '2': '/customized/images/customized/cup_black_side.png',
+    //   /*侧面面 */
+    //   '3': '/customized/images/customized/cup_black_handle.png',
+    //   /*手柄 */
+    //   '4': '/customized/images/customized/cup_black_bottom.png',
+    //   /*底部 */
+    // },
+    imgSrcArray: [],
+    buildSrcArrayText:{
+      '1':'正面',
+      '2':'侧面',
+      '3':'手柄',
+      '4':'底部',
+    },
+    buildSrcArray: [],
+    customGoodsImg:"",
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    
+    // if (wx.getStorageSync('madeCupImgData1')) {
+    //   this.setData({
+    //     imgTouch: wx.getStorageSync('madeCupImgData1')
+    //   })
+    // }
+    // if (wx.getStorageSync('madeCupFontData1')) {
+    //   this.setData({
+    //     fontTouch: wx.getStorageSync('madeCupFontData1')
+    //   })
+    // }
+
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+    wx.showLoading({
+      title: '图片合成中...'
+    })
+    let that = this, result = true;
+    // for (let i = 1; i <= 4; i++) {
+    //   if (wx.getStorageSync('madeCupImgData' + i) || wx.getStorageSync('madeCupFontData' + i)) {
+    //     console.log(i, "iiiii")
+    //     that.getCombImg(that, i);
+    //   }
+    // }
+
+    if (wx.getStorageSync('madeCupImgData1') || wx.getStorageSync('madeCupFontData1')) {
+      that.getCombImg(that, 1);
+      result = false
+    } else if (wx.getStorageSync('madeCupImgData2') || wx.getStorageSync('madeCupFontData2')) {
+      that.getCombImg(that, 2);
+      result = false
+    } else if (wx.getStorageSync('madeCupImgData3') || wx.getStorageSync('madeCupFontData3')) {
+      that.getCombImg(that, 3);
+      result = false
+    } else if (wx.getStorageSync('madeCupImgData4') || wx.getStorageSync('madeCupFontData4')) {
+      that.getCombImg(that, 4);
+      result = false
+    }
+
+    if (result) {
+      wx.hideLoading();
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+  
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  getCombImg(that,i) {
+    let imgTouch = null, dataPositionObj=null;
+    that.setData({ // imgSrcArray 初始化
+      imgSrcArray:[],
+    })
+    console.log(wx.getStorageSync('madeCupImgData' + i),"wx.getStorageSync('madeCupImgData' + i)")
+    if(wx.getStorageSync('madeCupImgData' + i)){
+      imgTouch = wx.getStorageSync('madeCupImgData'+i);
+      dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
+      console.log(dataPositionObj,"dataPositionObj")
+      wx.getSystemInfo({
+        success: function (res) {
+          let rpx = res.windowWidth / 750;
+          that.setData({
+            rpx: rpx
+          });
+          wx.downloadFile({
+            url: imgTouch.src, // 仅为示例，并非真实的资源
+            success(res) {
+              // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
+              console.log(res)
+              if (res.statusCode === 200) {
+                // canvas截图区域与图片的宽度比例
+                let dWidth = dataPositionObj.width / imgTouch.width;
+                // canvas截图区域与图片的高度比例
+                let dHeight = dataPositionObj.height / imgTouch.height;
+                const ctx = wx.createCanvasContext('comb-img'+i);
+                //画布中点坐标转移到图片中心
+                let movex = imgTouch.x + imgTouch.width * rpx / 2;
+                let movey = imgTouch.y + imgTouch.height * rpx / 2;
+                ctx.translate(movex, movey);
+                ctx.rotate(imgTouch.angle * Math.PI / 180);
+                ctx.drawImage(res.tempFilePath, -imgTouch.width * rpx / 2, -imgTouch.height * rpx / 2, imgTouch.width * rpx, imgTouch.height * rpx)
+                ctx.draw(false,function () {
+                  wx.canvasToTempFilePath({
+                    canvasId: 'comb-img'+i,
+                    success: function (res) {
+                      console.log(res)
+                      let imgArray = that.data.imgSrcArray;
+                      imgArray.push(res.tempFilePath)
+                      that.setData({
+                        imgSrcArray: imgArray
+                      })
+                      that.getCombFont(that,i,true);
+                    }
+                  }, that)
+                })
+              }
+            }
+          })
+
+        },
+      })
+    } else {
+      that.getCombFont(that,i,false);
+    }
+    
+    
+    
+  },
+  getCombFont(that,i,_static) {
+    let fontTouch = null, dataPositionObj = null, simulationFont=null;
+    if (wx.getStorageSync('madeCupFontData' + i)) {
+      fontTouch = wx.getStorageSync('madeCupFontData' + i);
+      simulationFont = wx.getStorageSync('simulationFont' + i);
+      dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
+      const ctx = wx.createCanvasContext('comb-font'+i);
+      // ctx.textBaseline = 'top';
+      ctx.setFontSize(fontTouch.fontSize);
+      ctx.setFillStyle(fontTouch.isColor);
+      if(fontTouch.bold){
+        ctx.fillText(fontTouch.fontContent, -1, simulationFont.height / 5 * 4)
+        ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4 -1)
+      }
+      ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4)
+      if (fontTouch.bold) {
+        ctx.fillText(fontTouch.fontContent, 1, simulationFont.height / 5 * 4)
+        ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4 + 1)
+      }
+      ctx.restore()
+      // ctx.font = `'bold' ${fontTouch.fontSize} ${fontTouch.isColor} 'sans-serif'`;
+      // const metrics = ctx.measureText(fontTouch.fontContent)
+      // let movex = fontTouch.x + metrics.width / 2;
+      // let movey = fontTouch.y + simulationFont.height / 2;
+      // ctx.translate(movex, movey);
+      // ctx.rotate(fontTouch.angle * Math.PI / 180);
+      // ctx.fillText(fontTouch.fontContent, -metrics.width / 2, -simulationFont.height / 2 + simulationFont.height / 5 * 4);
+      // ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4)
+      ctx.draw(false,function () {
+        wx.canvasToTempFilePath({
+          canvasId: 'comb-font'+i,
+          success: function (res) {
+            console.log(res)
+            that.getCombFontImg(that, res.tempFilePath, fontTouch,i)
+            // let imgArray = that.data.imgSrcArray;
+            // imgArray.push(res.tempFilePath)
+            // that.setData({
+            //   imgSrcArray: imgArray
+            // })
+            // console.log(that.data.imgSrcArray, "that.data.imgSrcArray")
+            // that.getComb(that, that.data.imgSrcArray,i,true)
+          }
+        }, that)
+      })
+    } else {
+      that.getComb(that, that.data.imgSrcArray, i, _static)
+    }
+    
+  },
+  getCombFontImg(that, img, fontTouch,i){ // 生产字体图片后在进行处理一次
+    wx.getSystemInfo({
+      success: function (res) {
+        let rpx = res.windowWidth / 750;
+        that.setData({
+          rpx: rpx
+        });
+            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
+            console.log(res)
+              // canvas截图区域与图片的宽度比例
+              const ctx = wx.createCanvasContext('comb-font' + i + '-2');
+              //画布中点坐标转移到图片中心
+              let movex = fontTouch.x + 218 * rpx / 2;
+              let movey = fontTouch.y + 218 * rpx / 2;
+              ctx.translate(movex, movey);
+              ctx.rotate(fontTouch.angle * Math.PI / 180);
+              ctx.drawImage(img, -218 * rpx / 2, -218 * rpx / 2, 218 * rpx, 218 * rpx)
+              ctx.draw(false, function () {
+                wx.canvasToTempFilePath({
+                  canvasId: 'comb-font' + i + '-2',
+                  success: function (res) {
+                    console.log(res)
+                     let imgArray = that.data.imgSrcArray;
+                    imgArray.push(res.tempFilePath)
+                    that.setData({
+                      imgSrcArray: imgArray
+                    })
+                    that.getComb(that, that.data.imgSrcArray,i,true)
+                  }
+                }, that)
+              })
+      },
+    })
+  },
+  getComb(that, imgSrcArray,i,_static) {
+    console.log(imgSrcArray,"imgSrcArray")
+    if(_static){
+      let imgTouch = wx.getStorageSync('madeCupImgData' + i);
+      let dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
+      let canvasBg = that.data.obverseImgObject[i];
+      console.log(canvasBg)
+      wx.getSystemInfo({
+        success: function (res) {
+          let rpx = res.windowWidth / 750;
+          that.setData({
+            rpx: rpx
+          });
+          const ctx = wx.createCanvasContext('comb-canvas' + i);
+          ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx);
+          // 设置背景
+          ctx.draw(true)
+          imgSrcArray.forEach((res) => {
+            ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
+          })
+          ctx.draw(true, function () {
+            wx.canvasToTempFilePath({
+              canvasId: 'comb-canvas' + i,
+              success: function (res) {
+                that.uploadFile(res.tempFilePath,that,function(data){
+                  console.log(res, "合成成功");
+                  let buildSrcArray = that.data.buildSrcArray;
+
+                  buildSrcArray.push({
+                    src: res.tempFilePath,
+                    isActive: i,
+                  });
+                  console.log(buildSrcArray, "buildSrcArray")
+                  that.setData({
+                    buildSrcArray: buildSrcArray,
+                  })
+                  console.log(that.data.buildSrcArray, "buildSrcArray")
+                  if (i < 4) {
+                    i = i + 1
+                    that.getCombImg(that, i);
+                  } else {
+                    wx.hideLoading()
+                  }
+                })
+                
+              },
+              fail: function (err) {
+                console.log(err, "合成失败")
+                wx.hideLoading();
+              }
+            }, that)
+          })
+        },
+      })
+    } else {
+      if (i < 4) {
+        i = i + 1
+        that.getCombImg(that, i);
+      } else {
+        wx.hideLoading()
+      }
+    }
+    
+  },
+  addImgRouter(){ // add car
+  let that = this;
+    console.log(that.data.customGoodsImg,"that.data.customGoodsImg")
+    
+    wx.request({
+      url: host + '/addShopCar',
+      method:'post',
+      header: {
+        'content-type': 'application/x-www-form-urlencoded'
+      },
+      data:{
+        customGoodsImg: that.data.customGoodsImg.substring(0, that.data.customGoodsImg.length-1),
+        customGoodsName:'奶缸-黑色 350ml',
+        customGoodsNum: 1,
+        userId: app.globalData.user_id,
+      },
+      success:function(res){
+        console.log(res,"加入购物车")
+        if(res.data ==='success'){
+          wx.showModal({
+            title: '提示',
+            content: '加入购物车成功,是否去购物车结算商品？',
+           
+            success:function(res){
+              if (res.confirm) {
+                console.log('用户点击确定')
+                wx.redirectTo({
+                  url: '/customized/pages/car/car',
+                })
+              } else if (res.cancel) {
+                console.log('用户点击取消')
+              }
+            }
+          })
+        }
+      }
+    })
+  },
+  uploadFile(path,that,cb){
+    let customGoodsImg = that.data.customGoodsImg;
+    wx.uploadFile({
+      url: host + 'fileUpload',
+      filePath: path,
+      name: 'file',
+      formData: {
+        file: path,
+        userId: app.globalData.user_id,
+        imgStatus: 1,// 表示合成
+      },
+      success: function (res) {
+        console.log(res, "rrrr");
+        customGoodsImg += res.data+',';
+        that.setData({
+          customGoodsImg: customGoodsImg
+        })
+        cb(true)
+      },
+      fail: function (res) {
+        cb(false)
+      }
+    })
+  }
+
+})

customized/pages/boxMade/boxComb/boxComb.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

customized/pages/boxMade/boxComb/boxComb.wxml

@@ -0,0 +1,36 @@
+<view style="position:fixed;top:999999999999999999999rpx;">
+  <!-- 正面 -->
+  <canvas canvas-id="comb-canvas1" class="comb-content"></canvas>
+  <canvas canvas-id='comb-img1' class='comb-img'></canvas>
+  <canvas canvas-id='comb-font1' class='comb-font'></canvas>
+   <canvas canvas-id='comb-font1-2' class='comb-img'></canvas>
+  <!-- 背面 -->
+  <canvas canvas-id="comb-canvas2" class="comb-content"></canvas>
+  <canvas canvas-id='comb-img2' class='comb-img'></canvas>
+  <canvas canvas-id='comb-font2' class='comb-font'></canvas>
+   <canvas canvas-id='comb-font2-2' class='comb-img'></canvas>
+  <!-- 手柄 -->
+  <canvas canvas-id="comb-canvas3" class="comb-content"></canvas>
+  <canvas canvas-id='comb-img3' class='comb-img3'></canvas>
+  <canvas canvas-id='comb-font3' class='comb-font3'></canvas>
+   <canvas canvas-id='comb-font3-2' class='comb-img3'></canvas>
+  <!-- 杯底 -->
+  <canvas canvas-id="comb-canvas4" class="comb-content"></canvas>
+  <canvas canvas-id='comb-img4' class='comb-img4'></canvas>
+  <canvas canvas-id='comb-font4' class='comb-font4'></canvas>
+   <canvas canvas-id='comb-font4-2' class='comb-img4'></canvas>
+</view>
+<view class='comb-view-img'>
+  <cover-view class="pause" wx:for="{{buildSrcArray}}" bindtap="pause">
+      <cover-image class="img" src='{{item.src}}' />
+      <cover-view class="text">{{buildSrcArrayText[item.isActive]}}</cover-view>
+  </cover-view>
+</view>
+
+<view class='footer' hover-class="none">
+<view class='footer-box f-box'>
+  <view class='f-item f-box f-justify-content-center footer-btn f-s32 bg-green c-white' bindtap='addImgRouter' hover-class="none">加入购物车</view>
+</view>
+
+  <!-- <view class='f-item footer-btn f-s32' style='background:#ff7103;color:#fff' bindtap='addFontRouter' hover-class="none">立即购买</view> -->
+</view>

customized/pages/boxMade/boxComb/boxComb.wxss

@@ -0,0 +1,47 @@
+/* customized/pages/made/combination/combination.wxss */
+page{
+  background:#fff;
+}
+.comb-content{
+ width:750rpx;
+ height:588rpx;
+}
+.comb-img{
+  width:334rpx;
+  height:450rpx;
+}
+.comb-font,.comb-font4,.comb-font3{
+  width:218rpx;
+  height:218rpx;
+}
+.comb-img,.comb-img3{
+  background:rgb(255, 176, 29);
+}
+.comb-font,.comb-font3{
+  background:#2e8aec;
+}
+.comb-img3{
+  width:70rpx;
+  height:246rpx;
+}
+.comb-img4{
+  width:304rpx;
+  height:304rpx;
+}
+.comb-view-img .pause{
+  width:39%;
+  float:left;
+  background:#eee;
+  padding:8% 5%;
+  margin-bottom:2%;
+}
+.comb-view-img .pause:nth-child(odd){
+  margin-right:2%;
+}
+.comb-view-img .text{
+  margin:20rpx 0 0 0;
+  text-align: center;
+}
+.img-box{
+  height:auto;
+}

customized/pages/boxMade/boxMade.js

@@ -0,0 +1,257 @@
+// 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: '',
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  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)
+    that.setData({
+      isActive: e.currentTarget.dataset.id,
+      dataPositionObj: cupNum.dataPositionObj,
+      propSize: cupNum.propSize
+    })
+    that.getDataTouch(that)
+
+  },
+  addImgRouter() {
+    console.log('添加图片');
+    wx.navigateTo({
+      url: '/customized/pages/boxMade/boxMadeImg/boxMadeImg?id=' + this.data.isActive,
+    })
+  },
+  addFontRouter() {
+    console.log('添加文字');
+    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 = {
+      '1': '正面',
+      '2': '背面',
+      '3': '手柄',
+      '4': '杯底',
+    },
+      designVal = '',
+      madeStatic = false;
+    for (let i = 1; i < 5; 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/made/combination/combination',
+          url: '/customized/pages/made/comb/comb'
+        })
+      } 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/made/combination/combination',
+                url: '/customized/pages/made/comb/comb'
+              })
+            } 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);
+    })
+  },
+})

customized/pages/boxMade/boxMade.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "定制",
+  "backgroundColor": "#fff",
+  "usingComponents": {
+    "made-solid": "/components/component-made/made-solid"
+  }
+}

customized/pages/boxMade/boxMade.wxml

@@ -0,0 +1,43 @@
+
+<view class='content'>
+<view class='made-content'>
+  <view class='made-img-box'>
+    <image class='made-img-image' src='{{obverseImgObject[isActive]}}' mode="aspectFill"></image>
+    <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
+      <view class='f-box f-align-items-center f-justify-content-center made-prompt ' style='text-align:center' wx:if="{{touchStatic}}">{{fontContent}}</view>
+      <view class='made-box'>
+      <!-- img -->
+      <view wx:if="{{!touchStatic}}" class='edit-content' style='top:{{imgTouch.y}}px;left:{{imgTouch.x}}px'>
+        <view animation="{{imgAnimationData}}">
+          <image src="{{imgTouch.src}}" mode="aspectFit" style='width:{{imgTouch.width}}rpx;height:{{imgTouch.height}}rpx'></image>
+        </view>
+      </view>
+      <!-- font -->
+     <view wx:if="{{!touchStatic}}" class='made-prompt made-font' style='color:{{fontTouch.isColor}};font-size:{{fontTouch.fontSize}}px;width:{{999999999999999999999999}}rpx;height:{{dataPositionObj.height}}rpx;font-weight:{{fontTouch.bold}};'>
+        <view class='font-content' style='top:{{fontTouch.y}}px;left:{{fontTouch.x}}px;width:{{dataPositionObj.width}}rpx;height:{{dataPositionObj.height}}rpx;' animation="{{fontAnimationData}}">
+          <view id='touchFont' style='font-weight:{{fontTouch.bold ? "bold":""}}'>{{fontTouch.fontContent}}</view>
+        </view>
+      </view>
+      </view>
+    </made-solid>
+  </view>
+</view>
+<view class='btn-box'>
+  <view class='f-box f-justify-content-between'>
+    <button type="default" hover-class="none" bindtap="changeCup" data-id='5' class='{{isActive === "5" ? "active" : ""}}' size="mini">正面</button>
+    <button type="default" hover-class="none" bindtap="changeCup" data-id='6' class='{{isActive === "6" ? "active" : ""}}' size="mini">反面</button>
+  </view>
+</view>
+
+<view class='footer' hover-class="none">
+  <view class='footer-box f-box f-justify-content-between f-align-items-center'>
+    <view class='f-item footer-btn' bindtap='addImgRouter' hover-class="none">添加图片</view>
+    <view class='f-item footer-btn' bindtap='addFontRouter' hover-class="none">添加文字</view>
+    <view class='f-item footer-btn' bindtap='finishDesign' hover-class="none">完成设计</view>
+  </view>
+
+</view>
+
+</view>
+
+<text class='font-height' style='font-size:{{simulation.fontSize}}px;position:fixed;top:999999999999999999999rpx;' id='simulation'>{{simulation.fontContent}}</text>

customized/pages/boxMade/boxMade.wxss

@@ -0,0 +1,117 @@
+/* pages/customized/made/made.wxss */
+page{
+  background:#fff;
+}
+
+.made-content{
+ width:750rpx;
+ height:900rpx;
+}
+.made-content-canvas{
+ position:absolute;
+ top:0;
+ left:0;
+ /* opacity:0; */
+}
+.made-img-box{
+  margin-top:10rpx;
+  position: relative;
+}
+.made-prompt{
+  /* text-align: center; */
+  width:inherit;
+  height:inherit;
+}
+.made-img{
+  background:red;
+  width:270rpx;
+  height:270rpx;
+  padding:1rpx;
+  margin:0 auto;
+  position:fixed;
+  top:0;
+  left:0;
+}
+.made-img-image{
+  width:750rpx;
+  height:800rpx;
+}
+/* .made-font{
+  background:blue;
+  width:270rpx;
+  height:270rpx;
+  padding:1rpx;
+  margin:0 auto;
+} */
+.font-content{
+  display: inline-block;
+  position:relative;
+  width:218rpx;
+  height:218rpx;
+  /* border:2rpx dashed #e0e0e0; */
+  overflow: hidden;
+}
+.made-box{
+  position:relative;
+  width: inherit;
+  height: inherit;
+}
+.edit-content{
+   /* width:270rpx;
+  height:270rpx; */
+  position:absolute;
+  top:0;
+  left:0;
+  /* overflow: hidden; */
+  z-index:30;
+}
+.made-font{
+  position:absolute;
+  top:0;
+  left:0;
+  width:5555555555555rpx;
+  z-index:40;
+}
+.btn-box{
+  width:70%;
+  margin:10rpx auto;
+}
+.btn-box button{
+  width:200rpx;
+  background:none;
+  color:#c9c9c9;
+  font-size:32rpx;
+  margin-bottom:36rpx;
+  border:1rpx solid #c9c9c9;
+  box-shadow:none;
+}
+.btn-box button.active{
+  color:#00af66;
+  border:1rpx solid #00af66
+}
+.footer-btn{
+  border-left:1rpx solid #dcdcdc;
+  text-align: center;
+  border-top:2rpx solid #e0e0e0;
+}
+.footer-btn:first-child{
+  border-left:0rpx solid #dcdcdc;
+}
+
+.comb-img,.comb-font{
+  width:270rpx;
+  height:270rpx;
+}
+.comb-img{
+  background:rgb(255, 176, 29);
+}
+.comb-font{
+  background:#2e8aec;
+}
+.font-height{
+  color:red;
+}
+#touchFont{
+  height:99999999999rpx;
+  width:9999999999rpx;
+}

customized/pages/boxMade/boxMadeFont/boxMadeFont.js

@@ -0,0 +1,302 @@
+// pages/customized/made/madeFont/madeFont.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',
+      /*反面 */
+    },
+    // radarImg:null,
+    fontColorArray: ['#ffffff', '#000000', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0', '#920784'],
+    fontFamilyArray: ['Nomal', 'Monospace', 'Sans', 'Serif'], // 自带字体样式 
+    addFontStatic: false, // 添加文字
+    inputFont: null,
+    fontTouch: {
+      isActive: '1', // 表示正面
+      fontContent: '可定制区域',
+      isColor: '#ffffff', // 默认是白色
+      x: 10, // 字体的top值 x坐标
+      y: 10, // 字体的 left值，y坐标
+      angle: 0, // 旋转度数
+      fontSize: null,
+      clientX: 0, // 默认初始值
+      clientY: 0, // 默认初始值
+      width: 0,
+      height: 0,
+      bold:false,
+    },
+    imgFont:{}, // 图片对象
+    animationData: {}, //旋转动画
+    imgAnimationData: {}, // 图片的旋转
+    imgTouch:{},
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  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.imgAnimation = 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 madeTouchFont = wx.getStorageSync('madeCupFontData' + options.id);
+      if (madeTouchFont) {
+        that.animation.rotate(madeTouchFont.angle).step();
+        that.setData({
+          fontTouch: madeTouchFont,
+          animationData: that.animation.export(),
+          isActive: options.id,
+          dataPositionObj: cupNum.dataPositionObj,
+          propSize: cupNum.propSize
+        })
+      } else {
+        that.setData({
+          'fontTouch.isActive': options.id,
+          isActive: options.id,
+          dataPositionObj: cupNum.dataPositionObj,
+          propSize: cupNum.propSize
+        })
+      }
+
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+    let that = this;
+    that.changeCupImg('1');
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    this.getDataTouch(this)
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  changeCupImg(index) {
+
+    let canvasBg = this.data.obverseImgObject[index],
+      that = this;
+    // wx.getSystemInfo({
+    //   success: function (res) {
+    //     let rpx = res.windowWidth / 750;
+    //     const ctx = wx.createCanvasContext('madeContent');
+    //     ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx)
+    //     ctx.draw();
+    //     setTimeout(()=>{
+    //       that.handleCanvarToImg(that)
+    //     },1000)
+    //   },
+    // })
+  },
+  addFont() { // 添加文字
+    let that = this;
+    that.setData({
+      addFontStatic: true
+    })
+  },
+  fontCancel() {
+    this.setData({
+      addFontStatic: false
+    })
+  },
+  bindinput(e) {
+    this.setData({
+      inputFont: e.detail.value,
+    })
+  },
+  fontConfirm(e) {
+    let that = this;
+    if (that.data.inputFont) {
+      this.animation.rotate(0).step()
+      that.setData({
+        'fontTouch.fontContent': that.data.inputFont,
+        'fontTouch.fontSize': 30,
+        'fontTouch.angle': 0,
+        addFontStatic: false,
+        animationData: this.animation.export()
+      })
+      // that.getTouchFontInformation(that)
+      that.setData({
+        inputFont: null,
+      })
+    }
+  },
+  handleCanvarToImg(that) {
+    wx.canvasToTempFilePath({
+      x: 0,
+      y: 0,
+      width: 750,
+      height: 588,
+      canvasId: 'madeContent',
+      success: function (res) {
+        that.setData({
+          radarImg: res.tempFilePath,
+        })
+      }
+    });
+  },
+  selectColor(e) { // 选择颜色
+    this.setData({
+      'fontTouch.isColor': e.currentTarget.dataset.color
+    })
+  },
+  // touch 事件
+  fontTouchstart(e) {
+    //1.获取鼠标点击下去的
+    this.setData({
+      "fontTouch.clientX": e.touches[0].clientX - this.data.fontTouch.x,
+      "fontTouch.clientY": e.touches[0].clientY - this.data.fontTouch.y
+    });
+    console.log(this.data.fontTouch, "touch")
+  },
+  fontTouchmove(e) {
+    // 鼠标移动的位置
+    this.setData({
+      "fontTouch.x": e.changedTouches[0].clientX - this.data.fontTouch.clientX,
+      "fontTouch.y": e.changedTouches[0].clientY - this.data.fontTouch.clientY
+    });
+
+    // console.log(this.data.touch)
+  },
+  fontTouchend(e) {
+    console.log('移动结束', e)
+    console.log(this.data.fontTouch)
+  },
+  fontDelete() {
+    // 删除
+    let touch = {
+      fontContent: '可定制区域',
+      isColor: '#ffffff', // 默认是白色
+      x: 10, // 字体的top值 x坐标
+      y: 10, // 字体的 left值，y坐标
+      rotate: 180, // 旋转度数
+      fontSize: null,
+      clientX: 0, // 默认初始值
+      clientY: 0, // 默认初始值
+      width: 0,
+      height: 0,
+    }
+    this.setData({
+      fontTouch: touch,
+    })
+  },
+  fontEnlarge(e) { // 放大与缩小
+    console.log(e.detail)
+    this.setData({
+      'fontTouch.fontSize': e.detail.value
+    })
+  },
+  fontRotate(e) { // 旋转
+    this.animation.rotate(e.detail.value).step();
+    this.setData({
+      animationData: this.animation.export(),
+      'fontTouch.angle': e.detail.value
+    });
+  },
+  fontWeight(e) {
+    this.setData({
+      'fontTouch.bold': e.detail.value
+    })
+  },
+  madeConfirm() { // 设计完成进行确定
+    let that = this;
+    if (that.data.fontTouch.fontSize) {
+      that.getTouchFontInformation(that);
+      // wx.redirectTo({
+      //   url: '/customized/pages/made/made?id='+ this.data.isActive,
+      // })
+    } else {
+      wx.showToast({
+        title: '您还没有添加文字进行设计',
+        icon: 'none'
+      })
+    }
+  },
+  getTouchFontInformation(that) {
+    let query = wx.createSelectorQuery();
+    query.select('#touchFont').boundingClientRect()
+    query.exec(function (res) {
+      console.log(res, "获取font的宽高");
+      that.setData({
+        'fontTouch.width': res[0].width,
+        'fontTouch.height': res[0].height
+      });
+      wx.setStorageSync('madeCupFontData' + that.data.isActive, that.data.fontTouch);
+      wx.navigateBack()
+    })
+  },
+  getDataTouch(that) {
+    let madeTouchImg = wx.getStorageSync('madeCupImgData' + that.data.isActive)
+    if (madeTouchImg) {
+        that.imgAnimation.rotate(madeTouchImg.angle).step();
+      that.setData({
+        imgAnimationData: that.imgAnimation.export(),
+        imgTouch: madeTouchImg ? madeTouchImg : {}, //存储图片数据
+      })
+    } 
+
+    
+  },
+  weightBtn(){
+    let that = this;
+    that.setData({
+      'fontTouch.bold':!that.data.fontTouch.bold
+    })
+  }
+  
+
+})

customized/pages/boxMade/boxMadeFont/boxMadeFont.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "定制",
+  "backgroundColor": "#fff",
+  "usingComponents": {
+    "made-solid": "/components/component-made/made-solid"
+  }
+}

customized/pages/boxMade/boxMadeFont/boxMadeFont.wxml

@@ -0,0 +1,90 @@
+<!--pages/customized/made/madeFont/madeFont.wxml-->
+
+<view class='made-content'>
+  <!-- <canvas canvas-id='madeContent' class='made-content'></canvas> -->
+  <view class='made-img-box'>
+    <image src='{{obverseImgObject[isActive]}}'></image>
+    <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
+      <view class='f-box f-align-items-center f-justify-content-center made-prompt' style='text-align:center' wx:if="{{!fontTouch.fontSize && !imgTouch.src}}">{{fontTouch.fontContent}}</view>
+      <view class='made-box'>
+        <!-- img -->
+        <view wx:if="{{imgTouch.src}}" class='edit-content' style='top:{{imgTouch.y}}px;left:{{imgTouch.x}}px'>
+            <!-- <view class='iconfont icon-guanbi1 c-white icon-close' bindtap='imgDelete'></view> -->
+          <view animation="{{imgAnimationData}}">
+            <image src="{{imgTouch.src}}" mode="aspectFit" style='width:{{imgTouch.width}}rpx;height:{{imgTouch.height}}rpx'></image>
+          </view>
+        </view>
+        <!-- font -->
+        <view wx:if="{{fontTouch.fontSize}}" class='made-prompt made-font' style='color:{{fontTouch.isColor}};font-size:{{fontTouch.fontSize}}px;font-weight:{{fontTouch.bold}};'>
+          <view class='font-content' style='top:{{fontTouch.y}}px;left:{{fontTouch.x}}px;width:{{dataPositionObj.width}}rpx;height:{{dataPositionObj.height}}rpx;' bindtouchstart="fontTouchstart" animation="{{animationData}}" bindtouchmove="fontTouchmove" bindtouchend="fontTouchend">
+            <!-- <view class='iconfont icon-guanbi1 c-white icon-close' bindtap='fontDelete'></view> -->
+            <view  id='touchFont' style='font-weight:{{fontTouch.bold ? "bold":""}}'>{{fontTouch.fontContent}}</view>
+          </view>
+        </view>
+      </view>
+      
+    </made-solid>
+  </view>
+</view>
+<!-- <view class='public-prompt'>该预览为仿真效果图，具体请以实物为准</view> -->
+<view class='footer'>
+<view class='footer-box f-box'>
+ <navigator open-type="navigateBack" class="f-box f-align-items-center f-justify-content-center footer-icon">
+    <block>
+      <icon class='f-box' type="clear" />
+    </block>
+  </navigator>
+  <view class='f-item footer-upload-btn bg-orange c-white' bindtap='fontDelete' style='text-align:center' hover-class="none">清除文字</view>
+  <view class='f-item footer-add-btn bg-green c-white' bindtap='addFont'>添加文字</view>
+  <view class="f-box f-align-items-center footer-icon f-justify-content-center" bindtap='madeConfirm'>
+    <block>
+      <icon  class='f-box' color="#00af66" type="success" />
+    </block>
+  </view>
+</view>
+ 
+</view>
+<!-- slider -->
+<view class='slider-box' wx:if="{{fontTouch.fontSize}}">
+<!-- 大小 -->
+  <view class='f-box f-align-items-center mar-l20 mar-r20'>
+    <view class='f-s30'>放大</view>
+    <view class="body-view f-item">
+      <slider bindchanging="fontEnlarge" block-color="#00af66" block-size="16" min="20" max="280" value='{{fontTouch.fontSize}}' show-value/>
+    </view>
+  </view>
+  <view class='f-box f-align-items-center mar-l20 mar-r20'>
+    <!-- 度数 -->
+    <view class='f-s30'>旋转</view>
+    <view class="body-view f-item">
+      <slider bindchanging="fontRotate" block-color="#00af66" block-size="16" min="0" max="360" value='{{fontTouch.angle}}' show-value/>
+    </view>
+  </view>
+  <!-- <view class='f-box f-align-items-center mar-l20 mar-r20'> -->
+    <!-- 加粗 -->
+    <!-- <view class='f-s30'>加粗</view>
+    <view class="body-view f-item">
+      <slider bindchanging="fontWeight" block-color="#00af66" block-size="16" min="100" max="900" value='{{fontTouch.bold}}' show-value/>
+    </view> -->
+  <!-- </view> -->
+  
+</view>
+
+<!-- 文字层 -->
+<view class='font-ceng' wx:if="{{addFontStatic}}">
+  <view class="f-box f-justify-content-between">
+    <view class='font-cancel f-s32 c-white mar-l20 mar-t20' bindtap='fontCancel'>取消</view>
+    <view class='font-confirm f-s32 c-white mar-r20 mar-t20' bindtap='fontConfirm'>完成</view>
+  </view>
+  <view class='c-white f-box f-justify-content-center f-s26'>仅支持手机自带字体样式</view>
+  <view class="input-box">
+    <input placeholder-style="color:#fff" style='color:{{fontTouch.isColor}};font-weight:{{fontTouch.bold? 900:""}}' placeholder="可编辑文字" bindinput="bindinput" auto-focus />
+  </view>
+
+  <view class='font-color f-box f-justify-content-around'>
+    <view class='select-weight' bindtap='weightBtn' style='color:{{fontTouch.bold ? "#333":""}};background:{{fontTouch.bold ? "#fff":""}}'>粗</view>
+    <view wx:for="{{fontColorArray}}" class='{{fontTouch.isColor === item ? "isColor" : ""}}' data-color="{{item}}" bindtap='selectColor'>
+      <view style='background:{{item}}' class='font-item'></view>
+    </view>
+  </view>
+</view>

customized/pages/boxMade/boxMadeFont/boxMadeFont.wxss

@@ -0,0 +1,137 @@
+/* pages/customized/made/madeFont/madeFont.wxss */
+page{
+  background:#fff;
+}
+
+.made-img-box{
+  position:relative;
+  margin-top:10rpx;
+}
+.made-img-box image {
+  width:750rpx;
+  height:800rpx;
+}
+.made-prompt{
+  width:inherit;
+  height:inherit;
+}
+.made-box{
+  width:270rpx;
+  height:270rpx;
+  padding:1rpx;
+  margin:0 auto;
+  /* background:red; */
+}
+.footer-icon{
+  width:120rpx;
+}
+.footer-add-btn{
+  text-align: center
+}
+.made-font{
+  width:5555555555555rpx;
+}
+.font-content{
+  display: inline-block;
+  position:relative;
+  width:218rpx;
+  height:218rpx;
+  /* border:2rpx dashed #000; */
+  overflow: hidden;
+}
+#touchFont{
+  height:99999999999rpx;
+  width:9999999999rpx;
+}
+/* .font-content .iconfont{
+  position:absolute;
+  font-size:60rpx;
+  z-index:10;
+}
+.icon-close{
+  top:-50rpx;
+  left:-50rpx;
+} */
+.icon-rotate{
+  bottom:'-20rpx';
+  right:'-20rpx';
+}
+.slider-box{
+  /* margin-top:100rpx; */
+}
+
+
+
+/* 层样式 */
+.font-ceng{
+  width:100%;
+  height:100%;
+  position:fixed;
+  top:0;
+  left:0;
+  z-index:110000;
+  background:rgba(0,0,0,0.6);
+}
+.input-box input{
+  width:600rpx;
+  height:150rpx;
+  line-height:150rpx;
+  margin:50rpx auto;
+  text-align:center;
+  background:none;
+  border:2rpx dashed #fff;
+  color:#fff;
+  font-size:30rpx;
+  font-weight: bold;
+}
+.font-color{
+  width:600rpx;
+  margin:0 auto;
+}
+.font-item{
+  width:50rpx;
+  height:50rpx;
+  border-radius:50%;
+}
+.isColor{
+  width:40rpx;
+  height:40rpx;
+  border:5rpx solid #fff;
+  border-radius:50%;
+}
+.isColor .font-item{
+  width:30rpx;
+  height:30rpx;
+  border-radius:50%;
+  border:5rpx solid rgba(0,0,0,0.6);
+}
+.edit-content{
+ position:absolute;
+  top:0;
+  left:0;
+  z-index:30;
+}
+.made-box{
+  position:relative;
+  width: inherit;
+  height: inherit;
+}
+.made-font{
+  position:absolute;
+  top:0;
+  left:0;
+  width:5555555555555rpx;
+  z-index:40;
+}
+
+.select-weight{
+  font-size:32rpx;
+  font-weight: bold;
+  /* background:#fff; */
+  color:#fff;
+  width:50rpx;
+  height:50rpx;
+  text-align: center;
+  line-height:50rpx;
+  border-radius:5rpx;
+}

customized/pages/boxMade/boxMadeImg/boxMadeImg.js

@@ -0,0 +1,296 @@
+// 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: {},
+    propSize: {},
+    host: null,
+    obverseImgObject: {
+      '5': '/customized/images/customized/box_white_big_1.png',
+      /*正面 */
+      '6': '/customized/images/customized/box_white_big_2.png',
+      /*反面 */
+    },
+    fontContent: '可定制区域',
+    madeImg: null, // 定制图 
+    madeStatic: false, // 定制状态，表示是否已经定制了,false 表示没有定制
+    animationData: {}, //旋转动画
+    imageArray: [], //请求数据后的图片列表
+    imageId: null, // 用户选中图片的id
+    imageSrc: null, // 选中图片后的路径
+    imgTouch: {
+      isActive: '5', // 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: {
+        customGoodsId: 6, // 商品id,白色箱子是6
+        customGoodsImgPlaceId: that.data.imgTouch.isActive * 1 - 4
+      },
+      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 + 'fileUpload', // 仅为示例，非真实的接口地址
+          filePath: tempFilePaths[0],
+          name: 'file',
+          formData: {
+            file: tempFilePaths[0],
+            userId: app.globalData.user_id,
+            imgStatus: 0, // 表示素材
+          },
+          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({
+          '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,
+        })
+    } 
+  },
+})

customized/pages/boxMade/boxMadeImg/boxMadeImg.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "定制",
+  "backgroundColor": "#fff",
+  "usingComponents": {
+    "made-solid": "/components/component-made/made-solid"
+  }
+}

customized/pages/boxMade/boxMadeImg/boxMadeImg.wxml

@@ -0,0 +1,73 @@
+<view class='container'>
+  <view class='made-content'>
+    <view class='made-img-box'>
+      <image class='made-image' src='{{obverseImgObject[imgTouch.isActive]}}'></image>
+      <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
+        <view class='f-box f-align-items-center f-justify-content-center made-prompt' wx:if="{{!madeStatic}}">{{fontContent}}</view>
+        <view class='made-box'>
+          <!-- img -->
+          <view wx:if="{{madeStatic}}" class='edit-content' style='top:{{imgTouch.y}}px;left:{{imgTouch.x}}px'>
+            <!-- <view class='iconfont icon-guanbi1 c-white icon-close' bindtap='imgDelete'></view> -->
+            <view bindtouchstart="fontTouchstart" animation="{{animationData}}" bindtouchmove="fontTouchmove" bindtouchend="fontTouchend">
+              <image src="{{imgTouch.src}}" mode="aspectFit" style='width:{{imgTouch.width}}rpx;height:{{imgTouch.height}}rpx'></image>
+            </view>
+          </view>
+          <!-- font -->
+          <view wx:if="{{fontTouch.fontSize}}"   bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" class='made-prompt made-font' style='color:{{fontTouch.isColor}};font-size:{{fontTouch.fontSize}}px;font-weight:{{fontTouch.bold}};'>
+            <view class='font-content' style='top:{{fontTouch.y}}px;left:{{fontTouch.x}}px;' animation="{{fontAnimationData}}">
+              <view  id='touchFont' style='font-weight:{{fontTouch.bold ? "bold":""}}'>{{fontTouch.fontContent}}</view>
+            </view>
+          </view>
+        </view>
+      </made-solid>
+    </view>
+  </view>
+  <!-- 上传后的图片 -->
+  <view class='upload-box'>
+    <view class='f-box'>
+      <!-- <view class='upload-list'><button hover-class="none" class='upload-btn f-box f-align-items-center'>点击上传图片</button></view> -->
+      <scroll-view class="scroll-view_H f-box" scroll-x style="width: 100%">
+        <view wx:for="{{imageArray}}" wx:for-index="idx" wx:for-item="itemName" class='scroll-item {{itemName.id === imageId ? "active" : ""}}'><image src="{{host}}{{itemName.customGoodsImg}}" data-id='{{itemName.id}}' data-src='{{host}}{{itemName.customGoodsImg}}' mode="aspectFit" bindtap='selectImgBtn'></image></view>
+      </scroll-view>
+    </view>
+  </view>
+
+<!-- slider -->
+<view class='slider-box' wx:if="{{madeStatic}}">
+<!-- 大小 -->
+  <view class='f-box f-align-items-center mar-l20 mar-r20'>
+    <view class='f-s30'>放大</view>
+    <view class="body-view f-item">
+      <slider bindchanging="imgEnlarge" block-color="#00af66" block-size="16" min="20" max="1000" value='{{imgTouch.width}}' show-value/>
+    </view>
+  </view>
+  <view class='f-box f-align-items-center mar-l20 mar-r20'>
+    <!-- 度数 -->
+    <view class='f-s30'>旋转</view>
+    <view class="body-view f-item">
+      <slider bindchanging="imgRotate" block-color="#00af66" block-size="16" min="0" max="360" value='{{imgTouch.angle}}' show-value/>
+    </view>
+  </view>
+  
+  
+</view>
+
+  <!-- <view class='public-prompt'>该预览为仿真效果图，具体请以实物为准</view> -->
+  <view class='footer' hover-class='none'>
+  <view class='footer-box  f-box'>
+    <navigator open-type="navigateBack"  class="f-box f-align-items-center f-justify-content-center footer-icon">
+      <block>
+          <icon class='f-box' type="clear" />
+        </block>
+    </navigator>
+    <!-- <view class='f-item footer-upload-btn bg-orange c-white' bindtap='uploadImg' hover-class="none">上传图片</view> -->
+    <view class='f-item footer-upload-btn bg-orange c-white' bindtap='imgDelete' hover-class="none">清除图片</view>
+    <view class='f-item footer-add-btn bg-green c-white' bindtap='addImg' hover-class="none">添加图片</view>
+    <view class="f-box f-align-items-center footer-icon f-justify-content-center"  hover-class="none" bindtap='madeConfirm'>
+      <block>
+        <icon class='f-box' color="#00af66" type="success"/>
+      </block>
+    </view>
+    </view>
+  </view>
+</view>

customized/pages/boxMade/boxMadeImg/boxMadeImg.wxss

@@ -0,0 +1,116 @@
+page{
+  background:#fff;
+}
+
+.made-img-box{
+  position:relative;
+  margin-top:10rpx;
+}
+.made-image {
+  width:750rpx;
+  height:800rpx;
+}
+.made-prompt{
+  width:inherit;
+  height:inherit;
+}
+.made-box{
+  width:270rpx;
+  height:270rpx;
+  padding:1rpx;
+  margin:0 auto;
+}
+.upload-list{
+  width:120rpx;
+  height:120rpx;
+  border:2rpx solid #e0e0e0;
+  margin:0 10rpx;
+}
+.upload-btn{
+  width:120rpx;
+  height:120rpx;
+  line-height:50rpx;
+  background:none;
+  font-size:30rpx;
+}
+.upload-btn::after{
+  border:none;
+  border-radius:none;
+}
+.upload-box{
+  margin:5rpx 20rpx;
+}
+
+.edit-content{
+ position:absolute;
+  top:0;
+  left:0;
+  z-index:30;
+}
+/* .edit-content .iconfont{
+  position:absolute;
+  font-size:60rpx;
+  z-index:10;
+} */
+/* .icon-close{
+  top:-50rpx;
+  left:-50rpx;
+} */
+.footer-icon{
+  width:120rpx;
+}
+.footer-add-btn,.footer-upload-btn{
+  text-align: center;
+}
+.scroll-view_H{
+  white-space: nowrap;
+}
+.scroll-item{
+  display:inline-block;
+  width:120rpx;
+  height:120rpx;
+  border:2rpx solid #e0e0e0;
+  margin:0 10rpx;
+}
+.scroll-item.active{
+  border-color:#00af66;
+}
+.scroll-item image{
+  width:120rpx;
+  height:120rpx;
+}
+.slider-box{
+  /* padding:50rpx 0;
+  position:fixed;
+  background:rgba(0,0,0,0.8);
+  bottom:0;
+  z-index:20;
+  width:100%;
+  color:#fff; */
+  /* margin-bottom:180rpx; */
+}
+
+.made-box{
+  position:relative;
+  width: inherit;
+  height: inherit;
+}
+.made-font{
+  position:absolute;
+  top:0;
+  left:0;
+  width:5555555555555rpx;
+  z-index:40;
+}
+.font-content{
+  display: inline-block;
+  position:relative;
+  width:218rpx;
+  height:218rpx;
+  border:2rpx dashed #e0e0e0;
+  overflow: hidden;
+}
+.del-box{
+  padding:6rpx 16rpx;
+  border:2rpx solid #00af66;
+}

customized/pages/goodsDetail/goodsDetail.js

@@ -71,7 +71,7 @@ Page({
   },
   hrefBtn() {
     wx.navigateTo({
-      url: "/customized/pages/made/made",
+      url: "/customized/pages/boxMade/boxMade",
     })
   }
 })

project.config.json

@@ -28,7 +28,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 27,
+			"current": 1,
 			"list": [
 				{
 					"id": 0,
@@ -39,8 +39,9 @@
 				{
 					"id": 1,
 					"name": "made",
-					"pathName": "customized/pages/made/made",
-					"query": ""
+					"pathName": "customized/pages/boxMade/boxMade",
+					"query": "",
+					"scene": null
 				},
 				{
 					"id": 2,
@@ -218,6 +219,7 @@
 					"id": -1,
 					"name": "momo",
 					"pathName": "pages/momo/momo",
+					"query": "",
 					"scene": null
 				}
 			]

utils/util.js

@@ -80,6 +80,36 @@ function changeCup(e) {
       };
       // console.log('杯底');
       break;
+    case '5': //表示是箱子
+      dataPositionObj = { // 正面数据
+        top: 74,
+        left: 104,
+        width: 536,
+        height: 712
+      };
+      propSize = {
+        top: '',
+        right: '',
+        bottom: '',
+        left: '',
+      };
+      // console.log('杯底');
+      break;
+    case '6': //表示是箱子
+      dataPositionObj = { // 正面数据
+        top: 128,
+        left: 104,
+        width: 534,
+        height: 654
+      };
+      propSize = {
+        top: '',
+        right: '',
+        bottom: '',
+        left: '',
+      };
+      // console.log('杯底');
+      break;
     default:
       break;