调理方案去购买添加小程序码类型

src/modules/report/scheme.page.vue

@@ -6,6 +6,7 @@ import { getReportSchemeMethod } from '@/request/api/report.api';
 import { useRouteParams }        from '@vueuse/router';
 import { useWatcher }            from 'alova/client';
 import { useRouter } from 'vue-router';
+import QrcodeVue from 'qrcode.vue';
 
 import MiniProgram from '@/components/MiniProgram.vue';
 
@@ -83,6 +84,8 @@ async function openGoodsPanel(goods: SchemeGoodsProps, event?: Event | string) {
       panelConfig.height = 0;
     };
     if (!toast) setTimeout(panelConfig.onComplete, 100);
+  } else if (goods.type === 'miniprogram') {
+    return openGoodsScan(goods);
   } else {
     Toast.warning(`暂不支持该操作 (${goods.type})`);
     return;
@@ -95,6 +98,30 @@ async function openGoodsPanel(goods: SchemeGoodsProps, event?: Event | string) {
     panelConfig.fullHeight = window.innerHeight - (pageHeader.value?.getBoundingClientRect().height ?? 0);
   }
 }
+const qrConfig = reactive({
+  size: 300,
+  margin: 2,
+  background: '#0f2925',
+  foreground: '#38ff6e',
+});
+const scanConfig = reactive({
+  show: false,
+  title: '微信扫一扫购买',
+  mode: 'img' as 'img' | 'qr',
+  url: '',
+});
+async function openGoodsScan(goods: SchemeGoodsProps) {
+  if (goods.type === 'link') {
+    scanConfig.mode = 'qr';
+  } else if (goods.type === 'miniprogram') {
+    scanConfig.mode = 'img';
+  } else {
+    Toast.warning(`暂不支持该操作 (${goods.type})`);
+    return;
+  }
+  scanConfig.url = goods.value;
+  scanConfig.show = true;
+}
 </script>
 <template>
   <div>
@@ -160,13 +187,27 @@ async function openGoodsPanel(goods: SchemeGoodsProps, event?: Event | string) {
     >
       <template #header>
         <div class="van-floating-panel__header !justify-between">
-          <div></div>
+          <div><van-icon class="pl-2" name="qr" @click="panelConfig.height = 0;openGoodsScan(panelConfig.goods)" /></div>
           <div class="van-floating-panel__header-bar"></div>
           <van-icon class="pr-2" name="cross" @click="panelConfig.height = 0" />
         </div>
       </template>
       <ReusePreviewLink v-if="panelConfig.goods?.type === 'link'" :src="panelConfig.goods?.value" :complete="panelConfig.onComplete"></ReusePreviewLink>
     </van-floating-panel>
+    <van-dialog
+      v-model:show="scanConfig.show"
+      :title="scanConfig.title"
+      cancel-button-text="好的"
+      show-cancel-button
+      :show-confirm-button="false"
+      close-on-click-overlay
+    >
+      <div class="scan-content">
+        <qrcode-vue v-if="scanConfig.mode === 'qr'" :value="scanConfig.url" v-bind="qrConfig"></qrcode-vue>
+        <img v-else-if="scanConfig.mode === 'img'" :src="scanConfig.url" alt="二维码">
+        <div v-else>{{ scanConfig.url }}</div>
+      </div>
+    </van-dialog>
   </div>
 </template>
 <style scoped lang="scss">
@@ -201,6 +242,17 @@ async function openGoodsPanel(goods: SchemeGoodsProps, event?: Event | string) {
   --van-floating-panel-border-radius: 0;
 }
 
+.scan-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  img {
+    padding: 10px 0;
+    object-fit: scale-down;
+  }
+}
+
 .has-link {
   display: flex;
   justify-content: center;

src/request/model/scheme.model.ts

@@ -13,7 +13,7 @@ export function fromSchemeRequest(data: Data) {
             ...fragment(item),
             descriptions: item?.attrs?.map(fragment) ?? [],
             media: fromSchemeMedia(item.items ?? []),
-            goods: item?.buyUrl ? fromSchemeGoods(item) : void 0,
+            goods: fromSchemeGoods(item),
           };
         }) ?? [],
       };
@@ -73,15 +73,17 @@ function fromSchemeMedia(data: Data[]) {
 }
 
 export interface SchemeGoodsProps {
-  type: 'link' | string;
+  type: 'link' | 'miniprogram' | string;
   value: string;
   label?: string;
 }
 
-function fromSchemeGoods(data: Data): SchemeGoodsProps {
-  return {
-    type: { URL: 'link' }[<string>data.buyType] ?? data.buyType,
-    label: data.buyName ?? '去购买',
-    value: data.buyUrl,
-  }
+function fromSchemeGoods(data?: Data): SchemeGoodsProps | void {
+  const result = {
+    type: { URL: 'link' }[<string>data?.buyType] ?? data?.buyType,
+    label: data?.buyName ?? '去购买',
+    value: data?.buyUrl,
+  } satisfies SchemeGoodsProps;
+  if (result.type === 'miniprogram') { result.value = data.miniprogram; }
+  return result.value ? result : void 0;
 }