373 lines
8.6 KiB
Vue
373 lines
8.6 KiB
Vue
<template>
|
|
<input v-model="form.amount" type="text" />
|
|
<input v-model="form.amount" type="text" />
|
|
<input v-model="form.amount" type="text" />
|
|
<input v-model="form.amount" type="text" />
|
|
<input v-model="form.amount" type="text" />
|
|
<scroll-view scroll-y class="page-scroll">
|
|
<view class="container">
|
|
<view class="budget-card">
|
|
<view class="card-header">
|
|
<text class="card-title">预算设置</text>
|
|
<text class="card-subtitle">{{ currentMonthText }}</text>
|
|
</view>
|
|
|
|
<view class="card-body">
|
|
<view class="form-item">
|
|
<text class="label">预算金额1</text>
|
|
<input
|
|
v-model="amountInput"
|
|
type="text"
|
|
inputmode="decimal"
|
|
placeholder="请输入预算金额"
|
|
@focus="onAmountFocus"
|
|
/>
|
|
|
|
<view class="uni-form-item uni-column">
|
|
<view class="title">实时获取输入值：{{inputValue}}</view>
|
|
<input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
|
|
</view>
|
|
<text class="form-tip">设置本月预算金额,用于控制支出</text>
|
|
</view>
|
|
|
|
<view v-if="budget.usedAmount !== undefined" class="info-section">
|
|
<view class="info-item">
|
|
<text class="info-label">本月预算</text>
|
|
<text class="info-value expense">¥{{ budget.amount ? budget.amount.toFixed(2) : '0.00' }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">本月已支出</text>
|
|
<text class="info-value expense">¥{{ budget.usedAmount ? budget.usedAmount.toFixed(2) : '0.00' }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">剩余预算</text>
|
|
<text class="info-value" :class="budget.remainingAmount >= 0 ? 'positive' : 'negative'">
|
|
¥{{ budget.remainingAmount !== undefined ? budget.remainingAmount.toFixed(2) : '0.00' }}
|
|
</text>
|
|
</view>
|
|
<view v-if="budget.remainingDaily !== undefined && budget.remainingDaily > 0" class="info-item">
|
|
<text class="info-label">剩余日均</text>
|
|
<text class="info-value">¥{{ budget.remainingDaily.toFixed(2) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card-footer">
|
|
<button class="save-btn" @click="saveBudget" :loading="saving">保存</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { getBudget, setBudget } from '../../api/budget'
|
|
|
|
const budget = ref({
|
|
id: null,
|
|
year: null,
|
|
month: null,
|
|
amount: 0,
|
|
usedAmount: 0,
|
|
remainingAmount: 0,
|
|
remainingDaily: 0
|
|
})
|
|
|
|
const inputValue = ref('');
|
|
|
|
const form = ref({
|
|
year: null,
|
|
month: null,
|
|
amount: ''
|
|
})
|
|
|
|
const saving = ref(false)
|
|
|
|
// 创建一个计算属性来处理金额输入的验证
|
|
const amountInput = computed({
|
|
get() {
|
|
return form.value.amount
|
|
},
|
|
set(value) {
|
|
// 确保只能输入数字和小数点
|
|
let processedValue = value || ''
|
|
// 移除非数字和小数点的字符
|
|
processedValue = processedValue.replace(/[^\d.]/g, '')
|
|
// 确保只有一个小数点
|
|
const parts = processedValue.split('.')
|
|
if (parts.length > 2) {
|
|
processedValue = parts[0] + '.' + parts.slice(1).join('')
|
|
}
|
|
// 限制小数位数为2位
|
|
if (parts.length === 2 && parts[1].length > 2) {
|
|
processedValue = parts[0] + '.' + parts[1].substring(0, 2)
|
|
}
|
|
form.value.amount = processedValue
|
|
}
|
|
})
|
|
|
|
const currentMonthText = computed(() => {
|
|
if (budget.value.year && budget.value.month) {
|
|
return `${budget.value.year}年${budget.value.month}月`
|
|
}
|
|
const now = new Date()
|
|
return `${now.getFullYear()}年${now.getMonth() + 1}月`
|
|
})
|
|
|
|
const loadBudget = async () => {
|
|
try {
|
|
const data = await getBudget()
|
|
if (data) {
|
|
budget.value = data
|
|
form.value.year = data.year
|
|
form.value.month = data.month
|
|
form.value.amount = data.amount ? data.amount.toString() : ''
|
|
} else {
|
|
// 如果没有预算数据，使用默认值
|
|
const now = new Date()
|
|
budget.value = {
|
|
year: now.getFullYear(),
|
|
month: now.getMonth() + 1,
|
|
amount: 0,
|
|
usedAmount: 0,
|
|
remainingAmount: 0,
|
|
remainingDaily: 0
|
|
}
|
|
form.value.year = now.getFullYear()
|
|
form.value.month = now.getMonth() + 1
|
|
form.value.amount = ''
|
|
}
|
|
} catch (error) {
|
|
console.error('加载预算失败', error)
|
|
uni.showToast({
|
|
title: '加载预算失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
|
|
const onAmountFocus = () => {
|
|
// 聚焦时确保输入框可交互
|
|
console.log('预算金额输入框聚焦')
|
|
}
|
|
|
|
const saveBudget = async () => {
|
|
const amount = parseFloat(form.value.amount) || 0
|
|
|
|
if (amount < 0) {
|
|
uni.showToast({
|
|
title: '预算金额不能为负数',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
saving.value = true
|
|
try {
|
|
const data = await setBudget({
|
|
year: form.value.year,
|
|
month: form.value.month,
|
|
amount: amount
|
|
})
|
|
|
|
if (data) {
|
|
budget.value = data
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
// 触发首页刷新
|
|
uni.$emit('refreshBills')
|
|
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1500)
|
|
}
|
|
} catch (error) {
|
|
console.error('保存预算失败', error)
|
|
uni.showToast({
|
|
title: error.message || '保存失败',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
const onKeyInput = (event) => {
|
|
inputValue.value = event.detail.value
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadBudget()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-scroll {
|
|
height: 100vh;
|
|
width: 100%;
|
|
padding-bottom: calc(50px + env(safe-area-inset-bottom));
|
|
background: linear-gradient(135deg, #FFE5CC 0%, #FFD4A8 50%, #FFC08A 100%);
|
|
}
|
|
|
|
.container {
|
|
min-height: calc(100vh - 100rpx);
|
|
background: transparent;
|
|
padding: 20rpx;
|
|
padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.budget-card {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 25rpx;
|
|
box-shadow: 0 10rpx 30rpx rgba(93, 64, 55, 0.15);
|
|
border: 3rpx solid #C8956E;
|
|
position: relative;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 40rpx 30rpx;
|
|
background: linear-gradient(135deg, #C8956E, #F5D59E, #FFD700);
|
|
border-bottom: 3rpx solid #5D4037;
|
|
text-align: center;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #5D4037;
|
|
display: block;
|
|
margin-bottom: 12rpx;
|
|
text-shadow: 2rpx 2rpx 0 rgba(255, 215, 0, 0.3);
|
|
}
|
|
|
|
.card-subtitle {
|
|
font-size: 28rpx;
|
|
color: #8D6E63;
|
|
display: block;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 40rpx 30rpx;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 35rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.label {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #5D4037;
|
|
margin-bottom: 20rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
padding: 25rpx;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-radius: 15rpx;
|
|
font-size: 32rpx;
|
|
box-sizing: border-box;
|
|
border: 3rpx solid #C8956E;
|
|
outline: none;
|
|
color: #5D4037;
|
|
box-shadow: 0 4rpx 15rpx rgba(200, 149, 110, 0.1);
|
|
transition: all 0.3s;
|
|
pointer-events: auto;
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
input:focus {
|
|
border-color: #FFD700;
|
|
box-shadow: 0 0 0 4rpx rgba(255, 215, 0, 0.3), 0 8rpx 25rpx rgba(255, 215, 0, 0.2);
|
|
}
|
|
|
|
input::placeholder {
|
|
color: #BCAAA4;
|
|
}
|
|
|
|
.form-tip {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #8D6E63;
|
|
margin-top: 12rpx;
|
|
padding-left: 10rpx;
|
|
}
|
|
|
|
.info-section {
|
|
margin-top: 40rpx;
|
|
padding-top: 30rpx;
|
|
border-top: 2rpx solid rgba(200, 149, 110, 0.3);
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 25rpx;
|
|
margin-bottom: 15rpx;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-radius: 15rpx;
|
|
border: 2rpx solid #C8956E;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 28rpx;
|
|
color: #8D6E63;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.info-value.positive {
|
|
color: #FFD700;
|
|
}
|
|
|
|
.info-value.negative {
|
|
color: #FA3534;
|
|
}
|
|
|
|
.info-value.expense {
|
|
color: #FA3534;
|
|
}
|
|
|
|
.card-footer {
|
|
padding: 0 30rpx 40rpx;
|
|
}
|
|
|
|
.save-btn {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
background: linear-gradient(135deg, #C8956E, #F5D59E, #FFD700);
|
|
color: #5D4037;
|
|
border-radius: 50rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
border: 4rpx solid #5D4037;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 10rpx 30rpx rgba(200, 149, 110, 0.4);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.save-btn:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 5rpx 15rpx rgba(200, 149, 110, 0.3);
|
|
}
|
|
</style>
|