rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

验收20%

Browse Source
This commit is contained in:
rain
2026-07-16 07:42:07 +08:00
parent 0dec90ffdd
commit cb25317412
108 changed files with 6477 additions and 1308 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/genealogy/g12-generation-poems.vue
+29 -10
View File
@@ -9,7 +9,8 @@
'poem-state--list': poemState === 'list',
'poem-state--empty': poemState === 'empty',
'poem-state--edit': poemState === 'edit',
'poem-state--error': poemState === 'error'
'poem-state--error': poemState === 'error',
'poem-state--no-permission': poemState === 'no-permission'
}">
<image class="poem-panel__skin" src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
@@ -37,8 +38,9 @@
<view class="poem-field">
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
<text>字辈内容</text>
<textarea v-model="poemDraft" maxlength="24" placeholder="例如：启宗敦本继世传芳" placeholder-class="poem-placeholder" />
<textarea v-model="poemDraft" maxlength="24" placeholder="例如：启宗敦本继世传芳" placeholder-class="poem-placeholder" @input="poemError = ''" />
</view>
<text v-if="poemError" class="poem-field-error">{{ poemError }}</text>
<view class="poem-policy">
<text>缺失旧世代时</text>
<view class="poem-policy__option" @click="stopMissingOldGeneration = !stopMissingOldGeneration">
@@ -58,24 +60,31 @@
</view>
<view v-else class="poem-state-card">
<text class="poem-list__eyebrow">{{ poemState === 'empty' ? '尚未建立字辈' : '字辈暂不可用' }}</text>
<text class="poem-list__title">{{ poemState === 'empty' ? '从第一段传承字序开始' : '暂时无法读取字辈诗' }}</text>
<text class="poem-list__copy">{{ poemState === 'empty' ? '管理员可以一次录入连续字辈，系统会按世代拆分展示。' : '请从家谱总览重新进入，或稍后再试。' }}</text>
<text class="poem-list__eyebrow">{{ poemState === 'empty' ? '尚未建立字辈' : poemState === 'no-permission' ? '权限不足' : '字辈暂不可用' }}</text>
<text class="poem-list__title">{{ poemState === 'empty' ? '从第一段传承字序开始' : poemState === 'no-permission' ? '当前账号不能维护字辈' : '暂时无法读取字辈诗' }}</text>
<text class="poem-list__copy">{{ poemState === 'empty' ? '管理员可以一次录入连续字辈，系统会按世代拆分展示。' : poemState === 'no-permission' ? '普通成员可以查看字辈，但只有具备管理权限的成员可以维护。' : '请从家谱总览重新进入，或稍后再试。' }}</text>
<view class="poem-action" @click="poemState === 'empty' ? openEditor() : poemState = 'list'">
<image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" /><text>{{ poemState === 'empty' ? '开始录入' : '重新查看' }}</text>
</view>
</view>
</view>
<view v-if="feedbackVisible" class="poem-feedback">
<image src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
<text>字辈预览已更新</text>
</view>
</view>
</template>
<script setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import PageHeader from '@/components/PageHeader.vue'
const genealogyId = ref('')
const poemState = ref('loading')
const poemError = ref('')
const feedbackVisible = ref(false)
let feedbackTimer = null
const poemDraft = ref('启宗敦本继世传芳')
const stopMissingOldGeneration = ref(true)
const poemRows = ref([
@@ -88,24 +97,30 @@ const previewCharacters = computed(() => poemDraft.value.trim().split('').join('
onLoad((query) => {
genealogyId.value = query.genealogyId || ''
poemState.value = query.state === 'empty' ? 'empty' : query.state === 'edit' ? 'edit' : query.state === 'error' || !genealogyId.value ? 'error' : 'list'
poemState.value = query.state === 'empty' ? 'empty' : query.state === 'edit' ? 'edit' : query.state === 'no-permission' ? 'no-permission' : query.state === 'error' || !genealogyId.value ? 'error' : 'list'
})
onUnload(() => { if (feedbackTimer) clearTimeout(feedbackTimer) })
const openEditor = () => { poemState.value = 'edit' }
const savePoems = () => {
const characters = poemDraft.value.trim().split('').filter(Boolean)
if (!characters.length) {
uni.showToast({ title: '请录入字辈内容', icon: 'none' })
poemError.value = '请录入字辈内容'
return
}
if (poemDraft.value.trim() === '失败') {
poemError.value = '字辈保存失败，请稍后重试'
return
}
poemRows.value = characters.slice(0, 4).map((character, index) => ({ generationNo: 12 + index, character, current: index === 2 }))
poemState.value = 'list'
uni.showToast({ title: '字辈预览已更新', icon: 'none' })
feedbackVisible.value = true
feedbackTimer = setTimeout(() => { feedbackVisible.value = false; feedbackTimer = null }, 1800)
}
</script>
<style scoped lang="scss">
.poem-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
.poem-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
.poem-page__paper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .98; pointer-events: none; }
.poem-page__footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; opacity: .13; pointer-events: none; }
.poem-page__header { position: relative; z-index: 3; }
@@ -130,6 +145,7 @@ const savePoems = () => {
.poem-field > text { position: absolute; top: 47rpx; left: 24rpx; z-index: 1; color: $ink; font-size: 22rpx; font-weight: 700; }
.poem-field textarea { position: absolute; top: 0; right: 20rpx; bottom: 0; left: 164rpx; z-index: 1; box-sizing: border-box; height: 118rpx; padding-top: 34rpx; color: $ink; font-size: 22rpx; line-height: 1.5; }
.poem-placeholder { color: #a79884; }
.poem-field-error { display: block; margin-top: 4rpx; color: $brand-red; font-size: 20rpx; text-align: right; }
.poem-policy { display: flex; align-items: center; justify-content: space-between; margin-top: 22rpx; }
.poem-policy > text { color: $ink; font-size: 22rpx; font-weight: 700; }
.poem-policy__option { position: relative; width: 248rpx; height: 62rpx; }
@@ -144,5 +160,8 @@ const savePoems = () => {
.poem-state-card .poem-list__eyebrow { text-align: center; }
.poem-state-card .poem-list__copy { margin-top: 22rpx; }
.poem-state-card .poem-action { width: 420rpx; max-width: 100%; margin: 34rpx auto 0; }
.poem-feedback { position: fixed; z-index: 30; top: 138rpx; left: 50%; display: flex; min-width: 260rpx; min-height: 74rpx; align-items: center; justify-content: center; padding: 0 34rpx; transform: translateX(-50%); }
.poem-feedback image { position: absolute; inset: 0; width: 100%; height: 100%; }
.poem-feedback text { position: relative; z-index: 1; color: $ink; font-size: 22rpx; }
@media (min-width: 400px) { .poem-panel { width: calc(100% - 48rpx); } .poem-list, .poem-editor, .poem-state-card { right: 9%; left: 9%; } }
</style>