109 lines
7.1 KiB
Vue
109 lines
7.1 KiB
Vue
<!-- 页面编号：G-09；用途：我的家谱申请列表与空/失败状态。 -->
|
||
<template>
|
||
<view class="application-page">
|
||
<image class="application-page__paper" src="/static/assets/foundation/opaque/page-paper.jpg" mode="aspectFill" />
|
||
<image class="application-page__footer" src="/static/assets/foundation/transparent/footer-mountain-bamboo.png" mode="widthFix" />
|
||
<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'
|
||
}">
|
||
<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" @click="openApprovedGenealogy(item)">
|
||
<image class="application-card__skin" src="/static/assets/modules/genealogy/opaque/application-status-card.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">{{ item.status === 'APPROVED' ? '点按进入家谱' : item.status === 'PENDING' ? '请耐心等待管理员核实' : '可重新检索并提交申请' }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<view v-else class="application-state-card">
|
||
<image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||
<view class="application-state-card__copy">
|
||
<text>{{ applicationState === 'empty' ? '还没有入谱申请' : '申请记录暂时无法读取' }}</text>
|
||
<text>{{ applicationState === 'empty' ? '从公开家谱检索开始，找到家谱后可提交加入申请。' : errorMessage || '请检查网络后重新查看。' }}</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="applicationState !== 'list'" class="application-page__action" @click="applicationState === 'error' ? loadApplications({}) : toSearch()">
|
||
<image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||
<text>{{ applicationState === 'error' ? '重新查看' : '查找公开家谱' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import PageHeader from '@/components/PageHeader.vue'
|
||
|
||
const applications = ref([])
|
||
const applicationState = ref('loading')
|
||
const errorMessage = ref('')
|
||
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' }
|
||
]
|
||
|
||
const statusLabel = (status) => ({
|
||
'PENDING': '审核中',
|
||
'APPROVED': '已通过',
|
||
'REJECTED': '未通过'
|
||
}[status] || '状态未知')
|
||
|
||
const loadApplications = (query = {}) => {
|
||
applicationState.value = 'loading'
|
||
errorMessage.value = ''
|
||
if (query.state === 'empty') { applicationState.value = 'empty'; return }
|
||
if (query.state === 'error') { applicationState.value = 'error'; return }
|
||
applications.value = applicationSamples.map((item) => ({ ...item }))
|
||
applicationState.value = 'list'
|
||
}
|
||
|
||
onLoad(loadApplications)
|
||
const openApprovedGenealogy = (item) => {
|
||
if (item.status !== 'APPROVED') return
|
||
uni.navigateTo({ url: `/pages/genealogy/g05-genealogy-overview?genealogyId=${item.genealogyId}` })
|
||
}
|
||
const toSearch = () => uni.navigateTo({ url: '/pages/genealogy/g06-search-genealogies' })
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.application-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
|
||
.application-page__paper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .98; pointer-events: none; }
|
||
.application-page__footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; opacity: .13; pointer-events: none; }
|
||
.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: 11%; color: $brand-red; font-size: 24rpx; font-weight: 700; }
|
||
.application-card__status--approved { color: #537368; }
|
||
.application-card__status--rejected { color: #7e6f62; }
|
||
.application-card__hint { position: absolute; bottom: 5%; left: 0; color: #8d7c67; font-size: 20rpx; }
|
||
.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; }
|
||
</style>
|