提交

1

src/components/QrCode/index.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="qrCode">
     <el-dialog
@@ -9,6 +8,7 @@
       width="321px"
     >
       <div class="left-code">
+        <slot></slot>
         <div id="preview">
           <!--   -->
           <!-- <vue-qr
@@ -22,18 +22,10 @@
           <copy-text>{{ codeUrl }}</copy-text>
         </p>
       </div>
-      <el-button
-        v-if="ispreLook"
-        type="primary"
-        style="width: 100%"
-        @click="preLook"
+      <el-button v-if="ispreLook" type="primary" style="width: 100%" @click="preLook"
         >预 览</el-button
       >
-      <el-button
-        v-if="isDown"
-        type="primary"
-        style="width: 100%"
-        @click="downImage"
+      <el-button v-if="isDown" type="primary" style="width: 100%" @click="downImage"
         >下载图片</el-button
       >
     </el-dialog>
@@ -119,6 +111,28 @@ export default {
           console.error("oops, something went wrong!", error);
         });
     },
+    resetImage() {
+      let firstDoc = document.getElementById("preview").firstChild;
+      if (firstDoc) {
+        document.getElementById("preview").removeChild(firstDoc);
+      }
+      const image = new Image();
+      image.src = this.logo;
+      image.width = 58;
+      image.height = 58;
+      image.onload = () => {
+        const canvas = qrcanvas({
+          options: { w: 281, h: 281 },
+          cellSize: 5,
+          data: this.codeUrl,
+          padding: 8,
+          logo: {
+            image,
+          },
+        });
+        document.getElementById("preview").appendChild(canvas);
+      };
+    },
   },
   watch: {
     value(newValue) {
@@ -171,8 +185,8 @@ export default {
 }
 #preview {
   canvas {
-    width: 281px!important;
-    height: 281px!important;
+    width: 281px !important;
+    height: 281px !important;
   }
 }
 </style>

src/views/categroyManager/insideSetting/branchManager.vue

@@ -263,11 +263,7 @@
           </el-form-item>
         </el-row>
         <el-row>
-          <el-form-item
-            label="合作单位logo"
-            prop="isEnable"
-            :label-width="formLabelWidth"
-          >
+          <el-form-item label="合作单位logo" :label-width="formLabelWidth">
             <image-cropper
               :options="cropperOptions"
               bucket_name="cloud-coach"
@@ -376,7 +372,21 @@
         >
       </span>
     </el-dialog>
-    <qr-code v-model="codeStatus" title="领队注册" :codeUrl="codeUrl" :isDown="true" />
+    <qr-code
+      v-model="codeStatus"
+      title="领队注册"
+      :codeUrl="codeUrl"
+      :value="radio"
+      :isDown="true"
+      ref="qrCode"
+    >
+      <el-radio-group v-model="radio" @change="changeRadio">
+        <el-radio label="ORCHESTRA_LEADER">乐团领队</el-radio>
+        <el-radio label="SCHOOL_LEADER">分管领导</el-radio>
+        <el-radio label="TEACHER">负责老师</el-radio>
+        <el-radio label="SCHOOLMASTER">校长</el-radio>
+      </el-radio-group>
+    </qr-code>
   </div>
 </template>
 <script>
@@ -479,6 +489,7 @@ export default {
       },
       codeStatus: false,
       codeUrl: "www.baidu.com",
+      radio: "ORCHESTRA_LEADER",
     };
   },
   async mounted() {
@@ -527,6 +538,12 @@ export default {
       this.search();
       this.$forceUpdate();
     },
+    changeRadio() {
+      this.$refs.qrCode.resetImage();
+      this.codeUrl = `${vaildTeachingUrl()}/school/#/school-register?id=${
+        this.activeRow.id
+      }&type=${this.radio}`;
+    },
     onExport() {
       Export(
         this,
@@ -700,10 +717,10 @@ export default {
       console.log(this.form.logo, "cropSuccess");
     },
     rejuest(row) {
-      console.log("注册领队");
-      this.codeUrl = `${vaildTeachingUrl()}/school/#/school-register?id=${
-        row.id
-      }&type=ORCHESTRA_LEADER`;
+      this.activeRow = row;
+      this.codeUrl = `${vaildTeachingUrl()}/school/#/school-register?id=${row.id}&type=${
+        this.radio
+      }`;
       this.codeStatus = true;
     },
   },