分享二维码生成

src/utils/request.js

@@ -22,7 +22,6 @@ service.interceptors.request.use(
     if (token && config.headers) {
       config.headers.common[TOKEN_HEADER_NAME] = token;
     }
-    console.log(API_BASE_URL);
     return config;
   },
   (error) => {

src/views/sylive/activity/components/activity-edit.vue

@@ -66,9 +66,9 @@
       <el-form-item label="分享图片:" prop="shareImg">
         <ele-image-upload
           v-model="form.shareImg"
-          :limit="1"
+          :limit="10"
           :drag="true"
-          :multiple="false"
+          :multiple="true"
           :upload-handler="shareImgHandler"
           @upload="onUpload"
         />
@@ -303,6 +303,7 @@
 </script>
 <style>
   .ele-image-upload-list .ele-image-upload-item {
-    margin-bottom: 0;
+    margin-top: 5px;
+    margin-bottom: 5px;
   }
 </style>

src/views/sylive/activity/components/qr-code.vue

@@ -0,0 +1,122 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="680px"
+    :visible="visible"
+    :append-to-body="true"
+    :close-on-click-modal="true"
+    custom-class="ele-dialog-form"
+    title="分享二维码"
+    @update:visible="updateVisible"
+  >
+    <table
+      class="ele-table ele-table-border ele-table-medium"
+      style="margin-bottom: 20px"
+    >
+      <colgroup>
+        <col />
+        <col />
+      </colgroup>
+      <thead>
+        <tr>
+          <th>名称</th>
+          <th style="text-align: center">链接</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>链接</td>
+          <td style="text-align: center">
+            <div
+              style="display: inline-block; margin-right: 10px"
+              class="ele-text-secondary"
+              v-html="form.url"
+            ></div>
+            <el-button
+              v-clipboard:copy="form.url"
+              v-clipboard:success="onCopy"
+              size="small"
+            >
+              复制
+            </el-button>
+          </td>
+        </tr>
+        <tr>
+          <td>二维码图片</td>
+          <td style="text-align: center">
+            <ele-qr-code
+              :value="form.url"
+              :size="160"
+              :image-settings="image"
+            />
+            <div class="demonstration">鼠标右建可复制保存</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </ele-modal>
+</template>
+
+<script>
+  import EleQrCode from 'ele-admin/es/ele-qr-code';
+
+  export default {
+    components: { EleQrCode },
+    props: {
+      // 弹窗是否打开
+      visible: Boolean,
+      // 修改回显的数据
+      data: Object
+    },
+    data() {
+      const defaultForm = {
+        url: ''
+      };
+      return {
+        level: 'L',
+        size: 120,
+        margin: 0,
+        image: {
+          src: 'https://qs.haodian.cn/wechat_app/common/code-logo.png',
+          width: 28,
+          height: 28,
+          x: undefined,
+          y: undefined,
+          excavate: false
+        },
+        defaultForm,
+        // 表单数据
+        form: { ...defaultForm },
+        // 表单验证规则
+        // 提交状态
+        loading: false
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      },
+      onCopy: function () {
+        this.$message.success('复制成功！');
+      }
+    },
+    watch: {
+      visible(visible) {
+        if (visible) {
+          if (this.data) {
+            this.$util.assignObject(this.form, {
+              ...this.data
+            });
+          }
+        }
+      }
+    }
+  };
+</script>

src/views/sylive/activity/index.vue

@@ -51,6 +51,14 @@
           >
             修改
           </el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-_share"
+            @click="openCode(row)"
+          >
+            分享二维码
+          </el-link>
           <el-popconfirm
             class="ele-action"
             title="确定要删除此用户吗？"
@@ -72,10 +80,13 @@
       :organization-list="organizationList"
       @done="reload"
     />
+    <!-- 二维码 -->
+    <qr-code :visible.sync="showCode" :data="current" />
   </div>
 </template>
 
 <script>
+  import QrCode from './components/qr-code.vue';
   import ActivitySearch from './components/activity-search.vue';
   import ActivityEdit from './components/activity-edit.vue';
   import {
@@ -89,6 +100,7 @@
   export default {
     name: 'syliveActivity',
     components: {
+      QrCode,
       ActivitySearch,
       ActivityEdit
     },
@@ -167,7 +179,7 @@
           {
             columnKey: 'action',
             label: '操作',
-            width: 220,
+            width: 250,
             align: 'center',
             resizable: false,
             slot: 'action',
@@ -179,7 +191,9 @@
         // 当前编辑数据
         current: null,
         // 是否显示编辑弹窗
-        showEdit: false
+        showEdit: false,
+        // 是否显示二维码弹窗
+        showCode: false
       };
     },
     created() {
@@ -216,6 +230,11 @@
         this.current = row;
         this.showEdit = true;
       },
+      /* 打开二维码弹窗 */
+      openCode(row) {
+        this.current = row;
+        this.showCode = true;
+      },
       /* 删除 */
       remove(row) {
         const loading = this.$loading({ lock: true });