fundplatform/fund-mobile/src/views/expense/Add.vue

<template>
  <div class="page expense-add">
    <div class="header-bar mac-card">
      <div class="back-btn" @click="$router.back()">
        <van-icon name="arrow-left" />
      </div>
      <span class="header-title">新增支出</span>
      <div class="placeholder"></div>
    </div>
    
    <div class="form-card mac-card fade-in-up">
      <div class="form-group">
        <label>支出标题</label>
        <input v-model="form.title" placeholder="输入标题" class="mac-input" />
      </div>
      
      <div class="form-group">
        <label>支出类型</label>
        <div class="mac-select" @click="showTypePicker = true">
          <span :class="{ placeholder: !form.expenseTypeName }">
            {{ form.expenseTypeName || '选择类型' }}
          </span>
          <van-icon name="arrow" />
        </div>
      </div>
      
      <div class="form-group">
        <label>支出金额</label>
        <div class="amount-input">
          <span class="currency">¥</span>
          <input v-model="form.amount" type="number" placeholder="0.00" />
        </div>
      </div>
      
      <div class="form-group">
        <label>支出日期</label>
        <div class="mac-select" @click="showDatePicker = true">
          <span :class="{ placeholder: !form.expenseDate }">
            {{ form.expenseDate || '选择日期' }}
          </span>
          <van-icon name="arrow" />
        </div>
      </div>
      
      <div class="form-group">
        <label>支出描述</label>
        <textarea v-model="form.description" placeholder="输入描述" rows="3" class="mac-textarea"></textarea>
      </div>
    </div>

    <div class="submit-btn">
      <button class="mac-btn" @click="handleSubmit" :disabled="loading">
        {{ loading ? '提交中...' : '提交' }}
      </button>
    </div>

    <!-- 类型选择器 -->
    <van-popup v-model:show="showTypePicker" position="bottom" round>
      <van-picker :columns="typeColumns" @confirm="onTypeConfirm" @cancel="showTypePicker = false" />
    </van-popup>

    <!-- 日期选择器 -->
    <van-popup v-model:show="showDatePicker" position="bottom" round>
      <van-date-picker @confirm="onDateConfirm" @cancel="showDatePicker = false" />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'
import { createExpense, getExpenseTypeTree } from '@/api'

const router = useRouter()
const loading = ref(false)
const showTypePicker = ref(false)
const showDatePicker = ref(false)

const form = reactive({
  title: '',
  expenseTypeId: null as number | null,
  expenseTypeName: '',
  amount: '',
  expenseDate: '',
  description: ''
})

const typeColumns = ref<any[]>([])

const onTypeConfirm = ({ selectedOptions }: any) => {
  const option = selectedOptions[0]
  form.expenseTypeId = option.value
  form.expenseTypeName = option.text
  showTypePicker.value = false
}

const onDateConfirm = ({ selectedValues }: any) => {
  form.expenseDate = selectedValues.join('-')
  showDatePicker.value = false
}

const handleSubmit = async () => {
  if (!form.title) {
    showToast('请输入支出标题')
    return
  }
  if (!form.expenseTypeId) {
    showToast('请选择支出类型')
    return
  }
  if (!form.amount) {
    showToast('请输入支出金额')
    return
  }

  loading.value = true
  try {
    // 转换日期格式为LocalDateTime格式
    const expenseDateTime = form.expenseDate ? `${form.expenseDate}T12:00:00` : null
    const requestData = {
      title: form.title,
      expenseType: form.expenseTypeId,
      amount: parseFloat(form.amount),
      expenseDate: expenseDateTime,
      purpose: form.description,
      payeeName: '待填写'
    }
    console.log('提交支出数据:', requestData)
    await createExpense(requestData)
    showSuccessToast('提交成功')
    router.back()
  } catch (e: any) {
    console.error('提交失败:', e)
    showToast(e.message || '提交失败')
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  // 加载支出类型
  try {
    const res: any = await getExpenseTypeTree()
    const types = res.data || []
    typeColumns.value = types.map((t: any) => ({
      text: t.typeName,
      value: t.id
    }))
  } catch (e) {
    console.error('加载支出类型失败', e)
  }
})
</script>

<style scoped>
.expense-add {
  padding: 0 16px;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  margin: 12px -16px 16px;
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(245, 245, 247, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 122, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mac-primary);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-btn:active {
  transform: scale(0.95);
  background: rgba(0, 122, 255, 0.2);
}

.header-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--mac-text);
}

.placeholder {
  width: 36px;
}

.form-card {
  padding: 24px 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--mac-text-secondary);
  margin-bottom: 8px;
  white-space: nowrap;
}

.mac-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 15px;
  color: var(--mac-text);
  transition: all 0.2s ease;
  outline: none;
}

.mac-input:focus {
  border-color: var(--mac-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.mac-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mac-select:active {
  background: rgba(0, 122, 255, 0.08);
}

.mac-select span {
  font-size: 15px;
  color: var(--mac-text);
}

.mac-select span.placeholder {
  color: var(--mac-text-secondary);
}

.mac-select .van-icon {
  color: var(--mac-text-secondary);
}

.amount-input {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.amount-input:focus-within {
  border-color: var(--mac-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.currency {
  font-size: 18px;
  font-weight: 600;
  color: var(--mac-text);
  margin-right: 8px;
}

.amount-input input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 24px;
  font-weight: 600;
  color: var(--mac-text);
  outline: none;
}

.mac-textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 15px;
  color: var(--mac-text);
  resize: none;
  outline: none;
  font-family: inherit;
}

.mac-textarea:focus {
  border-color: var(--mac-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.submit-btn {
  position: fixed;
  bottom: 80px;
  left: 16px;
  right: 16px;
}

.submit-btn .mac-btn {
  width: 100%;
}
</style>