展厅预览

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

@@ -48,7 +48,7 @@
             v-loading="fetchingData"
         >
             <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
-            <el-table-column prop="id" label="ID" width="100"> </el-table-column>
+            <el-table-column prop="id" label="ID" width="80"> </el-table-column>
             <el-table-column prop="userId" label="用户ID"> </el-table-column>
             <el-table-column prop="nickname" label="昵称"> </el-table-column>
             <el-table-column prop="pic" label="logo">

src/main/vue/src/views/company/CompanyRoomEdit.vue

@@ -60,7 +60,7 @@
                                 :value="item.id"
                             ></el-option>
                         </el-select>
-                        <el-link style="margin-left: 30px">展厅预览</el-link>
+                        <!-- <el-link style="margin-left: 20px" @click="preview">展厅预览</el-link> -->
                     </el-form-item>
                     <el-form-item prop="headBg" label="背景" v-if="formData.settingId">
                         <el-image :src="formData.headBg" style="height: 170px"></el-image>
@@ -293,6 +293,10 @@ export default {
                     }
                 })
                 .catch(() => {});
+        },
+        preview() {
+            let url = "/9th/hall?id=" + this.formData.id;
+            window.open(url); 
         }
     }
 };

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

@@ -50,6 +50,7 @@
             <el-table-column label="操作" align="center" fixed="right" width="150">
                 <template slot-scope="{ row }">
                     <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+                    <el-button size="mini" @click="showCode(row)" type="success" plain>预览</el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -74,15 +75,21 @@
             >
             </el-pagination>
         </div>
+
+        <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,
@@ -94,7 +101,9 @@ export default {
                 { label: '审核中', value: 'PENDING' },
                 { label: '已审核', value: 'SUCCESS' },
                 { label: '失败', value: 'FAIL' }
-            ]
+            ],
+            showCodeDialog: false,
+            codeValue: 'Hello, World!'
         };
     },
     computed: {
@@ -183,6 +192,12 @@ export default {
                         this.$message.error(e.error);
                     }
                 });
+        },
+        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);
         }
     }
 };