feat(aigc): add shared work page and AIGC sharing
- add new shared work page to view shared AIGC generated images and videos - add createAigcGeneratorTaskShare and getAigcGeneratorTaskShareDetail APIs - update ResultActions component to add share preparation state and native share support - remove deprecated SharePreviewPopup component and its associated styles - update AIGC detail page to generate share keys and adjust native share metadata - register the new shared work page in pages.json
This commit is contained in:
118
src/pages-aigc/sharedWork/sharedWork.vue
Normal file
118
src/pages-aigc/sharedWork/sharedWork.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view class="shared-work-page">
|
||||
<view class="shared-work-nav">
|
||||
<TopNavBar title="旅行作品" background="transparent" title-color="#173a5f" back-icon-color="#173a5f"
|
||||
:align-with-menu-button="true" :z-index="3" @back="handleBack" />
|
||||
</view>
|
||||
|
||||
<view class="shared-work-scroll" scroll-y>
|
||||
<template v-if="shareDetail">
|
||||
<video v-if="isVideo" class="shared-work-media is-video" :src="shareDetail.videoUrl"
|
||||
:poster="shareDetail.imageUrl" controls object-fit="cover" />
|
||||
<image v-else-if="shareDetail.imageUrl" class="shared-work-media" :src="shareDetail.imageUrl" mode="widthFix" />
|
||||
|
||||
<view class="shared-work-meta">
|
||||
<text class="shared-work-title">{{ shareDetail.templateName || "旅行作品" }}</text>
|
||||
<text class="shared-work-type">{{ generatorTypeText }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view class="shared-work-cta-wrap">
|
||||
<button class="shared-work-cta" hover-class="is-pressed" @tap="handleCreateOwn">
|
||||
我也生成一个
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import TopNavBar from "@/components/TopNavBar/index.vue";
|
||||
import { checkToken } from "@/hooks/useGoLogin.js";
|
||||
import { getAigcGeneratorTaskShareDetail } from "@/request/api/AigcApi.js";
|
||||
|
||||
const shareKey = ref("");
|
||||
const shareDetail = ref(null);
|
||||
|
||||
const isVideo = computed(() => {
|
||||
return Number(shareDetail.value?.generatorType) === 1 && Boolean(shareDetail.value?.videoUrl);
|
||||
});
|
||||
|
||||
const generatorTypeText = computed(() => {
|
||||
const generatorType = shareDetail.value?.generatorType;
|
||||
if (Number(generatorType) === 0) return "图片版";
|
||||
if (Number(generatorType) === 1) return "视频版";
|
||||
return generatorType === undefined || generatorType === null || generatorType === ""
|
||||
? "生成作品"
|
||||
: `类型${generatorType}`;
|
||||
});
|
||||
|
||||
const showToast = (title) => {
|
||||
uni.showToast({
|
||||
title,
|
||||
icon: "none",
|
||||
});
|
||||
};
|
||||
|
||||
const fetchShareDetail = async () => {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await getAigcGeneratorTaskShareDetail({ shareKey: shareKey.value });
|
||||
if (res?.code === 0 && res.data && typeof res.data === "object" && !Array.isArray(res.data)) {
|
||||
shareDetail.value = res.data;
|
||||
return;
|
||||
}
|
||||
|
||||
shareDetail.value = null;
|
||||
showToast(res?.msg || "获取分享作品失败");
|
||||
} catch (error) {
|
||||
console.error("获取AIGC分享作品失败", error);
|
||||
shareDetail.value = null;
|
||||
showToast("获取分享作品失败");
|
||||
} finally {
|
||||
uni.hideLoading();
|
||||
}
|
||||
};
|
||||
|
||||
onLoad((query = {}) => {
|
||||
shareKey.value = String(query.shareKey || "").trim();
|
||||
if (!shareKey.value) {
|
||||
showToast("缺少分享标识");
|
||||
return;
|
||||
}
|
||||
|
||||
fetchShareDetail();
|
||||
});
|
||||
|
||||
const openAigcHome = () => {
|
||||
uni.reLaunch({
|
||||
url: "/pages-aigc/home/home",
|
||||
fail: () => showToast("打开模板列表失败"),
|
||||
});
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
return;
|
||||
}
|
||||
|
||||
openAigcHome();
|
||||
};
|
||||
|
||||
const handleCreateOwn = async () => {
|
||||
await checkToken();
|
||||
openAigcHome();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user