我的页面,首页来款项目

2021-10-12 18:17:26 +08:00
parent 32e229fec3
commit 491caf06a3
41 changed files with 756 additions and 412 deletions
@@ -0,0 +1,86 @@
+import Api from '../../assets/js/http/api'
+Page({
+  data: {
+    context1: null,
+    hasDraw:false, //默认没有画
+    id: '',
+  },
+  onLoad: function() {
+    var context1 = wx.createCanvasContext('handWriting1');
+    context1.setStrokeStyle("#000000") // 画笔的颜色
+    context1.setLineWidth(3); // 画笔的线条宽度
+    this.setData({
+      context1: context1,
+    })
+  },
+  touchstart1: function(e) {
+    var context1 = this.data.context1;
+    context1.moveTo(e.touches[0].x, e.touches[0].y); // 把画笔的开始点移到当前触摸点
+    this.setData({
+      // context1: context1,
+      hasDraw : true, //要签字了
+    });
+  },
+  touchmove1: function(e) {
+    var x = e.touches[0].x;
+    var y = e.touches[0].y;
+    var context1 = this.data.context1;
+    context1.setLineWidth(3);
+    context1.lineTo(x, y); // 移动绘制的点（关键步骤）
+    context1.stroke(); // 画出当前路径的边框====创建线条
+    context1.setLineCap('round'); // 设置线条的端点样式
+    context1.draw(true); // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
+    context1.moveTo(x, y); // 把路径移动到画布中的指定点，不创建线条
+  },
+  reSign1: function() { //重新画
+    var that = this;
+    var context1 = that.data.context1;
+    context1.draw(); //清空画布
+    that.setData({
+      hasDraw: false, //没有画
+      src: null
+    });
+  },
+  sign1ok: function () {
+    const that = this;
+    if(!that.data.hasDraw){
+      console.log("签字是空白的 没有签字")
+    }else{
+      var context1 = that.data.context1;
+      context1.draw(true, wx.canvasToTempFilePath({ // 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功
+        canvasId: 'handWriting1',
+        success(res) { // 完成签字
+          //得到了图片 上传到服务器
+          wx.uploadFile({
+            url: Api.baseUrl + Api.URL_CONFIG + "/sys/common/upload",
+            filePath: res.tempFilePath,
+            name: "file",
+            formData: {
+              filetype: "image",
+            },
+            success: function (result) {
+              let data = JSON.parse(result.data)
+              that.setData({
+                id: data.result.id
+              })
+              let pages = getCurrentPages();
+              let prevPage = pages[pages.length - 2];
+              //将数值信息赋值给上一页面id变量
+              prevPage.setData({
+                fileId: data.result.id
+              });
+              wx.navigateBack({
+                delta: 1,
+              })
+            },
+            fail: function(err){
+              wx.showToast({
+                title: '上传失败',
+              })
+            }
+          })
+        }
+      }))
+    }
+  },
+});
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
@@ -0,0 +1,16 @@
+<view>
+  <view class="sign">
+    <view class="signTitle">参会人签字</view>
+    <view class="paper">
+      <canvas class="handWriting" disable-scroll="true" bindtouchstart="touchstart1" bindtouchmove="touchmove1"  canvas-id="handWriting1">
+      </canvas>
+    </view>
+    <view class="signBtn">
+      <button size="" type="primary" bindtap="sign1ok">完成签字</button>
+      <button size="" type="warn" bindtap="reSign1">重新签字</button>
+    </view>
+    <view class="imageBox" hidden="{{src?false:true}}">
+      <image src="{{src}}" ></image>
+    </view>
+  </view>
+</view>
@@ -0,0 +1,38 @@
+.paper {
+  border: 1px solid #dedede;
+  margin: 10px;
+  height: 160px
+}
+
+.imageBox {
+  border: 1px solid #dedede;
+  margin: 10px;
+  height: 160px
+}
+
+.signBtn {
+  display: flex;
+  margin-top: 20px;
+}
+
+.signTitle {
+  text-align: center;
+  font-size: 1.2em;
+  margin: 10px auto;
+}
+
+.handWriting {
+  width: 100%;
+  height: 100%;
+}
+
+.imageBox image {
+  width: 100%;
+  height: 160px
+}
+button[type='primary']{
+  background-color: #069F99 !important;
+}
+button[type='warn']{
+  color: #999 !important;
+}