修改

src/App.vue

@@ -12,7 +12,7 @@ export default {
 
 <style>
 @import url('~assets/css/font.css');
-@import url('//at.alicdn.com/t/font_2077629_a7sx3iejpat.css');
+@import url('//at.alicdn.com/t/font_2077629_d6aa14tmbq.css');
 
 html,
 body,

src/api/sale/contract.js

@@ -109,5 +109,19 @@ export function GetStudentInfo(data) {
   })
 }
 
+/**
+ * 获取付款码
+ *
+ */
+export function GenerateOrder(data) {
+  return request({
+    url: '/WeChatPay/GenerateOrder',
+    method: 'post',
+    data
+  })
+}
+
+
+
 
 

src/pages/contractConfirm.vue

@@ -188,16 +188,15 @@
       padding: 0!important;
       height:20px;
   }
-
 </style>
 <template>
   <div class="TcConfirmMain">
-    <div class="TCdiv_content" :class="dialogVisible?'CisHideen':''">
+    <div class="TCdiv_content">
       <!-- 签字 -->
       <div class="signSpan">
-        <div @click="isShowSignDiv=true,dialogVisible=true" :class="dialogVisible?'CisHideen':''" class="sign">
+        <div @click="goSign()" class="sign">
           <span style="padding:0;"><i style="font-size:1.2rem" class="iconfont icon-qianming"></i></span>
-          <span style="font-size:1.2rem;margin-left:0.2rem;" v-if="msg.Sign==''||msg.Sign==null">签字</span>
+          <span style="font-size:1.2rem;margin-left:0.2rem;" v-if="dataList.Sign==''||dataList.Sign==null">签字</span>
           <span style="font-size:1.2rem;margin-left:0.2rem;" v-else>重新签字</span>
         </div>
       </div>
@@ -387,7 +386,7 @@
             <span style="width:50px;display:inline-block;text-align:center;" class="comConInput">{{dataList.SealDateDay}}</span>日
           </p>
           <div style="margin-top:100px;position:relative;">
-            乙方签字（盖章）：<img v-if="dataList.Sign" :src="dataList.Sign" style="width:45px;position:absolute;top:-30px;" />
+            乙方签字（盖章）：<img v-if="dataList.Sign" :src="dataList.Sign" style="width:80px;position:absolute;top:-15px;" />
           </div>
           <p style="margin:40px 0 30px 0;">
             <span style="width:50px;display:inline-block;text-align:center;" class="comConInput">{{dataList.StuSignYear}}</span>年
@@ -769,46 +768,13 @@
               <div class="comConInput" style="width:50px;"></div>日
             </div> 
           </div>
-
-
-        </div>
-      </div>
-    </div>
-    <div class="CliSignDiv" :class="dialogVisible?'isShowSign':''" @touchmove.prevent>
-      <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:60px;line-height:60px">
-          <el-row>
-            <el-col :span="12">
-              <div style="width:100%;" @click="handelClearEl()">
-                <span style="font-size:1.2rem;color:rgb(36, 173, 229)" class="iconfont icon-zhongzhi"></span>
-                <span style="font-size:1.2rem">重置签名</span>
-              </div>
-
-            </el-col>
-            <el-col :span="12">
-              <div style="width:100%;" @click="handelSaveEl()">
-                <span style="font-size:1.2rem;color:rgb(36, 173, 229)" class="iconfont icon-dagou"></span>
-                <span style="font-size:1.2rem">完成签名</span>
-              </div>
-            </el-col>
-          </el-row>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
-  import moment from 'moment'
-  let canvas = document.createElement("canvas");
-  let cxt = canvas.getContext("2d");
   import {
-    SetEducationContractSign,
     GetEducationContractInfo
   } from '../api/sale/contract'
 
@@ -817,13 +783,6 @@
       return {
         dataList: [],
         dialogVisible: false,
-        linewidth: 5, //线条粗细，选填
-        color: "black", //线条颜色，选填
-        background: "#fff", //线条背景，选填
-        msg: {
-          ContractId: 0,
-          Sign: ''
-        },
         gmsg: {
           ContractId: 0
         },
@@ -836,7 +795,6 @@
         this.gmsg.ContractId = this.$route.query.ContractId;
         this.getList();
       }
