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

src/pages-aigc/detail/components/ResultActions/index.vue

@@ -1,12 +1,28 @@
 <template>
   <view class="result-actions">
-    <view class="result-action is-primary" @tap="emit('save')">保存图片</view>
+    <view :class="['result-action', 'is-primary', { 'is-disabled': saving }]" @tap="handleSave">
-    <view class="result-action is-secondary" @tap="emit('share')">分享好友</view>
+      {{ saving ? "保存中..." : "保存图片" }}
+    </view>
+
+    <button class="result-action is-secondary" open-type="share" hover-class="none">分享好友</button>
   </view>
 </template>
 
 <script setup>
-const emit = defineEmits(["save", "share"]);
+const props = defineProps({
+  saving: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["save"]);
+
+const handleSave = () => {
+  if (!props.saving) {
+    emit("save");
+  }
+};
 </script>
 
 <style scoped lang="scss">

src/pages-aigc/detail/components/ResultActions/styles/index.scss

@@ -6,7 +6,12 @@
 }
 
 .result-action {
+  width: 100%;
   height: 48px;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  border: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,6 +21,10 @@
   font-weight: 900;
 }
 
+.result-action::after {
+  border: 0;
+}
+
 .result-action.is-primary {
   background: #20cf75;
   color: #ffffff;
@@ -26,3 +35,7 @@
   background: rgba(255, 255, 255, 0.78);
   color: #526073;
 }
+
+.result-action.is-disabled {
+  opacity: 0.65;
+}

src/pages-aigc/detail/data/result.js

@@ -1,14 +0,0 @@
-export const aigcDetailResult = {
-  id: "glass-boat-postcard-result",
-  title: "鸳鸯湖明信片",
-  cover: "https://oss.nianxx.cn/mp/static/xiaoqi/glass-boat-postcard.gif",
-  accent: "#0a4d46",
-  variantLabel: "图片版",
-  resultLabel: "图片版",
-  consumedText: "100积分",
-  desc: "已生成可保存、可分享的高清旅行图片",
-  continuationTitle: "创意续作",
-  continuationDesc: "让这张图动起来 · 5秒内动效视频",
-  continuationCost: "追加消耗 100积分",
-  continuationButtonText: "升级为动效视频",
-};

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" />
+      <template v-if="taskDetail">
-      <ResultMeta :items="metaItems" />
+        <ResultPreview v-if="result.cover" :result="result" />
-      <ContinuationCard v-if="continuationInfo" :info="continuationInfo" @upgrade="handleUpgradeToVideo" />
+        <CustomEmpty v-else :statusText="result.resultLabel" />
-      <ResultActions @save="handleSave" @share="handleShare" />
+        <ResultMeta :items="metaItems" />
+        <ResultActions :saving="isSaving" @save="handleSave" />
 
-      <view class="aigc-detail-text-actions">
+        <view class="aigc-detail-text-actions">
-        <view class="aigc-detail-text-action" @tap="handleRegenerate">再生成一版</view>
+          <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="handleChangeTemplate">换个模板</view>
-        <view class="aigc-detail-text-action" @tap="handleOpenRecords">历史记录</view>
+          <view class="aigc-detail-text-action" @tap="handleOpenRecords">历史记录</view>
-      </view>
+        </view>
+      </template>
+      <CustomEmpty v-else :statusText="detailEmptyText" />
     </view>
   </view>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
-import { onShow } from "@dcloudio/uni-app";
+import { onLoad, onShareAppMessage, onShow } from "@dcloudio/uni-app";
-import { storeToRefs } from "pinia";
+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 { getAigcGeneratorTaskDetail } from "@/request/api/AigcApi.js";
-import ContinuationCard from "./components/ContinuationCard/index.vue";
 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 taskId = ref("");
-const { currentRecord } = storeToRefs(aigcRecordStore);
+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;
+  const record = taskDetail.value || {};
-  if (!record) return aigcDetailResult;
 
   const imageUrl = record.imageResultUrl || "";
   const videoUrl = record.videoResultUrl || "";
   const isVideo = Boolean(videoUrl) && (record.generatorType === 1 || !imageUrl);
-  const typeText =
+  const typeText = getMappedText(GENERATOR_TYPE_TEXT, record.generatorType, "类型");
-    GENERATOR_TYPE_TEXT[record.generatorType] ||
+  const statusText = getMappedText(TASK_STATUS_TEXT, record.taskStatus, "状态");
-    (record.generatorType === undefined ? "生成结果" : `类型${record.generatorType}`);
   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 = taskDetail.value;
-    const record = currentRecord.value;
+  if (!record) return [];
-    const completeTime =
-      record.videoGeneratorCompleteTime || record.imageGeneratorCompleteTime || record.createTime || "-";
 
