add file

Pages/yishi/signcanvas/index.js

@@ -0,0 +1,125 @@
+import { API } from './../../../utils/network/api'
+import { FileUtil } from './../../../utils/fileutil'
+const api = new API()
+const app = getApp()
+Page({
+  data: {
+    navbarData: {
+      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
+      title: '多点执业认证', //导航栏 中间的标题
+    },
+    height: app.globalData.height,
+    ctx: null,
+    canvas: null,
+    txt_show: true
+  },
+
+  onReady() {
+    const query = wx.createSelectorQuery()
+    query.select('#sign_panels')
+      .fields({ node: true, size: true })
+      .exec((res) => {
+        const canvas = res[0].node
+        const ctx = canvas.getContext('2d')
+        ctx.lineWidth = 5;
+        // const dpr = wx.getSystemInfoSync().pixelRatio
+
+        canvas.width = res[0].width
+        canvas.height = res[0].height
+        ctx.scale(1, 1)
+        console.log(ctx);
+        this.setData({ 
+          ctx: ctx,
+          canvas: canvas
+        });
+
+      })
+  },
+
+  ontouchmove(e){
+    this.data.ctx.lineWidth = 5;
+    this.data.ctx.lineCap="round";
+    this.data.ctx.lineJoin ="round";
+    this.data.ctx.lineTo(e.changedTouches[0].pageX,e.changedTouches[0].pageY);
+    this.data.ctx.stroke();
+  },
+  ontouchstart(e){
+    this.setData({
+      txt_show: false
+    });
+    console.log(this.data.ctx);
+    this.data.ctx.beginPath();
+    this.data.ctx.moveTo(e.changedTouches[0].pageX,e.changedTouches[0].pageY);
+  },
+
+  toClear() {
+    this.setData({
+      txt_show: true
+    });
+    this.data.ctx.clearRect(0,0,this.data.canvas.width,this.data.canvas.height)
+  },
+
+  toSave(event) {
+    let _this = this;
+    let base64Img = _this.data.canvas.toDataURL()
+    console.log("sign: ", base64Img);
+    wx.canvasToTempFilePath({
+      canvasId: "sign_panels",
+      canvas: _this.data.canvas,
+      x:0,
+      y:0,
+      success(res) {
+        console.log(res.tempFilePath)
+        let filePath = res.tempFilePath;
+        _this.doUploadFile(event, 2, filePath);
+      }
+    })
+  },
+
+  doUploadFile(event, scene, filePath) {
+    console.log("index douploadFIle: ", event);
+    console.log("scene: ", scene);
+    let _this = this;
+    api.getOssSign({user_type:2,scene:scene}).then(response => {
+      console.log(response);
+      console.log("filePath: ", filePath);
+      const filename = FileUtil.UUID()+".png";
+      const host = response.data.host;
+      const signature = response.data.signature;
+      const ossAccessKeyId = response.data.accessid;
+      const policy = response.data.policy;
+      const key = response.data.dir+filename;
+      wx.uploadFile({
+        url: host, // 开发者服务器的URL。
+        filePath: filePath,
+        name: 'file', // 必须填file。
+        formData: {
+          key,
+          policy,
+          OSSAccessKeyId: ossAccessKeyId,
+          signature,
+        },
+        success: (res) => {
+          console.log("upload: ", res);
+          if (res.statusCode === 204) {
+            wx.showToast({title: '上传成功'})
+            let url = host+"/"+key;
+            console.log(url);
+            wx.setStorageSync("sign_image", url);
+          }
+          wx.navigateBack()
+        },
+        fail: err => {
+          console.log(err);
+          wx.showToast({
+            title: '上传失败',
+            icon: "error"
+          })
+        }
+      });
+    }).catch(errors => {
+      console.error(errors);
+    })
+  }
+
+})

Pages/yishi/signcanvas/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "te-nav-bar": "/commpents/te_navbar",
+    "van-button": "@vant/weapp/button/index"
+  }
+}

Pages/yishi/signcanvas/index.wxml

@@ -0,0 +1,10 @@
+<te-nav-bar navbar-data='{{navbarData}}' ></te-nav-bar>
+<view class="container" style="height: calc(100vh - 96rpx - {{height}}px);">
+  <canvas disable-scroll bindtouchstart="ontouchstart" bindtouchmove="ontouchmove" type="2d" style="width: 100vw; height: calc(100vh - {{height*2 + 20}}px);" id="sign_panels">
+    <view wx:if="{{txt_show}}" class="title">签名面板</view>
+  </canvas>
+  <view class="btn_group">
+    <van-button bindtap="toClear" custom-style="height: 70rpx;border-radius: 10rpx;color:#000;width: 230rpx;">清空</van-button>
+    <van-button bindtap="toSave" custom-style="height: 70rpx;border-radius: 10rpx;color:#fff;width: 230rpx;background: linear-gradient(315deg, #33BFB8 0%, #34BFB8 0%, #3CC7C0 100%);">确认</van-button>
+  </view>
+</view>

Pages/yishi/signcanvas/index.wxss

@@ -0,0 +1,22 @@
+.container{
+  height: 100vh;
+  background: #FAFAFA;
+}
+.title{
+  font-size: 40rpx;
+  width: 160rpx;
+  height: 50rpx;
+  position:absolute;
+  left: calc(50vw - 80rpx);
+  top: calc(50vh - 160rpx);
+  transform: rotate(90deg);
+}
+.btn_group{
+  transform: rotate(90deg);
+  width: 500rpx;
+  position: absolute;
+  left: calc(-215rpx + 50rpx);/* 和按钮的高度有关 (width/2 - 按钮高度/2) */
+  bottom: calc(215rpx + 100rpx);/* 和按钮的高度有关 (width/2 - 按钮高度/2) */
+  display: flex;
+  justify-content: space-between;
+}