修改

app.json

@@ -113,7 +113,11 @@
         "pages/boxMade/boxMade",
         "pages/boxMade/boxMadeImg/boxMadeImg",
         "pages/boxMade/boxMadeFont/boxMadeFont",
-        "pages/boxMade/boxComb/boxComb"
+        "pages/boxMade/boxComb/boxComb",
+        "pages/oneMade/oneMade",
+        "pages/oneMade/oneMadeImg/oneMadeImg",
+        "pages/oneMade/oneMadeFont/oneMadeFont",
+        "pages/oneMade/oneComb/oneComb"
       ]
     }
   ],

customized/pages/goodsDetail/goodsDetail.js

@@ -73,7 +73,7 @@ Page({
     let detail = wx.getStorageSync('detail')
     if (detail.customgoodsNo == '2'){ // 箱子
       wx.navigateTo({
-        url: "/customized/pages/boxMade/boxMade",
+        url: "/customized/pages/oneMade/oneMade",
       })
     }
     if (detail.customgoodsNo == '1') { // 杯子

customized/pages/oneMade/oneComb/oneComb.js

@@ -0,0 +1,340 @@
+// 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
+    },
+    isActive:null,
+    rpx: 1,
+    obverseImgObject: {}, //素材背景
+    imgSrcArray: [],
+    buildSrcArray: [],
+    customGoodsImg: "",
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    if ('id' in options){
+      this.setData({
+        isActive: options.id,//素材id
+        obverseImgObject: util.changeImg,//素材
+        dataPositionObj: util.changeCup(options.id.toString()).dataPositionObj
+      })
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+    wx.showLoading({
+      title: '图片合成中...'
+    })
+    let that = this,
+      result = true;
+
+    if (wx.getStorageSync('madeImgData' + that.data.isActive) || wx.getStorageSync('madeFontData'+ that.data.isActive)) {
+      that.getCombImg(that, that.data.isActive);
+      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 = that.data.dataPositionObj;
+    that.setData({ // imgSrcArray 初始化
+      imgSrcArray: [],
+    })
+    if (wx.getStorageSync('madeImgData' + i)) {
+      imgTouch = wx.getStorageSync('madeImgData' + i);
+      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');
+                //画布中点坐标转移到图片中心
+                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',
+                    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 = that.data.dataPositionObj,
+      simulationFont = null;
+    if (wx.getStorageSync('madeFontData' + i)) {
+      fontTouch = wx.getStorageSync('madeFontData' + i);
+      simulationFont = wx.getStorageSync('simulationFont' + i);
+      const ctx = wx.createCanvasContext('comb-font');
+      // 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.draw(false, function () {
+        wx.canvasToTempFilePath({
+          canvasId: 'comb-font',
+          success: function (res) {
+            console.log(res)
+            that.getComb(that, that.data.imgSrcArray, i)
+          }
+        }, that)
+      })
+    } else {
+      that.getComb(that, that.data.imgSrcArray, i)
+    }
+
+  },
+  getComb(that, imgSrcArray, i) {
+    console.log(imgSrcArray, "imgSrcArray")
+   
+      let imgTouch = wx.getStorageSync('madeImgData' + i);
+    let dataPositionObj = that.data.dataPositionObj;
+      let canvasBg = that.data.obverseImgObject[i+'_2'];//获取背景没有线框的
+      wx.getSystemInfo({
+        success: function (res) {
+          let rpx = res.windowWidth / 750;
+          that.setData({
+            rpx: rpx
+          });
+          const ctx = wx.createCanvasContext('comb-canvas');
+          ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 800 * rpx);
+          // 设置背景
+          ctx.draw(true)
+          imgSrcArray.forEach((res) => {
+            ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
+          })
+          console.log('开始执行叠加', that.data.obverseImgObject[i + '_1'])
+          ctx.drawImage(that.data.obverseImgObject[i + '_1'], 0, 0, 750 * rpx, 800 * rpx)
+          
+          ctx.draw(true, function () {
+            console.log("开始合成")
+            wx.canvasToTempFilePath({
+              canvasId: 'comb-canvas',
+              success: function (res) {
+                console.log(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")
+                  wx.hideLoading()
+   
+                })
+
+              },
+              fail: function (err) {
+                console.log(err, "合成失败")
+                wx.hideLoading();
+              }
+            }, that)
+          })
+        },
+      })
+
+  },
+  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: '拉杆箱-银灰色',
+        customGoodsNum: 1,
+        userId: app.globalData.user_id,
+        customGoodsId:wx.getStorageSync('detail').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/oneMade/oneComb/oneComb.json

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

