加入购物车

customized/pages/made/comb/comb.js

@@ -50,7 +50,14 @@ Page({
     //   /*底部 */
     // },
     imgSrcArray: [],
+    buildSrcArrayText:{
+      '1':'正面',
+      '2':'侧面',
+      '3':'手柄',
+      '4':'底部',
+    },
     buildSrcArray: [],
+
   },
 
   /**
@@ -85,25 +92,30 @@ Page({
    */
   onShow: function () {
     // this.getCombImg(this);
-    wx.showLoading({
-      title: '图片合成中...'
-    })
-    let that = this;
-    // 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')) {
+    // if (this.buildSrcArray.length === 0){
+      wx.showLoading({
+        title: '图片合成中...'
+      })
+      let that = this;
+      // 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);
-    } else if(wx.getStorageSync('madeCupImgData2') || wx.getStorageSync('madeCupFontData2')) {
-      that.getCombImg(that, 2);
-    } else if (wx.getStorageSync('madeCupImgData3') || wx.getStorageSync('madeCupFontData3')) {
-      that.getCombImg(that, 3);
-    } else if (wx.getStorageSync('madeCupImgData4') || wx.getStorageSync('madeCupFontData4')) {
-      that.getCombImg(that, 4);
-    }
+      } else if (wx.getStorageSync('madeCupImgData2') || wx.getStorageSync('madeCupFontData2')) {
+        that.getCombImg(that, 2);
+      } else if (wx.getStorageSync('madeCupImgData3') || wx.getStorageSync('madeCupFontData3')) {
+        that.getCombImg(that, 3);
+      } else if (wx.getStorageSync('madeCupImgData4') || wx.getStorageSync('madeCupFontData4')) {
+        that.getCombImg(that, 4);
+      } else {
+        wx.hideLoading();
+      }
+    // }
+    
 
   },
 