-    return [
+  const completeTime =
-      {
+    record.videoGeneratorCompleteTime || record.imageGeneratorCompleteTime || record.createTime || "-";
-        label: "结果",
-        value: result.value.resultLabel,
-      },
-      {
-        label: "已消耗",
-        value: result.value.consumedText,
-      },
-      {
-        label: "完成时间",
-        value: completeTime,
-      },
-    ];
-  }
 
   return [
     {
-      label: "结果",
+      label: "状态",
       value: result.value.resultLabel,
     },
     {
@@ -103,23 +100,12 @@ const metaItems = computed(() => {
       value: result.value.consumedText,
     },
     {
-      label: "余额",
+      label: "完成时间",
-      value: `${pointBalance.value}积分`,
+      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 = () => {
+const downloadImage = (url) =>
-  showPlaceholderToast("升级为动效视频");
+  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 = () => {
+const promptAlbumPermission = () => {
-  showPlaceholderToast("保存图片");
+  uni.showModal({
+    title: "需要相册权限",
+    content: "请在设置中允许保存图片到相册。",
+    confirmText: "去设置",
+    success: ({ confirm }) => {
+      if (confirm) {
+        uni.openSetting();
+      }
+    },
+  });
 };
 
-const handleShare = () => {
+const handleSave = async () => {
-  showPlaceholderToast("分享好友");
+  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 = () => {

src/pages-aigc/record/components/RecordList/styles/index.scss

@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  padding: 0 12px;
 }
 
 .record-note {

src/pages-aigc/record/record.vue

@@ -1,6 +1,6 @@
 <template>
   <z-paging ref="paging" v-model="records" class="aigc-record-page" bg-color="#ffffff" safe-area-inset-bottom
-    @query="queryList">
+    loading-more-no-more-text="下拉刷新任务列表" @query="queryList">
     <template #top>
       <view class="aigc-record-nav">
         <TopNavBar title="最近任务" background="transparent" title-color="#162235" back-icon-color="#162235"
@@ -21,12 +21,10 @@ import { ref } from "vue";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import CustomEmpty from "@/components/CustomEmpty/index.vue";
 import { getAigcGeneratorTaskList } from "@/request/api/AigcApi.js";
-import { useAigcRecordStore } from "@/store";
 import RecordList from "./components/RecordList/index.vue";
 
 const records = ref([]);
 const paging = ref(null);
-const aigcRecordStore = useAigcRecordStore();
 
 const queryList = async (pageNum, pageSize) => {
   try {
@@ -51,10 +49,9 @@ const handleBack = () => {
 };
 
 const handleViewRecord = (record) => {
-  if (record?.taskStatus === 2) {
+  if (record?.taskStatus === 2 && record.taskId) {
-    aigcRecordStore.setCurrentRecord(record);
     uni.navigateTo({
-      url: "/pages-aigc/detail/detail",
+      url: `/pages-aigc/detail/detail?taskId=${encodeURIComponent(record.taskId)}`,
     });
     return;
   }

src/request/api/AigcApi.js

@@ -12,6 +12,10 @@ function getAigcGeneratorTaskList(args) {
   return request.post("/hotelBiz/aigcGeneratorTask/aigcGeneratorTaskList", args);
 }
 
+function getAigcGeneratorTaskDetail(args) {
+  return request.post("/hotelBiz/aigcGeneratorTask/aigcGeneratorTaskDetail", args);
+}
+
 function createAigcGeneratorTask(args) {
   return request.post("/hotelBiz/aigcGeneratorTask/createAigcGeneratorTask", args);
 }
@@ -32,6 +36,7 @@ export {
   getAigcTemplateList,
   getAigcTemplateItemList,
   getAigcGeneratorTaskList,
+  getAigcGeneratorTaskDetail,
   createAigcGeneratorTask,
   getCurrentCredit,
   getRechargeOptions,

src/store/modules/aigcRecord.js

@@ -1,15 +0,0 @@
-import { defineStore } from "pinia";
-
-export const useAigcRecordStore = defineStore("aigcRecord", {
-  state() {
-    return {
-      currentRecord: null,
-    };
-  },
-
-  actions: {
-    setCurrentRecord(record) {
-      this.currentRecord = record ? { ...record } : null;
-    },
-  },
-});

src/store/modules/index.js

@@ -1,7 +1,6 @@
 import { useAppStore } from "./app";
-import { useAigcRecordStore } from "./aigcRecord";
 import { useSelectedDateStore } from "./selectedDate";
 import { usePictureStore } from "./picture";
 import { useLocationStore } from "./location";
 
-export { useAppStore, useAigcRecordStore, useSelectedDateStore, usePictureStore, useLocationStore };
+export { useAppStore, useSelectedDateStore, usePictureStore, useLocationStore };