1

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

@@ -190,3 +190,28 @@ export function SetBackClassProtocolSign(data) {
   })
 }
 
+/**
+ * 销售确认
+ *
+ */
+export function SetBackClassProtocolSure(data) {
+  return request({
+    url: '/EducationContract/SetBackClassProtocolSure',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 获取签字二维码链接
+ *
+ */
+export function CreateWeChatCode(data) {
+  return request({
+    url: '/EducationContract/CreateWeChatCode',
+    method: 'post',
+    data
+  })
+}
+
+

src/components/course/courserefund-form.vue

+<style>
+  .proTocol_Top {
+    color: #000;
+    text-align: center;
+    width:230px;
+  }
+
+  .proTocol_Top>div {
+    margin-top: 5px;
+  }
+  .proTocol_Top>div:last-child{
+    margin-bottom:10px;
+  }
+</style>
 <template>
   <div class="page-content">
+    <div class="proTocol_Top" id="proToCol">
+      <img :src="imgUrl" class="imgs" style="width:150px;" alt="" />
+      <div>尊敬的客户</div>
+      <div>您的退款协议《{{ProtocolNum}}》</div>
+      <div>请你长按识别二维码，查阅并签字。</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">
@@ -51,9 +71,11 @@
                     (props.row.Sign == '' || props.row.Sign == null)
                   " icon="iconfont icon-qianming" color="accent" style="font-weight: 400" @click="CopyUrl(props.row)"
                 label="获取合同链接" /> -->
-              <q-btn flat size="xs" icon="iconfont icon-qianming" color="accent" style="font-weight: 400" @click="CopyUrl(props.row)"
-                label="获取合同链接" />
+              <q-btn flat size="xs" icon="iconfont icon-qianming" color="accent" style="font-weight: 400"
+                @click="CopyUrl(props.row)" label="获取合同链接" />
             </el-tooltip>
+            <q-btn flat label="销售确认" color="accent" size="xs" icon="iconfont icon-queren"
+              @click="salerSure(props.row.Id)" style="font-weight:400" />
             <q-btn flat size="xs" icon="iconfont icon-View" color="accent" @click="goContract(props.row.Id)"
               style="font-weight: 400" label="查看" />
           </div>
@@ -63,6 +85,11 @@
   </div>
 </template>
 <script>
+  import {
+    SetBackClassProtocolSure,
+    CreateWeChatCode
+  } from "../../api/sale/contract";
+  import html2canvas from "html2canvas";
   export default {
     props: {
       dataList: {
@@ -133,6 +160,8 @@
         pageMsg: {
           rowsPerPage: 12,
         },
+        ProtocolNum: '', // 协议编号
+        imgUrl: 'http://192.168.20.24:8300/upfile/temporary/20210805/637637591390867572.jpg'
       }
     },
     created() {
@@ -141,22 +170,102 @@
     mounted() {},
     methods: {
       //跳转至详情
-      goContract(Id){
-        this.OpenNewUrl('/courseRefund',{
-            Id:Id
+      goContract(Id) {
+        this.OpenNewUrl('/courseRefund', {
+          Id: Id
         })
       },
       //复制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
+        });
+      },
+      //销售确认
+      salerSure(Id) {
+        let msg = {
+          Id: Id
+        }
+        SetBackClassProtocolSure(msg).then((res) => {
+          if (res.Code == 1) {
+            this.$emit('success');
+          }
+        });
       }
     }
   }

src/pages/administration/dropSchoolManage.vue

@@ -22,7 +22,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>