logo二维码

1

src/components/QrCode/index.vue

@@ -1,97 +1,153 @@
 
 <template>
-    <div class="qrCode">
-        <el-dialog :title="title"
-               :visible.sync="status"
-               @close="onDialogClose"
-               append-to-body
-               width="300px">
-            <div class="left-code">
-                <vue-qr :text="codeUrl" style="width: 100%" :margin="0"></vue-qr>
-                <p class="code-url" v-if="codeUrl"><copy-text>{{ codeUrl }}</copy-text></p>
-            </div>
-            <el-button v-if="ispreLook" type="primary" style="width:100%" @click="preLook">预 览</el-button>
-        </el-dialog>
-    </div>
+  <div class="qrCode">
+    <el-dialog
+      :title="title"
+      :visible.sync="status"
+      @close="onDialogClose"
+      append-to-body
+      width="300px"
+    >
+      <div class="left-code">
+        <div  id="preview">
+          <!--   -->
+        <vue-qr
+
+          :text="codeUrl"
+          style="width: 100%"
+          :logoCornerRadius="5"
+          :logoScale="40"
+          :logoSrc="logo"
+          :logoMargin="5"
+          :margin="0"
+        ></vue-qr>
+        </div>
+        <p class="code-url" v-if="codeUrl">
+          <copy-text>{{ codeUrl }}</copy-text>
+        </p>
+      </div>
+      <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
+      >
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import VueQr from 'vue-qr'
-import copy from 'copy-to-clipboard'
+import VueQr from "vue-qr";
+import copy from "copy-to-clipboard";
+import { toPng } from "html-to-image";
 export default {
-    data() {
-        return {
-            status: false
-        };
+  data() {
+    return {
+      status: false,
+      logo: require("@/assets/images/logo.png"),
+    };
+  },
+  components: {
+    VueQr,
+  },
+  props: {
+    value: {
+      // 组件状态
+      type: Boolean,
+      required: true,
+      default() {
+        return false;
+      },
+    },
+    title: {
+      type: String,
+      default() {
+        return "查看二维码";
+      },
+    },
+    codeUrl: {
+      type: String,
+    },
+    ispreLook: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    },
+    isDown: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    },
+  },
+  mounted() {
+    this.status = this.value;
+  },
+  methods: {
+    onDialogClose() {
+      this.status = false;
+      this.$emit("input", false);
     },
-    components: {
-        VueQr
+    copyUrl(url) {
+      copy(url);
+      this.$message.success("复制成功");
     },
-    props: {
-        value: {
-            // 组件状态
-            type: Boolean,
-            required: true,
-            default() {
-                return false
-            }
-        },
-        title: {
-            type: String,
-            default() {
-                return '查看二维码'
-            }
-        },
-        codeUrl: {
-            type: String
-        },
-        ispreLook:{
-           type: Boolean,
-            default() {
-                return false
-            }
-        }
+    preLook() {
+      this.$emit("preLook");
     },
-    mounted() {
-        this.status = this.value
+    downImage() {
+      var node = document.getElementById("preview");
+      toPng(node)
+        .then((dataUrl) => {
+          var img = new Image();
+          img.src = dataUrl;
+          // 在这里下载
+          let link = document.createElement("a");
+          let fname = "二维码.png"; //下载文件的名字
+          link.href = dataUrl;
+          link.setAttribute("download", fname);
+          document.body.appendChild(link);
+          link.click();
+          this.$emit("close");
+        })
+        .catch(function (error) {
+          console.error("oops, something went wrong!", error);
+        });
     },
-    methods: {
-        onDialogClose() {
-            this.status = false
-            this.$emit('input', false)
-        },
-        copyUrl(url) {
-            copy(url)
-            this.$message.success('复制成功')
-        },
-        preLook(){
-          this.$emit('preLook')
-        }
+  },
+  watch: {
+    value(newValue) {
+      this.status = newValue;
     },
-    watch: {
-        value(newValue) {
-            this.status = newValue;
-        },
-        title(newValue, oldValue) {
-            if(newValue != oldValue) {
-                this.title = newValue
-            }
-        }
+    title(newValue, oldValue) {
+      if (newValue != oldValue) {
+        this.title = newValue;
+      }
     },
-    beforeDestroy() {},
+  },
+  beforeDestroy() {},
 };
 </script>
 
 <style lang="scss">
-.left-code{
-    .code-url{
-        margin-top: 10px;
-        margin-bottom: 10px;
-        .link-btn{
-            margin-top: 0;
-            margin-bottom: 0;
-            font-size: 12px;
-        }
+.left-code {
+  .code-url {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    .link-btn {
+      margin-top: 0;
+      margin-bottom: 0;
+      font-size: 12px;
     }
+  }
 }
 </style>

src/views/categroyManager/insideSetting/staffPlatManager.vue

@@ -570,7 +570,7 @@
       </span>
     </el-dialog>
 
-    <qr-code v-model="codeStatus" title="入驻二维码" :codeUrl="qrCodeUrl" />
+    <qr-code v-model="codeStatus" :isDown="true" title="入驻二维码" :codeUrl="qrCodeUrl" />
   </div>
 </template>
 <script>