验收20%
This commit is contained in:
@@ -8,7 +8,8 @@
|
||||
<view class="settings-panel" :class="{
|
||||
'settings-state--form': settingsState === 'form',
|
||||
'settings-state--success': settingsState === 'success',
|
||||
'settings-state--error': settingsState === 'error'
|
||||
'settings-state--error': settingsState === 'error',
|
||||
'settings-state--no-permission': settingsState === 'no-permission'
|
||||
}">
|
||||
<image class="settings-panel__skin" src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
|
||||
|
||||
@@ -20,8 +21,9 @@
|
||||
<view class="settings-field">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<text>家谱名称</text>
|
||||
<input v-model="genealogyDraft.name" maxlength="20" placeholder="请输入家谱名称" placeholder-class="settings-placeholder" />
|
||||
<input v-model="genealogyDraft.name" maxlength="20" placeholder="请输入家谱名称" placeholder-class="settings-placeholder" @input="nameError = ''" />
|
||||
</view>
|
||||
<text v-if="nameError" class="settings-field-error">{{ nameError }}</text>
|
||||
|
||||
<view class="visibility-block">
|
||||
<text class="visibility-block__label">公开范围</text>
|
||||
@@ -47,25 +49,32 @@
|
||||
</view>
|
||||
|
||||
<view v-else class="settings-result">
|
||||
<text class="settings-result__eyebrow">{{ settingsState === 'success' ? '设置已保存' : '设置未保存' }}</text>
|
||||
<text class="settings-result__title">{{ settingsState === 'success' ? '新的访问规则已经生效' : '暂时无法打开家谱设置' }}</text>
|
||||
<text class="settings-result__copy">{{ settingsState === 'success' ? `${genealogyDraft.name} · ${visibilityLabel}` : '请从家谱总览重新进入,当前修改不会被保留。' }}</text>
|
||||
<text class="settings-result__eyebrow">{{ settingsState === 'success' ? '设置已保存' : settingsState === 'no-permission' ? '权限不足' : '设置未保存' }}</text>
|
||||
<text class="settings-result__title">{{ settingsState === 'success' ? '新的访问规则已经生效' : settingsState === 'no-permission' ? '当前账号不能修改家谱' : '暂时无法打开家谱设置' }}</text>
|
||||
<text class="settings-result__copy">{{ settingsState === 'success' ? `${genealogyDraft.name} · ${visibilityLabel}` : settingsState === 'no-permission' ? '只有家谱所有者可以修改名称、公开范围和访问说明。' : '请从家谱总览重新进入,当前修改不会被保留。' }}</text>
|
||||
<view class="settings-action" @click="settingsState = 'form'">
|
||||
<image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text>{{ settingsState === 'success' ? '继续调整' : '重新查看' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="feedbackVisible" class="settings-feedback">
|
||||
<image src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
|
||||
<text>设置已保存</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, 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 settingsState = ref('loading')
|
||||
const nameError = ref('')
|
||||
const feedbackVisible = ref(false)
|
||||
let feedbackTimer = null
|
||||
const genealogyDraft = reactive({
|
||||
name: '汤氏家谱',
|
||||
visibility: 'MEMBER_ONLY',
|
||||
@@ -82,20 +91,23 @@ const visibilityHint = computed(() => genealogyDraft.visibility === 'MEMBER_ONLY
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = query.genealogyId || ''
|
||||
settingsState.value = query.state === 'success' ? 'success' : query.state === 'error' || !genealogyId.value ? 'error' : 'form'
|
||||
settingsState.value = query.state === 'success' ? 'success' : query.state === 'no-permission' ? 'no-permission' : query.state === 'error' || !genealogyId.value ? 'error' : 'form'
|
||||
})
|
||||
onUnload(() => { if (feedbackTimer) clearTimeout(feedbackTimer) })
|
||||
|
||||
const saveSettings = () => {
|
||||
if (!genealogyDraft.name.trim()) {
|
||||
uni.showToast({ title: '请填写家谱名称', icon: 'none' })
|
||||
nameError.value = '请填写家谱名称'
|
||||
return
|
||||
}
|
||||
settingsState.value = 'success'
|
||||
feedbackVisible.value = true
|
||||
feedbackTimer = setTimeout(() => { feedbackVisible.value = false; feedbackTimer = null }, 1800)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.settings-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
|
||||
.settings-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
|
||||
.settings-page__paper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .98; pointer-events: none; }
|
||||
.settings-page__footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; opacity: .13; pointer-events: none; }
|
||||
.settings-page__header { position: relative; z-index: 3; }
|
||||
@@ -111,6 +123,7 @@ const saveSettings = () => {
|
||||
.settings-field input, .settings-field textarea { position: absolute; top: 0; right: 20rpx; bottom: 0; left: 164rpx; z-index: 1; height: 92rpx; color: $ink; font-size: 22rpx; line-height: 92rpx; }
|
||||
.settings-field textarea { box-sizing: border-box; padding-top: 26rpx; line-height: 1.5; }
|
||||
.settings-placeholder { color: #a79884; }
|
||||
.settings-field-error { display: block; margin-top: 3rpx; color: $brand-red; font-size: 20rpx; text-align: right; }
|
||||
.visibility-block { margin-top: 17rpx; }
|
||||
.visibility-block__label { display: block; color: $ink; font-size: 22rpx; font-weight: 700; }
|
||||
.visibility-options { display: flex; gap: 14rpx; margin-top: 10rpx; }
|
||||
@@ -127,5 +140,8 @@ const saveSettings = () => {
|
||||
.settings-result__eyebrow { text-align: center; }
|
||||
.settings-result__copy { margin-top: 22rpx; }
|
||||
.settings-result .settings-action { width: 420rpx; max-width: 100%; margin: 34rpx auto 0; }
|
||||
.settings-feedback { position: fixed; z-index: 30; top: 138rpx; left: 50%; display: flex; min-width: 240rpx; min-height: 74rpx; align-items: center; justify-content: center; padding: 0 34rpx; transform: translateX(-50%); }
|
||||
.settings-feedback image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.settings-feedback text { position: relative; z-index: 1; color: $ink; font-size: 22rpx; }
|
||||
@media (min-width: 400px) { .settings-panel { width: calc(100% - 48rpx); } .settings-form { right: 9%; left: 9%; } }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user