@@ -258,14 +270,17 @@ Page({
           imgSrcArray.forEach((res) => {
             ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
           })
-          wx.hideLoading();
           ctx.draw(true, function () {
             wx.canvasToTempFilePath({
               canvasId: 'comb-canvas' + i,
               success: function (res) {
                 console.log(res, "合成成功");
                 let buildSrcArray = that.data.buildSrcArray;
-                buildSrcArray.push(res.tempFilePath);
+
+                buildSrcArray.push({
+                  src:res.tempFilePath,
+                  isActive:i,
+                  });
                 console.log(buildSrcArray, "buildSrcArray")
                 that.setData({
                   buildSrcArray: buildSrcArray

customized/pages/made/comb/comb.wxml

@@ -17,8 +17,13 @@
   <canvas canvas-id='comb-font4' class='comb-font4'></canvas>
 </view>
 <view class='comb-view-img'>
-  <image wx:for="{{buildSrcArray}}" mode="aspectFit" src='{{item}}'></image>
+  <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>
-<!-- <image src='wxfile://tmp_d29746112b57f9351b02b2907809ed902b4219c2d52293af.png'></image> -->
 
- <!-- // "disableScroll": true -->
+<view class='footer f-box f-justify-content-between' hover-class="none">
+  <view class='f-item footer-btn f-s32' style='background:#ffc102;color:#fff' bindtap='addImgRouter' hover-class="none">加入购物车</view>
+  <view class='f-item footer-btn f-s32' style='background:#ff7103;color:#fff' bindtap='addFontRouter' hover-class="none">立即购买</view>
+</view>

customized/pages/made/comb/comb.wxss

@@ -24,10 +24,33 @@ page{
   width:265rpx;
   height:265rpx;
 }
-.comb-view-img{
+.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;
+}
+.footer{
+  position:fixed;
+  bottom:0;
   width:100%;
-
-}
-.comb-view-img image{
-  width:50%;
+  z-index:10;
+  line-height:100rpx;
+  background:#fff;
+  border-top:1rpx solid #dcdcdc;
+  text-align: center;
+  color:#666;
+  font-size:30rpx;
+  cursor: pointer;
 }

customized/pages/made/made.js

@@ -269,141 +269,4 @@ Page({
       wx.setStorageSync('simulationFont' + that.data.isActive, that.data.simulation);
     })
   },
-  // getBuildImg(that) {
-  //   for (let i = 1; i <= 1; i++) {
-  //     if (wx.getStorageSync('madeCupImgData' + i) || wx.getStorageSync('madeCupFontData' + i)) {
-  //       if (wx.getStorageSync('madeCupImgData' + i)) {
-  //         this.setData({
-  //           imgTouch: wx.getStorageSync('madeCupImgData' + i)
-  //         })
-  //       }
-  //       if (wx.getStorageSync('madeCupFontData' + i)) {
-  //         this.setData({
-  //           fontTouch: wx.getStorageSync('madeCupFontData' + i)
-  //         })
-  //       }
-  //       that.getCombImg(that);
-  //     }
-  //     console.log(i)
-  //   }
-
-
-  // },
-  // 合成canvas的js
-  // getCombImg(that) {
-  //   let imgTouch = that.data.imgTouch;
-  //   let dataPositionObj = that.data.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');
-  //             //画布中点坐标转移到图片中心
-  //             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(true, 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);
-  //                 }
-  //               }, that)
-  //             })
-  //           }
-  //         }
-  //       })
-
-  //     },
-  //   })
-  // },
-  // getCombFont(that) {
-  //   let fontTouch = that.data.fontTouch;
-  //   let dataPositionObj = that.data.dataPositionObj;
-  //   const ctx = wx.createCanvasContext('comb-font');
-
-  //   let movex = fontTouch.x + fontTouch.width / 2;
-  //   let movey = fontTouch.y + fontTouch.height / 2;
-  //   // ctx.translate(movex, movey);
-  //   // ctx.rotate(fontTouch.angle * Math.PI / 180);
-
-  //   ctx.setFontSize(fontTouch.fontSize);
-  //   ctx.setFillStyle(fontTouch.isColor);
-  //   ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y + fontTouch.height / 5 * 4);
-  //   // ctx.fillText(fontTouch.fontContent, -fontTouch.width / 2, fontTouch.height / 10 * 3);
-  //   ctx.draw(true, function () {
-  //     wx.canvasToTempFilePath({
-  //       canvasId: 'comb-font',
-  //       success: function (res) {
-  //         console.log(res)
-  //         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)
-  //       }
-  //     }, that)
-  //   })
-  // },
-  // getComb(that, imgSrcArray) {
-  //   console.log('开始最后的合成')
-  //   let imgTouch = that.data.imgTouch;
-  //   let dataPositionObj = that.data.dataPositionObj;
-  //   wx.getSystemInfo({
-  //     success: function (res) {
-  //       let rpx = res.windowWidth / 750;
-  //       that.setData({
-  //         rpx: rpx
-  //       });
-  //       let canvasBg = that.data.obverseImgObject[1];
-  //       const ctx = wx.createCanvasContext('comb-canvas');
-  //       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);
-  //       })
-  //       console.log('渲染完成');
-  //       ctx.draw(true);
-  //       // ctx.draw(true, function () {
-  //       //   wx.canvasToTempFilePath({
-  //       //     canvasId: 'comb-canvas',
-  //       //     success: function (res) {
-  //       //       console.log(res, "最后的合成")
-  //       //       let imgBuildArray = that.data.imgBuildArray;
-  //       //       imgBuildArray.push(res.tempFilePath)
-  //       //       that.setData({
-  //       //         imgSrcArray: [], // 重置
-  //       //         imgBuildArray: imgBuildArray
-  //       //       })
-  //       //       console.log(that.data.imgBuildArray, "that.data.imgBuildArray")
-  //       //     }
-  //       //   }, that)
-  //       // })
-
-  //     },
-  //   })
-  // }
 })

customized/pages/made/made.wxml

@@ -15,7 +15,7 @@
   <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 ' wx:if="{{touchStatic}}">{{fontContent}}</view>
+      <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;width:{{dataPositionObj.width}}rpx;height:{{dataPositionObj.height}}rpx'>
@@ -44,12 +44,12 @@
   </view>
 </view>
 
-<view class='footer f-box f-justify-content-between'>
+<view class='footer f-box f-justify-content-between' hover-class="none">
 <!-- url="/customized/pages/made/madeImg/madeImg" -->
 <!-- url="/customized/pages/made/madeFont/madeFont" -->
-  <view class='f-item footer-btn' bindtap='addImgRouter'>添加图片</view>
-  <view class='f-item footer-btn' bindtap='addFontRouter'>添加文字</view>
-  <view class='f-item footer-btn' bindtap='finishDesign'>完成设计</view>
+  <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>

customized/pages/made/made.wxss

@@ -18,6 +18,7 @@ page{
   position: relative;
 }
 .made-prompt{
+  /* text-align: center; */
   width:inherit;
   height:inherit;
 }
@@ -92,7 +93,7 @@ page{
   bottom:0;
   width:100%;
   z-index:10;
-  line-height:92rpx;
+  line-height:100rpx;
   background:#fff;
   border-top:1rpx solid #dcdcdc;
   text-align: center;

customized/pages/made/madeFont/madeFont.js

@@ -172,7 +172,7 @@ Page({
       this.animation.rotate(0).step()
       that.setData({
         'touch.fontContent': that.data.inputFont,
-        'touch.fontSize': 100,
+        'touch.fontSize': 30,
         'touch.angle': 0,
         addFontStatic: false,
         animationData: this.animation.export()

customized/pages/made/madeFont/madeFont.wxml

@@ -5,7 +5,7 @@
   <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' wx:if="{{!touch.fontSize}}">{{touch.fontContent}}</view>
+      <view class='f-box f-align-items-center f-justify-content-center made-prompt' style='text-align:center' wx:if="{{!touch.fontSize}}">{{touch.fontContent}}</view>
       <view wx:else class='made-prompt made-font' style='color:{{touch.isColor}};font-size:{{touch.fontSize}}px'>
         <view class='font-content' style='top:{{touch.y}}px;left:{{touch.x}}px'>
           <view class='iconfont icon-guanbi1 c-white icon-close' bindtap='fontDelete'></view>

customized/pages/made/madeImg/madeImg.js

@@ -230,8 +230,8 @@ Page({
       success: function (res) {
         console.log(res, "fff")
         that.setData({
-          'touch.width': res.width,
-          'touch.height': res.height,
+          'touch.width': 300,
+          'touch.height': res.height * 300 / res.width,
           'touch.scale': res.width / res.height, // 宽高比例
         })
         console.log(that.data.touch)

pages/index/index.wxml

@@ -77,28 +77,32 @@
 
 
         <!-- new second nav -->
-        <view class='new_nav_wrap  clearfix'>
-          <navigator class='new_nav_each'  url='/pages/recommendList/recommendList'>
+        <view class='new_nav_wrap  clearfix f-box'>
+          <navigator class='new_nav_each f-item'  url='/pages/recommendList/recommendList'>
             <image src='/images/index_top_menu_sec_0.jpg'  class='new_nav_icon'></image>
             <view  class="new_nav_name">新鲜上架</view> 
           </navigator>
 
-          <navigator class='new_nav_each'  url='/pages/patternMenu/patternMenu'>
+          <navigator class='new_nav_each f-item'  url='/pages/patternMenu/patternMenu'>
             <image src='/images/index_top_menu_sec_1.jpg'  class='new_nav_icon'></image>
             <view  class="new_nav_name">一键选礼</view> 
           </navigator>
 
-          <navigator class='new_nav_each'  url='/pages/goodsGift/goodsGift?classify_name=礼物盒&classify_des=礼物盒&id=2986'>
+          <navigator class='new_nav_each f-item'  url='/pages/goodsGift/goodsGift?classify_name=礼物盒&classify_des=礼物盒&id=2986'>
             <image src='/images/index_top_menu_sec_2.jpg'  class='new_nav_icon'></image>
             <view  class="new_nav_name">心礼盒</view> 
           </navigator>
 
-          <navigator class='new_nav_each'  url='/pages/brandList/brandList'>
+          <navigator class='new_nav_each f-item'  url='/pages/brandList/brandList'>
             <image src='/images/index_top_menu_sec_3.jpg'  class='new_nav_icon'></image>
             <view  class="new_nav_name">品牌专区</view> 
           </navigator>
+          <navigator class='new_nav_each f-item'  url='/customized/pages/index/index'>
+            <image src='/images/index_top_menu_sec_4.jpg'  class='new_nav_icon'></image>
+            <view  class="new_nav_name">产品定制</view> 
+          </navigator> 
 
-          <navigator class='new_nav_each'  url='/pages/aboutUs/aboutUs'>
+          <navigator class='new_nav_each f-item'  url='/pages/aboutUs/aboutUs'>
             <image src='/images/index_top_menu_sec_4.jpg'  class='new_nav_icon'></image>
             <view  class="new_nav_name">关于我们</view> 
           </navigator> 

pages/index/index.wxss

@@ -457,8 +457,8 @@ page{
   padding-top:32rpx;
 }
 .new_nav_each{
-  float: left;
-  width: 20%;
+  /* float: left;
+  width: 20%; */
   text-align: center;
 }
 .new_nav_icon{

project.config.json

@@ -28,7 +28,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 5,
+			"current": 4,
 			"list": [
 				{
 					"id": 0,
@@ -57,7 +57,7 @@
 				{
 					"id": 4,
 					"name": "合成",
-					"pathName": "customized/pages/made/combination/combination",
+					"pathName": "customized/pages/made/comb/comb",
 					"query": ""
 				},
 				{