customized/pages/oneMade/oneComb/oneComb.wxml

@@ -0,0 +1,22 @@
+<!-- <view style="position:fixed;top:999999999999999999999rpx;"> -->
+  <canvas canvas-id="comb-canvas" class="comb-content"></canvas>
+  <canvas canvas-id='comb-img' class='comb-img5' style='width:{{dataPositionObj.width}}rpx;height:{{dataPositionObj.height}}rpx;'></canvas>
+  <canvas canvas-id='comb-font' class='comb-font5'  style='width:{{dataPositionObj.width}}rpx;height:{{dataPositionObj.height}}rpx;'></canvas>
+  <canvas canvas-id='comb-font-1' class='comb-font5'  style='width:{{dataPositionObj.width}}rpx;height:{{dataPositionObj.height}}rpx;'></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 - 4]}}</cover-view>
+  </cover-view>
+</view>
+ <!--  -->
+  <canvas canvas-id='comb-wheel5-left' class='comb-wheel'></canvas>
+  <canvas canvas-id='comb-wheel5-right' class='comb-wheel'></canvas>
+<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>

customized/pages/oneMade/oneComb/oneComb.wxss

@@ -0,0 +1,39 @@
+/* customized/pages/made/combination/combination.wxss */
+page{
+  background:#fff;
+}
+.comb-content{
+ width:750rpx;
+ height:800rpx;
+}
+.comb-img5,.comb-font5{
+  width:536rpx;
+  height:712rpx;
+}
+.comb-img6,.comb-font6{
+  width:534rpx;
+  height:654rpx;
+}
+.comb-img{
+  background:rgb(255, 176, 29);
+}
+.comb-font{
+  background:#2e8aec;
+}
+.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/oneMade/oneMade.js

