61 lines
3.4 KiB
Vue
61 lines
3.4 KiB
Vue
<template>
|
||
<view class="page-shell first-person-page">
|
||
<PageHeader title="录入首代人物" />
|
||
<view class="form-paper">
|
||
<view class="section-title">家谱从这一位开始</view>
|
||
<text class="form-note">可先录入姓名、世代和简要生平，其他资料后续随时补充。</text>
|
||
<view class="field-row"><text>姓名</text><input v-model="form.personName" maxlength="20" placeholder="请输入首代姓名" placeholder-class="placeholder" /></view>
|
||
<view class="field-row"><text>世代</text><text class="fixed-value">第一世</text></view>
|
||
<view class="field-row"><text>出生日期</text><input v-model="form.birthDate" placeholder="如：1940年" placeholder-class="placeholder" /></view>
|
||
<view class="intro-field"><text>生平简述</text><textarea v-model="form.introduction" maxlength="200" placeholder="可选，记录家训、迁徙或重要经历" placeholder-class="placeholder" /></view>
|
||
</view>
|
||
<view class="bottom-action"><button class="primary-button" :loading="isSubmitting" :disabled="isSubmitting" @click="submit">保存并查看世系树</button></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import PageHeader from '@/components/PageHeader.vue'
|
||
import { appApi } from '@/utils/api.js'
|
||
import { genealogyContext } from '@/utils/genealogy-context.js'
|
||
|
||
const genealogyId = ref('')
|
||
const isSubmitting = ref(false)
|
||
const form = reactive({ personName: '', generationNo: 1, generationName: '一世', sex: '0', birthDate: '', introduction: '' })
|
||
|
||
onLoad((query) => {
|
||
genealogyId.value = query.genealogyId || genealogyContext.getCurrentGenealogyId()
|
||
if (genealogyId.value) genealogyContext.setCurrentGenealogyId(genealogyId.value)
|
||
})
|
||
|
||
const submit = async () => {
|
||
if (!genealogyId.value) { uni.showToast({ title: '未找到当前家谱', icon: 'none' }); return }
|
||
if (!form.personName.trim()) { uni.showToast({ title: '请填写首代姓名', icon: 'none' }); return }
|
||
isSubmitting.value = true
|
||
try {
|
||
const person = await appApi.createPerson(genealogyId.value, { ...form, personName: form.personName.trim() })
|
||
uni.redirectTo({ url: `/pages/tree/index?genealogyId=${genealogyId.value}&selectedId=${person.id}` })
|
||
} catch (error) {
|
||
uni.showToast({ title: error.message || '保存失败，请稍后重试', icon: 'none' })
|
||
} finally {
|
||
isSubmitting.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.first-person-page { padding-bottom: 136rpx; }
|
||
.form-paper { margin: 28rpx; padding: 34rpx 30rpx; border: 1rpx solid $gold-soft; border-radius: 22rpx; background: $paper-white; }
|
||
.form-note { display: block; margin-top: 14rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.65; }
|
||
.field-row { display: flex; align-items: center; min-height: 104rpx; border-bottom: 1rpx solid #eadfc9; }
|
||
.field-row text { width: 150rpx; color: $ink-muted; font-size: 28rpx; }
|
||
.field-row input { flex: 1; color: $ink; font-size: 29rpx; }
|
||
.fixed-value { color: $brand-red !important; }
|
||
.intro-field { padding-top: 30rpx; }
|
||
.intro-field > text { display: block; color: $ink-muted; font-size: 28rpx; }
|
||
.intro-field textarea { width: 100%; height: 180rpx; margin-top: 18rpx; color: $ink; font-size: 27rpx; line-height: 1.6; }
|
||
.placeholder { color: #b7aa97; }
|
||
.bottom-action { position: fixed; right: 0; bottom: 0; left: 0; padding: 20rpx 28rpx calc(20rpx + env(safe-area-inset-bottom)); background: #fffaf0; border-top: 1rpx solid $gold-soft; }
|
||
</style>
|