guhongwei vor 5 Jahren
Ursprung
Commit
5d5927953f
2 geänderte Dateien mit 37 neuen und 1 gelöschten Zeilen
  1. 1 0
      package.json
  2. 36 1
      src/views/room/index.vue

+ 1 - 0
package.json

@@ -16,6 +16,7 @@
     "jsonwebtoken": "^8.5.1",
     "loadsh": "0.0.4",
     "naf-core": "^0.1.2",
+    "qrcode": "^1.4.4",
     "trtc-js-sdk": "^4.4.0",
     "vue": "^2.6.11",
     "vue-meta": "^2.3.4",

+ 36 - 1
src/views/room/index.vue

@@ -16,6 +16,7 @@
           @stat="stat"
           @delete="toDelete"
           @order="order"
+          @qrBtn="qrBtn"
           :data="list"
           :opera="opera"
           :total="total"
@@ -30,6 +31,11 @@
         </data-table>
       </el-col>
     </el-row>
+    <el-dialog title="绑定" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+      <div>
+        <img :src="qc" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -38,7 +44,7 @@ import dataTable from '@/components/data-table.vue';
 import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: room } = createNamespacedHelpers('room');
 const { mapActions: roomuser } = createNamespacedHelpers('roomuser');
-
+import QRCode from 'qrcode';
 export default {
   name: 'index',
   props: {},
@@ -65,6 +71,11 @@ export default {
           return item.status == '0' ? true : false;
         },
       },
+      {
+        label: '二维码',
+        icon: 'el-icon-film',
+        method: 'qrBtn',
+      },
       {
         label: '统计',
         icon: 'el-icon-view',
@@ -91,6 +102,9 @@ export default {
     ],
     list: [],
     total: 0,
+    dialogVisible: false,
+    roomid: '',
+    qc: '',
   }),
   created() {
     this.search();
@@ -134,6 +148,24 @@ export default {
     async order({ data }) {
       this.$router.push({ path: './detailStatus', query: { id: data.id } });
     },
+    // 二维码
+    qrBtn({ data }) {
+      this.dialogVisible = true;
+      this.$set(this, `roomid`, data.id);
+      this.$nextTick(() => {
+        this.creatQrCode();
+      });
+    },
+    // 创建二维码
+    async creatQrCode() {
+      let url = `https://zb.liaoningdoupo.com/api/onlive/auth?type=1&qrcode=${this.roomid}`; // 需要转换为二维码的内容
+      let el = document.getElementById('qrCodeUrl');
+      this.qc = await QRCode.toDataURL(url, { height: 200, width: 200 });
+    },
+    // 关闭
+    handleClose(done) {
+      done();
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -152,4 +184,7 @@ export default {
   line-height: 35px;
   padding: 0 15px;
 }
+/deep/.el-dialog__body {
+  text-align: center;
+}
 </style>