38dbf7afc8
update ResultPreview component to use proper image and video result URLs refine isVideo detection logic across detail and shared work pages add pointer-events none to preview elements to avoid blocking user interactions standardize media URL usage between AIGC detail and shared work components
128 lines
3.5 KiB
Vue
128 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>
|