jiapuapp/pages/records/r03-gift-list.vue

<!-- 页面编号：R-03；用途：贺礼簿列表、空态、失败与新增入口。 -->
<template>
  <view class="gift-page" :class="stateClasses">
    <ModulePageBackground module="records" />
    <view class="page-header">
      <PageHeader title="贺礼簿" :action="hasValidContext ? '填写预览' : ''" @action="createRelativePreview" />
    </view>
    <view v-if="giftState === 'loading'" class="page-loading">
      <AppLoading
        text="正在整理贺礼簿"
        description="请稍候，正在读取家人的礼仪往来。"
      />
    </view>
    <view v-else class="page-content">
      <template v-if="giftState === 'ready' && relativeRecords.length">
        <view
          v-for="record in relativeRecords"
          :key="record.relativeId"
          class="record-card"
          role="button"
          :aria-label="`查看${record.eventName}`"
          @click="openRelative(record)"
        >
          <text class="record-card__tag">{{ record.relationName }}</text>
          <text class="record-card__title">{{ record.eventName }}</text>
          <text class="record-card__copy">
            {{ record.relativeName }} · {{ record.eventTime }} · 金额记录：{{ record.giftAmount }}
          </text>
          <text class="record-card__hint">查看往来记录</text>
        </view>
        <AppButton block label="填写往来预览" @click="createRelativePreview" />
      </template>
      <view v-else class="state-card">
        <text>
          {{ giftState === "error" ? "贺礼簿暂不可用" : giftState === "invalid" ? "贺礼簿入口无效" : "还没有往来记录" }}
        </text>
        <text>
          {{
            giftState === "error"
              ? "请稍后重新查看，已有记录不会受到影响。"
              : giftState === "invalid"
                ? "没有找到可访问的成员家谱，页面不会展示其他家谱记录。"
              : "从第一份家人之间的心意开始记录。"
          }}
        </text>
        <AppButton
          :type="giftState === 'empty' ? 'primary' : 'secondary'"
          block
          :label="giftState === 'error' ? '重新查看' : giftState === 'invalid' ? '返回上一页' : '填写往来预览'"
          @click="handleStateAction"
        />
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import AppButton from "@/components/AppButton.vue";
import AppLoading from "@/components/AppLoading.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
import {
  getGenealogyFixtureAccess,
  listRelativeRecordFixtures,
} from "@/data/mock.js";
import { goBack, openPage } from "@/utils/navigation.js";

const genealogyId = ref("");
const relativeRecords = ref([]);
const giftState = ref("loading");
const hasValidContext = computed(() => ["ready", "empty"].includes(giftState.value));
const stateClasses = computed(() => ({
  "relative-state--loading": giftState.value === "loading",
  "relative-state--empty": giftState.value === "empty",
  "relative-state--error": giftState.value === "error",
  "relative-state--invalid": giftState.value === "invalid",
}));
onLoad((query) => {
  genealogyId.value = String(query.genealogyId || "");
  const access = getGenealogyFixtureAccess(genealogyId.value);
  if (!["owner", "member"].includes(access.accessRole)) {
    relativeRecords.value = [];
    giftState.value = "invalid";
    return;
  }
  relativeRecords.value = listRelativeRecordFixtures(genealogyId.value);
  giftState.value = ["loading", "empty", "error"].includes(query.state)
    ? query.state
    : relativeRecords.value.length
      ? "ready"
      : "empty";
});
const openRelative = (record) =>
  openPage(
    "R04",
    {
      genealogyId: genealogyId.value,
      mode: "view",
      relativeId: String(record.relativeId),
    },
    "R03",
  );
const createRelativePreview = () =>
  hasValidContext.value
    ? openPage(
        "R04",
        { genealogyId: genealogyId.value, mode: "create" },
        "R03",
      )
    : Promise.resolve(false);
const restoreRelatives = () => {
  relativeRecords.value = listRelativeRecordFixtures(genealogyId.value);
  giftState.value = relativeRecords.value.length ? "ready" : "empty";
};
const handleStateAction = () => {
  if (giftState.value === "invalid") return goBack();
  if (giftState.value === "error") return restoreRelatives();
  return createRelativePreview();
};
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;

.gift-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: $paper;
}
.page-header,
.page-loading,
.page-content {
  z-index: 1;
}
.page-loading {
  min-height: calc(100vh - 100rpx);
}
.page-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 18rpx 24rpx 72rpx;
}
.record-card,
.state-card {
  box-sizing: border-box;
  @include adaptive.adaptive-records-content;
}
.record-card {
  min-height: 190rpx;
  padding: 34rpx 46rpx;
}
.record-card > text,
.state-card > text {
  display: block;
}
.record-card__tag {
  color: $brand-red;
  font-size: 21rpx;
  font-weight: 700;
}
.record-card__title {
  margin-top: 6rpx;
  color: $ink;
  font-family: STKaiti, KaiTi, serif;
  font-size: 31rpx;
  font-weight: 700;
}
.record-card__copy {
  margin-top: 9rpx;
  color: $ink-muted;
  font-size: 23rpx;
  line-height: 1.5;
}
.record-card__hint {
  margin-top: 10rpx;
  color: $brand-red;
  font-size: 21rpx;
}
.state-card {
  min-height: 340rpx;
  padding: 78rpx 52rpx 50rpx;
  text-align: center;
}
.state-card > text:first-child {
  color: $ink;
  font-size: 35rpx;
  font-weight: 700;
}
.state-card > text:nth-child(2) {
  margin-top: 18rpx;
  color: $ink-muted;
  font-size: 24rpx;
  line-height: 1.65;
}
.state-card .app-button {
  margin-top: 28rpx;
}
</style>