jiapuapp/pages/genealogy/g06-search-genealogies.vue

<template>
  <view class="search-page">
    <GenealogyPageBackground />
    <view class="page-header"
      ><PageHeader title="搜索家谱" custom-back @back="backToGenealogies"
    /></view>
    <view class="page-content">
      <view class="search-note"
        ><text>公开家谱</text
        ><text>以下结果来自服务端公开家谱列表。</text></view
      >
      <view v-if="state === 'loading'" class="state-card"
        ><AppLoading text="正在读取公开家谱"
      /></view>
      <view v-else-if="state === 'error'" class="state-card"
        ><text>暂时无法读取公开家谱</text
        ><AppButton
          block
          type="secondary"
          label="重新加载"
          @click="loadGenealogies"
      /></view>
      <view v-else-if="state === 'empty'" class="state-card"
        ><text>暂未找到公开家谱</text></view
      >
      <view v-else class="result-list">
        <view v-for="item in rows" :key="item.id" class="genealogy-card">
          <view class="card-heading"
            ><text>{{ item.name }}</text
            ><text v-if="item.surname">{{ item.surname }}氏</text></view
          >
          <text v-if="item.location" class="card-meta">{{
            item.location
          }}</text>
          <text v-if="item.intro" class="card-copy">{{ item.intro }}</text>
          <view class="card-footer"
            ><text>{{ item.memberCount }} 位成员</text
            ><AppButton
              :label="item.canManage ? '已在我的家谱' : '申请加入'"
              :disabled="item.canManage"
              @click="applyToJoin(item)"
          /></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import AppButton from "@/components/AppButton.vue";
import AppLoading from "@/components/AppLoading.vue";
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
import {
  appApi,
  createRequestController,
  isRequestCancelled,
} from "@/utils/api.js";
import { openPage, returnTo } from "@/utils/navigation.js";

const rows = ref([]);
const state = ref("loading");
const controller = createRequestController();
let active = true;
const loadGenealogies = async () => {
  controller.abort();
  state.value = "loading";
  try {
    const result = await appApi.getPublicGenealogies({
      requestController: controller,
    });
    if (!active) return;
    rows.value = result
      .map((item) => ({
        id: String(item.genealogyId),
        name: String(item.genealogyName || "未命名家谱"),
        surname: String(item.surname || ""),
        location: String(
          item.regionFullName ||
            item.regionName ||
            item.originPlace ||
            item.addressDetail ||
            "",
        ),
        intro: String(item.intro || ""),
        memberCount: Number.isSafeInteger(item.memberCount)
          ? item.memberCount
          : 0,
        canManage: item.canManage === true,
      }))
      .filter((item) => /^[1-9]\d*$/.test(item.id));
    state.value = rows.value.length ? "ready" : "empty";
  } catch (error) {
    if (!active || isRequestCancelled(error)) return;
    state.value = "error";
  }
};
const applyToJoin = (item) =>
  openPage("G08", { genealogyId: item.id, genealogyName: item.name }, "G06");
const backToGenealogies = () => returnTo("G01");
onLoad(loadGenealogies);
onShow(() => {
  if (state.value !== "loading") loadGenealogies();
});
onUnload(() => {
  active = false;
  controller.abort();
});
</script>

<style scoped lang="scss">
@import "../../styles/adaptive-frame-profiles.scss";
.search-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: $paper;
}
.page-header,
.page-content {
  z-index: 1;
}
.page-content {
  padding: 18rpx 24rpx 72rpx;
}
.search-note,
.state-card,
.genealogy-card {
  @include adaptive-genealogy-state-panel;
}
.search-note {
  display: flex;
  min-height: 112rpx;
  flex-direction: column;
  justify-content: center;
  padding: 20rpx 30rpx;
}
.search-note text:first-child {
  color: $ink;
  font-family: STKaiti, KaiTi, serif;
  font-size: clamp(17px, 30rpx, 22px);
  font-weight: 700;
}
.search-note text:last-child {
  margin-top: 6rpx;
  color: $ink-muted;
  font-size: clamp(13px, 21rpx, 16px);
}
.state-card {
  display: flex;
  min-height: 310rpx;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 18rpx;
  padding: 42rpx;
  text-align: center;
  color: $ink;
  font-size: clamp(16px, 28rpx, 20px);
}
.state-card .app-button {
  width: 100%;
  margin-top: 22rpx;
}
.result-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-top: 18rpx;
}
.genealogy-card {
  padding: 28rpx 32rpx;
}
.card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18rpx;
}
.card-heading text:first-child {
  color: $ink;
  font-family: STKaiti, KaiTi, serif;
  font-size: clamp(17px, 31rpx, 22px);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.card-heading text:last-child {
  flex: 0 0 auto;
  color: $brand-red;
  font-size: clamp(14px, 22rpx, 17px);
}
.card-meta,
.card-copy {
  display: block;
  color: $ink-muted;
  font-size: clamp(14px, 22rpx, 17px);
  line-height: 1.5;
}
.card-meta {
  margin-top: 10rpx;
}
.card-copy {
  margin-top: 8rpx;
}
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rpx;
  margin-top: 20rpx;
  color: $ink-muted;
  font-size: clamp(13px, 21rpx, 16px);
}
.card-footer .app-button {
  min-width: 180rpx;
}
@media (max-width: 340px) {
  .page-content {
    padding-right: 20rpx;
    padding-left: 20rpx;
  }
  .card-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .card-footer .app-button {
    width: 100%;
  }
}
</style>