-
     },
     methods: {
       //获取数据
@@ -850,73 +808,18 @@
       ChangeTab(num) {
         this.ActiveTab = num;
       },
-      getCanvas() {
-        let el = document.getElementById("canvas");
-        el.appendChild(canvas);
-        canvas.width = el.clientWidth;
-        canvas.height = el.clientHeight;
-        //cxt.fillStyle = this.background; //填充绘图的背景颜色
-        cxt.fillStyle = 'rgba(255, 255, 255, 0)';
-        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.msg.Sign = imgBase64;
-        this.msg.ContractId = this.$route.query.ContractId;
-        this.SaveMsg();
-      },
-      //提交数据
-      SaveMsg() {
-        SetEducationContractSign(this.msg).then(res => {
-          if (res.Code == 1) {
-            this.$q.notify({
-              icon: 'iconfont icon-chenggong',
-              color: 'accent',
-              timeout: 2000,
-              message: '保存成功！',
-              position: 'top'
-            })
-            this.dialogVisible = false;
-            this.getList();
-          }
-        })
+      //跳转至合同签名
+      goSign(){
+        this.$router.push({
+            path: '/contractSign',
+            query: {
+              ContractId: this.gmsg.ContractId,
+              Money:this.dataList.Money
+            }
+        });
       }
     },
     mounted() {
-      this.getCanvas();
     }
   };
 

src/pages/contractPay.vue

