11

src/components/SignName.vue

+
+<style scoped>
+ .SignName .CanvasDiv{
+     width: 100%;
+     height: calc(100% - 100px);
+     padding-top: 5%;
+ }
+ .SignName .CanvasDiv #canvas{
+     width: 100%;
+     height: 100%;
+ }
+ .SignName .dash{
+     padding: 10px;
+     box-sizing: border-box;
+     border: 1px dashed #ccc;
+     width: 95%;
+     height: 95%;
+     margin:0 auto;
+ }
+  .SignName .bg{
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+ }
+  .SignName .bg1{
+    background-image: url('../assets/img/dzht/bg1.png');
+    background-size: 132px;
+    background-position: -1px -2px;
+ }
+  .SignName .bg2{
+    background-image: url('../assets/img/dzht/bg1.png');
+    background-size: 132px;
+    background-position: 28px -2px;
+ }
+ .SignName .bottom .el-col>div{
+     display: inline-flex;
+     align-items: center;
+     justify-content: center;
+ }
+ .SignName .signTc{
+     position: fixed;
+     top: 0;
+     left: 0;
+     width: 100%;
+     height: 100%;
+     background: rgba(0, 0, 0, 0.5);
+     z-index: 200;
+     text-align: center;
+ }
+  .SignName .signTc .closeTc{
+      position: relative;
+      display: inline-block;
+      width: 60%;
+      height: 70px;
+      line-height: 70px;
+      color: #fff;
+      border: 1px solid #fff;
+      margin: 0 auto;
+      top: 50%;
+      font-size: 2rem;
+ }
+</style>
+
+<template>
+  <div class="SignName">
+      <div class="signTc" v-show="tcStatus">
+          <span @click="tcStatus=false;" class="closeTc">去签字</span>
+      </div>
+      <div class="CliSignDiv" style="height:100%;background:#fff;z-index:100">
+          <div class="CanvasDiv">
+              <div class="dash">
+                <div id="canvas" style="position:relative;top:0;">
+
+              </div>
+            </div>
+          </div>
+            
+            <div class="bottom" style="text-align:center;height:80px;line-height:80px">
+                <el-row>
+                    <el-col :span="12">
+                        <div style="width:100%;" @click="handelClearEl()">
+                            <span class="bg bg1"></span>
+                            <span style="font-size:2rem">重置签名</span>
+                        </div>
+                        
+                    </el-col>
+                    <el-col :span="12">
+                        <div style="width:100%;" @click="handelSaveEl()">
+                            <span class="bg bg2"></span>
+                            <span style="font-size:2rem">完成签名</span>
+                        </div>
+                    </el-col>
+                </el-row>
+                <!-- <input type="button" @click="handelClearEl()" class="CV_Btn" value="清除" />
+                <input type="button" @click="handelSaveEl()" class="CV_Btn" value="保存" /> -->
+            </div>
+        </div>
+ 
+  </div>
+</template>
+
+<script>
+let canvas = document.createElement("canvas");
+let cxt = canvas.getContext("2d");		
+export default {
+    data (){
+    return{
+        tcStatus:true,
+        linewidth: 3, //线条粗细，选填
+        color: "black", //线条颜色，选填
+        background: "#fff", //线条背景，选填
+        SignInfo:{},
+        msg:{
+          TCID:0,
+          orderID:0
+        },
+    }
+    },
+    created(){
+        this.SignInfo = JSON.parse(sessionStorage.getItem("SignInfo"));
+        console.log("this.SignInfo",this.SignInfo)
+    },
+    mounted(){
+        this.msg.TCID = this.$route.query.TCID;
+        this.msg.orderID = this.$route.query.orderID;
+        this.getCanvas();
+    },
+    methods:{
+        getCanvas() {
+            let el = document.getElementById("canvas");
+            el.appendChild(canvas);
+            canvas.width = el.clientWidth;
+            canvas.height = el.clientHeight;
+            cxt.fillStyle = this.background; //填充绘图的背景颜色
+            cxt.fillRect(0, 0, canvas.width, canvas.height); //绘制“已填色”的矩形
+            cxt.strokeStyle = this.color; //笔触的颜色
+            cxt.lineCap = "round"; //线条末端线帽的样式
+            let linewidth = this.linewidth;
+            //开始绘制
+            canvas.addEventListener(
+                "touchstart",
+                function(e) {
+                cxt.beginPath();
+                cxt.lineWidth = linewidth; //当前线条的宽度，以像素计
+                cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
+                }.bind(this),
+                false
+            );
+            //绘制中
+            canvas.addEventListener(
+                "touchmove",
+                function(e) {
+                cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
+                cxt.stroke();
+                }.bind(this),
+                false
+            );
+            //结束绘制
+            canvas.addEventListener(
+                "touchend",
+                function() {
+                cxt.closePath();
+                }.bind(this),
+                false
+            );
+        },
+        handelClearEl() {
+            cxt.clearRect(0, 0, canvas.width, canvas.height);
+        },
+        handelSaveEl() {
+            
+            let imgBase64 = canvas.toDataURL();
+            this.SignInfo.companySignature = imgBase64;
+            this.SaveMsg();
+        },
+        //提交数据
+        SaveMsg(){
+            this.apiJavaPost("/api/contract/dosaveOrUpdate",this.SignInfo,res => {
+                console.log("233",res);
+                    if (res.data.resultCode === 1) {
+                        this.Success(res.data.message);
+                        this.$router.push({ name: "clientConfirm",query: {TCID: this.msg.TCID,orderID: this.msg.orderID,str:1}}) 
+                    } else {
+                        this.Error(res.data.message);
+                    }
+                },null);
+        },
+    }	
+}
+
+
+
+		
+</script>
\ No newline at end of file