修改二维码

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

@@ -41,23 +41,6 @@
             </el-button>
           </td>
         </tr>
-        <tr>
-          <td>商品链接</td>
-          <td style="text-align: center">
-            <div
-              style="display: inline-block; margin-right: 10px"
-              class="ele-text-secondary"
-              v-html="form.urlItem"
-            ></div>
-            <el-button
-              v-clipboard:copy="form.urlItem"
-              v-clipboard:success="onCopy"
-              size="small"
-            >
-              复制
-            </el-button>
-          </td>
-        </tr>
         <tr>
           <td>二维码图片</td>
           <td style="text-align: center">
@@ -87,8 +70,7 @@
     },
     data() {
       const defaultForm = {
-        url: '',
-        urlItem: ''
+        url: ''
       };
       return {
         level: 'L',

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

@@ -0,0 +1,135 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="800px"
+    :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="ele-text-secondary">鼠标右建可复制保存</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: '',
+          width: 28,
+          height: 28,
+          x: undefined,
+          y: undefined,
+          excavate: false
+        },
+        defaultForm,
+        // 表单数据
+        form: { ...defaultForm },
+        // 表单验证规则
+        // 提交状态
+        loading: false
+      };
+    },
+    created() {
+      let hostname = window.location.hostname;
+      if (hostname == 'bo.liche.cn') {
+        this.image.src =
+          'https://qs.haodian.cn/web/images/project/Admin-ShiYu/code-logo.png';
+      } else if (hostname == 'dongfeng.haodian.cn') {
+        this.image.src =
+          'https://qs.haodian.cn/web/images/project/Admin-ShiYu/df-code-logo.png';
+      } else {
+        this.image.src =
+          'https://qs.haodian.cn/web/images/project/Admin-ShiYu/code-logo.png';
+      }
+    },
+    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/goods/index.vue

@@ -43,6 +43,14 @@
         </template>
         <!-- 操作列 -->
         <template v-slot:action="{ row }">
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-_share"
+            @click="openCode(row)"
+          >
+            链接
+          </el-link>
           <el-link
             type="primary"
             :underline="false"
@@ -67,10 +75,13 @@
     </el-card>
     <!-- 编辑弹窗 -->
     <goods-edit :data="current" :visible.sync="showEdit" @done="reload" />
+    <!-- 二维码 -->
+    <qr-code :data="current" :visible.sync="showCode" />
   </div>
 </template>
 
 <script>
+  import QrCode from './components/qr-code.vue';
   import { setPageTabTitle } from '@/utils/page-tab-util';
   import GoodsSearch from './components/goods-search.vue';
   import GoodsEdit from './components/goods-edit.vue';
@@ -85,7 +96,7 @@
 
   export default {
     name: 'syliveGoods',
-    components: { GoodsSearch, GoodsEdit },
+    components: { QrCode, GoodsSearch, GoodsEdit },
     data() {
       return {
         // 加载状态
@@ -97,6 +108,8 @@
         current: null,
         // 是否显示编辑弹窗
         showEdit: false,
+        // 是否显示二维码弹窗
+        showCode: false,
         activityId: null,
         // 表格列配置
         columns: [
@@ -227,6 +240,11 @@
         }
         this.showEdit = true;
       },
+      /* 打开二维码弹窗 */
+      openCode(row) {
+        this.current = row;
+        this.showCode = true;
+      },
       /* 删除 */
       remove(row) {
         const loading = this.$loading({ lock: true });