dc12b8ba88
Add leftAction prop to TopNavBar to support back or home left navigation actions, update left icon accordingly. Add optional chaining to shareDetail.templateName to prevent errors. Modify sharedWork page to use home left action and update back handler to use direct home reLaunch.
126 lines
3.5 KiB
Vue
126 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" left-action="home" :align-with-menu-button="true" :z-index="3"
|
|
@back="openAppHome" />
|
|
</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 openAppHome = () => {
|
|
uni.reLaunch({
|
|
url: "/pages/index/index",
|
|
fail: () => showToast("打开首页失败"),
|
|
});
|
|
};
|
|
|
|
const handleCreateOwn = async () => {
|
|
await checkToken();
|
|
openAigcHome();
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|