添加文字和图片

app.json

@@ -85,11 +85,19 @@
     "pages/authorize/authorize",
     "pages/eachGiftInfor/eachGiftInfor",
     "pages/midAutumnFestival/midAutumnFestival",
-    "pages/customized/index/index",
-    "pages/customized/made/made",
-    "components/component-made/made-solid",
-    "pages/customized/made/madeImg/madeImg",
-    "pages/customized/made/madeFont/madeFont"
+    "components/component-made/made-solid"
+  ],
+  "subpackages": [
+    {
+      "root": "customized",
+      "name": "customized",
+      "pages":[
+        "pages/index/index",
+        "pages/made/made",
+        "pages/made/madeImg/madeImg",
+        "pages/made/madeFont/madeFont"
+      ]
+    }
   ],
   "window": {
     "backgroundTextStyle": "white",

customized/components/component-made/made-solid.js

@@ -0,0 +1,26 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    propPosition: Object,
+    propSize:Object
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    
+  },
+  ready(){
+    
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

customized/components/component-made/made-solid.wxml

@@ -0,0 +1,9 @@
+<view class="wrapper">
+  <view class='solid' style='top:{{propPosition.top}};left:{{propPosition.left}};width:{{propPosition.width}};height:{{propPosition.height}}'>
+      <view class='top'>{{propSize.top}}</view>
+      <view class='right'>{{propSize.right}}</view>
+      <view class='bottom'>{{propSize.bottom}}</view>
+      <view class='left'>{{propSize.left}}</view>
+      <slot></slot>
+  </view>
+</view>

customized/components/component-made/made-solid.wxss

@@ -0,0 +1,54 @@
+/* components/component-made/made-solid.wxss */
+/* page{
+  background:#fff;
+} */
+.canvas-box{
+  width:100%;
+  height:588rpx;
+}
+
+.solid{
+  width:270rpx;
+  height:270rpx;
+  border:1rpx dashed #fff;
+  text-align: center;
+  margin:0 auto;
+  position:absolute;
+  top:50rpx;
+  left:286rpx;
+  z-index:100;
+  color:#fff;
+  font-size:26rpx;
+}
+.solid .top{
+  position:absolute;
+  height:30rpx;
+  line-height:30rpx;
+  top:-30rpx;
+  left:50%;
+  margin-left:-28rpx;
+}
+.solid .right{
+  position:absolute;
+  height:30rpx;
+  line-height:30rpx;
+  right:-56rpx;
+  top:50%;
+  margin-top:-15rpx;
+}
+.solid .bottom{
+  position:absolute;
+  height:30rpx;
+  line-height:30rpx;
+  bottom:-30rpx;
+  right:50%;
+  margin-right:-28rpx;
+}
+.solid .left{
+  position:absolute;
+  height:30rpx;
+  line-height:30rpx;
+  left:-56rpx;
+  top:50%;
+  margin-top:-15rpx;
+}

pages/customized/index/index.json

@@ -1,4 +1,4 @@
-{
-  "navigationBarTitleText": "定制",
-  "backgroundColor": "#fff"
+{
+  "navigationBarTitleText": "定制",
+  "backgroundColor": "#fff"
 }

pages/customized/index/index.wxml

@@ -1,19 +1,20 @@
-<view class="auto">
-  <view class="f-box mar-t20">
-    <view class='cust-img mar-r'>
-        <image src="/images/customized/cup_black_small.png" mode="aspectFit"></image>
-      </view>
-    <view class="f-item mar-l20">
-    <view class='cup-main'>
-     <view class='f-s32'>奶缸-黑色 350ml</view>
-      <view class="mar-t20 f-s32 c-orange">￥45.00</view>
-    </view>
-      <navigator url="/pages/customized/made/made" class='cust-btn f-s36 bg-green c-white'>去定制</navigator>
-    </view>
-  </view>
-  <view class='cust-footer f-box f-justify-content-end'>
-    <navigator class='icon-shouye iconfont c-green'></navigator>
-    <navigator class='icon-gouwuche iconfont c-green'></navigator>
-    <navigator class='icon-wode iconfont c-green'></navigator>
-  </view>
-</view>
+<view class="auto">
+  <view class="f-box mar-t20">
+    <view class='cust-img mar-r'>
+        <image src="/customized/images/customized/cup_black_small.png" mode="aspectFit"></image>
+      </view>
+    <view class="f-item mar-l20">
+    <view class='cup-main'>
+     <view class='f-s32'>奶缸-黑色 350ml</view>
+      <view class="mar-t20 f-s32 c-orange">￥45.00</view>
+    </view>
+      <navigator url="/customized/pages/made/made" class='cust-btn f-s36 bg-green c-white'>去定制</navigator>
+    </view>
+  </view>
+  <view class='cust-footer f-box f-justify-content-end'>
+    <navigator class='icon-shouye iconfont c-green'></navigator>
+    <navigator class='icon-gouwuche iconfont c-green'></navigator>
+    <navigator class='icon-wode iconfont c-green'></navigator>
+  </view>
+</view>customized/customized
+

pages/customized/index/index.wxss

@@ -1,41 +1,41 @@
-page{
-  background: #fff;
-}
-.cust-img{
-  width:240rpx;
-  height:240rpx;
-  background:#eee;
-}
-.cup-main{
-  height:200rpx;
-}
-.cust-img image{
-  width:100%;
-  height: 100%;
-}
-.cust-btn{
-  width:150rpx;
-  height:50rpx;
-  line-height:50rpx;
-  text-align: center;
-  border-radius:50rpx;
-  float: right;
-}
-.cust-footer{
-  height:100rpx;
-  line-height:100rpx;
-  position: fixed;
-  bottom:0;
-  right:20rpx;
-  z-index:10;
-}
-.cust-footer .iconfont{
-  font-size:48rpx;
-  width:70rpx;
-  height:70rpx;
-  border:1rpx solid #e0e0e0;
-  border-radius:100%;
-  text-align: center;
-  line-height:70rpx;
-  margin-right:30rpx;
+page{
+  background: #fff;
+}
+.cust-img{
+  width:240rpx;
+  height:240rpx;
+  background:#eee;
+}
+.cup-main{
+  height:200rpx;
+}
+.cust-img image{
+  width:100%;
+  height: 100%;
+}
+.cust-btn{
+  width:150rpx;
+  height:50rpx;
+  line-height:50rpx;
+  text-align: center;
+  border-radius:50rpx;
+  float: right;
+}
+.cust-footer{
+  height:100rpx;
+  line-height:100rpx;
+  position: fixed;
+  bottom:0;
+  right:20rpx;
+  z-index:10;
+}
+.cust-footer .iconfont{
+  font-size:48rpx;
+  width:70rpx;
+  height:70rpx;
+  border:1rpx solid #e0e0e0;
+  border-radius:100%;
+  text-align: center;
+  line-height:70rpx;
+  margin-right:30rpx;
 }

pages/customized/made/made.js

@@ -19,10 +19,10 @@ Page({
     },
     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',/*底部 */
+      '1': '/customized/images/customized/cup_black_big.png',/*正面 */
+      '2': '/customized/images/customized/cup_black_side.png',/*侧面面 */
+      '3': '/customized/images/customized/cup_black_handle.png',/*手柄 */
+      '4': '/customized/images/customized/cup_black_bottom.png',/*底部 */
     },
     fontColor: ['#000', '#fff', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0','#920784']
     // obverseImg: '/images/customized/cup_black_big.png',/*正面 */
@@ -135,7 +135,7 @@ Page({
       break;
       case '3':
         dataPositionObj = { // 正面数据
-          top: '160rpx',
+          top: '150rpx',
           left: '348rpx',
           width: '70rpx',
           height: '268rpx'

pages/customized/made/made.wxml

@@ -1,14 +1,19 @@
-<view>
+<view class='content'>
+<!-- 定制杯子 canvas 不合适 -->
+<!-- <view class='cup-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'>可定制区域</view>
+  </made-solid>
+</view> -->
 <canvas canvas-id='madeContent' class='made-content'>
 <!-- <image src='/images/customized/cup_black_big.png' bindload="imageLoad"/> -->
   <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
     <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
     <view class='f-box f-align-items-center f-justify-content-center made-prompt'>可定制区域</view>
   </made-solid>
-  <canvas canvas-id='myCanvasImg' class='made-box' style='width:{{dataPositionObj.width}};height:{{dataPositionObj.height}};margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'>
+  <canvas canvas-id='myCanvasImg' class='made-box' style='width:{{dataPositionObj.width}};height:{{dataPositionObj.height}};margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'></canvas>
   <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'>
@@ -23,8 +28,8 @@
 </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="/customized/pages/made/madeImg/madeImg" class='f-item footer-btn'>添加图片</navigator>
+  <navigator url="/customized/pages/made/madeFont/madeFont" class='f-item footer-btn'>添加文字</navigator>
   <navigator url="" class='f-item footer-btn'>完成设计</navigator>
 </view>
 

pages/customized/made/made.wxss

@@ -6,8 +6,8 @@ page{
  width:100%;
  height:588rpx;
  margin:60rpx 0;
-
 }
+
 .made-prompt{
   width:inherit;
   height:inherit;
@@ -17,7 +17,7 @@ page{
   height:270rpx;
   padding:1rpx;
   margin:0 auto;
-  /* background:red; */
+  background:red;
 }
 .btn-box{
   width:70%;
@@ -43,15 +43,15 @@ page{
   z-index:10;
   line-height:92rpx;
   background:#fff;
-  border-top:1rpx solid #e0e0e0;
+  border-top:1rpx solid #dcdcdc;
   text-align: center;
   color:#666;
   font-size:30rpx;
   cursor: pointer;
 }
 .footer-btn{
-  border-left:1rpx solid #e0e0e0;
+  border-left:1rpx solid #dcdcdc;
 }
 .footer-btn:first-child{
-  border-left:0rpx solid #e0e0e0;
+  border-left:0rpx solid #dcdcdc;
 }

customized/pages/made/madeFont/madeFont.js

@@ -0,0 +1,144 @@
+// pages/customized/made/madeFont/madeFont.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    dataPositionObj: { //正面数据
+      top: '156rpx',
+      left: '286rpx',
+      width: '',
+      height: ''
+    },
+    propSize: {
+      top: '8cm',
+      right: '8cm',
+      bottom: '8cm',
+      left: '8cm',
+    },
+    isActive: '1', // 默认是正面
+    
+    obverseImgObject: {
+      '1': '/customized/images/customized/cup_black_big.png',/*正面 */
+      '2': '/customized/images/customized/cup_black_side.png',/*侧面面 */
+      '3': '/customized/images/customized/cup_black_handle.png',/*手柄 */
+      '4': '/customized/images/customized/cup_black_bottom.png',/*底部 */
+    },
+    radarImg:null,
+    fontColor: ['#ffffff','#000000', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0', '#920784'],
+    isColor: '#ffffff', // 默认是白色
+    addFontStatic: false, // 添加文字
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    let that = this;
+    that.changeCupImg('1');
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  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();
+      },
+    })
+  },
+  addFont(){ // 添加文字
+  let that = this;
+    wx.canvasToTempFilePath({
+      x: 0,
+      y: 0,
+      width: 750,
+      height: 588,
+      canvasId: 'madeContent',
+      success: function (res) {
+        that.setData({
+          radarImg: res.tempFilePath,
+        })
+        setTimeout(()=>{
+          that.setData({
+            addFontStatic: true
+          })
+        },200)
+        
+      }
+    });
+    
+    
+  },
+  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({
+      isColor: e.currentTarget.dataset.color
+    })
+  }
+})

customized/pages/made/madeFont/madeFont.json

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

customized/pages/made/madeFont/madeFont.wxml

@@ -0,0 +1,44 @@
+<!--pages/customized/made/madeFont/madeFont.wxml-->
+
+<view>
+  <canvas canvas-id='madeContent' class='made-content' wx:if="{{!radarImg}}">
+  <!-- <image src='/images/customized/cup_black_big.png' bindload="imageLoad"/> -->
+    
+    <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>
+    <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
+      <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
+      <view class='f-box f-align-items-center f-justify-content-center made-prompt'>可定制区域</view>
+    </made-solid>
+    
+  </canvas>
+  <image wx:else src='{{radarImg}}' class='made-box-img'></image>
+</view>
+<view class='public-prompt'>该预览为仿真效果图，具体请以实物为准</view>
+<view class='footer f-box'>
+  <view class="f-box f-align-items-center f-justify-content-center footer-icon">
+    <block>
+      <icon class='f-box' type="clear" />
+    </block>
+  </view>
+  <view class='f-item footer-add-btn' bindtap='addFont'>添加文字</view>
+  <view class="f-box f-align-items-center footer-icon f-justify-content-center">
+    <block>
+      <icon  class='f-box' type="success" />
+    </block>
+  </view>
+</view>
+
+<!-- 文字层 -->
+<view class='font-ceng' wx:if="{{addFontStatic}}">
+  <view class="input-box">
+    <input placeholder-style="color:{{isColor}}" style='color:{{isColor}}' placeholder="可编辑文字" auto-focus />
+  </view>
+
+  <view class='font-color f-box f-justify-content-around'>
+    <view wx:for="{{fontColor}}" class='{{isColor === item ? "isColor" : ""}}' data-color="{{item}}" bindtap='selectColor'>
+      <view style='background:{{item}}' class='font-item'></view>
+    </view>
+  </view>
+</view>

customized/pages/made/madeFont/madeFont.wxss

@@ -0,0 +1,84 @@
+/* pages/customized/made/madeFont/madeFont.wxss */
+page{
+  background:#fff;
+}
+.made-content,.made-box-img{
+ width:100%;
+ height:588rpx;
+ margin:60rpx 0;
+}
+.made-prompt{
+  width:inherit;
+  height:inherit;
+}
+.made-box{
+  width:270rpx;
+  height:270rpx;
+  padding:1rpx;
+  margin:0 auto;
+  /* background:red; */
+}
+.footer{
+  position:fixed;
+  bottom:0;
+  width:100%;
+  z-index:10;
+  line-height:92rpx;
+  background:#fff;
+  border-top:1rpx solid #dcdcdc;
+  text-align: center;
+  color:#666;
+  font-size:30rpx;
+  cursor: pointer;
+}
+.footer-icon{
+  width:190rpx;
+}
+.footer-add-btn{
+  background:#00af66;
+  color:#fff;
+}
+
+/* 层样式 */
+.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:88rpx auto 50rpx;
+  text-align:center;
+  background:none;
+  border:1rpx 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);
+}

pages/customized/made/madeFont/madeFont.js

@@ -1,66 +0,0 @@
-// 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.wxml

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

pages/customized/made/madeFont/madeFont.wxss

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

project.config.json

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

style/customized.wxss

@@ -112,3 +112,16 @@
 .mar-r20{
   margin-right:20rpx;
 }
+
+
+/* 公用样式 */
+.public-prompt{
+  width:100%;
+  line-height:72rpx;
+  text-align: center;
+  background:#edecf1;
+  color:#626262;
+  font-size:24rpx;
+  position:fixed;
+  bottom: 106rpx;
+}