添加 小程序 报告预览

src/modules/report/NavBar.vue

@@ -18,7 +18,7 @@ const route = useRoute();
 const router = useRouter();
 
 const props = defineProps<{ uploading?: boolean; }>();
-const emits = defineEmits<{ print: []; }>();
+const emits = defineEmits<{ print: []; mini: []; }>();
 
 const isScheme = ref(false);
 const tabbar = shallowRef<Tabbar[]>([]);
@@ -32,7 +32,8 @@ watchEffect(() => {
   ] : [
     { key: 'screen', label: '返回首页', icon: NavHome, select: NavHomeSelect },
     { key: 'scheme', label: '调理方案', icon: NavScheme, select: NavSchemeSelect },
-    { key: 'print', label: '打印', icon: NavPrint, select: NavPrintSelect },
+    // { key: 'print', label: '打印', icon: NavPrint, select: NavPrintSelect },
+    { key: 'mini', label: '小程序', icon: NavPrint, select: NavPrintSelect },
   ];
 });
 
@@ -49,6 +50,10 @@ function handle(key: string) {
       break;
     case 'print':
       emits('print');
+      break;
+    case 'mini':
+      emits('mini');
+      break;
   }
 }
 </script>

src/modules/report/PhysiqueChart.vue

@@ -65,7 +65,7 @@ const chart = useTemplateRef<InstanceType<typeof VChart>>('chart');
 
 let loaded = false;
 function onFinished() {
-  if (loaded || !snapshot.value.startsWith(`data:image/`)) return;
+  if (loaded || snapshot.value && snapshot.value.startsWith(`data:image/`)) return;
   snapshot.value = chart.value?.getDataURL() ?? '';
   loaded = true;
 }

src/modules/report/ReportPreview.vue

@@ -2,7 +2,12 @@
 import QrcodeVue from 'qrcode.vue';
 import { getClientURL } from '@/tools';
 
-const props = defineProps<{ url: string }>();
+
+const props = withDefaults(defineProps<{ url: string; title?: string; mode?: 'img' | 'qr' }>(), {
+  title: '扫一扫',
+  mode: 'qr',
+});
+
 const show = defineModel('show', { default: false });
 const config = reactive({
   size: 300,
@@ -12,23 +17,25 @@ const config = reactive({
 });
 
 const url = computed(() => {
-  const value = `${getClientURL('/pdf/preview.html')}?url=${encodeURIComponent(props.url)}`
-  console.log(value);
-  return value;
+  return props.mode === 'qr'
+         ? `${ getClientURL('/pdf/preview.html') }?url=${ encodeURIComponent(props.url) }`
+         : props.url;
 });
 </script>
 
 <template>
   <van-dialog
     v-model:show="show"
-    title="扫一扫 获取报告"
+    :title="props.title"
     cancel-button-text="好的"
     show-cancel-button
     :show-confirm-button="false"
     close-on-click-overlay
   >
     <div class="content">
-      <qrcode-vue :value="url" v-bind="config"></qrcode-vue>
+      <qrcode-vue v-if="props.mode === 'qr'" :value="url" v-bind="config"></qrcode-vue>
+      <img v-else-if="props.mode === 'img'" :src="url" alt="二维码">
+      <div v-else>{{ url }}</div>
     </div>
   </van-dialog>
 </template>
@@ -38,5 +45,9 @@ const url = computed(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  img {
+    padding: 10px 0;
+  }
 }
-</style>
+</style>

src/modules/report/SyndromeChart.vue

@@ -56,7 +56,7 @@ const chart = useTemplateRef<InstanceType<typeof VChart>>('chart');
 
 let loaded = false;
 function onFinished() {
-  if (loaded || !snapshot.value.startsWith(`data:image/`)) return;
+  if (loaded || snapshot.value && snapshot.value.startsWith(`data:image/`)) return;
   snapshot.value = chart.value?.getDataURL() ?? '';
   loaded = true;
 }

src/modules/report/report.page.vue

@@ -30,7 +30,12 @@ const { loading: uploading, send: upload } = useRequest(() => updateReportMethod
 }).onSuccess(({ data: url }) => { data.value.reportURL = url; });
 
 let ReportPreview: Component;
-const showReportPreview = ref(false);
+const reportPreviewProps = reactive({
+  show: false,
+  title: '',
+  url: '',
+  mode: '' as 'img' | 'qr',
+});
 async function print() {
   let url = data.value.reportURL;
   if (!url) url = await upload();
@@ -39,7 +44,23 @@ async function print() {
     return;
   }
   ReportPreview = defineAsyncComponent(() => import('./ReportPreview.vue'));
-  showReportPreview.value = true;
+  reportPreviewProps.mode = 'qr';
+  reportPreviewProps.title = '扫一扫 获取报告';
+  reportPreviewProps.url = url;
+  reportPreviewProps.show = true;
+}
+
+async function miniProgram() {
+  let url = data.value.miniProgramURL;
+  if ( !url ) {
+    Notify.warning(`未获取到小程序地址，请联系管理员或重试`);
+    return;
+  }
+  ReportPreview = defineAsyncComponent(() => import('./ReportPreview.vue'));
+  reportPreviewProps.mode = 'img';
+  reportPreviewProps.title = '微信 扫一扫';
+  reportPreviewProps.url = url;
+  reportPreviewProps.show = true;
 }
 </script>
 <template>
@@ -184,9 +205,8 @@ async function print() {
           </div>
         </div>
       </van-skeleton>
-      <NavBar class="flex-none" :uploading @print="print"></NavBar>
-
-      <Component :is="ReportPreview" v-model:show="showReportPreview" :url="data.reportURL"></Component>
+      <NavBar class="flex-none" :uploading @print="print" @mini="miniProgram"></NavBar>
+      <Component :is="ReportPreview" v-bind="reportPreviewProps" v-model:show="reportPreviewProps.show"></Component>
     </div>
   </div>
 </template>

src/request/model/report.model.ts

@@ -57,6 +57,7 @@ export function fromReportData(data: Record<string, any>) {
     constitutionGroupImg: data?.constitutionGroupImg,
     factorItemRadarImg: data?.factorItemRadarImg,
     reportURL: data?.reportPdfUrl,
+    miniProgramURL: data?.appletImg,
   };
 }