f

src/components/ShareReportButton.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { ref } from "vue";
-import { showToast, showDialog } from "vant";
+import { useShareReport } from "@/composables/useShareReport";
 
 const props = defineProps({
     orderId: {
@@ -21,104 +20,16 @@ const props = defineProps({
     },
 });
 
-const isLoading = ref(false);
+const { isLoading, handleShare } = useShareReport();
 
-const copyToClipboard = async (text) => {
-    await navigator.clipboard.writeText(text);
-    showToast({
-        type: "success",
-        message: "链接已复制到剪贴板",
-        position: "bottom",
-    });
-};
-const handleShare = async () => {
-    if (isLoading.value || props.disabled) return;
-    // 如果是示例模式，直接分享当前URL
-    if (props.isExample) {
-        try {
-            const currentUrl = window.location.href;
-            await copyToClipboard(currentUrl);
-            showToast({
-                type: "success",
-                message: "示例链接已复制到剪贴板",
-                position: "bottom",
-            });
-        } catch (err) {
-            showToast({
-                type: "fail",
-                message: "复制链接失败",
-                position: "bottom",
-            });
-        }
-        return;
-    }
-
-    // 优先使用 orderId，如果没有则使用 orderNo
-    const orderIdentifier = props.orderId || props.orderNo;
-    if (!orderIdentifier) {
-        showToast({
-            type: "fail",
-            message: "缺少订单标识",
-            position: "bottom",
-        });
-        return;
-    }
-
-    isLoading.value = true;
-    try {
-        // 根据实际使用的标识构建请求参数
-        const requestData = props.orderId
-            ? { order_id: props.orderId }
-            : { order_no: props.orderNo };
-
-        const { data, error } = await useApiFetch("/query/generate_share_link")
-            .post(requestData)
-            .json();
-
-        if (error.value) {
-            throw new Error(error.value);
-        }
-
-        if (data.value?.code === 200 && data.value.data?.share_link) {
-            const baseUrl = window.location.origin;
-            const linkId = encodeURIComponent(data.value.data.share_link);
-            const fullShareUrl = `${baseUrl}/report/share/${linkId}`;
-
-            try {
-                // 显示确认对话框
-                await showDialog({
-                    title: "分享链接已生成",
-                    message: "链接将在7天后过期，是否复制到剪贴板？",
-                    confirmButtonText: "复制链接",
-                    cancelButtonText: "取消",
-                    showCancelButton: true,
-                });
-
-                // 用户点击确认后复制链接
-                await copyToClipboard(fullShareUrl);
-            } catch (dialogErr) {
-                // 用户点击取消按钮时，dialogErr 会是 'cancel'
-                // 这里不需要显示错误提示，直接返回即可
-                return;
-            }
-        } else {
-            throw new Error(data.value?.message || "生成分享链接失败");
-        }
-    } catch (err) {
-        showToast({
-            type: "fail",
-            message: err.message || "生成分享链接失败",
-            position: "bottom",
-        });
-    } finally {
-        isLoading.value = false;
-    }
+const onShare = () => {
+    handleShare(props.orderId, props.orderNo, props.isExample, props.disabled);
 };
 </script>
 
 <template>
     <div class="bg-primary-second border border-primary-second rounded-[40px] px-3 py-1 flex items-center justify-center cursor-pointer hover:bg-primary-600 transition-colors duration-200"
-        :class="{ 'opacity-50 cursor-not-allowed': isLoading || disabled }" @click="handleShare">
+        :class="{ 'opacity-50 cursor-not-allowed': isLoading || disabled }" @click="onShare">
         <img src="@/assets/images/report/fx.png" alt="分享" class="w-4 h-4 mr-1" />
         <span class="text-white text-sm font-medium">
             {{ isLoading ? "生成中..." : (isExample ? "分享示例" : "分享报告") }}