修改

src/components/course/courserefund-form.vue

@@ -2,7 +2,8 @@
   .courserefund_Div{
     color:#000;
     width:160px;
-    text-align: center
+    text-align: center;
+    z-index:-99;
   }
   .courserefund_Div>div{
     margin-bottom:10px;
@@ -13,9 +14,9 @@
     <div class="courserefund_Div" id="proToCol">
       <img :src="imgUrl" alt="" style="width:150px;" />
       <div>尊敬的客户</div>
-      <div>您的退款协议《xxxxx》请你长按识别二维码，查阅并签字。</div>
+      <div>您的退款协议《{{ProtocolNum}}》请你长按识别二维码，查阅并签字。</div>
     </div>
-    <q-table :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
+    <q-table :pagination="pageMsg" :loading="loading" style="margin-top:-258px" no-data-label="暂无相关数据" flat class="sticky-column-table"
       separator="none" title="退课协议" :data="dataList" :columns="columns" row-key="name">
       <template v-slot:top="props">
         <div class="col-2 q-table__title">退课协议</div>
@@ -161,13 +162,15 @@
           rowsPerPage: 12,
         },
         imgUrl:'http://192.168.20.24:8300/upfile/temporary/20210805/637637591390867572.jpg',
-
+        getBlob:'',
+        ProtocolNum:''
       }
     },
     created() {
       this.initAuth();
     },
-    mounted() {},
+    mounted() {
+    },
     methods: {
       //初始化权限信息
       initAuth() {
@@ -221,45 +224,25 @@
           });
         })
       },
-      //复制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("复制成功!");
         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;
+        //     let address = process.env.API;
+        //     let aOne = address.split('/api')[0];
+        //     this.imgUrl = aOne + res.Data;
         //   }
         // });
-
+        this.ProtocolNum = item.ProtocolNum;
+        this.getBlob = this.getAnyFileBlob(this.imgUrl);
         setTimeout(() => {
-          let canvasID = document.getElementById("proToCol");
+          let canvasID = document.getElementById("proToCol");          
           let a = document.createElement("a");
-          this.getBase64Image(this.imgUrl,document.querySelector('.imgs'))
           html2canvas(canvasID, {
             useCORS: true,  //【重要】开启跨域配置
             allowTaint: true,  //允许跨域图片
@@ -282,25 +265,6 @@
           });
         }, 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];

src/pages/courseRefund.vue

@@ -121,7 +121,7 @@
       </div>
       <div class="Tui_Inner">
         第三条：乙方应将原协议和收据原件交还甲方，若原件无法交还，请乙方<br />在此声明：
-        <div class="TuitractInput" style="width: 750px;">{{dataList.StateMent}}</div>
+        <div class="TuitractInput" style="width: 750px;text-align:left;">{{dataList.StateMent}}</div>
       </div>
       <div class="Tui_Inner">
         第四条：本协议自签订之日起正式生效。