Compare commits
3 Commits
7d0c784564
...
3c270525f7
| Author | SHA1 | Date | |
|---|---|---|---|
| 3c270525f7 | |||
|
|
1ebdf92159 | ||
|
|
efe97452e0 |
@@ -1,12 +1,28 @@
|
||||
<template>
|
||||
<view class="result-actions">
|
||||
<view class="result-action is-primary" @tap="emit('save')">保存图片</view>
|
||||
<view class="result-action is-secondary" @tap="emit('share')">分享好友</view>
|
||||
<view :class="['result-action', 'is-primary', { 'is-disabled': saving }]" @tap="handleSave">
|
||||
{{ 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">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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: "升级为动效视频",
|
||||
};
|
||||
@@ -3,52 +3,64 @@
|
||||
<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" />
|
||||
<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>
|
||||
</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 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 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 +73,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 +96,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 +109,62 @@ const showPlaceholderToast = (title) => {
|
||||
});
|
||||
};
|
||||
|
||||
const fetchTaskDetail = async () => {
|
||||
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;
|
||||
showPlaceholderToast("获取任务详情失败");
|
||||
} catch (error) {
|
||||
console.error("获取AIGC生成任务详情失败", error);
|
||||
taskDetail.value = null;
|
||||
showPlaceholderToast("获取任务详情失败");
|
||||
} finally {
|
||||
uni.hideLoading();
|
||||
}
|
||||
};
|
||||
|
||||
onLoad((query = {}) => {
|
||||
taskId.value = String(query.taskId || "").trim();
|
||||
if (!taskId.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 +176,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 = () => {
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.record-note {
|
||||
|
||||
@@ -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) {
|
||||
aigcRecordStore.setCurrentRecord(record);
|
||||
if (record?.taskStatus === 2 && record.taskId) {
|
||||
uni.navigateTo({
|
||||
url: "/pages-aigc/detail/detail",
|
||||
url: `/pages-aigc/detail/detail?taskId=${encodeURIComponent(record.taskId)}`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -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 };
|
||||
|
||||
Reference in New Issue
Block a user