完成定制页面

app.json

@@ -87,7 +87,9 @@
     "pages/midAutumnFestival/midAutumnFestival",
     "pages/customized/index/index",
     "pages/customized/made/made",
-    "components/component-made/made-solid"
+    "components/component-made/made-solid",
+    "pages/customized/made/madeImg/madeImg",
+    "pages/customized/made/madeFont/madeFont"
   ],
   "window": {
     "backgroundTextStyle": "white",

components/component-made/made-solid.wxss

@@ -1,7 +1,7 @@
 /* components/component-made/made-solid.wxss */
-page{
+/* page{
   background:#fff;
-}
+} */
 .canvas-box{
   width:100%;
   height:588rpx;

pages/customized/made/made.js

@@ -5,10 +5,11 @@ Page({
    * 页面的初始数据
    */
   data: {
-    dataPositionObj:{
+    dataPositionObj:{ //正面数据
       top:'156rpx',
       left:'286rpx',
-      // width:'100rpx',
+      width:'',
+      height:''
     },
     propSize:{
       top:'8cm',
@@ -16,24 +17,22 @@ Page({
       bottom: '8cm',
       left:'8cm',
     },
-    obverseImg: '/images/customized/cup_black_big.png',/*正面 */
+    isActive: '1', // 默认是正面
+    obverseImgObject:{
+      '1': '/images/customized/cup_black_big.png',/*正面 */
+      '2': '/images/customized/cup_black_side.png',/*侧面面 */
+      '3': '/images/customized/cup_black_handle.png',/*手柄 */
+      '4': '/images/customized/cup_black_bottom.png',/*底部 */
+    },
+    fontColor: ['#000', '#fff', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0','#920784']
+    // obverseImg: '/images/customized/cup_black_big.png',/*正面 */
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-    console.log(this.data.obverseImg,"dd")
-    let canvasBg = this.data.obverseImg;
-    wx.getSystemInfo({
-      success: function (res) {
-        let rpx = res.windowWidth / 750;
-        console.log(res.windowWidth)
-        const ctx = wx.createCanvasContext('madeContent');
-        ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx)
-        ctx.draw()
-      },
-    })
+    this.changeCupImg(this.data.isActive);
   },
 
   /**
@@ -87,5 +86,98 @@ Page({
    */
   onShareAppMessage: function () {
 
+  },
+  changeCupImg(index){
+    let canvasBg = this.data.obverseImgObject[index];
+    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()
+      },
+    })
+  },
+  changeCup(e){
+    // data-id== 1正面，2背面，3手柄，4杯底
+    this.changeCupImg(e.currentTarget.dataset.id);
+    let dataPositionObj = null, propSize=null;
+    switch (e.currentTarget.dataset.id){
+      case '1':
+      // console.log('正面')
+        dataPositionObj = { // 正面数据
+          top: '156rpx',
+          left: '286rpx',
+          width: '',
+          height: ''
+        };
+        propSize={
+          top: '8cm',
+          right: '8cm',
+          bottom: '8cm',
+          left: '8cm',
+        };
+      break;
+      case '2':
+        dataPositionObj = { // 正面数据
+          top: '156rpx',
+          left: '180rpx',
+          width: '',
+          height: ''
+        };
+        propSize = {
+          top: '8cm',
+          right: '8cm',
+          bottom: '8cm',
+          left: '8cm',
+        };
+      // console.log('背面');
+      break;
+      case '3':
+        dataPositionObj = { // 正面数据
+          top: '160rpx',
+          left: '348rpx',
+          width: '70rpx',
+          height: '268rpx'
+        };
+        propSize = {
+          top: '1cm',
+          right: '6cm',
+          bottom: '1cm',
+          left: '6cm',
+        };
+      // console.log('手柄');
+      break;
+      case '4':
+        dataPositionObj = { // 正面数据
+          top: '160rpx',
+          left: '190rpx',
+          width: '265rpx',
+          height: '265rpx'
+        };
+        propSize = {
+          top: '6cm',
+          right: '6cm',
+          bottom: '6cm',
+          left: '6cm',
+        };
+      // console.log('杯底');
+      break;
+      default:
+      break;
+
+    }
+    this.setData({
+      isActive: e.currentTarget.dataset.id,
+      dataPositionObj: dataPositionObj,
+      propSize: propSize
+    })
+    
+  },
+  addImg(){
+    console.log('添加图片')
+  },
+  addFont() {
+    console.log('添加文字')
   }
 })

pages/customized/made/made.wxml

@@ -5,7 +5,27 @@
     <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
     <view class='f-box f-align-items-center f-justify-content-center made-prompt'>可定制区域</view>
   </made-solid>
-  <canvas canvas-id='myCanvas' class='made-box' style='width:{{dataPositionObj.width}};height:{{dataPositionObj.height}};margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'></canvas>
+  <canvas canvas-id='myCanvasImg' class='made-box' style='width:{{dataPositionObj.width}};height:{{dataPositionObj.height}};margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'>
+  <canvas canvas-id='myCanvasFont' class='made-box' style='width:{{dataPositionObj.width}};height:{{dataPositionObj.height}};margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'></canvas>
+  </canvas>
+  
 </canvas>
 
+<view class='btn-box'>
+  <view class='f-box f-justify-content-between'>
+    <button type="default" hover-class="none" bindtap="changeCup" data-id='1' class='{{isActive === "1" ? "active" : ""}}' size="mini">正面</button>
+    <button type="default" hover-class="none" bindtap="changeCup" data-id='2' class='{{isActive === "2" ? "active" : ""}}' size="mini">背面</button>
+  </view>
+  <view class='f-box f-justify-content-between'>
+    <button type="default" hover-class="none" bindtap="changeCup" data-id='3' class='{{isActive === "3" ? "active" : ""}}' size="mini">手柄</button>
+    <button type="default" hover-class="none" bindtap="changeCup" data-id='4' class='{{isActive === "4" ? "active" : ""}}' size="mini">杯底</button>
+  </view>
+</view>
+
+<view class='footer f-box f-justify-content-between'>
+  <navigator url="/pages/customized/made/madeImg/madeImg" class='f-item footer-btn'>添加图片</navigator>
+  <navigator url="/pages/customized/made/madeFont/madeFont" class='f-item footer-btn'>添加文字</navigator>
+  <navigator url="" class='f-item footer-btn'>完成设计</navigator>
+</view>
+
 </view>

pages/customized/made/made.wxss

@@ -1,8 +1,12 @@
 /* pages/customized/made/made.wxss */
+page{
+  background:#fff;
+}
 .made-content{
  width:100%;
  height:588rpx;
  margin:60rpx 0;
+
 }
 .made-prompt{
   width:inherit;
@@ -14,4 +18,40 @@
   padding:1rpx;
   margin:0 auto;
   /* background:red; */
+}
+.btn-box{
+  width:70%;
+  margin:0 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{
+  position:fixed;
+  bottom:0;
+  width:100%;
+  z-index:10;
+  line-height:92rpx;
+  background:#fff;
+  border-top:1rpx solid #e0e0e0;
+  text-align: center;
+  color:#666;
+  font-size:30rpx;
+  cursor: pointer;
+}
+.footer-btn{
+  border-left:1rpx solid #e0e0e0;
+}
+.footer-btn:first-child{
+  border-left:0rpx solid #e0e0e0;
 }

pages/customized/made/madeFont/madeFont.js

@@ -0,0 +1,66 @@
+// pages/customized/made/madeFont/madeFont.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    fontColor: ['#000', '#fff', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0', '#920784']
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/customized/made/madeFont/madeFont.json

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

pages/customized/made/madeFont/madeFont.wxml

@@ -0,0 +1,2 @@
+<!--pages/customized/made/madeFont/madeFont.wxml-->
+

pages/customized/made/madeFont/madeFont.wxss

@@ -0,0 +1,4 @@
+/* pages/customized/made/madeFont/madeFont.wxss */
+page{
+  background:#fff;
+}

pages/customized/made/madeImg/madeImg.js

@@ -0,0 +1,66 @@
+// pages/customized/made/madeImg/madeImg.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/customized/made/madeImg/madeImg.json

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

pages/customized/made/madeImg/madeImg.wxml

@@ -0,0 +1,2 @@
+<!--pages/customized/made/madeImg/madeImg.wxml-->
+<text>pages/customized/made/madeImg/madeImg.wxml</text>

pages/customized/made/madeImg/madeImg.wxss

@@ -0,0 +1 @@
+/* pages/customized/made/madeImg/madeImg.wxss */

project.config.json

@@ -28,7 +28,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 1,
+			"current": 3,
 			"list": [
 				{
 					"id": 0,
@@ -39,7 +39,20 @@
 				{
 					"id": -1,
 					"name": "made",
-					"pathName": "pages/customized/made/made"
+					"pathName": "pages/customized/made/made",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "定制img",
+					"pathName": "pages/customized/made/madeImg/madeImg",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "定制文字",
+					"pathName": "pages/customized/made/madeFont/madeFont",
+					"query": ""
 				}
 			]
 		}

readme.md

@@ -1 +1,4 @@
-https://blog.csdn.net/u011364720/article/details/82869207
+### https://blog.csdn.net/u011364720/article/details/82869207
+
+### 项目需求原型 z3qowq.axshare.com
+### 功能列表 https://mubu.com/doc/yc_fdq72c0

style/customized.wxss

@@ -21,6 +21,9 @@
 .f-item {
   flex-grow: 1; /* default 0 */
 }
+.bg-white{
+  background:white;
+}
 /* 排列方向 */
 .f-direction-row{ 
    flex-direction: row/*主轴为水平方向，起点在左端。*/