jiapuapp/pages/tree/t08-member-states.vue

<!-- 页面编号：T-08；用途：成员隐私、离世纪念与无权限状态说明。 -->
<template>
  <view
    class="member-status-page"
    :class="{
      'member-status--privacy': statusState === 'privacy',
      'member-status--deceased': statusState === 'deceased',
      'member-status--forbidden': statusState === 'forbidden',
    }"
  >
    <ModulePageBackground module="tree" />
    <view class="member-status-page__header"
      ><PageHeader title="成员状态"
    /></view>
    <view class="status-tabs">
      <view
        v-for="item in tabs"
        :key="item.value"
        class="status-tab"
        @click="statusState = item.value"
      >
        <image
          :src="
            statusState === item.value
              ? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png'
              : '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'
          "
          mode="aspectFit"
        />
        <text
          :class="{ 'status-tab__text--active': statusState === item.value }"
          >{{ item.label }}</text
        >
      </view>
    </view>
    <view class="status-card">
      <image
        src="/static/assets/modules/tree/transparent/t01-state-panel.png"
        mode="scaleToFill"
      />
      <view class="status-card__copy">
        <text>{{ activeStatus.eyebrow }}</text
        ><text>{{ activeStatus.title }}</text
        ><text>{{ activeStatus.copy }}</text>
      </view>
    </view>
    <view class="status-guidance">
      <image
        src="/static/assets/modules/tree/transparent/t01-state-panel.png"
        mode="scaleToFill"
      />
      <view>
        <text>{{ activeStatus.guideTitle }}</text>
        <text v-for="line in activeStatus.guides" :key="line">{{ line }}</text>
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
const statusState = ref("privacy");
const tabs = [
  { value: "privacy", label: "隐私" },
  { value: "deceased", label: "纪念" },
  { value: "forbidden", label: "无权限" },
];
const states = {
  privacy: {
    eyebrow: "隐私成员",
    title: "敏感资料只向授权成员展示",
    copy: "姓名可保留在世系位置，出生信息、联系方式和生平内容根据权限隐藏。",
    guideTitle: "隐私展示原则",
    guides: [
      "本人可以查看和维护自己的完整档案",
      "谱主可协助处理身份与世系关系",
      "普通成员只看到被允许公开的内容",
    ],
  },
  deceased: {
    eyebrow: "离世成员",
    title: "在世系中保留温和的纪念状态",
    copy: "离世不会删除成员关系；档案可继续记录生平、影像和家人的追思内容。",
    guideTitle: "纪念资料范围",
    guides: [
      "生卒年月与世系关系继续保留",
      "生平内容由有权限家人共同维护",
      "敏感资料仍遵守原有隐私设置",
    ],
  },
  forbidden: {
    eyebrow: "访问受限",
    title: "当前账号没有查看该档案的权限",
    copy: "为保护家人隐私，页面不会展示被隐藏的字段，也不会提供绕过权限的入口。",
    guideTitle: "如何申请查看",
    guides: [
      "先确认已经加入对应家谱",
      "联系谱主说明亲属关系和用途",
      "权限变更后重新进入成员档案",
    ],
  },
};
const activeStatus = computed(() => states[statusState.value]);
onLoad((query) => {
  statusState.value = states[query.state] ? query.state : "privacy";
});
</script>
<style scoped lang="scss">
.member-status-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: $paper;
}
.member-status-page__header,
.status-tabs,
.status-card,
.status-guidance {
  position: relative;
  z-index: 2;
}
.status-tabs {
  display: flex;
  gap: 10rpx;
  padding: 22rpx 24rpx 0;
}
.status-tab {
  position: relative;
  width: calc(33.333% - 7rpx);
  height: 62rpx;
}
.status-tab image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.status-tab text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: $ink;
  font-size: 23rpx;
  font-weight: 700;
}
.status-tab .status-tab__text--active {
  color: #fff9ed;
}
.status-card {
  width: calc(100% - 48rpx);
  height: calc((100vw - 24px) * 0.34286);
  min-height: 224rpx;
  margin: 24rpx auto 0;
}
.status-card > image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.status-card__copy {
  position: absolute;
  inset: 18% 10%;
  z-index: 1;
  text-align: center;
}
.status-card__copy text {
  display: block;
}
.status-card__copy text:first-child {
  color: $brand-red;
  font-size: 22rpx;
  letter-spacing: 3rpx;
}
.status-card__copy text:nth-child(2) {
  margin-top: 7rpx;
  color: $ink;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 32rpx;
  font-weight: 700;
}
.status-card__copy text:last-child {
  margin-top: 10rpx;
  color: $ink-muted;
  font-size: 24rpx;
  line-height: 1.5;
}
.status-guidance {
  width: calc(100% - 48rpx);
  height: min(400px, calc((100vw - 24px) * 0.9));
  margin: 18rpx auto 0;
}
.status-guidance > image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.status-guidance > view {
  position: absolute;
  inset: 12% 11%;
  z-index: 1;
}
.status-guidance text {
  display: block;
  color: $ink-muted;
  font-size: 24rpx;
  line-height: 1.65;
}
.status-guidance text:first-child {
  margin-bottom: 18rpx;
  color: $ink;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 31rpx;
  font-weight: 700;
}
.status-guidance text:not(:first-child) {
  margin-top: 12rpx;
}
</style>