Review changes batch 6 of 6
This commit is contained in:
@@ -1,34 +1,300 @@
|
||||
<!-- 页面编号：F-01；用途：家族动态首页、列表、空态与失败状态。 -->
|
||||
<template>
|
||||
<view class="family-page" :class="{ 'feed-state--list': feedState === 'list', 'feed-state--empty': feedState === 'empty', 'feed-state--error': feedState === 'error' }">
|
||||
<view
|
||||
class="family-page"
|
||||
:class="{
|
||||
'feed-state--list': feedState === 'list',
|
||||
'feed-state--empty': feedState === 'empty',
|
||||
'feed-state--error': feedState === 'error',
|
||||
}"
|
||||
>
|
||||
<ModulePageBackground module="family" />
|
||||
<view class="family-page__header"><PageHeader title="家族动态" action="发布" @action="toPublish" /></view>
|
||||
<view class="family-page__header"
|
||||
><PageHeader title="家族动态" action="发布" @action="toPublish"
|
||||
/></view>
|
||||
<view class="feed-content">
|
||||
<view class="feed-heading"><text>汤氏家族圈</text><text>家宴、通知与共同记忆</text></view>
|
||||
<scroll-view class="feed-shortcuts" scroll-x :show-scrollbar="false">
|
||||
<view v-for="item in shortcuts" :key="item.key" class="feed-shortcut" @click="openSection(item.key)"><image src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" /><text>{{ item.label }}</text></view>
|
||||
</scroll-view>
|
||||
<AppLoading
|
||||
v-if="feedState === 'loading'"
|
||||
text="正在整理家族动态"
|
||||
description="请稍候，正在读取家宴、通知与共同记忆。"
|
||||
/>
|
||||
<view v-if="feedState !== 'loading'" class="feed-heading"
|
||||
><text>汤氏家族圈</text><text>家宴、通知与共同记忆</text></view
|
||||
>
|
||||
<view v-if="feedState !== 'loading'" class="feed-shortcuts">
|
||||
<image
|
||||
class="feed-shortcuts__skin"
|
||||
src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view
|
||||
v-for="item in shortcuts"
|
||||
:key="item.key"
|
||||
class="feed-shortcut"
|
||||
@click="openSection(item.key)"
|
||||
><text>{{ item.label }}</text></view
|
||||
>
|
||||
</view>
|
||||
<template v-if="feedState === 'list'">
|
||||
<view v-for="item in feeds" :key="item.id" class="feed-card" @click="openDetail(item)">
|
||||
<image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<view><text>{{ item.tag }} · {{ item.time }}</text><text>{{ item.title }}</text><text>{{ item.content }}</text><text>发布人：{{ item.author }}</text></view>
|
||||
<view
|
||||
v-for="item in feeds"
|
||||
:key="item.id"
|
||||
class="feed-card"
|
||||
@click="openDetail(item)"
|
||||
>
|
||||
<image
|
||||
class="feed-card__skin"
|
||||
src="/static/assets/modules/family/transparent/f01-family-letter-card.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="feed-card__copy">
|
||||
<text class="feed-card__meta"
|
||||
>{{ item.tag }} · {{ item.time }}</text
|
||||
>
|
||||
<text class="feed-card__title">{{ item.title }}</text>
|
||||
<text class="feed-card__summary">{{ item.content }}</text>
|
||||
<text class="feed-card__author">发布人：{{ item.author }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view v-else class="feed-state-card">
|
||||
<image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<view><text>{{ feedState === 'empty' ? '还没有家族动态' : '家族动态暂不可用' }}</text><text>{{ feedState === 'empty' ? '发布第一条通知、家宴记录或家族故事。' : '请稍后重新进入，已有内容不会受到影响。' }}</text></view>
|
||||
<view v-else-if="feedState !== 'loading'" class="feed-state-card">
|
||||
<image
|
||||
src="/static/assets/modules/family/transparent/f01-family-letter-card.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view
|
||||
><text>{{
|
||||
feedState === "empty" ? "还没有家族动态" : "家族动态暂不可用"
|
||||
}}</text
|
||||
><text>{{
|
||||
feedState === "empty"
|
||||
? "发布第一条通知、家宴记录或家族故事。"
|
||||
: "请稍后重新进入，已有内容不会受到影响。"
|
||||
}}</text></view
|
||||
>
|
||||
</view>
|
||||
<view class="feed-action" @click="feedState === 'error' ? feedState = 'list' : toPublish()"><image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ feedState === 'error' ? '重新查看' : '发布家族动态' }}</text></view>
|
||||
<view
|
||||
v-if="feedState !== 'loading'"
|
||||
class="feed-action"
|
||||
@click="feedState === 'error' ? (feedState = 'list') : toPublish()"
|
||||
><image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/><text>{{
|
||||
feedState === "error" ? "重新查看" : "发布家族动态"
|
||||
}}</text></view
|
||||
>
|
||||
</view>
|
||||
<AppTabbar active="family" />
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue';import { onLoad } from '@dcloudio/uni-app';import PageHeader from '@/components/PageHeader.vue';import AppTabbar from '@/components/AppTabbar.vue';import ModulePageBackground from '@/components/ModulePageBackground.vue';import{genealogyContext}from'@/utils/genealogy-context.js'
|
||||
const genealogyId=ref('');const feedState=ref('loading');const feeds=[{id:1,tag:'团圆记忆',time:'今天 10:24',title:'端午家宴',content:'今年端午全家相聚，留下了许多温暖照片。',author:'汤正国'},{id:2,tag:'家族通知',time:'昨天 18:02',title:'修谱资料征集',content:'请家人补充老照片中的人物姓名与拍摄时间。',author:'谱主'}];const shortcuts=[{key:'articles',label:'谱文'},{key:'albums',label:'相册'},{key:'rituals',label:'礼仪'},{key:'memos',label:'备忘'}]
|
||||
onLoad(query=>{genealogyId.value=query.genealogyId||genealogyContext.getCurrentGenealogyId()||'';feedState.value=query.state==='empty'?'empty':query.state==='error'?'error':'list'})
|
||||
const toPublish=()=>uni.navigateTo({url:`/pages/family/f02-publish-feed?genealogyId=${genealogyId.value}`});const openDetail=item=>uni.navigateTo({url:`/pages/family/f03-feed-detail?feedId=${item.id}`});const openSection=key=>{const routes={articles:'/pages/family/f04-article-list',albums:'/pages/family/f07-album-list',rituals:'/pages/records/r05-ritual-list',memos:'/pages/records/r10-memo-list'};uni.navigateTo({url:routes[key]})}
|
||||
import { ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import AppTabbar from "@/components/AppTabbar.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import { genealogyContext } from "@/utils/genealogy-context.js";
|
||||
const genealogyId = ref("");
|
||||
const feedState = ref("loading");
|
||||
const feeds = [
|
||||
{
|
||||
id: 1,
|
||||
tag: "团圆记忆",
|
||||
time: "今天 10:24",
|
||||
title: "端午家宴",
|
||||
content: "今年端午全家相聚，留下了许多温暖照片。",
|
||||
author: "汤正国",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
tag: "家族通知",
|
||||
time: "昨天 18:02",
|
||||
title: "修谱资料征集",
|
||||
content: "请家人补充老照片中的人物姓名与拍摄时间。",
|
||||
author: "谱主",
|
||||
},
|
||||
];
|
||||
const shortcuts = [
|
||||
{ key: "articles", label: "谱文" },
|
||||
{ key: "albums", label: "相册" },
|
||||
{ key: "rituals", label: "礼仪" },
|
||||
{ key: "memos", label: "备忘" },
|
||||
];
|
||||
onLoad((query) => {
|
||||
genealogyId.value =
|
||||
query.genealogyId || genealogyContext.getCurrentGenealogyId() || "";
|
||||
feedState.value =
|
||||
query.state === "loading"
|
||||
? "loading"
|
||||
: query.state === "empty"
|
||||
? "empty"
|
||||
: query.state === "error"
|
||||
? "error"
|
||||
: "list";
|
||||
});
|
||||
const toPublish = () =>
|
||||
uni.navigateTo({
|
||||
url: `/pages/family/f02-publish-feed?genealogyId=${genealogyId.value}`,
|
||||
});
|
||||
const openDetail = (item) =>
|
||||
uni.navigateTo({ url: `/pages/family/f03-feed-detail?feedId=${item.id}` });
|
||||
const openSection = (key) => {
|
||||
const routes = {
|
||||
articles: "/pages/family/f04-article-list",
|
||||
albums: "/pages/family/f07-album-list",
|
||||
rituals: "/pages/records/r05-ritual-list",
|
||||
memos: "/pages/records/r10-memo-list",
|
||||
};
|
||||
uni.navigateTo({ url: routes[key] });
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.family-page{position:relative;min-height:100vh;overflow:hidden;background:$paper}.family-page__header,.feed-content{position:relative;z-index:2}.feed-content{padding:24rpx 24rpx 190rpx}.feed-heading text{display:block}.feed-heading text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:31rpx;font-weight:700}.feed-heading text:last-child{margin-top:6rpx;color:$ink-muted;font-size:20rpx}.feed-shortcuts{width:100%;margin-top:15rpx;white-space:nowrap}.feed-shortcut{position:relative;display:inline-block;width:150rpx;height:58rpx;margin-right:10rpx}.feed-shortcut image{position:absolute;inset:0;width:100%;height:100%}.feed-shortcut text{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100%;color:$ink;font-size:20rpx;font-weight:700}.feed-card,.feed-state-card{position:relative;width:100%;height:calc((100vw - 24px)*.34286);min-height:220rpx;margin-top:17rpx}.feed-card>image,.feed-state-card>image,.feed-action image{position:absolute;inset:0;width:100%;height:100%}.feed-card>view{position:absolute;inset:16% 9%;z-index:1}.feed-card text{display:block}.feed-card text:first-child{color:$brand-red;font-size:18rpx;letter-spacing:2rpx}.feed-card text:nth-child(2){margin-top:5rpx;color:$ink;font-family:STKaiti,KaiTi,serif;font-size:28rpx;font-weight:700}.feed-card text:nth-child(3){margin-top:6rpx;color:$ink-muted;font-size:19rpx}.feed-card text:last-child{margin-top:6rpx;color:#917b62;font-size:17rpx}.feed-state-card{margin-top:70rpx}.feed-state-card>view{position:absolute;inset:25% 12%;z-index:1;text-align:center}.feed-state-card text{display:block}.feed-state-card text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:30rpx;font-weight:700}.feed-state-card text:last-child{margin-top:13rpx;color:$ink-muted;font-size:20rpx}.feed-action{position:relative;width:100%;height:76rpx;margin-top:19rpx}.feed-action text{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100%;color:#fff9ed;font-size:24rpx;font-weight:700}
|
||||
.family-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.family-page__header,
|
||||
.feed-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.feed-content {
|
||||
padding: 24rpx 24rpx 190rpx;
|
||||
}
|
||||
.feed-heading text {
|
||||
display: block;
|
||||
}
|
||||
.feed-heading text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.feed-heading text:last-child {
|
||||
margin-top: 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.feed-shortcuts {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
.feed-shortcuts__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.feed-shortcut {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
min-height: 44px;
|
||||
}
|
||||
.feed-shortcut text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: $ink;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.feed-card,
|
||||
.feed-state-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 230rpx;
|
||||
min-height: 98px;
|
||||
margin-top: 17rpx;
|
||||
}
|
||||
.feed-card__skin,
|
||||
.feed-state-card > image,
|
||||
.feed-action image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.feed-card__copy {
|
||||
position: absolute;
|
||||
inset: 15% 9%;
|
||||
z-index: 1;
|
||||
}
|
||||
.feed-card text {
|
||||
display: block;
|
||||
}
|
||||
.feed-card__meta {
|
||||
color: #806a51;
|
||||
font-size: 21rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
.feed-card__title {
|
||||
margin-top: 5rpx;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.feed-card__summary {
|
||||
margin-top: 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.feed-card__author {
|
||||
margin-top: 6rpx;
|
||||
color: $brand-red;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
.feed-state-card {
|
||||
margin-top: 70rpx;
|
||||
}
|
||||
.feed-state-card > view {
|
||||
position: absolute;
|
||||
inset: 23% 10%;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.feed-state-card text {
|
||||
display: block;
|
||||
}
|
||||
.feed-state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.feed-state-card text:last-child {
|
||||
margin-top: 13rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.feed-action {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 76rpx;
|
||||
margin-top: 19rpx;
|
||||
}
|
||||
.feed-action text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #fff9ed;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,168 @@
|
||||
<!-- 页面编号：F-02；用途：发布家族动态与提交结果。 -->
|
||||
<template><view class="publish-page" :class="{'publish-state--form':publishState==='form','publish-state--success':publishState==='success','publish-state--error':publishState==='error'}"><ModulePageBackground module="family"/><view class="publish-page__header"><PageHeader title="发布动态"/></view><view class="publish-panel"><image class="publish-panel__skin" src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill"/><view v-if="publishState==='form'" class="publish-form"><text>记录此刻</text><text>分享通知、活动、家族故事或一段共同记忆。</text><view class="publish-field"><image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill"/><textarea v-model="content" maxlength="300" placeholder="写下想对家人说的话" placeholder-class="publish-placeholder"/></view><AppButton block label="发布动态" @click="submit"/></view><view v-else class="publish-result"><text>{{publishState==='success'?'动态已发布':'动态未发布'}}</text><text>{{publishState==='success'?'家人现在可以在家族圈看到这条记录。':'请检查内容后重新发布，当前文字仍保留在页面中。'}}</text><AppButton block :label="publishState==='success'?'继续发布':'重新填写'" @click="publishState='form'"/></view></view><AppToast :visible="toastVisible" :message="toastMessage"/></view></template>
|
||||
<script setup>import{onUnmounted,ref}from'vue';import{onLoad}from'@dcloudio/uni-app';import AppButton from'@/components/AppButton.vue';import AppToast from'@/components/AppToast.vue';import ModulePageBackground from'@/components/ModulePageBackground.vue';import PageHeader from'@/components/PageHeader.vue';const content=ref('');const publishState=ref('form');const toastVisible=ref(false);const toastMessage=ref('');let toastTimer=null;onLoad(query=>{publishState.value=query.state==='success'?'success':query.state==='error'?'error':'form'});const showToast=message=>{toastMessage.value=message;toastVisible.value=true;if(toastTimer)clearTimeout(toastTimer);toastTimer=setTimeout(()=>{toastVisible.value=false;toastTimer=null},1800)};const submit=()=>{if(!content.value.trim()){showToast('请先写下动态内容');return}publishState.value='success'};onUnmounted(()=>{if(toastTimer)clearTimeout(toastTimer)})</script>
|
||||
<style scoped lang="scss">.publish-page{position:relative;min-height:100vh;overflow:hidden;background:$paper}.publish-page__header,.publish-panel{position:relative;z-index:2}.publish-panel{width:calc(100% - 32rpx);height:min(640px,calc((100vw - 16px)*1.48));margin:18rpx auto 0}.publish-panel__skin{position:absolute;inset:0;width:100%;height:100%}.publish-form,.publish-result{position:absolute;inset:9% 9%}.publish-form>text,.publish-result>text{display:block}.publish-form>text:first-child,.publish-result>text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:36rpx;font-weight:700}.publish-form>text:nth-child(2),.publish-result>text:nth-child(2){margin-top:12rpx;color:$ink-muted;font-size:21rpx;line-height:1.6}.publish-field{position:relative;height:250rpx;margin-top:24rpx}.publish-field image{position:absolute;inset:0;width:100%;height:100%}.publish-field textarea{position:absolute;inset:25rpx;z-index:1;width:auto;height:200rpx;color:$ink;font-size:22rpx;line-height:1.7}.publish-placeholder{color:#a79884}.publish-form>.app-button{margin-top:24rpx}.publish-result{top:30%;text-align:center}.publish-result>.app-button{margin:30rpx auto 0}</style>
|
||||
<template>
|
||||
<view
|
||||
class="publish-page"
|
||||
:class="{
|
||||
'publish-state--form': publishState === 'form',
|
||||
'publish-state--success': publishState === 'success',
|
||||
'publish-state--error': publishState === 'error',
|
||||
}"
|
||||
><ModulePageBackground module="family" /><view class="publish-page__header"
|
||||
><PageHeader title="发布动态" /></view
|
||||
><view class="publish-panel"
|
||||
><image
|
||||
class="publish-panel__skin"
|
||||
src="/static/assets/modules/family/transparent/module-content-frame.png"
|
||||
mode="scaleToFill" /><view
|
||||
v-if="publishState === 'form'"
|
||||
class="publish-form"
|
||||
><text>记录此刻</text
|
||||
><text>分享通知、活动、家族故事或一段共同记忆。</text
|
||||
><view class="publish-field"
|
||||
><image
|
||||
src="/static/assets/modules/family/transparent/module-field-frame.png"
|
||||
mode="scaleToFill"
|
||||
/><textarea
|
||||
v-model="content"
|
||||
maxlength="300"
|
||||
placeholder="写下想对家人说的话"
|
||||
placeholder-class="publish-placeholder"
|
||||
/></view
|
||||
><AppButton block label="发布动态" @click="submit" /></view
|
||||
><view v-else class="publish-result"
|
||||
><text>{{
|
||||
publishState === "success" ? "动态已发布" : "动态未发布"
|
||||
}}</text
|
||||
><text>{{
|
||||
publishState === "success"
|
||||
? "家人现在可以在家族圈看到这条记录。"
|
||||
: "请检查内容后重新发布，当前文字仍保留在页面中。"
|
||||
}}</text
|
||||
><AppButton
|
||||
block
|
||||
:label="publishState === 'success' ? '继续发布' : '重新填写'"
|
||||
@click="publishState = 'form'" /></view></view
|
||||
><AppToast :visible="toastVisible" :message="toastMessage"
|
||||
/></view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onUnmounted, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import AppButton from "@/components/AppButton.vue";
|
||||
import AppToast from "@/components/AppToast.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
const content = ref("");
|
||||
const publishState = ref("form");
|
||||
const toastVisible = ref(false);
|
||||
const toastMessage = ref("");
|
||||
let toastTimer = null;
|
||||
onLoad((query) => {
|
||||
publishState.value =
|
||||
query.state === "success"
|
||||
? "success"
|
||||
: query.state === "error"
|
||||
? "error"
|
||||
: "form";
|
||||
});
|
||||
const showToast = (message) => {
|
||||
toastMessage.value = message;
|
||||
toastVisible.value = true;
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => {
|
||||
toastVisible.value = false;
|
||||
toastTimer = null;
|
||||
}, 1800);
|
||||
};
|
||||
const submit = () => {
|
||||
if (!content.value.trim()) {
|
||||
showToast("请先写下动态内容");
|
||||
return;
|
||||
}
|
||||
publishState.value = "success";
|
||||
};
|
||||
onUnmounted(() => {
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.publish-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.publish-page__header,
|
||||
.publish-panel {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.publish-panel {
|
||||
width: calc(100% - 32rpx);
|
||||
height: min(640px, calc((100vw - 16px) * 1.48));
|
||||
margin: 18rpx auto 0;
|
||||
}
|
||||
.publish-panel__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.publish-form,
|
||||
.publish-result {
|
||||
position: absolute;
|
||||
inset: 9% 9%;
|
||||
}
|
||||
.publish-form > text,
|
||||
.publish-result > text {
|
||||
display: block;
|
||||
}
|
||||
.publish-form > text:first-child,
|
||||
.publish-result > text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.publish-form > text:nth-child(2),
|
||||
.publish-result > text:nth-child(2) {
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.publish-field {
|
||||
position: relative;
|
||||
height: 250rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.publish-field image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.publish-field textarea {
|
||||
position: absolute;
|
||||
inset: 25rpx;
|
||||
z-index: 1;
|
||||
width: auto;
|
||||
height: 200rpx;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.publish-placeholder {
|
||||
color: #8e806e;
|
||||
}
|
||||
.publish-form > .app-button {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.publish-result {
|
||||
top: 29%;
|
||||
text-align: center;
|
||||
}
|
||||
.publish-result > .app-button {
|
||||
margin: 30rpx auto 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：F-03；用途：动态详情、评论、点赞与删除确认。 -->
|
||||
<template><ModulePage page-id="f03" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：F-04；用途：谱文分类与文章列表。 -->
|
||||
<template><ModulePage page-id="f04" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：F-05；用途：谱文详情。 -->
|
||||
<template><ModulePage page-id="f05" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：F-06；用途：新建与编辑谱文。 -->
|
||||
<template><ModulePage page-id="f06" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：F-07；用途：家族相册列表。 -->
|
||||
<template><ModulePage page-id="f07" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：F-08；用途：相册详情与照片墙。 -->
|
||||
<template><ModulePage page-id="f08" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：F-09；用途：图片预览、上传与失败状态。 -->
|
||||
<template><ModulePage page-id="f09" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：F-10；用途：家族视频列表、详情与待开放状态。 -->
|
||||
<template><ModulePage page-id="f10" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -2,50 +2,117 @@
|
||||
<template>
|
||||
<view class="join-page">
|
||||
<GenealogyPageBackground />
|
||||
<view class="join-page__header"><PageHeader :title="sourceContract.headerTitle" /></view>
|
||||
<view class="join-page__header"
|
||||
><PageHeader :title="sourceContract.headerTitle"
|
||||
/></view>
|
||||
|
||||
<view class="join-panel" :class="{
|
||||
'join-state--form': joinState === 'form',
|
||||
'join-state--success': joinState === 'success',
|
||||
'join-state--error': joinState === 'error'
|
||||
}">
|
||||
<image class="join-panel__skin" src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
|
||||
<view
|
||||
class="join-panel"
|
||||
:class="{
|
||||
'join-state--form': joinState === 'form',
|
||||
'join-state--success': joinState === 'success',
|
||||
'join-state--error': joinState === 'error',
|
||||
}"
|
||||
>
|
||||
<image
|
||||
class="join-panel__skin"
|
||||
src="/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
|
||||
<view v-if="joinState === 'form'" class="join-form">
|
||||
<text class="join-form__eyebrow">{{ sourceContract.eyebrow }}</text>
|
||||
<text class="join-form__title">{{ sourceContract.formTitle }} {{ genealogyName }}</text>
|
||||
<text class="join-form__title"
|
||||
>{{ sourceContract.formTitle }} {{ genealogyName }}</text
|
||||
>
|
||||
<text class="join-form__copy">{{ sourceContract.formCopy }}</text>
|
||||
|
||||
<view class="join-field">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<text>真实姓名</text><input v-model="form.realName" placeholder="请输入真实姓名" placeholder-class="join-placeholder" @input="clearFieldError('realName')" />
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/g-form-field-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>真实姓名</text
|
||||
><input
|
||||
v-model="form.realName"
|
||||
placeholder="请输入真实姓名"
|
||||
placeholder-class="join-placeholder"
|
||||
@input="clearFieldError('realName')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.realName" class="join-field-error">{{ fieldErrors.realName }}</text>
|
||||
<text v-if="fieldErrors.realName" class="join-field-error">{{
|
||||
fieldErrors.realName
|
||||
}}</text>
|
||||
<view class="join-field">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<text>与家谱关系</text><input v-model="form.relation" placeholder="例如：汤正华堂侄" placeholder-class="join-placeholder" @input="clearFieldError('relation')" />
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/g-form-field-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>与家谱关系</text
|
||||
><input
|
||||
v-model="form.relation"
|
||||
placeholder="例如：汤正华堂侄"
|
||||
placeholder-class="join-placeholder"
|
||||
@input="clearFieldError('relation')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.relation" class="join-field-error">{{ fieldErrors.relation }}</text>
|
||||
<text class="relation-help">请以家谱中一位已知长辈为参照，例如：汤正华堂侄</text>
|
||||
<text v-if="fieldErrors.relation" class="join-field-error">{{
|
||||
fieldErrors.relation
|
||||
}}</text>
|
||||
<text class="relation-help"
|
||||
>请以家谱中一位已知长辈为参照，例如：汤正华堂侄</text
|
||||
>
|
||||
<view class="join-field join-field--message">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<text>{{ sourceContract.thirdFieldLabel }}</text><textarea v-model="form.message" maxlength="80" :placeholder="sourceContract.thirdFieldPlaceholder" placeholder-class="join-placeholder" />
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/g-form-field-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>{{ sourceContract.thirdFieldLabel }}</text
|
||||
><textarea
|
||||
v-model="form.message"
|
||||
maxlength="80"
|
||||
:placeholder="sourceContract.thirdFieldPlaceholder"
|
||||
placeholder-class="join-placeholder"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<text class="join-form__note">{{ sourceContract.note }}</text>
|
||||
<view class="join-action" @click="submitJoin">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<text>{{ isSubmitting ? sourceContract.submittingLabel : sourceContract.submitLabel }}</text>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>{{
|
||||
isSubmitting
|
||||
? sourceContract.submittingLabel
|
||||
: sourceContract.submitLabel
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="join-result">
|
||||
<text class="join-result__eyebrow">{{ joinState === 'success' ? sourceContract.successEyebrow : sourceContract.errorEyebrow }}</text>
|
||||
<text class="join-result__title">{{ joinState === 'success' ? sourceContract.successTitle : sourceContract.errorTitle }}</text>
|
||||
<text class="join-result__eyebrow">{{
|
||||
joinState === "success"
|
||||
? sourceContract.successEyebrow
|
||||
: sourceContract.errorEyebrow
|
||||
}}</text>
|
||||
<text class="join-result__title">{{
|
||||
joinState === "success"
|
||||
? sourceContract.successTitle
|
||||
: sourceContract.errorTitle
|
||||
}}</text>
|
||||
<text class="join-result__copy">{{ resultCopy }}</text>
|
||||
<view class="join-action" @click="joinState === 'success' ? completeFlow() : retryForm()">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<text>{{ joinState === 'success' ? sourceContract.nextLabel : '重新填写' }}</text>
|
||||
<view
|
||||
class="join-action"
|
||||
@click="joinState === 'success' ? completeFlow() : retryForm()"
|
||||
>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>{{
|
||||
joinState === "success" ? sourceContract.nextLabel : "重新填写"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -53,121 +120,280 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import GenealogyPageBackground from '@/components/GenealogyPageBackground.vue'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
|
||||
const genealogyId = ref('')
|
||||
const source = ref('search')
|
||||
const genealogyName = ref('这部家谱')
|
||||
const genealogyId = ref("");
|
||||
const source = ref("search");
|
||||
const genealogyName = ref("这部家谱");
|
||||
const genealogyPreview = {
|
||||
'1001': '汤氏家谱',
|
||||
'1002': '汝南汤氏家谱'
|
||||
}
|
||||
const joinState = ref('form')
|
||||
const isSubmitting = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const form = reactive({ realName: '', relation: '', message: '' })
|
||||
const fieldErrors = reactive({ realName: '', relation: '' })
|
||||
const sourceContract = computed(() => source.value === 'invite' ? {
|
||||
headerTitle: '确认关系并加入',
|
||||
eyebrow: '邀请码直接加入',
|
||||
formTitle: '确认加入',
|
||||
formCopy: '请填写真实身份和亲属关系；提交后直接加入，无需等待管理员审核。',
|
||||
thirdFieldLabel: '补充信息',
|
||||
thirdFieldPlaceholder: '选填：补充祖居地、长辈姓名等信息',
|
||||
note: '邀请码来源提交后直接加入，无需等待审核。',
|
||||
submitLabel: '确认加入',
|
||||
submittingLabel: '正在加入…',
|
||||
successEyebrow: '已加入家谱',
|
||||
successTitle: '关系信息已提交',
|
||||
errorEyebrow: '加入未完成',
|
||||
errorTitle: '暂时无法加入家谱',
|
||||
nextLabel: '返回我的家谱',
|
||||
successCopy: `已直接加入“${genealogyName.value}”，无需等待审核；返回后将刷新并选中这部家谱。`
|
||||
} : {
|
||||
headerTitle: '申请加入家谱',
|
||||
eyebrow: '公开家谱入谱申请',
|
||||
formTitle: '申请加入',
|
||||
formCopy: '请填写真实身份和亲属关系，管理员审核后会通过消息告知结果。',
|
||||
thirdFieldLabel: '申请说明',
|
||||
thirdFieldPlaceholder: '补充祖居地、长辈姓名等核验信息',
|
||||
note: '提交后可在“我的申请”中查看审核进度。',
|
||||
submitLabel: '提交申请',
|
||||
submittingLabel: '正在提交…',
|
||||
successEyebrow: '申请已送达',
|
||||
successTitle: '等待管理员核实亲属关系',
|
||||
errorEyebrow: '申请未提交',
|
||||
errorTitle: '暂时无法提交申请',
|
||||
nextLabel: '查看我的申请',
|
||||
successCopy: `“${genealogyName.value}”的管理员会在核实后给出结果，请留意消息中心。`
|
||||
})
|
||||
const resultCopy = computed(() => joinState.value === 'success'
|
||||
? sourceContract.value.successCopy
|
||||
: errorMessage.value || '请检查网络后重新填写；未成功提交的内容不会进入审核列表。')
|
||||
1001: "汤氏家谱",
|
||||
1002: "汝南汤氏家谱",
|
||||
};
|
||||
const joinState = ref("form");
|
||||
const isSubmitting = ref(false);
|
||||
const errorMessage = ref("");
|
||||
const form = reactive({ realName: "", relation: "", message: "" });
|
||||
const fieldErrors = reactive({ realName: "", relation: "" });
|
||||
const sourceContract = computed(() =>
|
||||
source.value === "invite"
|
||||
? {
|
||||
headerTitle: "确认关系并加入",
|
||||
eyebrow: "邀请码直接加入",
|
||||
formTitle: "确认加入",
|
||||
formCopy:
|
||||
"请填写真实身份和亲属关系；提交后直接加入，无需等待管理员审核。",
|
||||
thirdFieldLabel: "补充信息",
|
||||
thirdFieldPlaceholder: "选填：补充祖居地、长辈姓名等信息",
|
||||
note: "邀请码来源提交后直接加入，无需等待审核。",
|
||||
submitLabel: "确认加入",
|
||||
submittingLabel: "正在加入…",
|
||||
successEyebrow: "已加入家谱",
|
||||
successTitle: "关系信息已提交",
|
||||
errorEyebrow: "加入未完成",
|
||||
errorTitle: "暂时无法加入家谱",
|
||||
nextLabel: "返回我的家谱",
|
||||
successCopy: `已直接加入“${genealogyName.value}”，无需等待审核；返回后将刷新并选中这部家谱。`,
|
||||
}
|
||||
: {
|
||||
headerTitle: "申请加入家谱",
|
||||
eyebrow: "公开家谱入谱申请",
|
||||
formTitle: "申请加入",
|
||||
formCopy: "请填写真实身份和亲属关系，管理员审核后会通过消息告知结果。",
|
||||
thirdFieldLabel: "申请说明",
|
||||
thirdFieldPlaceholder: "补充祖居地、长辈姓名等核验信息",
|
||||
note: "提交后可在“我的申请”中查看审核进度。",
|
||||
submitLabel: "提交申请",
|
||||
submittingLabel: "正在提交…",
|
||||
successEyebrow: "申请已送达",
|
||||
successTitle: "等待管理员核实亲属关系",
|
||||
errorEyebrow: "申请未提交",
|
||||
errorTitle: "暂时无法提交申请",
|
||||
nextLabel: "查看我的申请",
|
||||
successCopy: `“${genealogyName.value}”的管理员会在核实后给出结果，请留意消息中心。`,
|
||||
},
|
||||
);
|
||||
const resultCopy = computed(() =>
|
||||
joinState.value === "success"
|
||||
? sourceContract.value.successCopy
|
||||
: errorMessage.value ||
|
||||
"请检查网络后重新填写；未成功提交的内容不会进入审核列表。",
|
||||
);
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = query.genealogyId || ''
|
||||
source.value = query.source === 'invite' ? 'invite' : 'search'
|
||||
if (query.state === 'success') {
|
||||
joinState.value = 'success'
|
||||
return
|
||||
genealogyId.value = query.genealogyId || "";
|
||||
source.value = query.source === "invite" ? "invite" : "search";
|
||||
if (query.state === "success") {
|
||||
joinState.value = "success";
|
||||
return;
|
||||
}
|
||||
if (!genealogyId.value) {
|
||||
errorMessage.value = '没有找到要申请加入的家谱，请先返回公开家谱检索。'
|
||||
joinState.value = 'error'
|
||||
return
|
||||
errorMessage.value = "没有找到要申请加入的家谱，请先返回公开家谱检索。";
|
||||
joinState.value = "error";
|
||||
return;
|
||||
}
|
||||
genealogyName.value = genealogyPreview[genealogyId.value] || '这部家谱'
|
||||
})
|
||||
genealogyName.value = genealogyPreview[genealogyId.value] || "这部家谱";
|
||||
});
|
||||
|
||||
const submitJoin = () => {
|
||||
if (isSubmitting.value) return
|
||||
fieldErrors.realName = form.realName.trim() ? '' : '请填写真实姓名'
|
||||
fieldErrors.relation = form.relation.trim() ? '' : '请填写与家谱的关系'
|
||||
if (fieldErrors.realName || fieldErrors.relation) return
|
||||
isSubmitting.value = true
|
||||
if (isSubmitting.value) return;
|
||||
fieldErrors.realName = form.realName.trim() ? "" : "请填写真实姓名";
|
||||
fieldErrors.relation = form.relation.trim() ? "" : "请填写与家谱的关系";
|
||||
if (fieldErrors.realName || fieldErrors.relation) return;
|
||||
isSubmitting.value = true;
|
||||
setTimeout(() => {
|
||||
joinState.value = form.realName.trim() === '失败' ? 'error' : 'success'
|
||||
if (joinState.value === 'error') errorMessage.value = source.value === 'invite' ? '邀请码加入暂未完成，请稍后重试。' : '申请暂未提交，请稍后重试。'
|
||||
isSubmitting.value = false
|
||||
}, 280)
|
||||
}
|
||||
const clearFieldError = (field) => { fieldErrors[field] = '' }
|
||||
const retryForm = () => { joinState.value = 'form'; errorMessage.value = '' }
|
||||
const toMyApplications = () => uni.redirectTo({ url: '/pages/genealogy/g09-my-applications' })
|
||||
const toMyGenealogies = () => uni.reLaunch({ url: `/pages/genealogy/g01-my-genealogies?genealogyId=${genealogyId.value}` })
|
||||
const completeFlow = () => source.value === 'invite' ? toMyGenealogies() : toMyApplications()
|
||||
joinState.value = form.realName.trim() === "失败" ? "error" : "success";
|
||||
if (joinState.value === "error")
|
||||
errorMessage.value =
|
||||
source.value === "invite"
|
||||
? "邀请码加入暂未完成，请稍后重试。"
|
||||
: "申请暂未提交，请稍后重试。";
|
||||
isSubmitting.value = false;
|
||||
}, 280);
|
||||
};
|
||||
const clearFieldError = (field) => {
|
||||
fieldErrors[field] = "";
|
||||
};
|
||||
const retryForm = () => {
|
||||
joinState.value = "form";
|
||||
errorMessage.value = "";
|
||||
};
|
||||
const toMyApplications = () =>
|
||||
uni.redirectTo({ url: "/pages/genealogy/g09-my-applications" });
|
||||
const toMyGenealogies = () =>
|
||||
uni.reLaunch({
|
||||
url: `/pages/genealogy/g01-my-genealogies?genealogyId=${genealogyId.value}`,
|
||||
});
|
||||
const completeFlow = () =>
|
||||
source.value === "invite" ? toMyGenealogies() : toMyApplications();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.join-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
|
||||
.join-page__header { position: relative; z-index: 3; }
|
||||
.join-panel { position: relative; z-index: 2; width: calc(100% - 32rpx); height: min(590px, calc((100vw - 16px) * 1.337)); margin: 22rpx auto 0; }
|
||||
.join-panel__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.join-form { position: absolute; inset: 8.5% 8%; }
|
||||
.join-form__eyebrow, .join-result__eyebrow { display: block; color: $brand-red; font-size: 23rpx; letter-spacing: 3rpx; }
|
||||
.join-form__title, .join-result__title { display: block; margin-top: 12rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 36rpx; font-weight: 700; }
|
||||
.join-form__copy, .join-result__copy { display: block; margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.6; }
|
||||
.join-field { position: relative; height: 92rpx; margin-top: 18rpx; }
|
||||
.join-field > image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.join-field > text { position: absolute; top: 31rpx; left: 24rpx; z-index: 1; color: $ink; font-size: 23rpx; font-weight: 700; }
|
||||
.join-field input, .join-field textarea { position: absolute; top: 0; right: 20rpx; bottom: 0; left: 170rpx; z-index: 1; height: 92rpx; color: $ink; font-size: 23rpx; line-height: 92rpx; }
|
||||
.join-field textarea { box-sizing: border-box; padding-top: 26rpx; line-height: 1.5; }
|
||||
.join-placeholder { color: #a79884; }
|
||||
.join-field-error { display: block; margin-top: 3rpx; color: $brand-red; font-size: 20rpx; text-align: right; }
|
||||
.relation-help { display: block; margin-top: 5rpx; color: #8e7b67; font-size: 19rpx; line-height: 29rpx; }
|
||||
.join-form__note { display: block; margin-top: 18rpx; color: $ink-muted; font-size: 21rpx; text-align: center; }
|
||||
.join-action { position: relative; width: 100%; height: 82rpx; margin-top: 20rpx; }
|
||||
.join-action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.join-action text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: #fff9ed; font-size: 27rpx; font-weight: 700; letter-spacing: 3rpx; }
|
||||
.join-result { position: absolute; top: 28%; right: 12%; left: 12%; text-align: center; }
|
||||
.join-result__eyebrow { text-align: center; }
|
||||
.join-result__copy { margin-top: 22rpx; }
|
||||
.join-result .join-action { width: 420rpx; max-width: 100%; margin: 34rpx auto 0; }
|
||||
.join-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.join-page__header {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.join-panel {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: calc(100% - 32rpx);
|
||||
height: min(590px, calc((100vw - 16px) * 1.337));
|
||||
margin: 22rpx auto 0;
|
||||
}
|
||||
.join-panel__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.join-form {
|
||||
position: absolute;
|
||||
inset: 8.5% 8%;
|
||||
}
|
||||
.join-form__eyebrow,
|
||||
.join-result__eyebrow {
|
||||
display: block;
|
||||
color: $brand-red;
|
||||
font-size: 23rpx;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.join-form__title,
|
||||
.join-result__title {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.join-form__copy,
|
||||
.join-result__copy {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.join-field {
|
||||
position: relative;
|
||||
height: 92rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.join-field > image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.join-field > text {
|
||||
position: absolute;
|
||||
top: 31rpx;
|
||||
left: 24rpx;
|
||||
z-index: 1;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.join-field input,
|
||||
.join-field textarea {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20rpx;
|
||||
bottom: 0;
|
||||
left: 170rpx;
|
||||
z-index: 1;
|
||||
height: 92rpx;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
line-height: 92rpx;
|
||||
}
|
||||
.join-field textarea {
|
||||
box-sizing: border-box;
|
||||
padding-top: 26rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.join-placeholder {
|
||||
color: #a79884;
|
||||
}
|
||||
.join-field-error {
|
||||
display: block;
|
||||
margin-top: 3rpx;
|
||||
color: $brand-red;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.relation-help {
|
||||
display: block;
|
||||
margin-top: 5rpx;
|
||||
color: #8e7b67;
|
||||
font-size: 19rpx;
|
||||
line-height: 29rpx;
|
||||
}
|
||||
.join-form__note {
|
||||
display: block;
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.join-action {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 82rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.join-action image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.join-action text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #fff9ed;
|
||||
font-size: 27rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.join-result {
|
||||
position: absolute;
|
||||
top: 28%;
|
||||
right: 12%;
|
||||
left: 12%;
|
||||
text-align: center;
|
||||
}
|
||||
.join-result__eyebrow {
|
||||
text-align: center;
|
||||
}
|
||||
.join-result__copy {
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.join-result .join-action {
|
||||
width: 420rpx;
|
||||
max-width: 100%;
|
||||
margin: 34rpx auto 0;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.join-panel { width: calc(100% - 48rpx); }
|
||||
.join-form { right: 9%; left: 9%; }
|
||||
.join-panel {
|
||||
width: calc(100% - 48rpx);
|
||||
}
|
||||
.join-form {
|
||||
right: 9%;
|
||||
left: 9%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,47 +2,94 @@
|
||||
<template>
|
||||
<view class="application-page">
|
||||
<GenealogyPageBackground />
|
||||
<view class="application-page__header"><PageHeader title="我的申请" /></view>
|
||||
<view class="application-page__header"
|
||||
><PageHeader title="我的申请"
|
||||
/></view>
|
||||
|
||||
<view class="application-content" :class="{
|
||||
'application-state--list': applicationState === 'list',
|
||||
'application-state--empty': applicationState === 'empty',
|
||||
'application-state--error': applicationState === 'error'
|
||||
}">
|
||||
<view
|
||||
class="application-content"
|
||||
:class="{
|
||||
'application-state--list': applicationState === 'list',
|
||||
'application-state--empty': applicationState === 'empty',
|
||||
'application-state--error': applicationState === 'error',
|
||||
}"
|
||||
>
|
||||
<template v-if="applicationState === 'list'">
|
||||
<view class="application-intro">
|
||||
<text>入谱申请进度</text><text>审核结果会同步到消息中心</text>
|
||||
</view>
|
||||
<view v-for="item in applications" :key="item.id" class="application-card">
|
||||
<image class="application-card__skin" src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<view
|
||||
v-for="item in applications"
|
||||
:key="item.id"
|
||||
class="application-card"
|
||||
>
|
||||
<image
|
||||
class="application-card__skin"
|
||||
src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="application-card__body">
|
||||
<text class="application-card__name">{{ item.genealogyName }}</text>
|
||||
<text class="application-card__time">{{ item.appliedAt }}</text>
|
||||
<text class="application-card__relation">{{ item.relation }}</text>
|
||||
<text class="application-card__status" :class="`application-card__status--${item.status.toLowerCase()}`">{{ statusLabel(item.status) }}</text>
|
||||
<text class="application-card__hint">{{ statusHint(item.status) }}</text>
|
||||
<view v-if="actionFor(item)" class="application-card__action" @click="handleApplicationAction(item)">{{ actionFor(item) }}</view>
|
||||
<text
|
||||
class="application-card__status"
|
||||
:class="`application-card__status--${item.status.toLowerCase()}`"
|
||||
>{{ statusLabel(item.status) }}</text
|
||||
>
|
||||
<text class="application-card__hint">{{
|
||||
statusHint(item.status)
|
||||
}}</text>
|
||||
<view
|
||||
v-if="actionFor(item)"
|
||||
class="application-card__action"
|
||||
@click="handleApplicationAction(item)"
|
||||
>{{ actionFor(item) }}</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<AppLoading
|
||||
v-else-if="applicationState === 'loading'"
|
||||
text="正在整理申请记录"
|
||||
description="请稍候，正在同步审核状态。"
|
||||
/>
|
||||
<view v-else class="application-state-card">
|
||||
<image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="application-state-card__copy">
|
||||
<text>{{ stateTitle }}</text>
|
||||
<text>{{ stateCopy }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="applicationState !== 'list'" class="application-page__action" @click="applicationState === 'error' ? loadApplications({}) : toSearch()">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<text>{{ applicationState === 'error' ? '重新查看' : '查找公开家谱' }}</text>
|
||||
<view
|
||||
v-if="applicationState !== 'list' && applicationState !== 'loading'"
|
||||
class="application-page__action"
|
||||
@click="
|
||||
applicationState === 'error' ? loadApplications({}) : toSearch()
|
||||
"
|
||||
>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>{{
|
||||
applicationState === "error" ? "重新查看" : "查找公开家谱"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<AppDialog
|
||||
:visible="!!withdrawTarget"
|
||||
title="撤回加入申请"
|
||||
:message="withdrawTarget ? `确认撤回对“${withdrawTarget.genealogyName}”的申请？撤回后如需加入，可重新提交。` : ''"
|
||||
:message="
|
||||
withdrawTarget
|
||||
? `确认撤回对“${withdrawTarget.genealogyName}”的申请？撤回后如需加入，可重新提交。`
|
||||
: ''
|
||||
"
|
||||
confirm-text="确认撤回"
|
||||
cancel-text="暂不撤回"
|
||||
show-cancel
|
||||
@@ -54,89 +101,282 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import AppDialog from '@/components/AppDialog.vue'
|
||||
import GenealogyPageBackground from '@/components/GenealogyPageBackground.vue'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
|
||||
const applications = ref([])
|
||||
const applicationState = ref('loading')
|
||||
const errorMessage = ref('')
|
||||
const withdrawTarget = ref(null)
|
||||
const applications = ref([]);
|
||||
const applicationState = ref("loading");
|
||||
const errorMessage = ref("");
|
||||
const withdrawTarget = ref(null);
|
||||
const applicationSamples = [
|
||||
{ id: 1, genealogyId: 1001, genealogyName: '汤氏家谱', relation: '自述为汤正华堂侄', appliedAt: '今天 10:24', status: 'PENDING' },
|
||||
{ id: 2, genealogyId: 1002, genealogyName: '汝南汤氏家谱', relation: '祖居河南汝南', appliedAt: '昨天 18:02', status: 'APPROVED' },
|
||||
{ id: 3, genealogyId: 1003, genealogyName: '清河汤氏家谱', relation: '补充材料不足', appliedAt: '7月12日 09:18', status: 'REJECTED' }
|
||||
]
|
||||
{
|
||||
id: 1,
|
||||
genealogyId: 1001,
|
||||
genealogyName: "汤氏家谱",
|
||||
relation: "自述为汤正华堂侄",
|
||||
appliedAt: "今天 10:24",
|
||||
status: "PENDING",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
genealogyId: 1002,
|
||||
genealogyName: "汝南汤氏家谱",
|
||||
relation: "祖居河南汝南",
|
||||
appliedAt: "昨天 18:02",
|
||||
status: "APPROVED",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
genealogyId: 1003,
|
||||
genealogyName: "清河汤氏家谱",
|
||||
relation: "补充材料不足",
|
||||
appliedAt: "7月12日 09:18",
|
||||
status: "REJECTED",
|
||||
},
|
||||
];
|
||||
|
||||
const statusLabel = (status) => ({
|
||||
'PENDING': '审核中',
|
||||
'APPROVED': '已通过',
|
||||
'REJECTED': '未通过',
|
||||
'WITHDRAWN': '已撤回'
|
||||
}[status] || '状态未知')
|
||||
const statusLabel = (status) =>
|
||||
({
|
||||
PENDING: "审核中",
|
||||
APPROVED: "已通过",
|
||||
REJECTED: "未通过",
|
||||
WITHDRAWN: "已撤回",
|
||||
})[status] || "状态未知";
|
||||
|
||||
const statusHint = (status) => ({
|
||||
PENDING: '管理员尚未处理，可在审核前撤回',
|
||||
APPROVED: '申请已通过，可进入这部家谱',
|
||||
REJECTED: '请修改关系说明后重新提交',
|
||||
WITHDRAWN: '申请已撤回，不再进入管理员审核'
|
||||
}[status] || '')
|
||||
const statusHint = (status) =>
|
||||
({
|
||||
PENDING: "管理员尚未处理，可在审核前撤回",
|
||||
APPROVED: "申请已通过，可进入这部家谱",
|
||||
REJECTED: "请修改关系说明后重新提交",
|
||||
WITHDRAWN: "申请已撤回，不再进入管理员审核",
|
||||
})[status] || "";
|
||||
|
||||
const actionFor = (item) => ({ PENDING: '撤回申请', APPROVED: '进入家谱', REJECTED: '修改后重新提交' }[item.status] || '')
|
||||
const stateTitle = computed(() => applicationState.value === 'empty' ? '还没有入谱申请' : applicationState.value === 'loading' ? '正在整理申请记录' : '申请记录暂时无法读取')
|
||||
const stateCopy = computed(() => applicationState.value === 'empty' ? '从家谱搜索提交的申请会显示在这里；邀请码直接加入不进入本页。' : applicationState.value === 'loading' ? '请稍候，正在同步审核状态。' : errorMessage.value || '请检查网络后重新查看。')
|
||||
const actionFor = (item) =>
|
||||
({ PENDING: "撤回申请", APPROVED: "进入家谱", REJECTED: "修改后重新提交" })[
|
||||
item.status
|
||||
] || "";
|
||||
const stateTitle = computed(() =>
|
||||
applicationState.value === "empty"
|
||||
? "还没有入谱申请"
|
||||
: applicationState.value === "loading"
|
||||
? "正在整理申请记录"
|
||||
: "申请记录暂时无法读取",
|
||||
);
|
||||
const stateCopy = computed(() =>
|
||||
applicationState.value === "empty"
|
||||
? "从家谱搜索提交的申请会显示在这里；邀请码直接加入不进入本页。"
|
||||
: applicationState.value === "loading"
|
||||
? "请稍候，正在同步审核状态。"
|
||||
: errorMessage.value || "请检查网络后重新查看。",
|
||||
);
|
||||
|
||||
const loadApplications = (query = {}) => {
|
||||
applicationState.value = 'loading'
|
||||
errorMessage.value = ''
|
||||
if (query.state === 'empty') { applicationState.value = 'empty'; return }
|
||||
if (query.state === 'error') { applicationState.value = 'error'; return }
|
||||
if (query.state === 'loading') { applicationState.value = 'loading'; return }
|
||||
applications.value = applicationSamples.map((item) => ({ ...item }))
|
||||
applicationState.value = 'list'
|
||||
}
|
||||
applicationState.value = "loading";
|
||||
errorMessage.value = "";
|
||||
if (query.state === "empty") {
|
||||
applicationState.value = "empty";
|
||||
return;
|
||||
}
|
||||
if (query.state === "error") {
|
||||
applicationState.value = "error";
|
||||
return;
|
||||
}
|
||||
if (query.state === "loading") {
|
||||
applicationState.value = "loading";
|
||||
return;
|
||||
}
|
||||
applications.value = applicationSamples.map((item) => ({ ...item }));
|
||||
applicationState.value = "list";
|
||||
};
|
||||
|
||||
onLoad(loadApplications)
|
||||
onLoad(loadApplications);
|
||||
const handleApplicationAction = (item) => {
|
||||
if (item.status === 'APPROVED') return uni.navigateTo({ url: `/pages/genealogy/g05-genealogy-overview?genealogyId=${item.genealogyId}` })
|
||||
if (item.status === 'REJECTED') return uni.navigateTo({ url: `/pages/genealogy/g08-join-application?source=search&previous=rejected&genealogyId=${item.genealogyId}` })
|
||||
if (item.status === 'PENDING') withdrawTarget.value = item
|
||||
}
|
||||
const cancelWithdraw = () => { withdrawTarget.value = null }
|
||||
if (item.status === "APPROVED")
|
||||
return uni.navigateTo({
|
||||
url: `/pages/genealogy/g05-genealogy-overview?genealogyId=${item.genealogyId}`,
|
||||
});
|
||||
if (item.status === "REJECTED")
|
||||
return uni.navigateTo({
|
||||
url: `/pages/genealogy/g08-join-application?source=search&previous=rejected&genealogyId=${item.genealogyId}`,
|
||||
});
|
||||
if (item.status === "PENDING") withdrawTarget.value = item;
|
||||
};
|
||||
const cancelWithdraw = () => {
|
||||
withdrawTarget.value = null;
|
||||
};
|
||||
const confirmWithdraw = () => {
|
||||
const target = applications.value.find((item) => item.id === withdrawTarget.value?.id)
|
||||
if (target) target.status = 'WITHDRAWN'
|
||||
cancelWithdraw()
|
||||
}
|
||||
const toSearch = () => uni.navigateTo({ url: '/pages/genealogy/g06-search-genealogies' })
|
||||
const target = applications.value.find(
|
||||
(item) => item.id === withdrawTarget.value?.id,
|
||||
);
|
||||
if (target) target.status = "WITHDRAWN";
|
||||
cancelWithdraw();
|
||||
};
|
||||
const toSearch = () =>
|
||||
uni.navigateTo({ url: "/pages/genealogy/g06-search-genealogies" });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.application-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
|
||||
.application-page__header { position: relative; z-index: 3; }
|
||||
.application-content { position: relative; z-index: 2; padding: 28rpx 24rpx 60rpx; }
|
||||
.application-intro { display: flex; align-items: baseline; justify-content: space-between; margin: 0 8rpx 20rpx; }
|
||||
.application-intro text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 31rpx; font-weight: 700; }
|
||||
.application-intro text:last-child { color: $ink-muted; font-size: 21rpx; }
|
||||
.application-card { position: relative; width: 100%; height: calc((100vw - 24px) * .34286); min-height: 228rpx; max-height: 282rpx; margin-bottom: 18rpx; }
|
||||
.application-card__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.application-card__body { position: absolute; inset: 18% 7% 14% 8.5%; }
|
||||
.application-card__name { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 30rpx; font-weight: 700; }
|
||||
.application-card__time { position: absolute; top: 3rpx; right: 0; color: #998873; font-size: 20rpx; }
|
||||
.application-card__relation { display: block; max-width: 70%; margin-top: 14rpx; color: $ink-muted; font-size: 22rpx; }
|
||||
.application-card__status { position: absolute; right: 3%; bottom: 38%; color: $brand-red; font-size: 23rpx; font-weight: 700; }
|
||||
.application-card__status--approved { color: #537368; }
|
||||
.application-card__status--rejected { color: #7e6f62; }
|
||||
.application-card__hint { position: absolute; bottom: 5%; left: 0; max-width: 62%; color: #8d7c67; font-size: 20rpx; }
|
||||
.application-card__action { position: absolute; right: 2%; bottom: 2%; z-index: 2; display: flex; min-height: 54rpx; align-items: center; color: $brand-red; font-size: 21rpx; font-weight: 700; }
|
||||
.application-state-card { position: relative; width: 100%; height: calc((100vw - 24px) * .34286); min-height: 228rpx; margin-top: 80rpx; }
|
||||
.application-state-card > image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.application-state-card__copy { position: absolute; inset: 22% 12%; display: flex; flex-direction: column; justify-content: center; text-align: center; }
|
||||
.application-state-card__copy text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 31rpx; font-weight: 700; }
|
||||
.application-state-card__copy text:last-child { margin-top: 16rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.6; }
|
||||
.application-page__action { position: relative; width: 420rpx; height: 82rpx; margin: 34rpx auto 0; }
|
||||
.application-page__action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.application-page__action text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: #fff9ed; font-size: 26rpx; font-weight: 700; }
|
||||
.application-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.application-page__header {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.application-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 28rpx 24rpx 60rpx;
|
||||
}
|
||||
.application-intro {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin: 0 8rpx 20rpx;
|
||||
}
|
||||
.application-intro text:first-child {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.application-intro text:last-child {
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.application-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc((100vw - 24px) * 0.34286);
|
||||
min-height: 228rpx;
|
||||
max-height: 282rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
.application-card__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.application-card__body {
|
||||
position: absolute;
|
||||
inset: 18% 7% 14% 8.5%;
|
||||
}
|
||||
.application-card__name {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.application-card__time {
|
||||
position: absolute;
|
||||
top: 3rpx;
|
||||
right: 0;
|
||||
color: #998873;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.application-card__relation {
|
||||
display: block;
|
||||
max-width: 70%;
|
||||
margin-top: 14rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.application-card__status {
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
bottom: 38%;
|
||||
color: $brand-red;
|
||||
font-size: 25rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.application-card__status--approved {
|
||||
color: #537368;
|
||||
}
|
||||
.application-card__status--rejected {
|
||||
color: #7e6f62;
|
||||
}
|
||||
.application-card__hint {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: 0;
|
||||
max-width: 62%;
|
||||
color: #766653;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.application-card__action {
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
bottom: 2%;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
min-height: 54rpx;
|
||||
align-items: center;
|
||||
color: $brand-red;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.application-state-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc((100vw - 24px) * 0.34286);
|
||||
min-height: 228rpx;
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
.application-state-card > image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.application-state-card__copy {
|
||||
position: absolute;
|
||||
inset: 22% 12%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.application-state-card__copy text:first-child {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.application-state-card__copy text:last-child {
|
||||
margin-top: 16rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.application-page__action {
|
||||
position: relative;
|
||||
width: 420rpx;
|
||||
height: 82rpx;
|
||||
margin: 34rpx auto 0;
|
||||
}
|
||||
.application-page__action image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.application-page__action text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #fff9ed;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,289 @@
|
||||
<!-- 页面编号：N-01；用途：消息中心、已读操作、空态与失败状态。 -->
|
||||
<template><view class="notice-page" :class="{'notice-state--list':noticeState==='list','notice-state--empty':noticeState==='empty','notice-state--error':noticeState==='error'}"><ModulePageBackground module="notification"/><view class="notice-page__header"><PageHeader title="消息中心" action="全部已读" @action="markAllRead"/></view><view class="notice-content"><template v-if="noticeState==='list'"><view v-for="item in notices" :key="item.id" class="notice-card" @click="readNotice(item)"><image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill"/><view><text>{{item.unread?'未读提醒':'已读'}} · {{item.time}}</text><text>{{item.title}}</text><text>{{item.content}}</text></view></view></template><view v-else class="notice-state-card"><image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill"/><view><text>{{noticeState==='empty'?'暂时没有新消息':'消息中心暂不可用'}}</text><text>{{noticeState==='empty'?'家谱申请、审核结果和家族提醒会留在这里。':'请稍后重新进入，已读状态不会受到影响。'}}</text></view></view><AppButton type="secondary" :label="noticeState==='error'?'重新查看':'前往入谱审核'" @click="noticeState==='error'?noticeState='list':toReview()"/></view><AppToast :visible="toastVisible" :message="toastMessage"/></view></template>
|
||||
<script setup>import{onUnmounted,ref}from'vue';import{onLoad}from'@dcloudio/uni-app';import AppButton from'@/components/AppButton.vue';import AppToast from'@/components/AppToast.vue';import ModulePageBackground from'@/components/ModulePageBackground.vue';import PageHeader from'@/components/PageHeader.vue';import{genealogyContext}from'@/utils/genealogy-context.js';const genealogyId=ref('');const noticeState=ref('loading');const toastVisible=ref(false);const toastMessage=ref('');let toastTimer=null;const notices=ref([{id:1,title:'申请待审核',content:'汤志成申请加入汤氏家谱，请核实亲属关系。',time:'今天 10:28',unread:true},{id:2,title:'入谱申请已通过',content:'你申请加入汝南汤氏家谱的请求已通过。',time:'昨天 18:10',unread:false}]);onLoad(query=>{genealogyId.value=query.genealogyId||genealogyContext.getCurrentGenealogyId()||'';noticeState.value=query.state==='empty'?'empty':query.state==='error'?'error':'list'});const readNotice=item=>{item.unread=false};const showToast=message=>{toastMessage.value=message;toastVisible.value=true;if(toastTimer)clearTimeout(toastTimer);toastTimer=setTimeout(()=>{toastVisible.value=false;toastTimer=null},1800)};const markAllRead=()=>{notices.value.forEach(x=>x.unread=false);showToast('已全部标记为已读')};const toReview=()=>uni.navigateTo({url:`/pages/genealogy/g10-application-review?genealogyId=${genealogyId.value}`});onUnmounted(()=>{if(toastTimer)clearTimeout(toastTimer)})</script>
|
||||
<style scoped lang="scss">.notice-page{position:relative;min-height:100vh;overflow:hidden;background:$paper}.notice-page__header,.notice-content{position:relative;z-index:2}.notice-content{padding:24rpx}.notice-card,.notice-state-card{position:relative;width:100%;height:calc((100vw - 24px)*.34286);min-height:220rpx;margin-bottom:16rpx}.notice-card>image,.notice-state-card>image{position:absolute;inset:0;width:100%;height:100%}.notice-card>view{position:absolute;inset:17% 9%;z-index:1}.notice-card text{display:block}.notice-card text:first-child{color:$brand-red;font-size:18rpx;letter-spacing:2rpx}.notice-card text:nth-child(2){margin-top:6rpx;color:$ink;font-family:STKaiti,KaiTi,serif;font-size:28rpx;font-weight:700}.notice-card text:last-child{margin-top:7rpx;color:#62584c;font-size:22rpx;font-weight:500}.notice-state-card{margin-top:70rpx}.notice-state-card>view{position:absolute;inset:25% 12%;z-index:1;text-align:center}.notice-state-card text{display:block}.notice-state-card text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:30rpx;font-weight:700}.notice-state-card text:last-child{margin-top:13rpx;color:#62584c;font-size:22rpx}.notice-content>.app-button{margin:20rpx auto 0}</style>
|
||||
<template>
|
||||
<view
|
||||
class="notice-page"
|
||||
:class="{
|
||||
'notice-state--loading': noticeState === 'loading',
|
||||
'notice-state--list': noticeState === 'list',
|
||||
'notice-state--empty': noticeState === 'empty',
|
||||
'notice-state--error': noticeState === 'error',
|
||||
}"
|
||||
>
|
||||
<ModulePageBackground module="notification" />
|
||||
<view class="notice-page__header">
|
||||
<PageHeader
|
||||
title="消息中心"
|
||||
:action="noticeState === 'list' ? '全部已读' : ''"
|
||||
@action="markAllRead"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="notice-content">
|
||||
<AppLoading
|
||||
v-if="noticeState === 'loading'"
|
||||
text="正在整理消息"
|
||||
description="请稍候，正在同步家谱申请与家族提醒。"
|
||||
/>
|
||||
|
||||
<template v-else-if="noticeState === 'list'">
|
||||
<view class="notice-list">
|
||||
<view
|
||||
v-for="item in notices"
|
||||
:key="item.id"
|
||||
class="notice-card"
|
||||
role="button"
|
||||
:aria-label="`${item.unread ? '未读' : '已读'}消息：${item.title}`"
|
||||
@click="readNotice(item)"
|
||||
>
|
||||
<image
|
||||
class="notice-card__skin"
|
||||
src="/static/assets/modules/notification/transparent/n01-notice-card.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="notice-card__copy">
|
||||
<text
|
||||
class="notice-card__status"
|
||||
:class="{ 'is-unread': item.unread }"
|
||||
>{{ item.unread ? "未读提醒" : "已读" }} · {{ item.time }}</text
|
||||
>
|
||||
<text class="notice-card__title">{{ item.title }}</text>
|
||||
<text class="notice-card__summary">{{ item.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<AppButton
|
||||
class="notice-review-action"
|
||||
block
|
||||
type="secondary"
|
||||
label="前往入谱审核"
|
||||
@click="toReview"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<view v-else class="notice-state-card">
|
||||
<image
|
||||
class="notice-state-card__skin"
|
||||
src="/static/assets/modules/notification/transparent/n01-notice-card.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="notice-state-card__copy">
|
||||
<text class="notice-state-card__title">{{
|
||||
noticeState === "empty" ? "暂时没有新消息" : "消息中心暂不可用"
|
||||
}}</text>
|
||||
<text class="notice-state-card__description">{{
|
||||
noticeState === "empty"
|
||||
? "家谱申请、审核结果和家族提醒会留在这里。"
|
||||
: "请稍后重新进入，已读状态不会受到影响。"
|
||||
}}</text>
|
||||
</view>
|
||||
<AppButton
|
||||
block
|
||||
:type="noticeState === 'error' ? 'secondary' : 'primary'"
|
||||
:label="noticeState === 'error' ? '重新查看' : '前往入谱审核'"
|
||||
@click="noticeState === 'error' ? restoreList() : toReview()"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<AppToast :visible="toastVisible" :message="toastMessage" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onUnmounted, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import AppButton from "@/components/AppButton.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 { genealogyContext } from "@/utils/genealogy-context.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
const noticeState = ref("loading");
|
||||
const toastVisible = ref(false);
|
||||
const toastMessage = ref("");
|
||||
let toastTimer = null;
|
||||
|
||||
const notices = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: "申请待审核",
|
||||
content: "汤志成申请加入汤氏家谱，请核实亲属关系。",
|
||||
time: "今天 10:28",
|
||||
unread: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "入谱申请已通过",
|
||||
content: "你申请加入汝南汤氏家谱的请求已通过。",
|
||||
time: "昨天 18:10",
|
||||
unread: false,
|
||||
},
|
||||
]);
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value =
|
||||
query.genealogyId || genealogyContext.getCurrentGenealogyId() || "";
|
||||
noticeState.value =
|
||||
query.state === "loading"
|
||||
? "loading"
|
||||
: query.state === "empty"
|
||||
? "empty"
|
||||
: query.state === "error"
|
||||
? "error"
|
||||
: "list";
|
||||
});
|
||||
|
||||
const readNotice = (item) => {
|
||||
item.unread = false;
|
||||
};
|
||||
const restoreList = () => {
|
||||
noticeState.value = "list";
|
||||
};
|
||||
const showToast = (message) => {
|
||||
toastMessage.value = message;
|
||||
toastVisible.value = true;
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => {
|
||||
toastVisible.value = false;
|
||||
toastTimer = null;
|
||||
}, 1800);
|
||||
};
|
||||
const markAllRead = () => {
|
||||
notices.value.forEach((item) => {
|
||||
item.unread = false;
|
||||
});
|
||||
showToast("已全部标记为已读");
|
||||
};
|
||||
const toReview = () =>
|
||||
uni.navigateTo({
|
||||
url: `/pages/genealogy/g10-application-review?genealogyId=${genealogyId.value}`,
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.notice-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.notice-page__header,
|
||||
.notice-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.notice-content {
|
||||
padding: 24rpx 28rpx 100rpx;
|
||||
}
|
||||
.notice-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18rpx;
|
||||
}
|
||||
.notice-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 220rpx;
|
||||
}
|
||||
.notice-card__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.notice-card__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
min-height: 220rpx;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 30rpx 44rpx;
|
||||
}
|
||||
.notice-card__status {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.notice-card__status.is-unread {
|
||||
color: $brand-red;
|
||||
font-weight: 700;
|
||||
}
|
||||
.notice-card__title {
|
||||
display: block;
|
||||
margin-top: 7rpx;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.notice-card__summary {
|
||||
display: block;
|
||||
margin-top: 7rpx;
|
||||
color: #62584c;
|
||||
font-size: 23rpx;
|
||||
font-weight: 500;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.notice-review-action {
|
||||
margin: 30rpx auto 0;
|
||||
}
|
||||
.notice-state-card {
|
||||
position: relative;
|
||||
margin-top: 38rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.notice-state-card__skin {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
min-height: 118px;
|
||||
}
|
||||
.notice-state-card__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
height: 220rpx;
|
||||
min-height: 118px;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 54rpx;
|
||||
}
|
||||
.notice-state-card__title {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.notice-state-card__description {
|
||||
display: block;
|
||||
margin-top: 13rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.notice-state-card .app-button {
|
||||
margin: 20rpx auto 0;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.notice-content {
|
||||
padding-right: 32rpx;
|
||||
padding-left: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：N-02；用途：消息详情、已读与空状态。 -->
|
||||
<template><ModulePage page-id="n02" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：M-02；用途：编辑个人资料。 -->
|
||||
<template><ModulePage page-id="m02" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：M-03；用途：账号与安全设置。 -->
|
||||
<template><ModulePage page-id="m03" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：M-04；用途：修改密码。 -->
|
||||
<template><ModulePage page-id="m04" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：M-05；用途：修改手机号。 -->
|
||||
<template><ModulePage page-id="m05" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：M-06；用途：帮助中心。 -->
|
||||
<template><ModulePage page-id="m06" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：M-07；用途：意见反馈。 -->
|
||||
<template><ModulePage page-id="m07" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：M-08；用途：应用推广。 -->
|
||||
<template><ModulePage page-id="m08" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：M-09；用途：VIP 服务与订单。 -->
|
||||
<template><ModulePage page-id="m09" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：M-10；用途：关于、协议、隐私与退出确认。 -->
|
||||
<template><ModulePage page-id="m10" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,344 @@
|
||||
<!-- 页面编号：R-01；用途：人物录列表。 -->
|
||||
<template><ModulePage page-id="r01" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<!-- 页面编号：R-01；用途：人物录列表、搜索、空态与失败状态。 -->
|
||||
<template>
|
||||
<view
|
||||
class="people-page"
|
||||
:class="{
|
||||
'people-state--ready': peopleState === 'ready',
|
||||
'people-state--empty': peopleState === 'empty',
|
||||
'people-state--error': peopleState === 'error',
|
||||
}"
|
||||
>
|
||||
<ModulePageBackground module="records" />
|
||||
<view class="people-page__header"><PageHeader title="人物录" /></view>
|
||||
|
||||
<view class="people-content">
|
||||
<template v-if="peopleState === 'ready'">
|
||||
<view class="people-search">
|
||||
<image
|
||||
src="/static/assets/modules/records/transparent/r01-search-input-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<input
|
||||
v-model="keywordInput"
|
||||
confirm-type="search"
|
||||
placeholder="搜索姓名、身份或世代"
|
||||
placeholder-class="people-search__placeholder"
|
||||
@confirm="applySearch"
|
||||
/>
|
||||
<view
|
||||
class="people-search__action"
|
||||
role="button"
|
||||
aria-label="搜索人物"
|
||||
@click="applySearch"
|
||||
><text>{{ keyword ? "重置" : "搜索" }}</text></view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view v-if="filteredPeople.length" class="people-list">
|
||||
<view
|
||||
v-for="person in filteredPeople"
|
||||
:key="person.id"
|
||||
class="person-card"
|
||||
@click="openPerson(person)"
|
||||
>
|
||||
<image
|
||||
class="person-card__skin"
|
||||
src="/static/assets/modules/records/transparent/r01-person-name-card.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="person-card__copy">
|
||||
<text class="person-card__name">{{ person.name }}</text>
|
||||
<text class="person-card__meta"
|
||||
>{{ person.role }} · 第 {{ person.generation }} 世</text
|
||||
>
|
||||
<text class="person-card__hint">查看人物档案</text>
|
||||
</view>
|
||||
</view>
|
||||
<AppButton
|
||||
class="people-primary-action"
|
||||
block
|
||||
label="新建人物"
|
||||
@click="showCreateNotice"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view v-else class="people-result-empty">
|
||||
<image
|
||||
src="/static/assets/modules/records/transparent/r01-person-name-card.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view
|
||||
><text>没有找到相关人物</text
|
||||
><text>请更换姓名、身份或世代关键词后再试。</text></view
|
||||
>
|
||||
<AppButton
|
||||
type="secondary"
|
||||
block
|
||||
label="清空搜索"
|
||||
@click="clearSearch"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view v-else class="people-state-card">
|
||||
<image
|
||||
src="/static/assets/modules/records/transparent/r01-person-name-card.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view>
|
||||
<text>{{
|
||||
peopleState === "empty" ? "还没有人物记录" : "人物录暂不可用"
|
||||
}}</text>
|
||||
<text>{{
|
||||
peopleState === "empty"
|
||||
? "从第一位值得铭记的家人开始建立人物录。"
|
||||
: "请稍后重新进入，已有档案不会受到影响。"
|
||||
}}</text>
|
||||
</view>
|
||||
<AppButton
|
||||
:type="peopleState === 'error' ? 'secondary' : 'primary'"
|
||||
block
|
||||
:label="peopleState === 'error' ? '重新查看' : '新建人物'"
|
||||
@click="peopleState === 'error' ? restoreList() : showCreateNotice()"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<AppToast :visible="toastVisible" message="新建人物将在后续功能阶段开放" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onUnmounted, ref } from "vue";
|
||||
import AppButton from "@/components/AppButton.vue";
|
||||
import AppToast from "@/components/AppToast.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
|
||||
const people = [
|
||||
{ id: 1, name: "汤文正", role: "家谱管理员", generation: 18 },
|
||||
{ id: 2, name: "汤淑华", role: "家族长辈", generation: 17 },
|
||||
{ id: 3, name: "汤文清", role: "青年代表", generation: 19 },
|
||||
];
|
||||
|
||||
const query = (() => {
|
||||
if (typeof location !== "undefined")
|
||||
return Object.fromEntries(
|
||||
new URLSearchParams(location.hash.split("?")[1] || ""),
|
||||
);
|
||||
const pages = getCurrentPages();
|
||||
return pages[pages.length - 1]?.options || {};
|
||||
})();
|
||||
|
||||
const peopleState = ref(
|
||||
query.state === "empty"
|
||||
? "empty"
|
||||
: query.state === "error"
|
||||
? "error"
|
||||
: "ready",
|
||||
);
|
||||
const keywordInput = ref("");
|
||||
const keyword = ref("");
|
||||
const toastVisible = ref(false);
|
||||
let toastTimer = null;
|
||||
|
||||
const filteredPeople = computed(() => {
|
||||
const value = keyword.value.trim().toLowerCase();
|
||||
if (!value) return people;
|
||||
return people.filter((person) =>
|
||||
`${person.name} ${person.role} 第${person.generation}世 ${person.generation}`
|
||||
.toLowerCase()
|
||||
.includes(value),
|
||||
);
|
||||
});
|
||||
|
||||
const applySearch = () => {
|
||||
if (keyword.value) {
|
||||
clearSearch();
|
||||
return;
|
||||
}
|
||||
keyword.value = keywordInput.value.trim();
|
||||
};
|
||||
const clearSearch = () => {
|
||||
keywordInput.value = "";
|
||||
keyword.value = "";
|
||||
};
|
||||
const restoreList = () => {
|
||||
peopleState.value = "ready";
|
||||
};
|
||||
const openPerson = (person) =>
|
||||
uni.navigateTo({
|
||||
url: `/pages/records/r02-person-detail?personId=${person.id}`,
|
||||
});
|
||||
const showCreateNotice = () => {
|
||||
toastVisible.value = true;
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => {
|
||||
toastVisible.value = false;
|
||||
toastTimer = null;
|
||||
}, 1800);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.people-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.people-page__header,
|
||||
.people-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.people-content {
|
||||
padding: 22rpx 24rpx 100rpx;
|
||||
}
|
||||
.people-search {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 82rpx;
|
||||
min-height: 44px;
|
||||
}
|
||||
.people-search > image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.people-search input {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 126rpx;
|
||||
bottom: 0;
|
||||
left: 31rpx;
|
||||
height: 100%;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.people-search__placeholder {
|
||||
color: #8a7965;
|
||||
}
|
||||
.people-search__action {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
width: 126rpx;
|
||||
height: 100%;
|
||||
min-height: 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $brand-red;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.people-list {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.person-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: clamp(92px, 190rpx, 108px);
|
||||
margin-top: 12px;
|
||||
}
|
||||
.person-card:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.person-card__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.person-card__copy {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset: 16% 10%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.person-card__name {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.person-card__meta {
|
||||
margin-top: 7rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.person-card__hint {
|
||||
margin-top: 8rpx;
|
||||
color: #806a51;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
.people-primary-action {
|
||||
margin: 22rpx auto 0;
|
||||
}
|
||||
.people-result-empty,
|
||||
.people-state-card {
|
||||
position: relative;
|
||||
margin-top: 38rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.people-result-empty > image,
|
||||
.people-state-card > image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
min-height: 118px;
|
||||
}
|
||||
.people-result-empty > view,
|
||||
.people-state-card > view {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
height: 220rpx;
|
||||
min-height: 118px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 54rpx;
|
||||
}
|
||||
.people-result-empty text,
|
||||
.people-state-card text {
|
||||
display: block;
|
||||
}
|
||||
.people-result-empty text:first-child,
|
||||
.people-state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.people-result-empty text:last-child,
|
||||
.people-state-card text:last-child {
|
||||
margin-top: 13rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.people-result-empty .app-button,
|
||||
.people-state-card .app-button {
|
||||
margin: 20rpx auto 0;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.people-content {
|
||||
padding-right: 32rpx;
|
||||
padding-left: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：R-02；用途：人物录详情与编辑。 -->
|
||||
<template><ModulePage page-id="r02" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：R-03；用途：贺礼列表。 -->
|
||||
<template><ModulePage page-id="r03" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：R-04；用途：贺礼新增、详情与删除确认。 -->
|
||||
<template><ModulePage page-id="r04" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：R-05；用途：礼仪活动列表。 -->
|
||||
<template><ModulePage page-id="r05" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：R-06；用途：礼仪详情。 -->
|
||||
<template><ModulePage page-id="r06" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：R-07；用途：新建与编辑礼仪。 -->
|
||||
<template><ModulePage page-id="r07" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：R-08；用途：成长日志。 -->
|
||||
<template><ModulePage page-id="r08" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：R-09；用途：人生事。 -->
|
||||
<template><ModulePage page-id="r09" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：R-10；用途：家族备忘录。 -->
|
||||
<template><ModulePage page-id="r10" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：R-11；用途：功德记录。 -->
|
||||
<template><ModulePage page-id="r11" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
<script setup>
|
||||
import ModulePage from "@/components/ModulePage.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,86 +1,284 @@
|
||||
<!-- 页面编号：T-03；用途：成员档案详情与失败状态（页面设计阶段使用本地模拟数据）。 -->
|
||||
<template>
|
||||
<view class="member-page" :class="{ 'member-state--detail': memberState === 'detail', 'member-state--error': memberState === 'error' }">
|
||||
<view
|
||||
class="member-page"
|
||||
:class="{
|
||||
'member-state--detail': memberState === 'detail',
|
||||
'member-state--error': memberState === 'error',
|
||||
}"
|
||||
>
|
||||
<ModulePageBackground module="tree" />
|
||||
<view class="member-page__header"><PageHeader title="成员档案" :action="memberState === 'detail' ? '编辑' : ''" @action="toEdit" /></view>
|
||||
<view class="member-page__header"
|
||||
><PageHeader
|
||||
title="成员档案"
|
||||
:action="memberState === 'detail' ? '编辑' : ''"
|
||||
@action="toEdit"
|
||||
/></view>
|
||||
<view class="member-panel">
|
||||
<image class="member-panel__skin" src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
|
||||
<view v-if="memberState === 'detail'" class="member-detail">
|
||||
<image
|
||||
class="member-panel__skin"
|
||||
src="/static/assets/modules/tree/transparent/t01-state-panel.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<AppLoading
|
||||
v-if="memberState === 'loading'"
|
||||
text="正在读取成员档案"
|
||||
description="请稍候，正在整理成员资料。"
|
||||
/>
|
||||
<view v-else-if="memberState === 'detail'" class="member-detail">
|
||||
<view class="member-heading">
|
||||
<view class="member-heading__seal"><image src="/static/assets/modules/genealogy/transparent/current-seal-frame.png" mode="scaleToFill" /><text>{{ member.name.slice(0, 1) }}</text></view>
|
||||
<view><text>{{ member.name }}</text><text>第 {{ member.generation }} 世 · {{ member.relation }} · {{ member.branch }}</text></view>
|
||||
<view class="member-heading__seal"
|
||||
><image
|
||||
src="/static/assets/modules/genealogy/transparent/current-seal-frame.png"
|
||||
mode="scaleToFill"
|
||||
/><text>{{ member.name.slice(0, 1) }}</text></view
|
||||
>
|
||||
<view
|
||||
><text>{{ member.name }}</text
|
||||
><text
|
||||
>第 {{ member.generation }} 世 · {{ member.relation }} ·
|
||||
{{ member.branch }}</text
|
||||
></view
|
||||
>
|
||||
</view>
|
||||
<text class="member-section-title">基本资料</text>
|
||||
<view v-for="item in details" :key="item.label" class="member-info-row">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" /><text>{{ item.label }}</text><text>{{ item.value }}</text>
|
||||
<image
|
||||
src="/static/assets/modules/tree/transparent/t07-search-input-frame.png"
|
||||
mode="scaleToFill"
|
||||
/><text>{{ item.label }}</text
|
||||
><text>{{ item.value }}</text>
|
||||
</view>
|
||||
<text class="member-section-title member-section-title--relation">亲属关系</text>
|
||||
<text class="member-section-title member-section-title--relation"
|
||||
>亲属关系</text
|
||||
>
|
||||
<view class="member-relatives">
|
||||
<text>长子 · 汤正国</text><text>次子 · 汤正华</text>
|
||||
</view>
|
||||
<view class="member-profile-action" @click="toEdit">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>完善成员档案</text>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/><text>完善成员档案</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="member-error">
|
||||
<text>成员档案暂不可用</text><text>请从世系树重新选择成员，当前没有可展示的个人资料。</text>
|
||||
<view class="member-profile-action" @click="toTree"><image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>返回世系树</text></view>
|
||||
<text>成员档案暂不可用</text
|
||||
><text>请从世系树重新选择成员，当前没有可展示的个人资料。</text>
|
||||
<view class="member-profile-action" @click="toTree"
|
||||
><image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/><text>返回世系树</text></view
|
||||
>
|
||||
</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'
|
||||
import { genealogyContext } from '@/utils/genealogy-context.js'
|
||||
const genealogyId = ref('')
|
||||
const personId = ref('')
|
||||
const memberState = ref('loading')
|
||||
const member = ref({ id: 101, name: '汤文远', generation: 12, relation: '始祖', branch: '主支', generationName: '文字辈', birthDate: '1940年3月', years: '1940—2012' })
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { genealogyContext } from "@/utils/genealogy-context.js";
|
||||
const genealogyId = ref("");
|
||||
const personId = ref("");
|
||||
const memberState = ref("loading");
|
||||
const member = ref({
|
||||
id: 101,
|
||||
name: "汤文远",
|
||||
generation: 12,
|
||||
relation: "始祖",
|
||||
branch: "主支",
|
||||
generationName: "文字辈",
|
||||
birthDate: "1940年3月",
|
||||
years: "1940—2012",
|
||||
});
|
||||
const details = computed(() => [
|
||||
{ label: '字辈', value: member.value.generationName },
|
||||
{ label: '出生日期', value: member.value.birthDate },
|
||||
{ label: '生卒信息', value: member.value.years },
|
||||
{ label: '所属支系', value: member.value.branch }
|
||||
])
|
||||
{ label: "字辈", value: member.value.generationName },
|
||||
{ label: "出生日期", value: member.value.birthDate },
|
||||
{ label: "生卒信息", value: member.value.years },
|
||||
{ label: "所属支系", value: member.value.branch },
|
||||
]);
|
||||
onLoad((query) => {
|
||||
genealogyId.value = query.genealogyId || genealogyContext.getCurrentGenealogyId() || ''
|
||||
personId.value = query.personId || ''
|
||||
if (genealogyId.value) genealogyContext.setCurrentGenealogyId(genealogyId.value)
|
||||
memberState.value = query.state === 'error' || !personId.value ? 'error' : 'detail'
|
||||
})
|
||||
const toEdit = () => uni.navigateTo({ url: `/pages/tree/t05-edit-member?genealogyId=${genealogyId.value}&personId=${personId.value}` })
|
||||
const toTree = () => uni.navigateBack()
|
||||
genealogyId.value =
|
||||
query.genealogyId || genealogyContext.getCurrentGenealogyId() || "";
|
||||
personId.value = query.personId || "";
|
||||
if (genealogyId.value)
|
||||
genealogyContext.setCurrentGenealogyId(genealogyId.value);
|
||||
memberState.value =
|
||||
query.state === "loading"
|
||||
? "loading"
|
||||
: query.state === "error" || !personId.value
|
||||
? "error"
|
||||
: "detail";
|
||||
});
|
||||
const toEdit = () =>
|
||||
uni.navigateTo({
|
||||
url: `/pages/tree/t05-edit-member?genealogyId=${genealogyId.value}&personId=${personId.value}`,
|
||||
});
|
||||
const toTree = () => uni.navigateBack();
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.member-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
|
||||
.member-page__header { position: relative; z-index: 3; }
|
||||
.member-panel { position: relative; z-index: 2; width: calc(100% - 32rpx); height: min(650px, calc((100vw - 16px) * 1.5)); margin: 18rpx auto 0; }
|
||||
.member-panel__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.member-detail { position: absolute; inset: 7% 8%; }
|
||||
.member-heading { display: flex; align-items: center; gap: 20rpx; }
|
||||
.member-heading__seal { position: relative; display: flex; width: 84rpx; height: 108rpx; align-items: center; justify-content: center; }
|
||||
.member-heading__seal image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.member-heading__seal text { position: relative; z-index: 1; color: #fff8ec; font-family: 'STKaiti', 'KaiTi', serif; font-size: 33rpx; }
|
||||
.member-heading > view:last-child text { display: block; }
|
||||
.member-heading > view:last-child text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 38rpx; font-weight: 700; }
|
||||
.member-heading > view:last-child text:last-child { margin-top: 8rpx; color: $ink-muted; font-size: 20rpx; }
|
||||
.member-section-title { display: block; margin: 20rpx 0 4rpx; color: $brand-red; font-size: 22rpx; font-weight: 700; letter-spacing: 2rpx; }
|
||||
.member-info-row { position: relative; height: 62rpx; margin-top: 7rpx; }
|
||||
.member-info-row image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.member-info-row text { position: absolute; top: 21rpx; z-index: 1; font-size: 20rpx; }
|
||||
.member-info-row text:nth-child(2) { left: 22rpx; color: $ink-muted; }
|
||||
.member-info-row text:last-child { right: 22rpx; color: $ink; font-weight: 700; }
|
||||
.member-section-title--relation { margin-top: 18rpx; }
|
||||
.member-relatives { display: flex; justify-content: space-between; color: $ink; font-size: 20rpx; }
|
||||
.member-profile-action { position: relative; width: 100%; height: 72rpx; margin-top: 20rpx; }
|
||||
.member-profile-action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.member-profile-action text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: #fff9ed; font-size: 24rpx; font-weight: 700; }
|
||||
.member-error { position: absolute; top: 31%; right: 12%; left: 12%; text-align: center; }
|
||||
.member-error > text { display: block; }
|
||||
.member-error > text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 35rpx; font-weight: 700; }
|
||||
.member-error > text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.65; }
|
||||
@media (min-width: 400px) { .member-panel { width: calc(100% - 48rpx); } }
|
||||
.member-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.member-page__header {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.member-panel {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: calc(100% - 32rpx);
|
||||
height: min(650px, calc((100vw - 16px) * 1.5));
|
||||
margin: 18rpx auto 0;
|
||||
}
|
||||
.member-panel__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.member-detail {
|
||||
position: absolute;
|
||||
inset: 7% 8%;
|
||||
}
|
||||
.member-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.member-heading__seal {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 84rpx;
|
||||
height: 108rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.member-heading__seal image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.member-heading__seal text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #fff8ec;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 33rpx;
|
||||
}
|
||||
.member-heading > view:last-child text {
|
||||
display: block;
|
||||
}
|
||||
.member-heading > view:last-child text:first-child {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-heading > view:last-child text:last-child {
|
||||
margin-top: 8rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.member-section-title {
|
||||
display: block;
|
||||
margin: 20rpx 0 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.member-info-row {
|
||||
position: relative;
|
||||
height: 62rpx;
|
||||
margin-top: 7rpx;
|
||||
}
|
||||
.member-info-row image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.member-info-row text {
|
||||
position: absolute;
|
||||
top: 21rpx;
|
||||
z-index: 1;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.member-info-row text:nth-child(2) {
|
||||
left: 22rpx;
|
||||
color: $ink-muted;
|
||||
}
|
||||
.member-info-row text:last-child {
|
||||
right: 22rpx;
|
||||
color: $ink;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-section-title--relation {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.member-relatives {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.member-profile-action {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.member-profile-action image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.member-profile-action text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #fff9ed;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-error {
|
||||
position: absolute;
|
||||
top: 31%;
|
||||
right: 12%;
|
||||
left: 12%;
|
||||
text-align: center;
|
||||
}
|
||||
.member-error > text {
|
||||
display: block;
|
||||
}
|
||||
.member-error > text:first-child {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-error > text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.member-panel {
|
||||
width: calc(100% - 48rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：T-04；用途：新增直系亲属与保存结果。 -->
|
||||
<template><TreeMemberForm kind="add" /></template>
|
||||
<script setup>import TreeMemberForm from '@/components/tree/TreeMemberForm.vue'</script>
|
||||
<script setup>
|
||||
import TreeMemberForm from "@/components/tree/TreeMemberForm.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：T-05；用途：编辑成员资料与保存结果。 -->
|
||||
<template><TreeMemberForm kind="edit" /></template>
|
||||
<script setup>import TreeMemberForm from '@/components/tree/TreeMemberForm.vue'</script>
|
||||
<script setup>
|
||||
import TreeMemberForm from "@/components/tree/TreeMemberForm.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- 页面编号：T-06；用途：编辑亲属关系、冲突提示与处理。 -->
|
||||
<template><TreeMemberForm kind="relation" /></template>
|
||||
<script setup>import TreeMemberForm from '@/components/tree/TreeMemberForm.vue'</script>
|
||||
<script setup>
|
||||
import TreeMemberForm from "@/components/tree/TreeMemberForm.vue";
|
||||
</script>
|
||||
|
||||
@@ -1,72 +1,368 @@
|
||||
<!-- 页面编号：T-07；用途：成员目录、搜索、空态与失败状态。 -->
|
||||
<template>
|
||||
<view class="directory-page" :class="{ 'directory-state--list': directoryState === 'list', 'directory-state--empty': directoryState === 'empty', 'directory-state--error': directoryState === 'error' }">
|
||||
<view
|
||||
class="directory-page"
|
||||
:class="{
|
||||
'directory-state--loading': directoryState === 'loading',
|
||||
'directory-state--list': directoryState === 'list',
|
||||
'directory-state--empty': directoryState === 'empty',
|
||||
'directory-state--error': directoryState === 'error',
|
||||
}"
|
||||
>
|
||||
<ModulePageBackground module="tree" />
|
||||
<view class="directory-page__header"><PageHeader title="成员目录" /></view>
|
||||
<view class="directory-search">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<input v-model="keyword" placeholder="按姓名、字辈或支系查找" placeholder-class="directory-placeholder" @confirm="searchMembers" />
|
||||
<text @click="searchMembers">查找</text>
|
||||
<view class="directory-context">
|
||||
<text class="directory-context__name">汤氏家谱</text>
|
||||
<text class="directory-context__meta"
|
||||
>主支 · {{ members.length }} 位成员</text
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
v-if="directoryState === 'list' || directoryState === 'empty'"
|
||||
class="directory-search"
|
||||
>
|
||||
<image
|
||||
class="directory-search__frame"
|
||||
src="/static/assets/modules/tree/transparent/t07-search-input-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<input
|
||||
v-model="keyword"
|
||||
aria-label="成员搜索关键词"
|
||||
placeholder="按姓名、字辈或支系查找"
|
||||
placeholder-class="directory-placeholder"
|
||||
@confirm="searchMembers"
|
||||
/>
|
||||
<view
|
||||
class="directory-search__action"
|
||||
role="button"
|
||||
aria-label="查找成员"
|
||||
hover-class="action-hover"
|
||||
@click="searchMembers"
|
||||
><text>查找</text></view
|
||||
>
|
||||
</view>
|
||||
<view class="directory-content">
|
||||
<template v-if="directoryState === 'list'">
|
||||
<view class="directory-summary"><text>家谱成员</text><text>{{ filteredMembers.length }} 人 · 按世代排列</text></view>
|
||||
<view v-for="item in filteredMembers" :key="item.id" class="directory-card" @click="openMember(item)">
|
||||
<image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<view class="directory-card__copy"><text>{{ item.name }}</text><text>第 {{ item.generation }} 世 · {{ item.generationName }} · {{ item.branch }}</text><text>{{ item.note }}</text></view>
|
||||
<AppLoading
|
||||
v-if="directoryState === 'loading'"
|
||||
text="正在整理成员目录"
|
||||
description="请稍候，正在读取成员与世代信息。"
|
||||
/>
|
||||
<template v-else-if="directoryState === 'list'">
|
||||
<view class="directory-summary"
|
||||
><text>家谱成员</text
|
||||
><text>{{ filteredMembers.length }} 人 · 按世代排列</text></view
|
||||
>
|
||||
<view
|
||||
v-for="item in filteredMembers"
|
||||
:key="item.id"
|
||||
class="directory-card"
|
||||
@click="openMember(item)"
|
||||
>
|
||||
<image
|
||||
class="directory-card__frame"
|
||||
src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="directory-card__copy">
|
||||
<text class="directory-card__name">{{ item.name }}</text>
|
||||
<text class="directory-card__meta"
|
||||
>第 {{ item.generation }} 世 · {{ item.generationName }} ·
|
||||
{{ item.branch }}</text
|
||||
>
|
||||
<text class="directory-card__status">{{ item.note }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view v-else class="directory-state-card">
|
||||
<image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<view><text>{{ directoryState === 'empty' ? '没有找到相关成员' : '成员目录暂不可用' }}</text><text>{{ directoryState === 'empty' ? '换一个姓名、字辈或支系关键词再试。' : '请从当前家谱重新进入，成员资料不会受到影响。' }}</text></view>
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view
|
||||
><text>{{
|
||||
directoryState === "empty" ? "没有找到相关成员" : "成员目录暂不可用"
|
||||
}}</text
|
||||
><text>{{
|
||||
directoryState === "empty"
|
||||
? "换一个姓名、字辈或支系关键词再试。"
|
||||
: "请从当前家谱重新进入，成员资料不会受到影响。"
|
||||
}}</text></view
|
||||
>
|
||||
</view>
|
||||
<AppButton
|
||||
v-if="directoryState === 'error'"
|
||||
block
|
||||
type="secondary"
|
||||
label="重新查看"
|
||||
@click="retryDirectory"
|
||||
/>
|
||||
</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 genealogyId = ref('')
|
||||
const keyword = ref('')
|
||||
const directoryState = ref('loading')
|
||||
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";
|
||||
const genealogyId = ref("");
|
||||
const keyword = ref("");
|
||||
const directoryState = ref("loading");
|
||||
const members = [
|
||||
{ id: 101, name: '汤文远', generation: 12, generationName: '文字辈', branch: '主支', note: '始祖 · 档案完整' },
|
||||
{ id: 102, name: '汤正国', generation: 13, generationName: '正字辈', branch: '长房', note: '家谱管理员' },
|
||||
{ id: 103, name: '汤正华', generation: 13, generationName: '正字辈', branch: '二房', note: '资料待补充' }
|
||||
]
|
||||
{
|
||||
id: 101,
|
||||
name: "汤文远",
|
||||
generation: 12,
|
||||
generationName: "文字辈",
|
||||
branch: "主支",
|
||||
note: "始祖 · 档案完整",
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
name: "汤正国",
|
||||
generation: 13,
|
||||
generationName: "正字辈",
|
||||
branch: "长房",
|
||||
note: "家谱管理员",
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
name: "汤正华",
|
||||
generation: 13,
|
||||
generationName: "正字辈",
|
||||
branch: "二房",
|
||||
note: "资料待补充",
|
||||
},
|
||||
];
|
||||
const filteredMembers = computed(() => {
|
||||
const value = keyword.value.trim()
|
||||
if (!value) return members
|
||||
return members.filter((item) => `${item.name}${item.generationName}${item.branch}`.includes(value))
|
||||
})
|
||||
onLoad((query) => { genealogyId.value = query.genealogyId || ''; directoryState.value = query.state === 'empty' ? 'empty' : query.state === 'error' ? 'error' : 'list' })
|
||||
const searchMembers = () => { directoryState.value = filteredMembers.value.length ? 'list' : 'empty' }
|
||||
const openMember = (item) => uni.navigateTo({ url: `/pages/tree/t03-member-profile?genealogyId=${genealogyId.value}&personId=${item.id}` })
|
||||
const value = keyword.value.trim();
|
||||
if (!value) return members;
|
||||
return members.filter((item) =>
|
||||
`${item.name}${item.generationName}${item.branch}`.includes(value),
|
||||
);
|
||||
});
|
||||
onLoad((query) => {
|
||||
genealogyId.value = query.genealogyId || "";
|
||||
directoryState.value =
|
||||
query.state === "loading"
|
||||
? "loading"
|
||||
: query.state === "empty"
|
||||
? "empty"
|
||||
: query.state === "error"
|
||||
? "error"
|
||||
: "list";
|
||||
});
|
||||
const searchMembers = () => {
|
||||
directoryState.value = filteredMembers.value.length ? "list" : "empty";
|
||||
};
|
||||
const retryDirectory = () => {
|
||||
directoryState.value = "list";
|
||||
};
|
||||
const openMember = (item) =>
|
||||
uni.navigateTo({
|
||||
url: `/pages/tree/t03-member-profile?genealogyId=${genealogyId.value}&personId=${item.id}`,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.directory-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
|
||||
.directory-page__header, .directory-search, .directory-content { position: relative; z-index: 2; }
|
||||
.directory-search { width: calc(100% - 48rpx); height: 84rpx; margin: 20rpx auto 0; }
|
||||
.directory-search image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.directory-search input { position: absolute; top: 0; right: 110rpx; bottom: 0; left: 26rpx; z-index: 1; height: 84rpx; color: $ink; font-size: 22rpx; line-height: 84rpx; }
|
||||
.directory-search > text { position: absolute; top: 29rpx; right: 28rpx; z-index: 1; color: $brand-red; font-size: 22rpx; font-weight: 700; }
|
||||
.directory-placeholder { color: #a79884; }
|
||||
.directory-content { padding: 22rpx 24rpx 50rpx; }
|
||||
.directory-summary { display: flex; justify-content: space-between; margin: 0 8rpx 18rpx; }
|
||||
.directory-summary text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 29rpx; font-weight: 700; }
|
||||
.directory-summary text:last-child { color: $ink-muted; font-size: 20rpx; }
|
||||
.directory-card, .directory-state-card { position: relative; width: 100%; height: calc((100vw - 24px) * .34286); min-height: 220rpx; margin-bottom: 16rpx; }
|
||||
.directory-card > image, .directory-state-card > image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.directory-card__copy { position: absolute; inset: 20% 9%; z-index: 1; }
|
||||
.directory-card__copy text { display: block; }
|
||||
.directory-card__copy text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 29rpx; font-weight: 700; }
|
||||
.directory-card__copy text:nth-child(2) { margin-top: 10rpx; color: $ink-muted; font-size: 21rpx; }
|
||||
.directory-card__copy text:last-child { margin-top: 9rpx; color: $brand-red; font-size: 19rpx; }
|
||||
.directory-state-card { margin-top: 70rpx; }
|
||||
.directory-state-card > view { position: absolute; inset: 24% 12%; z-index: 1; text-align: center; }
|
||||
.directory-state-card text { display: block; }
|
||||
.directory-state-card text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 30rpx; font-weight: 700; }
|
||||
.directory-state-card text:last-child { margin-top: 14rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.5; }
|
||||
.directory-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: $paper;
|
||||
}
|
||||
.directory-page__header,
|
||||
.directory-context,
|
||||
.directory-search,
|
||||
.directory-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.directory-context {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 22rpx 32rpx 0;
|
||||
}
|
||||
.directory-context__name {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.directory-context__meta {
|
||||
color: #62584c;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.directory-search {
|
||||
width: calc(100% - 48rpx);
|
||||
height: 44px;
|
||||
margin: 20rpx auto 0;
|
||||
}
|
||||
.directory-search__frame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.directory-search input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 110rpx;
|
||||
bottom: 0;
|
||||
left: 26rpx;
|
||||
z-index: 1;
|
||||
height: 44px;
|
||||
color: $ink;
|
||||
font-size: 26rpx;
|
||||
line-height: 44px;
|
||||
}
|
||||
.directory-search__action {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 8rpx;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
min-width: 88rpx;
|
||||
min-height: 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $brand-red;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.directory-placeholder {
|
||||
color: #776956;
|
||||
}
|
||||
.directory-content {
|
||||
padding: 22rpx 24rpx 50rpx;
|
||||
}
|
||||
.directory-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 8rpx 18rpx;
|
||||
}
|
||||
.directory-summary text:first-child {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 29rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.directory-summary text:last-child {
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.directory-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 196rpx;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16rpx;
|
||||
padding: 18rpx 28rpx;
|
||||
}
|
||||
.directory-card__frame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.directory-card__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.directory-card__name {
|
||||
overflow: hidden;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.directory-card__meta {
|
||||
overflow: hidden;
|
||||
margin-top: 7rpx;
|
||||
color: #62584c;
|
||||
font-size: 24rpx;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.directory-card__status {
|
||||
align-self: flex-start;
|
||||
margin-top: 8rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border: 1rpx solid rgba(174, 45, 36, 0.32);
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.directory-state-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.directory-state-card > image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.directory-state-card {
|
||||
margin-top: 70rpx;
|
||||
}
|
||||
.directory-state-card > view {
|
||||
position: absolute;
|
||||
inset: 24% 12%;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.directory-state-card text {
|
||||
display: block;
|
||||
}
|
||||
.directory-state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.directory-state-card text:last-child {
|
||||
margin-top: 14rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.directory-content > .app-button {
|
||||
margin: 20rpx auto 0;
|
||||
}
|
||||
@media screen and (max-width: 340px) {
|
||||
.directory-card {
|
||||
height: 192rpx;
|
||||
padding-right: 22rpx;
|
||||
padding-left: 22rpx;
|
||||
}
|
||||
.directory-card__name {
|
||||
font-size: 29rpx;
|
||||
}
|
||||
.directory-card__meta {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.directory-card__status {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user