fix: 键盘收起后添加底部保存按钮
- 记账页面添加底部保存按钮,键盘收起时显示 - 预算页面添加底部保存按钮,键盘收起时显示 - 按钮根据编辑/新增模式显示不同文案 - 正确处理底部安全区适配
This commit is contained in:
@@ -25,6 +25,8 @@
|
|||||||
:fixed="true"
|
:fixed="true"
|
||||||
size="large"
|
size="large"
|
||||||
:auto-focus="true"
|
:auto-focus="true"
|
||||||
|
@focus="keyboardVisible = true"
|
||||||
|
@blur="keyboardVisible = false"
|
||||||
@confirm="save"
|
@confirm="save"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -55,7 +57,12 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部保存按钮(键盘收起时显示) -->
|
||||||
|
<view class="save-bar" v-if="!showSuccess && !keyboardVisible">
|
||||||
|
<view class="save-btn" @tap="save">
|
||||||
|
<text class="save-btn-text">{{ editId ? '保存修改' : '保存' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<SaveSuccess
|
<SaveSuccess
|
||||||
v-model:visible="showSuccess"
|
v-model:visible="showSuccess"
|
||||||
@@ -99,6 +106,8 @@ const showSuccess = ref(false)
|
|||||||
const scrollToCat = ref('')
|
const scrollToCat = ref('')
|
||||||
const todayStr = localToday
|
const todayStr = localToday
|
||||||
const amountEditorRef = ref<InstanceType<typeof AmountEditor> | null>(null)
|
const amountEditorRef = ref<InstanceType<typeof AmountEditor> | null>(null)
|
||||||
|
const keyboardVisible = ref(false)
|
||||||
|
|
||||||
// Remember last selected category per type
|
// Remember last selected category per type
|
||||||
const lastCatByType: Record<string, number | null> = { expense: null, income: null }
|
const lastCatByType: Record<string, number | null> = { expense: null, income: null }
|
||||||
|
|
||||||
@@ -301,9 +310,46 @@ function goBack() {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
// AmountEditor fixed Numpad 占位: 4行×96rpx + 3间隙×16rpx + padding×2×16rpx = 464rpx
|
// AmountEditor fixed Numpad 占位: 4行×96rpx + 3间隙×16rpx + padding×2×16rpx = 464rpx
|
||||||
|
// 同时留出保存按钮的位置,确保内容不被遮挡
|
||||||
$numpad-h: 464rpx;
|
$numpad-h: 464rpx;
|
||||||
padding-bottom: calc(#{$numpad-h} + constant(safe-area-inset-bottom));
|
$save-bar-h: 144rpx;
|
||||||
padding-bottom: calc(#{$numpad-h} + env(safe-area-inset-bottom));
|
padding-bottom: calc(#{$numpad-h} + #{$save-bar-h} + constant(safe-area-inset-bottom));
|
||||||
|
padding-bottom: calc(#{$numpad-h} + #{$save-bar-h} + env(safe-area-inset-bottom));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部保存按钮栏
|
||||||
|
.save-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: $space-md $space-xl;
|
||||||
|
padding-bottom: calc(#{$space-md} + constant(safe-area-inset-bottom));
|
||||||
|
padding-bottom: calc(#{$space-md} + env(safe-area-inset-bottom));
|
||||||
|
background: $surface;
|
||||||
|
border-top: 2rpx solid $border;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
height: 96rpx;
|
||||||
|
background: linear-gradient(135deg, $primary, #E67355);
|
||||||
|
border-radius: $radius-xl;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(255, 140, 105, 0.3);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.8;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn-text {
|
||||||
|
font-size: $font-xl;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $surface;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-fixed {
|
.header-fixed {
|
||||||
|
|||||||
@@ -67,9 +67,18 @@
|
|||||||
size="large"
|
size="large"
|
||||||
unit="元"
|
unit="元"
|
||||||
:auto-focus="false"
|
:auto-focus="false"
|
||||||
|
@focus="keyboardVisible = true"
|
||||||
|
@blur="keyboardVisible = false"
|
||||||
@confirm="onConfirm"
|
@confirm="onConfirm"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部保存按钮(键盘收起时显示) -->
|
||||||
|
<view class="save-bar" v-if="!keyboardVisible">
|
||||||
|
<view class="save-btn" @tap="onConfirm">
|
||||||
|
<text class="save-btn-text">保存预算</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -98,6 +107,7 @@ const loading = ref(true)
|
|||||||
const initialLoaded = ref(false)
|
const initialLoaded = ref(false)
|
||||||
const amountStr = ref('')
|
const amountStr = ref('')
|
||||||
const amountEditorRef = ref<InstanceType<typeof AmountEditor> | null>(null)
|
const amountEditorRef = ref<InstanceType<typeof AmountEditor> | null>(null)
|
||||||
|
const keyboardVisible = ref(false)
|
||||||
|
|
||||||
const presets = [1000, 2000, 3000, 5000, 10000]
|
const presets = [1000, 2000, 3000, 5000, 10000]
|
||||||
|
|
||||||
@@ -197,10 +207,11 @@ function goBack() {
|
|||||||
.page {
|
.page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: $bg;
|
background: $bg;
|
||||||
// AmountEditor fixed Numpad 占位: 4行×96rpx + 3间隙×16rpx + padding×2×16rpx = 464rpx
|
// AmountEditor fixed Numpad 占位 + 保存按钮占位
|
||||||
$numpad-h: 464rpx;
|
$numpad-h: 464rpx;
|
||||||
padding-bottom: calc(#{$numpad-h} + constant(safe-area-inset-bottom));
|
$save-bar-h: 144rpx;
|
||||||
padding-bottom: calc(#{$numpad-h} + env(safe-area-inset-bottom));
|
padding-bottom: calc(#{$numpad-h} + #{$save-bar-h} + constant(safe-area-inset-bottom));
|
||||||
|
padding-bottom: calc(#{$numpad-h} + #{$save-bar-h} + env(safe-area-inset-bottom));
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-fixed {
|
.header-fixed {
|
||||||
@@ -372,6 +383,40 @@ function goBack() {
|
|||||||
color: $text;
|
color: $text;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 底部保存按钮栏
|
||||||
|
.save-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: $space-md $space-xl;
|
||||||
|
padding-bottom: calc(#{$space-md} + constant(safe-area-inset-bottom));
|
||||||
|
padding-bottom: calc(#{$space-md} + env(safe-area-inset-bottom));
|
||||||
|
background: $surface;
|
||||||
|
border-top: 2rpx solid $border;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
height: 96rpx;
|
||||||
|
background: linear-gradient(135deg, $primary, #E67355);
|
||||||
|
border-radius: $radius-xl;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(255, 140, 105, 0.3);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.8;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn-text {
|
||||||
|
font-size: $font-xl;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $surface;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
|||||||
Reference in New Issue
Block a user