1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| <template>
| <ProDialog
| :title="'二维码'"
| v-model="innerVisible"
| width="400px"
| destroy-on-close
| draggable
| class="qrcode-dialog"
| >
| <div class="qrcode-wrapper">
| <vue-qrcode :value="form.qrcodeUrl" tag="img" :options="{ width: 240 }" ref="qrcode">
| </vue-qrcode>
| </div>
| </ProDialog>
| </template>
|
| <script setup lang="ts">
| import VueQrcode from '@chenfengyuan/vue-qrcode';
| import { ProDialog } from '@bole-core/components';
|
| defineOptions({
| name: 'QrcodeDialog',
| });
|
| type Props = {
| modelValue: boolean;
| form: {
| title?: string;
| qrcodeUrl: string;
| };
| };
|
| const props = withDefaults(defineProps<Props>(), {
| modelValue: false,
| });
|
| const emit = defineEmits<{
| (e: 'update:modelValue', value: boolean): void;
| (e: 'onCancel'): void;
| }>();
|
| const innerVisible = computed({
| get() {
| return props.modelValue;
| },
| set(val) {
| emit('update:modelValue', val);
| },
| });
| </script>
|
| <style lang="scss" scoped>
| @use '@/style/common.scss' as *;
|
| .qrcode-wrapper {
| position: relative;
|
| .alipay-icon {
| position: absolute;
| top: calc(50% - 22px);
| left: calc(50% - 22px);
| display: block;
| padding: 6px;
| width: 44px;
| height: 44px;
| border: none;
| border-radius: 7px;
| background: #ffffff;
| }
| }
| </style>
| <style lang="scss">
| .qrcode-dialog {
| .el-dialog__body {
| display: flex;
| justify-content: center;
| }
| }
| </style>
|
|
