展厅预览

src/main/vue/src/views/ShowroomList.vue

@@ -68,8 +68,9 @@
             <!-- <el-table-column prop="sort" label="排序"></el-table-column> -->
             <!-- <el-table-column prop="maxCollection" label="最多可放藏品数量"> </el-table-column> -->
             <el-table-column prop="status" label="状态" :formatter="statusFormatter"> </el-table-column>
-            <el-table-column label="操作" align="center" fixed="right" width="210">
+            <el-table-column label="操作" align="center" fixed="right" width="280">
                 <template slot-scope="{ row, $index }">
+                    <el-button size="mini" @click="showCode(row)" plain>预览</el-button>
                     <el-button @click="editRow(row)" type="primary" size="mini" plain>查看</el-button>
                     <!-- <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button> -->
                     <el-button
@@ -128,15 +129,21 @@
                 <el-button type="primary" @click="saveReason">保存</el-button>
             </div>
         </el-dialog>
+
+        <el-dialog :visible.sync="showCodeDialog" title="预览二维码" width="400px" center>
+            <vue-qrcode :value="codeValue" :options="{ width: 300, margin: 2 }" style="margin-left: 25px"></vue-qrcode>
+            <div style="margin-left: 40px; font-size: 16px">扫码预览展厅</div>
+        </el-dialog>
     </div>
 </template>
 <script>
 import { mapState } from 'vuex';
 import pageableTable from '@/mixins/pageableTable';
-
+import VueQrcode from '@chenfengyuan/vue-qrcode';
 export default {
     name: 'ShowroomList',
     mixins: [pageableTable],
+    components: { VueQrcode },
     data() {
         return {
             multipleMode: false,
@@ -155,7 +162,9 @@ export default {
                 reason: [{ required: true, message: '请填写理由' }]
             },
             status: 'PENDING',
-            saving: false
+            saving: false,
+            showCodeDialog: false,
+            codeValue: 'Hello, World!'
         };
     },
     computed: {
@@ -294,6 +303,12 @@ export default {
                 .catch(e => {
                     this.tableData[this.denyForm.index].saving = false;
                 });
+        },
+        showCode(row) {
+            this.codeValue = this.$baseUrl + '/9th/hall?id=' + row.id;
+            // this.codeValue = 'https://nfttest.raex.vip/9th/hall?id=' + row.id;
+            this.showCodeDialog = true;
+            console.log(this.codeValue);
         }
     }
 };

src/main/vue/src/views/company/CompanyRoomList.vue

@@ -194,8 +194,8 @@ export default {
                 });
         },
         showCode(row) {
-            // this.codeValue = this.$baseUrl + '/9th/hall?id=' + row.id;
-            this.codeValue = 'https://nfttest.raex.vip/9th/hall?id=' + row.id;
+            this.codeValue = this.$baseUrl + '/9th/hall?id=' + row.id;
+            // this.codeValue = 'https://nfttest.raex.vip/9th/hall?id=' + row.id;
             this.showCodeDialog = true;
             console.log(this.codeValue);
         }