767ecb197b
remove leftAction prop and hardcode left icon type in TopNavBar move home navigation logic out of TopNavBar to parent components update sharedWork.vue to use new TopNavBar API and implement proper back handling
127 lines
3.5 KiB
Vue
127 lines
3.5 KiB
Vue
<template>
|
|
<view class="shared-work-page">
|
|
<view class="shared-work-nav">
|
|
<TopNavBar :title="shareDetail.templateName || '旅行作品'" background="#fff" title-color="#173a5f"
|
|
back-icon-color="#173a5f" :align-with-menu-button="true" :z-index="3" @back="handleBack" />
|
|
</view>
|
|
|
|
<view class="shared-work-scroll">
|
|
<template v-if="shareDetail">
|
|
<video v-if="isVideo" class="shared-work-media is-video" :src="videoResultUrl" :poster="imageResultUrl" controls
|
|
object-fit="cover" />
|
|
<image v-else-if="imageResultUrl" class="shared-work-media" :src="imageResultUrl" mode="aspectFill" />
|
|
|
|
<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 imageResultUrl = computed(() => {
|
|
return shareDetail.value?.imageResultUrl || shareDetail.value?.imageUrl || "";
|
|
});
|
|
|
|
const videoResultUrl = computed(() => {
|
|
return shareDetail.value?.videoResultUrl || shareDetail.value?.videoUrl || "";
|
|
});
|
|
|
|
const isVideo = computed(() => {
|
|
return Number(shareDetail.value?.generatorType) === 1 && Boolean(videoResultUrl.value);
|
|
});
|
|
|
|
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>
|