页面修改

src/App.vue

@@ -12,7 +12,7 @@ export default {
 
 <style>
 @import url("~assets/css/font.css");
-@import url("//at.alicdn.com/t/font_2077629_ew7nihu6b4p.css");
+@import url("//at.alicdn.com/t/font_2077629_8vzffiv0anf.css");
 .q-scrollarea__thumb {
   z-index: 999999 !important;
 }

src/api/sale/contract.js

@@ -201,3 +201,16 @@ export function SetBackClassProtocolSure(data) {
     data
   })
 }
+  
+/**
+ * 获取签字二维码链接
+ *
+ */
+export function CreateWeChatCode(data) {
+  return request({
+    url: '/EducationContract/CreateWeChatCode',
+    method: 'post',
+    data
+  })
+}
+  
\ No newline at end of file

src/components/course/courserefund-form.vue

+<style>
+  .courserefund_Div{
+    color:#000;
+    width:160px;
+    text-align: center
+  }
+  .courserefund_Div>div{
+    margin-bottom:10px;
+  }
+</style>
 <template>
   <div class="page-content">
+    <div class="courserefund_Div" id="proToCol">
+      <img :src="imgUrl" alt="" style="width:150px;" />
+      <div>尊敬的客户</div>
+      <div>您的退款协议《xxxxx》请你长按识别二维码，查阅并签字。</div>
+    </div>
     <q-table :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
       separator="none" title="退课协议" :data="dataList" :columns="columns" row-key="name">
       <template v-slot:top="props">
@@ -72,11 +87,13 @@
   import backbillForm from "../../components/sale/backbill-form";
   import {
     SetBackClassProtocolSure,
+    CreateWeChatCode
   } from "../../api/sale/contract";
   import {
     GetEducationReceiptPage,
-
   } from "../../api/teacher/index";
+  import html2canvas from "html2canvas";
+
   export default {
     props: {
       dataList: {
@@ -153,7 +170,7 @@
         ],
         //权限显示对象
         AuthorityObj: {
-          isShowCopyLink: false, //是否显示复制链接
+          isShowCopyLink: true, //是否显示复制链接
           isShowSure: false, //是否显示确认按钮
         },
         isShowBillForm: false, //是否显示退课详情
@@ -162,6 +179,7 @@
           rowsPerPage: 12,
         },
         billObj: {},
+        imgUrl:'http://192.168.20.24:8300/upfile/temporary/20210805/637637591390867572.jpg',
       }
     },
     created() {
@@ -245,17 +263,98 @@
         })
       },
       //复制URL
+      // CopyUrl(item) {
+      //   var oInput = document.createElement("input");
+      //   var url = window.location.host;
+      //   oInput.value = url + "/#/courseRefundH5" + `?Id=${item.Id}`;
+      //   document.body.appendChild(oInput);
+      //   oInput.select(); // 选择对象
+      //   document.execCommand("Copy"); // 执行浏览器复制命令
+      //   oInput.className = "oInput";
+      //   oInput.style.display = "none";
+      //   this.Info("复制成功!");
+      // }
+       //复制URL
       CopyUrl(item) {
-        var oInput = document.createElement("input");
-        var url = window.location.host;
-        oInput.value = url + "/#/courseRefundH5" + `?Id=${item.Id}`;
-        document.body.appendChild(oInput);
-        oInput.select(); // 选择对象
-        document.execCommand("Copy"); // 执行浏览器复制命令
-        oInput.className = "oInput";
-        oInput.style.display = "none";
-        this.Info("复制成功!");
+        // var oInput = document.createElement("input");
+        // var url = window.location.host;
+        // oInput.value = url + "/#/courseRefundH5" + `?Id=${item.Id}`;
+        // document.body.appendChild(oInput);
+        // oInput.select(); // 选择对象
+        // document.execCommand("Copy"); // 执行浏览器复制命令
+        // oInput.className = "oInput";
+        // oInput.style.display = "none";
+        // this.Info("复制成功!");
+        let msg = {
+          url: '/courseRefundH5',
+          width: 430
         }
+        this.ProtocolNum = item.ProtocolNum;
+        // CreateWeChatCode(msg).then((res) => {
+        //   console.log(res,'数据');
+        //   if (res.Code == 1) {
+        //     this.imgUrl = 'http://192.168.20.24:8300'+res.Data;
+        //   }
+        // });
+
+        setTimeout(() => {
+          let canvasID = document.getElementById("proToCol");
+          let a = document.createElement("a");
+          this.getBase64Image(this.imgUrl,document.querySelector('.imgs'))
+          html2canvas(canvasID, {
+            useCORS: true,  //【重要】开启跨域配置
+            allowTaint: true,  //允许跨域图片
+            backgroundColor: "#FFFFFF",
+            scale: 1.3,
+            taintTest: false //是否在渲染前测试图片
+          }).then(canvas => {
+            let dom = document.body.appendChild(canvas);
+            dom.style.display = "none";
+            a.style.display = "none";
+            document.body.removeChild(dom);
+            let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
+            a.setAttribute("href", URL.createObjectURL(blob));
+            var name = this.ProtocolNum;
+            a.setAttribute("download", name);
+            document.body.appendChild(a);
+            a.click();
+            URL.revokeObjectURL(blob);
+            document.body.removeChild(a);
+          });
+        }, 1000);
+      },
+      getBase64Image(url, ref) {
+        var that = this;
+        var image = new Image();
+        image.src = url + "?v=" + Math.random(); // 处理缓存
+        image.crossOrigin = "*"; // 支持跨域图片
+        image.onload = function () {
+          var base64 = that.drawBase64Image(image);
+          ref.src = base64;
+        };
+      },
+      drawBase64Image(img) {
+        var canvas = document.createElement("canvas");
+        canvas.width = img.width;
+        canvas.height = img.height;
+        var ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0, img.width, img.height);
+        var dataURL = canvas.toDataURL("image/png");
+        return dataURL;
+      },
+      dataURLToBlob(dataurl) {
+        let arr = dataurl.split(",");
+        let mime = arr[0].match(/:(.*?);/)[1];
+        let bstr = atob(arr[1]);
+        let n = bstr.length;
+        let u8arr = new Uint8Array(n);
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], {
+          type: mime
+        });
+      },
     }
   }
 

src/pages/administration/dropSchoolManage.vue

@@ -27,7 +27,7 @@
         </div>
       </div>
     </div>
-    <courserefund-form :loading="loading" :dataList="dataList"></courserefund-form>
+    <courserefund-form :loading="loading" :dataList="dataList" @success="getList"></courserefund-form>
     <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount" :input="true"
       @input="changePage" />
   </div>