生成群组二维码

light-application-ui/package.json

@@ -20,6 +20,7 @@
     "mock": "^0.1.1",
     "moment": "^2.29.2",
     "nprogress": "^0.2.0",
+    "qrcodejs2": "^0.0.2",
     "qs": "^6.10.3",
     "spark-md5": "^3.0.1",
     "svg-sprite-loader": "^6.0.11",

light-application-ui/src/axios.js

@@ -7,7 +7,7 @@ axios.defaults.baseURL = 'https://miniapp.cqjudong.com/base';
 //axios.defaults.baseURL = 'http://localhost:8081';
 
 const request = axios.create({
-    timeout: 5000,
+    timeout: 10000,
     headers: {
         'Content-Type': 'application/json; charset=utf-8'
     }

light-application-ui/src/views/page/components/groupQRCode.vue

@@ -0,0 +1,94 @@
+<template>
+    <div>
+        <el-dialog
+            title='群组二维码'
+            :visible.sync='dialogVisible'
+            width='60%'>
+            <div class='paycode'>
+                <!-- 放置二维码的容器,需要给一个ref -->
+                <div class='qrcode' ref='qrCodeUrl' id='qrcode'></div>
+            </div>
+            <div class='button-class'>
+                <!-- <el-button @click='productCode(groupData.id)'>生成二维码</el-button> -->
+                <el-button @click='downloadAppCodeImg'>点击下载二维码</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import QRCode from 'qrcodejs2';
+
+export default {
+    watch: {
+        dialogVisible: (newValue, oldValue) => {
+            if (!newValue) {
+                //不晓得vue啷个清空标签内容，用原生js来清空
+                document.getElementById('qrcode').innerHTML = '';
+            }
+        }
+    },
+    name: 'groupQRCode',
+    data() {
+        return {
+            dialogVisible: false,
+            groupData: {}
+        };
+    },
+    created() {
+
+    },
+    methods: {
+        show(data) {
+            this.groupData = data;
+            this.dialogVisible = true;
+            //等vue实例挂载完成再生成二维码，不然会报错
+            this.$nextTick(() => {
+                this.productCode(this.groupData.id);
+            });
+        },
+        // 生成二维码
+        productCode(data) {
+            let qrcode = new QRCode(this.$refs.qrCodeUrl, {
+                // 这里选择器也可以直接写 'qrcode' 用的是id选择器   指示不需要带 # 而已
+                text: data, //  生成二维码的 内容
+                width: 300, //  宽   单位 px
+                height: 300 //  高   单位 px
+                // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
+                // background: '#f0f'
+                // foreground: '#ff0'
+                //correctLevel: QRCode.CorrectLevel.H // 二维码容错 级别
+            });
+        },
+        // 下载二维码
+        downloadAppCodeImg(name) {
+            let canvasData = document
+                .getElementById('qrcode')
+                .getElementsByTagName('img'); //生成二维码之后其实是个img 所以获取完id之后还要获取到这个img 才能下载成功
+            let a = document.createElement('a');
+            console.log('xiazai', canvasData);
+            a.href = canvasData[0].src;
+            a.download = this.groupData.name + '.png';
+            a.click();
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+.el-button {
+    margin-top: 20px;
+}
+
+.paycode {
+    display: flex;
+    justify-content: center;
+}
+
+.button-class {
+    display: flex;
+    justify-content: right;
+}
+
+</style>

light-application-ui/src/views/page/groupManage.vue

@@ -62,7 +62,7 @@
             <el-table-column
                 prop='icon'
                 fixed='right'
-                width='180px'
+                width='220px'
                 label='操作'>
                 <template slot-scope='scope'>
                     <span>
@@ -78,6 +78,10 @@
                         <el-divider direction='vertical'></el-divider>
                         <el-button type='text' @click='showManageMember(scope.row)'>管理成员</el-button>
                     </span>
+                    <span>
+                        <el-divider direction='vertical'></el-divider>
+                        <el-button type='text' @click='showQRCode(scope.row)'>二维码</el-button>
+                    </span>
                 </template>
             </el-table-column>
         </el-table>
@@ -155,6 +159,7 @@
             </div>
         </el-dialog>
         <ManageMember ref='manageMember'></ManageMember>
+        <GroupQRCode ref='groupQRCode'></GroupQRCode>
     </div>
 </template>
 
@@ -162,12 +167,13 @@
 import axios from 'axios';//加载表格数据的时候用原生axios防止loading组件显示两次
 import { Loading } from 'element-ui';
 import ManageMember from './components/manageMember';
+import GroupQRCode from './components/groupQRCode';
 
 let loading;
 let options = {};
 export default {
     name: 'groupManage',
-    components: { ManageMember },
+    components: { ManageMember,GroupQRCode },
     data() {
         return {
             dialogVisible: false,
@@ -353,6 +359,9 @@ export default {
         },
         showManageMember(row) {
             this.$refs['manageMember'].show(row);
+        },
+        showQRCode(row) {
+            this.$refs['groupQRCode'].show(row);
         }
     }
 };

light-application-ui/src/views/sys/Menu.vue

@@ -75,7 +75,7 @@
                     <el-divider direction="vertical"></el-divider>
 
                     <template>
-                        <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
+                        <el-popconfirm title="确定要删除此菜单吗？" @confirm="delHandle(scope.row.id)">
                             <el-button type="text" slot="reference">删除</el-button>
                         </el-popconfirm>
                     </template>

light-application-ui/src/views/sys/Role.vue

@@ -79,7 +79,7 @@
                     <el-divider direction="vertical"></el-divider>
 
                     <template>
-                        <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
+                        <el-popconfirm title="确定要删除此角色吗？" @confirm="delHandle(scope.row.id)">
                             <el-button type="text" slot="reference">删除</el-button>
                         </el-popconfirm>
                     </template>

light-application-ui/src/views/sys/User.vue

@@ -114,7 +114,7 @@
                     <el-divider direction='vertical'></el-divider>
 
                     <template>
-                        <el-popconfirm title='这是一段内容确定删除吗？' @confirm='delHandle(scope.row.id)'>
+                        <el-popconfirm title='确定要删除此用户吗？' @confirm='delHandle(scope.row.id)'>
                             <el-button type='text' slot='reference'>删除</el-button>
                         </el-popconfirm>
                     </template>