Files
EmailBill/Web/src/components/Bill/OneLineBillAdd.vue
SunCheng 4aa7e82429
Some checks failed
Docker Build & Deploy / Build Docker Image (push) Failing after 1m57s
Docker Build & Deploy / Deploy to Production (push) Has been skipped
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
移除对账功能 后期从长计议
2026-01-27 15:29:25 +08:00

136 lines
2.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div>
<div
v-if="!parseResult"
class="input-section"
style="margin: 12px 12px 0 16px"
>
<van-field
v-model="text"
type="textarea"
rows="4"
placeholder="例如1月3日 晚餐 45.5 美团"
class="bill-input"
:disabled="parsing || saving"
/>
<div class="actions">
<van-button
type="primary"
round
block
:loading="parsing"
:disabled="!text.trim()"
@click="handleParse"
>
智能解析
</van-button>
</div>
</div>
<div
v-if="parseResult"
class="result-section"
>
<BillForm
:initial-data="parseResult"
:loading="saving"
submit-text="确认保存"
@submit="handleSave"
>
<template #actions>
<van-button
plain
round
block
class="mt-2"
@click="parseResult = null"
>
重新输入
</van-button>
</template>
</BillForm>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'
import BillForm from './BillForm.vue'
import { createTransaction, parseOneLine } from '@/api/transactionRecord'
const emit = defineEmits(['success'])
const text = ref('')
const parsing = ref(false)
const saving = ref(false)
const parseResult = ref(null)
const handleParse = async () => {
if (!text.value.trim()) {
return
}
parsing.value = true
parseResult.value = null
try {
const res = await parseOneLine(text.value)
if (!res.success) {
throw new Error(res.message || '解析失败')
}
parseResult.value = res.data
} catch (err) {
console.error(err)
showToast('解析失败:' + err.message)
} finally {
parsing.value = false
}
}
const handleSave = async (payload) => {
saving.value = true
try {
const res = await createTransaction(payload)
if (!res.success) {
throw new Error(res.message || '保存失败')
}
showToast('保存成功')
text.value = ''
parseResult.value = null
emit('success')
} catch (err) {
console.error(err)
showToast('保存失败:' + err.message)
} finally {
saving.value = false
}
}
</script>
<style scoped>
.bill-input {
background-color: var(--van-background-2);
border-radius: 8px;
margin-bottom: 16px;
}
.actions {
margin-top: 16px;
}
.mt-2 {
margin-top: 8px;
}
.preview-card {
margin-bottom: 16px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--van-border-color);
}
</style>