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
80
81
82
83
84
85
86
87
| <template>
| <ProDialog
| title="二维码"
| v-model="innerVisible"
| width="400px"
| destroy-on-close
| draggable
| class="qrcode-dialog"
| >
| <div class="qrcode-wrapper">
| <vue-qrcode
| v-if="useQrcode"
| :value="form.qrcodeUrl"
| tag="img"
| :options="{ width: 180 }"
| ref="qrcode"
| >
| </vue-qrcode>
| <img v-else :src="form.qrcodeUrl" style="width: 180px; height: 180px" />
| </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: {
| qrcodeUrl: string;
| };
| useQrcode?: boolean;
| };
|
| const props = withDefaults(defineProps<Props>(), {
| modelValue: false,
| useQrcode: true,
| });
|
| 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>
|
|
