|
|
@@ -20,12 +20,20 @@
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <c-dialog :dialog="dialog" @toClose="toClose">
|
|
|
+ <template v-slot:info>
|
|
|
+ <div id="qrCode">
|
|
|
+ <div class="qrcode" ref="qrCodeUrl"></div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </c-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { is_use, table_type } from '@common/src/layout/site';
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+import QRCode from 'qrcodejs2'; //引入生成二维码插件
|
|
|
const { mapActions } = createNamespacedHelpers('table');
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
@@ -72,6 +80,9 @@ export default {
|
|
|
is_useList: is_use,
|
|
|
// 桌台类型
|
|
|
typeList: table_type,
|
|
|
+ // 弹框
|
|
|
+ dialog: { title: '桌码', show: false, type: '1' },
|
|
|
+ url: 'https://blog.csdn.net/weixin_42601136',
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -93,7 +104,26 @@ export default {
|
|
|
},
|
|
|
// 生成桌码
|
|
|
toCode() {
|
|
|
- console.log('1');
|
|
|
+ this.dialog = { title: '桌码', show: true, type: '1' };
|
|
|
+ this.creatQrCode();
|
|
|
+ },
|
|
|
+ creatQrCode() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.qrCodeUrl.innerHTML = ''; //二维码清除
|
|
|
+ new QRCode(this.$refs.qrCodeUrl, {
|
|
|
+ text: this.url, //二维码链接，参数是否添加看需求
|
|
|
+ width: 150,
|
|
|
+ height: 150,
|
|
|
+ colorDark: '#000000',
|
|
|
+ colorLight: '#ffffff',
|
|
|
+ correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 关闭
|
|
|
+ toClose() {
|
|
|
+ this.dialog = { title: '信息管理', show: false, type: '1' };
|
|
|
+ this.search();
|
|
|
},
|
|
|
// 添加
|
|
|
toAdd() {
|
|
|
@@ -126,11 +156,25 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.dialog_1 {
|
|
|
- video {
|
|
|
- width: 100%;
|
|
|
- height: 390px;
|
|
|
- background-color: #000000;
|
|
|
- }
|
|
|
+#qrCode {
|
|
|
+ /* background-color: #111; */
|
|
|
+ width: 150px;
|
|
|
+ height: 200px;
|
|
|
+ margin: 0 auto; /*水平居中*/
|
|
|
+}
|
|
|
+
|
|
|
+.qrCode {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 14px auto;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-100px, -100px);
|
|
|
+}
|
|
|
+.qrCode img {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 6px;
|
|
|
}
|
|
|
</style>
|
