69 lines
3.1 KiB
Vue
69 lines
3.1 KiB
Vue
<template>
|
||
<view class="page-shell create-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.surname" maxlength="4" placeholder="如：汤" placeholder-class="placeholder" />
|
||
</view>
|
||
<view class="field-row">
|
||
<text>谱名</text>
|
||
<input v-model="form.name" maxlength="24" placeholder="如：四川武胜汤氏族谱" placeholder-class="placeholder" />
|
||
</view>
|
||
<view class="field-row">
|
||
<text>堂号</text>
|
||
<input v-model="form.hall" maxlength="12" placeholder="选填" placeholder-class="placeholder" />
|
||
</view>
|
||
<view class="field-row">
|
||
<text>所在地</text>
|
||
<input v-model="form.location" maxlength="30" placeholder="请选择或输入" placeholder-class="placeholder" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="privacy-paper">
|
||
<view class="privacy-heading">
|
||
<text class="section-title">访问规则</text>
|
||
<text class="privacy-value">默认仅成员可见</text>
|
||
</view>
|
||
<text class="form-note">保护族人资料。创建者可在家谱设置中开放搜索与申请加入。</text>
|
||
</view>
|
||
|
||
<view class="bottom-action"><button class="primary-button" @click="submit">创建并录入首代</button></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive } from 'vue'
|
||
import PageHeader from '@/components/PageHeader.vue'
|
||
import { appApi } from '@/utils/api.js'
|
||
import { genealogyContext } from '@/utils/genealogy-context.js'
|
||
|
||
const form = reactive({ surname: '', name: '', hall: '', location: '', visibility: 'MEMBER_ONLY' })
|
||
|
||
const submit = async () => {
|
||
if (!form.surname.trim() || !form.name.trim()) {
|
||
uni.showToast({ title: '请填写姓氏和谱名', icon: 'none' })
|
||
return
|
||
}
|
||
const created = await appApi.createGenealogy({ ...form })
|
||
genealogyContext.setCurrentGenealogyId(created.id)
|
||
uni.redirectTo({ url: `/pages/lineage/first-person?genealogyId=${created.id}` })
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.create-page { padding-bottom: 136rpx; }
|
||
.form-paper, .privacy-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:last-child { border-bottom: 0; }
|
||
.field-row text { width: 130rpx; color: $ink-muted; font-size: 28rpx; }
|
||
.field-row input { flex: 1; color: $ink; font-size: 29rpx; }
|
||
.placeholder { color: #b7aa97; }
|
||
.privacy-heading { display: flex; align-items: center; justify-content: space-between; }
|
||
.privacy-value { color: $brand-red; font-size: 24rpx; }
|
||
.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>
|