feat: 增加说明书二维码复制链接功能

package.json

@@ -55,6 +55,7 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.2.1",
     "nprogress": "0.2.0",
+    "qrcode": "^1.5.4",
     "quill": "^1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",

src/views/operation/explain/detail.vue

@@ -23,16 +23,20 @@
         </el-select>
       </el-form-item>
 
-      <!-- @upload="uploadCode($event, 'codeUrl')" -->
-      <!-- {{ form.codeUrl }} -->
-      <el-form-item v-if="form.state > 0" label="二维码图片：" prop="codeUrl">
-        <!-- <Upload
-          listType="picture-card"
-          :url="form.codeUrl"
-          :disabled="true"
-          @upload="uploadCode($event, 'codeUrl')"
-        /> -->
-        <el-image :src="form.codeUrl" />
+      <!-- justify="space-between" -->
+      <el-form-item
+        v-if="form.state != 0 && codeText != ''"
+        label="二维码图片："
+      >
+        <el-row type="flex">
+          <vue-qr :text="codeText" :size="150" />
+          <el-button
+            type="text"
+            v-clipboard:copy="codeText"
+            v-clipboard:success="copySuccess"
+            >复制链接</el-button
+          >
+        </el-row>
       </el-form-item>
 
       <el-form-item label="说明书文件：" prop="fileUrl">
@@ -52,8 +56,8 @@
     <div class="form-btn">
       <el-button @click="cancel">取消</el-button>
       <el-button v-if="!disabled" type="primary" @click="getSubmit"
-        >确定</el-button
-      >
+        >确定
+      </el-button>
     </div>
   </div>
 </template>
@@ -62,12 +66,19 @@
 import { add, detail, edit } from "@/api/operation/explain";
 import { devCategoryMixin, devTypeMixin } from "@/mixin/index";
 
+import VueQr from "vue-qr";
+
 export default {
+  components: {
+    VueQr,
+  },
   mixins: [devTypeMixin, devCategoryMixin],
   data() {
     return {
+      codeText: "",
       // 表单
       form: {
+        state: 0,
         fileUrl: "",
       },
       // 只读
@@ -89,13 +100,6 @@ export default {
         categoryName: [
           { required: true, message: "请选择设备类型", trigger: "change" },
         ],
-        codeUrl: [
-          {
-            required: true,
-            message: "请上传二维码图片",
-            trigger: "change",
-          },
-        ],
         fileUrl: [
           { required: true, message: "请上传下载路径", trigger: "blur" },
         ],
@@ -106,6 +110,7 @@ export default {
   mounted() {
     this.form.id = this.$route.query.id;
     this.form.state = this.$route.query.state;
+    console.log("gasdfqwerqwwerqrweqrq====" + this.form.state);
     this.disabled = Boolean(this.$route.query.boolean == 1);
     this.getCateGory(1);
     this.getDetail();
@@ -114,20 +119,21 @@ export default {
   methods: {
     // 详情
     getDetail() {
-      var state = this.form.state;
-      if (state != 0) {
+      if (this.form.state != 0) {
         detail(this.form.id).then((res) => {
           if (res.code === 0) {
             this.form = res.data;
-            this.form.state = state;
+
+            this.codeText =
+              this.form.copyUrl + "pages/explain/index?id=" + this.form.id;
           }
         });
       }
     },
 
-    // 上传
-    uploadCode(e) {
-      this.form.codeUrl = e.file;
+    // 复制成功
+    copySuccess() {
+      this.$message.success("复制成功！");
     },
 
     // 上传
@@ -176,4 +182,4 @@ export default {
 .el-form {
   width: 500px;
 }
-</style>
+</style>