Compare commits
1 Commits
5df910c9f1
...
dev
| Author | SHA1 | Date | |
|---|---|---|---|
| 324a3ec5c9 |
@@ -25,6 +25,8 @@
|
||||
:fixed="true"
|
||||
size="large"
|
||||
:auto-focus="true"
|
||||
@focus="keyboardVisible = true"
|
||||
@blur="keyboardVisible = false"
|
||||
@confirm="save"
|
||||
/>
|
||||
|
||||
@@ -55,7 +57,12 @@
|
||||
</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
|
||||
v-model:visible="showSuccess"
|
||||
@@ -99,6 +106,8 @@ const showSuccess = ref(false)
|
||||
const scrollToCat = ref('')
|
||||
const todayStr = localToday
|
||||
const amountEditorRef = ref<InstanceType<typeof AmountEditor> | null>(null)
|
||||
const keyboardVisible = ref(false)
|
||||
|
||||
// Remember last selected category per type
|
||||
const lastCatByType: Record<string, number | null> = { expense: null, income: null }
|
||||
|
||||
@@ -301,9 +310,46 @@ function goBack() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// AmountEditor fixed Numpad 占位: 4行×96rpx + 3间隙×16rpx + padding×2×16rpx = 464rpx
|
||||
// 同时留出保存按钮的位置,确保内容不被遮挡
|
||||
$numpad-h: 464rpx;
|
||||
padding-bottom: calc(#{$numpad-h} + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(#{$numpad-h} + env(safe-area-inset-bottom));
|
||||
$save-bar-h: 144rpx;
|
||||
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 {
|
||||
|
||||
@@ -67,9 +67,18 @@
|
||||
size="large"
|
||||
unit="元"
|
||||
:auto-focus="false"
|
||||
@focus="keyboardVisible = true"
|
||||
@blur="keyboardVisible = false"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 底部保存按钮(键盘收起时显示) -->
|
||||
<view class="save-bar" v-if="!keyboardVisible">
|
||||
<view class="save-btn" @tap="onConfirm">
|
||||
<text class="save-btn-text">保存预算</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -98,6 +107,7 @@ const loading = ref(true)
|
||||
const initialLoaded = ref(false)
|
||||
const amountStr = ref('')
|
||||
const amountEditorRef = ref<InstanceType<typeof AmountEditor> | null>(null)
|
||||
const keyboardVisible = ref(false)
|
||||
|
||||
const presets = [1000, 2000, 3000, 5000, 10000]
|
||||
|
||||
@@ -197,10 +207,11 @@ function goBack() {
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: $bg;
|
||||
// AmountEditor fixed Numpad 占位: 4行×96rpx + 3间隙×16rpx + padding×2×16rpx = 464rpx
|
||||
// AmountEditor fixed Numpad 占位 + 保存按钮占位
|
||||
$numpad-h: 464rpx;
|
||||
padding-bottom: calc(#{$numpad-h} + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(#{$numpad-h} + env(safe-area-inset-bottom));
|
||||
$save-bar-h: 144rpx;
|
||||
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 {
|
||||
@@ -372,6 +383,40 @@ function goBack() {
|
||||
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) {
|
||||
|
||||
Reference in New Issue
Block a user