209 lines
9.8 KiB
Vue
209 lines
9.8 KiB
Vue
<!-- 页面编号：F-03；用途：动态详情、评论与内容失效状态。 -->
|
||
<template>
|
||
<view class="feed-detail-page" :class="{ 'feed-state--expired': feedState === 'expired', 'feed-state--error': feedState === 'error', 'feed-state--ready': feedState === 'ready' }">
|
||
<ModulePageBackground module="family" />
|
||
<view class="feed-detail-header"><PageHeader title="动态详情" custom-back @back="requestBack" /></view>
|
||
|
||
<view v-if="feedState === 'loading'" class="feed-detail-loading">
|
||
<AppLoading text="正在读取家族动态" description="请稍候，正在整理正文与家人评论。" />
|
||
</view>
|
||
|
||
<view v-else class="feed-detail-content">
|
||
<template v-if="feedState === 'ready'">
|
||
<view class="feed-article-card">
|
||
<text class="feed-article-card__meta">{{ currentFeed.tag }} · {{ currentFeed.time }}</text>
|
||
<text class="feed-article-card__title">{{ currentFeed.title }}</text>
|
||
<text class="feed-article-card__body">{{ currentFeed.content }}</text>
|
||
<text class="feed-article-card__author">发布人：{{ currentFeed.author }}</text>
|
||
</view>
|
||
|
||
<view class="feed-comments-panel">
|
||
<view class="feed-comments-heading">
|
||
<text>家人评论</text><text>{{ feedComments.length }} 条</text>
|
||
</view>
|
||
<view v-for="comment in feedComments" :key="comment.id" class="feed-comment-card">
|
||
<view><text>{{ comment.author }}</text><text>{{ comment.time }}</text></view>
|
||
<text>{{ comment.content }}</text>
|
||
</view>
|
||
<view v-if="!feedComments.length" class="feed-comments-empty">
|
||
<text>还没有评论</text><text>写下第一句祝福或共同记忆。</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="feed-comment-form" :class="{ 'comment-state--validating': commentState === 'validating', 'comment-state--preview': commentState === 'preview', 'comment-state--error': commentState === 'error' }">
|
||
<text>写下评论</text>
|
||
<textarea v-model="commentDraft" auto-height maxlength="240" placeholder="对家人说点什么" />
|
||
<text v-if="commentError" class="feed-comment-error">{{ commentError }}</text>
|
||
<AppButton block :disabled="commentState === 'validating'" :label="commentState === 'validating' ? '正在校验' : '生成评论预览'" @click="submitComment" />
|
||
</view>
|
||
</template>
|
||
|
||
<view v-else class="feed-state-card">
|
||
<text>{{ stateCopy.title }}</text>
|
||
<text>{{ stateCopy.copy }}</text>
|
||
<AppButton :type="feedState === 'error' ? 'secondary' : 'primary'" block :label="stateCopy.action" @click="handleStateAction" />
|
||
</view>
|
||
</view>
|
||
<AppDialog
|
||
:visible="discardVisible"
|
||
title="放弃评论草稿？"
|
||
message="当前评论尚未提交服务器，确认返回后不会保留。"
|
||
confirm-text="放弃并返回"
|
||
cancel-text="继续填写"
|
||
show-cancel
|
||
:close-on-mask="false"
|
||
@confirm="confirmDiscard"
|
||
@cancel="cancelDiscard"
|
||
/>
|
||
<AppToast :visible="toastVisible" message="评论尚未提交服务器，草稿已保留" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, onUnmounted, ref } from "vue";
|
||
import { onBackPress, onLoad } from "@dcloudio/uni-app";
|
||
import AppButton from "@/components/AppButton.vue";
|
||
import AppDialog from "@/components/AppDialog.vue";
|
||
import AppLoading from "@/components/AppLoading.vue";
|
||
import AppToast from "@/components/AppToast.vue";
|
||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||
import PageHeader from "@/components/PageHeader.vue";
|
||
import { findFamilyFeedFixture } from "@/data/mock.js";
|
||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||
import {
|
||
goBack,
|
||
handleBackPress,
|
||
returnTo,
|
||
runBackGuard,
|
||
} from "@/utils/navigation.js";
|
||
|
||
const genealogyId = ref("");
|
||
const feedId = ref("");
|
||
const currentFeed = ref(null);
|
||
const feedState = ref("loading");
|
||
const commentState = ref("idle");
|
||
const commentDraft = ref("");
|
||
const commentError = ref("");
|
||
const toastVisible = ref(false);
|
||
const discardVisible = ref(false);
|
||
const feedComments = ref([]);
|
||
let submitTimer = null;
|
||
let toastTimer = null;
|
||
const isDirty = computed(() => Boolean(commentDraft.value.trim()));
|
||
const stateCopy = computed(() => {
|
||
if (feedState.value === "error" && currentFeed.value) {
|
||
return {
|
||
title: "动态暂不可用",
|
||
copy: "请稍后重新查看，已有家族记录不会受到影响。",
|
||
action: "重新查看",
|
||
};
|
||
}
|
||
return {
|
||
title: "动态已失效或入口无效",
|
||
copy: "没有找到当前家谱中的这条动态，页面不会回退到其他记录。",
|
||
action: genealogyId.value ? "返回家族圈" : "返回上一页",
|
||
};
|
||
});
|
||
const discardConfirmation = createDiscardConfirmation((visible) => {
|
||
discardVisible.value = visible;
|
||
});
|
||
const requestDiscardConfirmation = discardConfirmation.request;
|
||
const confirmDiscard = discardConfirmation.confirm;
|
||
const cancelDiscard = discardConfirmation.cancel;
|
||
|
||
onLoad((query) => {
|
||
genealogyId.value = String(query.genealogyId || "");
|
||
feedId.value = String(query.feedId || "");
|
||
const selected = findFamilyFeedFixture(genealogyId.value, feedId.value);
|
||
currentFeed.value = selected;
|
||
feedComments.value = selected?.comments || [];
|
||
feedState.value = ["loading", "error", "expired"].includes(query.state)
|
||
? selected
|
||
? query.state
|
||
: "expired"
|
||
: selected
|
||
? "ready"
|
||
: "expired";
|
||
});
|
||
|
||
const submitComment = () => {
|
||
if (commentState.value === "validating" || !currentFeed.value) return;
|
||
const content = commentDraft.value.trim();
|
||
if (!content) {
|
||
commentError.value = "请先写下评论内容";
|
||
return;
|
||
}
|
||
commentError.value = "";
|
||
commentState.value = "validating";
|
||
const timer = setTimeout(() => {
|
||
if (submitTimer !== timer) return;
|
||
submitTimer = null;
|
||
commentState.value = "preview";
|
||
toastVisible.value = true;
|
||
toastTimer = setTimeout(() => { toastVisible.value = false; }, 1800);
|
||
}, 320);
|
||
submitTimer = timer;
|
||
};
|
||
const restoreFeed = () => { feedState.value = "ready"; };
|
||
const requestBack = () =>
|
||
runBackGuard({
|
||
transientOpen: discardVisible.value,
|
||
dirty: isDirty.value,
|
||
submitting: commentState.value === "validating",
|
||
"close-transient": cancelDiscard,
|
||
"block-submitting": () => true,
|
||
"confirm-discard": requestDiscardConfirmation,
|
||
});
|
||
const backToFamily = async () => {
|
||
if (!genealogyId.value) return goBack();
|
||
const confirmed = isDirty.value ? await requestDiscardConfirmation() : true;
|
||
if (!confirmed) return false;
|
||
return returnTo("F01", { genealogyId: genealogyId.value });
|
||
};
|
||
const handleStateAction = () => {
|
||
if (feedState.value === "error" && currentFeed.value) return restoreFeed();
|
||
return backToFamily();
|
||
};
|
||
onBackPress((event) => handleBackPress(event, requestBack));
|
||
|
||
onUnmounted(() => {
|
||
if (submitTimer) clearTimeout(submitTimer);
|
||
if (toastTimer) clearTimeout(toastTimer);
|
||
discardConfirmation.dispose();
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||
|
||
.feed-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||
.feed-detail-header, .feed-detail-loading, .feed-detail-content { z-index: 1; }
|
||
.feed-detail-loading { min-height: calc(100vh - 100rpx); }
|
||
.feed-detail-content { padding: 18rpx 24rpx 72rpx; }
|
||
.feed-article-card, .feed-comments-panel, .feed-comment-form, .feed-state-card { @include adaptive.adaptive-family-content; width: 100%; }
|
||
.feed-article-card { padding: 46rpx 48rpx 42rpx; }
|
||
.feed-article-card text, .feed-state-card > text { display: block; }
|
||
.feed-article-card__meta, .feed-article-card__author { color: $ink-muted; font-size: 22rpx; }
|
||
.feed-article-card__title { margin-top: 12rpx; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 36rpx; font-weight: 700; }
|
||
.feed-article-card__body { margin-top: 18rpx; color: $ink; font-size: 25rpx; line-height: 1.75; }
|
||
.feed-article-card__author { margin-top: 22rpx; }
|
||
.feed-comments-panel { margin-top: 18rpx; padding: 38rpx 38rpx 34rpx; }
|
||
.feed-comments-heading { display: flex; align-items: center; justify-content: space-between; color: $brand-red; font-size: 24rpx; font-weight: 700; }
|
||
.feed-comments-heading text:last-child { color: $ink-muted; font-size: 21rpx; font-weight: 400; }
|
||
.feed-comment-card { @include adaptive.adaptive-family-field; margin-top: 16rpx; padding: 20rpx 22rpx; }
|
||
.feed-comment-card > view { display: flex; justify-content: space-between; gap: 18rpx; color: $ink-muted; font-size: 20rpx; }
|
||
.feed-comment-card > text { display: block; margin-top: 9rpx; color: $ink; font-size: 24rpx; line-height: 1.55; }
|
||
.feed-comments-empty { padding: 34rpx 10rpx 20rpx; text-align: center; }
|
||
.feed-comments-empty text { display: block; color: $ink-muted; font-size: 23rpx; line-height: 1.6; }
|
||
.feed-comments-empty text:first-child { color: $ink; font-size: 28rpx; font-weight: 700; }
|
||
.feed-comment-form { margin-top: 18rpx; padding: 38rpx 40rpx 42rpx; }
|
||
.feed-comment-form > text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; }
|
||
.feed-comment-form textarea { @include adaptive.adaptive-family-field; width: auto; min-width: 0; min-height: 126rpx; margin-top: 16rpx; padding: 20rpx 22rpx; color: $ink; font-size: 24rpx; line-height: 1.55; }
|
||
.feed-comment-error { display: block; margin-top: 10rpx; color: $brand-red; font-size: 22rpx; }
|
||
.feed-comment-form .app-button { margin-top: 22rpx; }
|
||
.feed-state-card { min-height: 340rpx; margin-top: 36rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
|
||
.feed-state-card > text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
|
||
.feed-state-card > text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
|
||
.feed-state-card .app-button { margin-top: 30rpx; }
|
||
</style>
|