fix: 订单管理新增查看处方功能，接诊页面优化

apps/web-antd/src/components/modal/ImagePreview.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message, Image } from 'ant-design-vue';
+
+const url = ref('');
+const previewTitle = ref('二维码');
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const { values, title } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        url.value = values;
+        previewTitle.value = title;
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="previewTitle" class="w-[50%]">
+    <Image :src="url" height="30" width="30" />
+  </Modal>
+</template>

apps/web-antd/src/components/modal/QrCodePreview.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, Image } from 'ant-design-vue';
+import html2canvas from 'html2canvas';
+
+const qrCodeUrl = ref('');
+const htmlToImage = ref('');
+const url = ref('');
+const previewTitle = ref('二维码');
+const previewAddress = ref('');
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  footer: false,
+  header: false,
+  showCancelButton: true,
+  showConfirmButton: true,
+  confirmText: '保存诊所卡片图片',
+  cancelText: '保存诊所二维码图片',
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const { values, title, address } =
+        modalApi.getData<Record<string, any>>();
+      if (values) {
+        url.value = values;
+        qrCodeUrl.value = values;
+        previewTitle.value = title;
+        previewAddress.value = address;
+      }
+    }
+  },
+});
+/**
+ * 下载二维码
+ * @param name
+ * @param isQr
+ */
+const downloadQRCode = async (name: string, isQr = false) => {
+  const element = isQr ? qrCodeUrl.value : htmlToImage.value;
+  html2canvas(element, {
+    useCORS: true,
+    allowTaint: true,
+    logging: false,
+  }).then((canvas) => {
+    // 创建a标签下载
+    const link = document.createElement('a'); // 创建a标签
+    link.href = canvas.toDataURL(); // 是canvas对象的一种方法，用于将canvas对象转换为base64位编码
+    link.setAttribute('download', `${previewTitle.value}${name}.png`); // 利用了a标签的download 来下载 canvas图片
+    link.style.display = 'none'; // 将图片隐藏起来
+    document.body.append(link); // 插入到其中
+    link.click();
+  });
+};
+</script>
+<template>
+  <Modal :title="`${previewTitle}二维码`" class="w-[50%]">
+    <div class="qrBox" style="text-align: center">
+      <div ref="htmlToImage" class="qrModal">
+        <div id="qrcode" ref="qrCodeUrl" class="qrcode">
+          <div class="qrTitle">{{ previewTitle }}</div>
+          <Image :preview="false" :src="url" height="30" width="30" />
+          <div class="qrAddress">
+            <span class="addressTitle">诊所地址：</span>{{ previewAddress }}
+          </div>
+        </div>
+      </div>
+
+      <Button
+        style="margin: 20px auto"
+        type="primary"
+        @click="downloadQRCode('二维码卡片下载')"
+      >
+        二维码卡片下载
+      </Button>
+      <Button
+        style="margin: 20px auto 20px 20px"
+        type="primary"
+        @click="downloadQRCode('二维码下载', true)"
+      >
+        二维码下载
+      </Button>
+    </div>
+  </Modal>
+</template>
+<style lang="scss" scoped>
+.qrModal {
+  // 宽度适应文本长度
+  margin: 0 auto;
+  text-align: center;
+  background: radial-gradient(
+    circle at center,
+    rgba(173, 216, 230, 0.8),
+    rgba(135, 206, 235, 0.8),
+    rgba(100, 149, 237, 0.8)
+  );
+  padding: 20px 30px;
+
+  .qrTitle {
+    font-size: 20px;
+    margin-bottom: 30px;
+    color: #333;
+    font-weight: bold;
+  }
+
+  .qrAddress {
+    font-size: 12px;
+    margin-top: 30px;
+    color: #333;
+    font-weight: bold;
+  }
+
+  .addressTitle {
+    color: #3a8ee6;
+  }
+
+  .qrcode {
+    width: fit-content;
+    //width: 50%;
+    margin: 0 auto;
+    text-align: center;
+    padding: 20px 30px;
+    background-color: #fff;
+    border-radius: 20px;
+  }
+}
+</style>