@@ -29,7 +29,7 @@
   .Contract_TwoDiv {
     width: 100%;
     height: 28rem;
-    margin-top:50px;
+    margin-top: 50px;
     background-color: #F3F9FC;
     text-align: center;
     color: #111111;
@@ -38,25 +38,27 @@
 
   .contractTotal {
     font-size: 20px;
-    padding-top:50px;
+    padding-top: 50px;
   }
 
   .contractMoney {
     font-size: 30px;
     font-weight: bold;
-    margin-top:10px;
+    margin-top: 10px;
   }
-  .contractTwoCode{
-    width:180px;
-    height:180px;
-    border:1px solid #d1d1d1;
-    margin:20px auto;
+
+  .contractTwoCode {
+    width: 180px;
+    height: 180px;
+    margin: 20px auto;
   }
-  .TwoCodeRemind{
-    color:#888888;
-    font-size:20px;
-    margin-top:20px;
+
+  .TwoCodeRemind {
+    color: #888888;
+    font-size: 18px;
+    margin-top: 20px;
   }
+
 </style>
 <template>
   <div class="ContractPay">
@@ -65,42 +67,71 @@
     </div>
     <div class="Contract_TwoDiv">
       <div class="contractTotal">合同总价</div>
-      <div class="contractMoney">10000.00</div>
-      <div class="contractTwoCode">
-          
+      <div class="contractMoney">{{Money}}</div>
+      <div class="contractTwoCode" id="qrcode" ref="qrcode">
       </div>
       <div class="TwoCodeRemind">长按识别上图收款码，完成支付</div>
     </div>
   </div>
 </template>
 <script>
+  import {
+    GenerateOrder
+  } from '../api/sale/contract'
+  import QRCode from 'qrcodejs2'
+
   export default {
     data() {
       return {
-        dataList: [],
+        msg: {
+          contractId: 0
+        },
+        Money:0,
+        dataList: {}
       };
     },
     created() {
 
+    },
+    mounted() {
+      if (this.$route.query.contractId) {
+        this.msg.contractId = this.$route.query.contractId;
+        this.getList();
+      }
+      if(this.$route.query.Money){
+        this.Money = this.$route.query.Money;
+      }
     },
     methods: {
       //获取数据
       getList() {
-        // GetEducationContractInfo(this.gmsg).then(res => {
-        //   if (res.Code == 1) {
-        //     this.dataList = res.Data;
-        //   }
-        // })
+        GenerateOrder(this.msg).then(res => {
+          if (res.Code == 1) {
+            this.dataList = res.Data;
+            this.qrcode(this.dataList.code_url);
+          }
+        }).catch((e) => {
+
+        })
+      },
+
+      qrcode(code_url) {
+        let qrcode = new QRCode('qrcode', {
+          width: 180,
+          height: 180, // 高度
+          text: code_url // 二维码内容
+        })
       },
       //跳转至合同详情
-      goContractConfirm(){
+      goContractConfirm() {
         this.$router.push({
           path: 'contractConfirm',
-          query: {} 
+          query: {
+            ContractId: this.msg.contractId
+          }
         });
       }
     },
-    mounted() {}
   };
 
 </script>

src/pages/contractSign.vue

+<style>
+  .loadingtext {
+    transform: rotate(-90deg);
+    color: red;
+  }
+
+  .signature .Sign_Item {
+    -webkit-transform: rotate(-90deg);
+  }
+
+  .signature .Sign_Text {
+    text-align: center;
+  }
+
+  .signature .boardBox {
+    width: 100vw;
+    height: 90vh;
+    background: #f9f9f9;
+  }
+
+  .signature .sigfn_Bar {
+    box-sizing: border-box;
+    padding: 0rem 1rem;
+    display: flex;
+    width: 100vw;
+    height: 10vh;
+    background-color: #ffffff;
+    justify-content: space-around;
+    align-items: center;
+  }
+  .signature .icoDicv{
+    width:40px;
+    height:40px;
+    background: gray;
+    border-radius: 50%;
+    color:#fff;
+    text-align: center;
+    line-height: 40px;
+  }
+  .signature .icoDicv i{
+    font-size:25px;
+  }
+</style>
+<template>
+  <div class="signature" @touchmove.prevent>
+    <div class="boardBox" ref="boardBox">
+      <canvas ref="board" id="canvas" @touchstart="mStart" @touchmove="mMove" @touchend="mEnd"></canvas>
+    </div>
+    <div class="sigfn_Bar">
+      <div class="Sign_Item" @click="goback">
+        <div class="icoDicv">
+          <i class="iconfont icon-tuichu"></i>
+        </div>
+        <div class="Sign_Text">退出</div>
+      </div>
+      <div class="Sign_Item" @click="clearcanvas">
+        <div class="icoDicv">
+          <i class="iconfont icon-zhongzhi"></i>
+        </div>
+        <div class="Sign_Text">重绘</div>
+      </div>
+      <div class="Sign_Item" @click="getcanvas">
+        <div class="icoDicv" style="background:red;">
+          <i class="iconfont icon-xiazai"></i>
+        </div>
+        <div class="Sign_Text">保存</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import {
+    SetEducationContractSign
+  } from '../api/sale/contract'
+  export default {
+    data() {
+      return {
+        familysignatureurl: "",
+        basedata: "",
+        ctx: null,
+        point: {
+          x: 0,
+          y: 0,
+        },
+        moving: false, // 是否正在绘制中且移动
+        msg:{
+          ContractId: 0,
+          Sign:''
+        },
+        Money:0
+      };
+    },
+    mounted() {
+      let board = this.$refs.board; // 获取DOM
+      board.width = this.$refs.boardBox.offsetWidth; // 设置画布宽
+      board.height = this.$refs.boardBox.offsetHeight; // 设置画布高
+      this.ctx = board.getContext("2d"); // 二维绘图
+      this.ctx.strokeStyle = "#000"; // 颜色
+      this.ctx.lineWidth = 5; // 线条宽度
+      if (this.$route.query.ContractId) {
+        this.msg.ContractId = this.$route.query.ContractId;
+      }
+      if (this.$route.query.Money){
+        this.Money = this.$route.query.Money;
+      }
+
+    },
+    methods: {
+      // 触摸(开始)
+      mStart(e) {
+        let x = e.touches[0].clientX - e.target.offsetLeft,
+          y = e.touches[0].clientY - e.target.offsetTop; // 获取触摸点在画板（canvas）的坐标
+        this.point.x = x;
+        this.point.y = y;
+        this.ctx.beginPath();
+        this.moving = true;
+      },
+      // 滑动中...
+      mMove(e) {
+        if (this.moving) {
+          let x = e.touches[0].clientX - e.target.offsetLeft,
+            y = e.touches[0].clientY - e.target.offsetTop; // 获取触摸点在画板（canvas）的坐标
+          this.ctx.moveTo(this.point.x, this.point.y); // 把路径移动到画布中的指定点，不创建线条(起始点)
+          this.ctx.lineTo(x, y); // 添加一个新点，然后创建从该点到画布中最后指定点的线条，不创建线条
+          this.ctx.stroke(); // 绘制
+          (this.point.x = x), (this.point.y = y); // 重置点坐标为上一个坐标
+        }
+      },
+      // 滑动结束
+      mEnd() {
+        if (this.moving) {
+          this.ctx.closePath(); // 停止绘制
+          this.moving = false; // 关闭绘制开关
+        }
+      },
+      getcanvas() {
+        //绘画转图片
+        document.getElementById("canvas").toDataURL("image/png");
+        document.getElementById("canvas").toBlob(async (blobObj) => {
+          var file1 = new File([blobObj], "pic.png", {
+            type: blobObj.type,
+            lastModified: Date.now(),
+          });
+          this.convertImg(file1);
+        });
+      },
+      //旋转图片
+      convertImg(file) {
+        let _this = this;
+        var canvas1 = document.createElement("canvas");
+        var context1 = canvas1.getContext("2d");
+        var oReader = new FileReader();
+        oReader.readAsDataURL(file);
+        oReader.onload = function (e) {
+          var img = new Image();
+          img.src = e.target.result;
+          img.onload = function () {
+            // 图片原始尺寸
+            var originWidth = this.width;
+            var originHeight = this.height;
+            // 最大尺寸限制
+            var maxWidth = 1080,
+              maxHeight = 1080;
+            // 目标尺寸
+            var targetWidth = originWidth,
+              targetHeight = originHeight;
+            // 图片尺寸超过300x300的限制
+            if (originWidth > maxWidth || originHeight > maxHeight) {
+              if (originWidth / originHeight > maxWidth / maxHeight) {
+                targetWidth = maxWidth;
+                targetHeight = Math.round(
+                  maxWidth * (originHeight / originWidth)
+                );
+              } else {
+                targetHeight = maxHeight;
+                targetWidth = Math.round(
+                  maxHeight * (originWidth / originHeight)
+                );
+              }
+            }
+            var type = "image/jpeg";
+            // canvas对图片进行缩放
+            canvas1.width = targetHeight;
+            canvas1.height = targetWidth;
+            // 旋转90度
+            context1.translate(0, 0);
+            context1.rotate(Math.PI / 2);
+            // (0,-imgHeight) 从旋转原理图那里获得的起始点
+            // context.clearRect(0,  -targetHeight, targetWidth, targetHeight);
+            context1.drawImage(img, 0, -targetHeight, targetWidth, targetHeight);
+            // 将canvas的透明背景设置成白色
+            var imageData = context1.getImageData(
+              0,
+              0,
+              canvas1.width,
+              canvas1.height
+            );
+            for (var i = 0; i < imageData.data.length; i += 4) {
+              // 当该像素是透明的，则设置成白色
+              if (imageData.data[i + 3] == 0) {
+                imageData.data[i] = 255;
+                imageData.data[i + 1] = 255;
+                imageData.data[i + 2] = 255;
+                imageData.data[i + 3] = 255;
+              }
+            }
+            context1.putImageData(imageData, 0, 0);
+            var dataurl = canvas1.toDataURL(type);
+            // _this.basedata = dataurl;
+            _this.msg.Sign = canvas1.toDataURL(type);
+            _this.SaveMsg();
+          };
+        };
+      },
+      //提交数据
+      SaveMsg() {
+        SetEducationContractSign(this.msg).then(res => {
+          if (res.Code == 1) {
+            this.$q.notify({
+              icon: 'iconfont icon-chenggong',
+              color: 'accent',
+              timeout: 2000,
+              message: '保存成功！',
+              position: 'top'
+            })
+            this.$router.push({
+              path: '/contractPay',
+              query: {
+                contractId: this.msg.ContractId,
+                Money: this.Money
+              }
+            });
+          }
+        })
+      },
+
+      //base64转Blob
+      base64ToBlob(base64Data) {
+        let arr = base64Data.split(","),
+          fileType = arr[0].match(/:(.*?);/)[1],
+          bstr = atob(arr[1]),
+          l = bstr.length,
+          u8Arr = new Uint8Array(l);
+
+        while (l--) {
+          u8Arr[l] = bstr.charCodeAt(l);
+        }
+        return new Blob([u8Arr], {
+          type: fileType,
+        });
+      },
+      //清除画布
+      clearcanvas() {
+        var c = document.getElementById("canvas");
+        var cxt = c.getContext("2d");
+        c.height = c.height;
+        this.ctx.lineWidth = 3;
+      },
+      //返回上一级
+      goback() {
+        this.$router.push({
+          path: '/contractConfirm',
+          query: {
+            ContractId: this.msg.ContractId
+          }
+        });      
+      },
+    },
+  };
+
+</script>

src/pages/contractView.vue

@@ -683,7 +683,7 @@
             <div class="contractInput" style="width:50px;">{{dataList.SealDateDay}}</div>日
           </div>
           <div class="contractContent" style="margin-top:150px;position:relative;">
-            乙方签字（盖章）：<img style="width:50px;position:absolute;top:-40px;" :src="dataList.Sign" />
+            乙方签字（盖章）：<img style="width:80px;position:absolute;" :src="dataList.Sign" />
           </div>
           <div class="contractContent" style="text-align:right;margin-top:150px;">
             <div class="contractInput" style="width:50px;">{{dataList.StuSignYear}}</div>年

src/router/routes.js

@@ -726,6 +726,11 @@ const routes = [{
     component: () =>
       import("pages/contractConfirm.vue")
   },
+  {
+    path: '/contractSign',  //合同签名页面
+    component: () =>
+    import("pages/contractSign.vue")
+  },
   {
     path: "/contractPay",
     component: () =>