@@ -0,0 +1,198 @@
+// pages/customized/made/made.js
+import * as util from '../../../utils/util.js'
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    dataPositionObj: {},
+    propSize: {},
+    isActive: '9', // 默认是正面
+    obverseImgObject:{},
+    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,
+      obverseImgObject:util.changeImg
+    })
+    that.getDataTouch(that);
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  addImgRouter() {
+    console.log('添加图片');
+    wx.setStorageSync('box',this.data.box)
+    wx.navigateTo({
+      url: '/customized/pages/oneMade/oneMadeImg/oneMadeImg?id=' + this.data.isActive,
+    })
+  },
+  addFontRouter() {
+    console.log('添加文字');
+    wx.setStorageSync('box', this.data.box)
+    wx.navigateTo({
+      url: '/customized/pages/oneMade/oneMadeFont/oneMadeFont?id=' + this.data.isActive,
+    })
+  },
+  getDataTouch(that) {
+    let madeTouchImg = wx.getStorageSync('madeImgData' + that.data.isActive)
+    let madeTouchFont = wx.getStorageSync('madeFontData' + 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;
+    if (!wx.getStorageSync('madeImgData' + this.data.isActive) && !wx.getStorageSync('madeFontData' + this.data.isActive)) {
+        wx.showToast({
+          title: '您还没有设计',
+          icon: 'none'
+        })
+      } else {
+        wx.navigateTo({
+          url: '/customized/pages/oneMade/oneComb/oneComb?id=' + this.data.isActive
+        })
+      }
+  
+  },
+  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/oneMade/oneMade.json

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

customized/pages/oneMade/oneMade.wxml

@@ -0,0 +1,38 @@
+
+<view class='content'>
+<view class='made-content'>
+  <view class='made-img-box'>
+    <image class='made-img-image_1' src='{{obverseImgObject[isActive+"_1"]}}' mode="aspectFill"></image>
+    <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='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/oneMade/oneMade.wxss

@@ -0,0 +1,123 @@
+/* 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-img-image_1{
+  width:750rpx;
+  height:800rpx;
+  position:fixed;
+  z-index:199;
+}
+/* .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/oneMade/oneMadeFont/oneMadeFont.js

@@ -0,0 +1,304 @@
+// pages/customized/made/madeFont/madeFont.js
+import * as util from '../../../../utils/util.js'
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    dataPositionObj: {},
+    propSize: {},
+
+    isActive: '', // 默认是正面
+    obverseImgObject: {
+      // '5': '/customized/images/customized/box_white_big_1.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:{},
+    box:{},
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  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('madeFontData' + 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.setData({
+      box: wx.getStorageSync('box'),
+      obverseImgObject: util.changeImg
+    })
+    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('madeFontData' + that.data.isActive, that.data.fontTouch);
+      wx.navigateBack()
+    })
+  },
+  getDataTouch(that) {
+    let madeTouchImg = wx.getStorageSync('madeImgData' + 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/oneMade/oneMadeFont/oneMadeFont.json

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

customized/pages/oneMade/oneMadeFont/oneMadeFont.wxml

@@ -0,0 +1,91 @@
+<!--pages/customized/made/madeFont/madeFont.wxml-->
+
+<view class='made-content'>
+  <!-- <canvas canvas-id='madeContent' class='made-content'></canvas> -->
+  <view class='made-img-box'>
+    <image class='made-img-image_1' src='{{obverseImgObject[isActive+"_1"]}}' mode="aspectFill" bindtouchstart="fontTouchstart" bindtouchmove="fontTouchmove"></image>
+    <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/oneMade/oneMadeFont/oneMadeFont.wxss

@@ -0,0 +1,143 @@
+/* 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;
+}
+.made-img-image_1{
+  width:750rpx;
+  height:800rpx;
+  position:fixed;
+  z-index:9999;
+}
+.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/oneMade/oneMadeImg/oneMadeImg.js

@@ -0,0 +1,293 @@
+// 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: {},
+    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, // 旋转度数
+    },
+    box:{},
+    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('madeImgData' + 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.setData({
+      box:wx.getStorageSync('box'),
+      obverseImgObject: util.changeImg
+    })
+    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
+    })
+  },
+  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('madeImgData' + 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('madeFontData' + 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/oneMade/oneMadeImg/oneMadeImg.json

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

customized/pages/oneMade/oneMadeImg/oneMadeImg.wxml

@@ -0,0 +1,74 @@
+<view class='container'>
+  <view class='made-content'>
+    <view class='made-img-box'>
+    <image class='made-img-image_1' src='{{obverseImgObject[imgTouch.isActive+"_1"]}}' mode="aspectFill"></image>
+      <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}};width:{{dataPositionObj.width}}rpx;height:{{dataPositionObj.height}}rpx;'>
+            <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/oneMade/oneMadeImg/oneMadeImg.wxss

@@ -0,0 +1,122 @@
+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;
+}
+.made-img-image_1{
+  width:750rpx;
+  height:800rpx;
+  position:fixed;
+  z-index:99999;
+}
+.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;
+}

project.config.json

@@ -30,7 +30,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 28,
+			"current": 29,
 			"list": [
 				{
 					"id": 0,
@@ -228,6 +228,13 @@
 					"id": -1,
 					"name": "momo",
 					"pathName": "pages/momo/momo",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "单个定制",
+					"pathName": "customized/pages/oneMade/oneMade",
 					"scene": null
 				}
 			]

utils/util.js

@@ -108,6 +108,20 @@ function changeCup(e) {
         bottom: '',
         left: '',
       };
+      break;
+    case '9': //黑色T恤
+      dataPositionObj = { 
+        top: 254,
+        left: 204,
+        width: 368,
+        height: 440
+      };
+      propSize = {
+        top: '',
+        right: '',
+        bottom: '',
+        left: '',
+      };
       // console.log('杯底');
       break;
     default:
@@ -123,10 +137,27 @@ function changeCup(e) {
 
 }
 
+let changeImg={
+    '9': '/customized/images/customized/shirt1.png',//黑色T恤
+    '9_1': '/customized/images/customized/shirt1_1.png', //黑色T恤镂空
+    '9_2': '/customized/images/customized/shirt1_2.png', //黑色T恤
+    '10': '/customized/images/customized/shirt2.png',//红色T恤
+    '10_1': '/customized/images/customized/shirt2_1.png',//红色T恤镂空
+    '10_2': '/customized/images/customized/shirt2_2.png',//红色T恤
+    '11': '/customized/images/customized/cup1.png',//白色杯子
+    '11_1': '/customized/images/customized/cup1_1.png',//白色杯子镂空
+    '11_2': '/customized/images/customized/cup1_2.png',//白色杯子
+    '12': '/customized/images/customized/cup2.png',//黑色杯子
+    '12_1': '/customized/images/customized/cup2_1.png',//白色杯子镂空
+    '12_2': '/customized/images/customized/cup2_2.png',//白色杯子
+    }
+
+
 
 module.exports = {
   formatTime: formatTime,
-  changeCup: changeCup
+  changeCup: changeCup,
+  changeImg: changeImg
 }