feat(aigc): add task detail and image save flow

- Replace global AigcRecord store with task ID URL parameters instead of store state - Integrate real task detail API to replace static mock result data - Update ResultActions component with loading state, disabled styles, and native uni-app share support - Add full image save flow with album permission checking and error handling - Clean up unused files including the aigcRecord store and static result data - Adjust RecordList padding and paging component text for better UX
2026-07-13 22:14:50 +08:00
parent 10638e0806
commit efe97452e0
9 changed files with 239 additions and 107 deletions
--- a/src/pages-aigc/detail/detail.vue
+++ b/src/pages-aigc/detail/detail.vue
@@ -3,52 +3,68 @@
    <AigcTopBar :points="pointBalance" @back="handleBack" @history="handleOpenRecords" @recharge="handleRecharge" />

    <view class="aigc-detail-content">
-      <ResultPreview :result="result" />
-      <ResultMeta :items="metaItems" />
-      <ContinuationCard v-if="continuationInfo" :info="continuationInfo" @upgrade="handleUpgradeToVideo" />
-      <ResultActions @save="handleSave" @share="handleShare" />
+      <template v-if="taskDetail">
+        <ResultPreview v-if="result.cover" :result="result" />
+        <CustomEmpty v-else :statusText="result.resultLabel" />
+        <ResultMeta :items="metaItems" />
+        <ResultActions :saving="isSaving" @save="handleSave" />

-      <view class="aigc-detail-text-actions">
-        <view class="aigc-detail-text-action" @tap="handleRegenerate">再生成一版</view>
-        <view class="aigc-detail-text-action" @tap="handleChangeTemplate">换个模板</view>
-        <view class="aigc-detail-text-action" @tap="handleOpenRecords">历史记录</view>
-      </view>
+        <view class="aigc-detail-text-actions">
+          <view class="aigc-detail-text-action" @tap="handleRegenerate">再生成一版</view>
+          <view class="aigc-detail-text-action" @tap="handleChangeTemplate">换个模板</view>
+          <view class="aigc-detail-text-action" @tap="handleOpenRecords">历史记录</view>
+        </view>
+      </template>
+      <CustomEmpty v-else :statusText="detailEmptyText" />
    </view>
  </view>
 </template>

 <script setup>
-import { computed } from "vue";
-import { onShow } from "@dcloudio/uni-app";
-import { storeToRefs } from "pinia";
+import { computed, ref } from "vue";
+import { onLoad, onShareAppMessage, onShow } from "@dcloudio/uni-app";
+import CustomEmpty from "@/components/CustomEmpty/index.vue";
 import AigcTopBar from "@/pages-aigc/components/AigcTopBar/index.vue";
 import { useCurrentCredit } from "@/pages-aigc/hooks/useCurrentCredit.js";
-import { useAigcRecordStore } from "@/store";
-import ContinuationCard from "./components/ContinuationCard/index.vue";
+import { getAigcGeneratorTaskDetail } from "@/request/api/AigcApi.js";
 import ResultActions from "./components/ResultActions/index.vue";
 import ResultMeta from "./components/ResultMeta/index.vue";
 import ResultPreview from "./components/ResultPreview/index.vue";
-import { aigcDetailResult } from "./data/result.js";

 const { pointBalance, fetchCurrentCredit } = useCurrentCredit();
-const aigcRecordStore = useAigcRecordStore();
-const { currentRecord } = storeToRefs(aigcRecordStore);
+const taskId = ref("");
+const taskDetail = ref(null);
+const detailEmptyText = ref("加载中...");
+const isSaving = ref(false);

 const GENERATOR_TYPE_TEXT = {
  0: "图片版",
  1: "视频版",
 };

+const TASK_STATUS_TEXT = {
+  0: "排队中",
+  1: "生成中",
+  2: "已完成",
+  3: "生成失败",
+  4: "视频生成中",
+};
+
+const getMappedText = (mapping, value, prefix) => {
+  if (Object.prototype.hasOwnProperty.call(mapping, value)) {
+    return mapping[value];
+  }
+  return value === undefined || value === null || value === "" ? "-" : `${prefix}${value}`;
+};
+
 const result = computed(() => {
-  const record = currentRecord.value;
-  if (!record) return aigcDetailResult;
+  const record = taskDetail.value || {};

  const imageUrl = record.imageResultUrl || "";
  const videoUrl = record.videoResultUrl || "";
  const isVideo = Boolean(videoUrl) && (record.generatorType === 1 || !imageUrl);
-  const typeText =
-    GENERATOR_TYPE_TEXT[record.generatorType] ||
-    (record.generatorType === undefined ? "生成结果" : `类型${record.generatorType}`);
+  const typeText = getMappedText(GENERATOR_TYPE_TEXT, record.generatorType, "类型");
+  const statusText = getMappedText(TASK_STATUS_TEXT, record.taskStatus, "状态");
  const consumedText =
    record.generatorCost === undefined || record.generatorCost === null || record.generatorCost === ""
      ? "-"
@@ -61,41 +77,22 @@ const result = computed(() => {
    mediaType: isVideo ? "video" : "image",
    accent: "#0a4d46",
    variantLabel: typeText,
-    resultLabel: typeText,
+    resultLabel: statusText,
    consumedText,
-    desc: record.itemSubTitle || "生成任务已完成",
+    desc: record.itemSubTitle || statusText,
  };
 });

-onShow(() => {
-  fetchCurrentCredit();
-});
-
 const metaItems = computed(() => {
-  if (currentRecord.value) {
-    const record = currentRecord.value;
-    const completeTime =
-      record.videoGeneratorCompleteTime || record.imageGeneratorCompleteTime || record.createTime || "-";
+  const record = taskDetail.value;
+  if (!record) return [];

-    return [
-      {
-        label: "结果",
-        value: result.value.resultLabel,
-      },
-      {
-        label: "已消耗",
-        value: result.value.consumedText,
-      },
-      {
-        label: "完成时间",
-        value: completeTime,
-      },
-    ];
-  }
+  const completeTime =
+    record.videoGeneratorCompleteTime || record.imageGeneratorCompleteTime || record.createTime || "-";

  return [
    {
-      label: "结果",
+      label: "状态",
      value: result.value.resultLabel,
    },
    {
@@ -103,23 +100,12 @@ const metaItems = computed(() => {
      value: result.value.consumedText,
    },
    {
-      label: "余额",
-      value: `${pointBalance.value}积分`,
+      label: "完成时间",
+      value: completeTime,
    },
  ];
 });

-const continuationInfo = computed(() => {
-  if (currentRecord.value) return null;
-
-  return {
-    title: result.value.continuationTitle,
-    desc: result.value.continuationDesc,
-    cost: result.value.continuationCost,
-    buttonText: result.value.continuationButtonText,
-  };
-});
-
 const showPlaceholderToast = (title) => {
  uni.showToast({
    title,
@@ -127,6 +113,66 @@ const showPlaceholderToast = (title) => {
  });
 };

+const fetchTaskDetail = async () => {
+  detailEmptyText.value = "加载中...";
+  uni.showLoading({
+    title: "加载中",
+    mask: true,
+  });
+
+  try {
+    const res = await getAigcGeneratorTaskDetail({ taskId: taskId.value });
+    if (res?.code === 0 && res.data && typeof res.data === "object" && !Array.isArray(res.data)) {
+      taskDetail.value = res.data;
+      return;
+    }
+
+    taskDetail.value = null;
+    detailEmptyText.value = "未获取到生成结果";
+    showPlaceholderToast("获取任务详情失败");
+  } catch (error) {
+    console.error("获取AIGC生成任务详情失败", error);
+    taskDetail.value = null;
+    detailEmptyText.value = "未获取到生成结果";
+    showPlaceholderToast("获取任务详情失败");
+  } finally {
+    uni.hideLoading();
+  }
+};
+
+onLoad((query = {}) => {
+  taskId.value = String(query.taskId || "").trim();
+  if (!taskId.value) {
+    detailEmptyText.value = "缺少任务信息";
+    showPlaceholderToast("缺少任务ID");
+    return;
+  }
+
+  fetchTaskDetail();
+});
+
+onShow(() => {
+  fetchCurrentCredit();
+});
+
+
+onShareAppMessage(() => {
+  const shareInfo = {
+    title: taskDetail.value?.itemTitle,
+    path: taskId.value
+      ? `/pages-aigc/detail/detail?taskId=${encodeURIComponent(taskId.value)}`
+      : "/pages-aigc/home/home",
+  };
+  const imageUrl = taskDetail.value?.imageResultUrl || "";
+
+  if (imageUrl) {
+    shareInfo.imageUrl = imageUrl;
+  }
+
+  return shareInfo;
+});
+
+
 const handleBack = () => {
  const pages = getCurrentPages();
  if (pages.length > 1) {
@@ -138,16 +184,100 @@ const handleRecharge = () => {
  showPlaceholderToast("积分充值");
 };

-const handleUpgradeToVideo = () => {
-  showPlaceholderToast("升级为动效视频");
+const downloadImage = (url) =>
+  new Promise((resolve, reject) => {
+    if (!/^https?:\/\//i.test(url)) {
+      resolve(url);
+      return;
+    }
+
+    uni.downloadFile({
+      url,
+      success: (res) => {
+        if (res.statusCode === 200 && res.tempFilePath) {
+          resolve(res.tempFilePath);
+          return;
+        }
+        reject(res);
+      },
+      fail: reject,
+    });
+  });
+
+const saveImageToAlbum = (filePath) =>
+  new Promise((resolve, reject) => {
+    uni.saveImageToPhotosAlbum({
+      filePath,
+      success: resolve,
+      fail: reject,
+    });
+  });
+
+const isAlbumPermissionDenied = (error) => {
+  const errorMessage = String(error?.errMsg || "").toLowerCase();
+  return (
+    errorMessage.includes("auth deny") ||
+    errorMessage.includes("authorize:no response") ||
+    errorMessage.includes("permission denied")
+  );
 };

-const handleSave = () => {
-  showPlaceholderToast("保存图片");
+const promptAlbumPermission = () => {
+  uni.showModal({
+    title: "需要相册权限",
+    content: "请在设置中允许保存图片到相册。",
+    confirmText: "去设置",
+    success: ({ confirm }) => {
+      if (confirm) {
+        uni.openSetting();
+      }
+    },
+  });
 };

-const handleShare = () => {
-  showPlaceholderToast("分享好友");
+const handleSave = async () => {
+  if (isSaving.value) return;
+
+  if (result.value.mediaType !== "image") {
+    showPlaceholderToast("当前结果不是图片");
+    return;
+  }
+
+  if (!result.value.cover) {
+    showPlaceholderToast("暂无可保存的图片");
+    return;
+  }
+
+  isSaving.value = true;
+  uni.showLoading({
+    title: "保存中",
+    mask: true,
+  });
+
+  let saveError = null;
+  try {
+    const filePath = await downloadImage(result.value.cover);
+    await saveImageToAlbum(filePath);
+  } catch (error) {
+    saveError = error;
+  } finally {
+    uni.hideLoading();
+    isSaving.value = false;
+  }
+
+  if (!saveError) {
+    uni.showToast({
+      title: "已保存到相册",
+      icon: "success",
+    });
+    return;
+  }
+
+  if (isAlbumPermissionDenied(saveError)) {
+    promptAlbumPermission();
+  } else {
+    showPlaceholderToast("保存图片失败");
+  }
 };

 const handleRegenerate = () => {