134 lines
3.1 KiB
Vue
134 lines
3.1 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<van-nav-bar title="设置" />
|
|||
|
|
<div class="detail-header">
|
|||
|
|
<p>账单导入</p>
|
|||
|
|
</div>
|
|||
|
|
<van-cell-group inset>
|
|||
|
|
<van-cell title="从支付宝导入" is-link @click="handleImportClick('Alipay')" />
|
|||
|
|
<van-cell title="从微信导入" is-link @click="handleImportClick('WeChat')" />
|
|||
|
|
</van-cell-group>
|
|||
|
|
|
|||
|
|
<!-- 隐藏的文件选择器 -->
|
|||
|
|
<input ref="fileInputRef" type="file" accept=".csv,.xlsx,.xls" style="display: none" @change="handleFileChange" />
|
|||
|
|
|
|||
|
|
<div class="detail-header">
|
|||
|
|
<p>账单处理</p>
|
|||
|
|
</div>
|
|||
|
|
<van-cell-group inset>
|
|||
|
|
<van-cell title="智能分类" is-link />
|
|||
|
|
</van-cell-group>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
import { showLoadingToast, showSuccessToast, showToast, closeToast } from 'vant'
|
|||
|
|
import { uploadBillFile } from '@/api/billImport'
|
|||
|
|
|
|||
|
|
const fileInputRef = ref(null)
|
|||
|
|
const currentType = ref('')
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 处理导入按钮点击
|
|||
|
|
*/
|
|||
|
|
const handleImportClick = (type) => {
|
|||
|
|
currentType.value = type
|
|||
|
|
// 触发文件选择
|
|||
|
|
fileInputRef.value?.click()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 处理文件选择
|
|||
|
|
*/
|
|||
|
|
const handleFileChange = async (event) => {
|
|||
|
|
const file = event.target.files?.[0]
|
|||
|
|
if (!file) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证文件类型
|
|||
|
|
const validTypes = ['text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
|
|||
|
|
if (!validTypes.includes(file.type)) {
|
|||
|
|
showToast('请选择 CSV 或 Excel 文件')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证文件大小（限制为 10MB）
|
|||
|
|
const maxSize = 10 * 1024 * 1024
|
|||
|
|
if (file.size > maxSize) {
|
|||
|
|
showToast('文件大小不能超过 10MB')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 显示加载提示
|
|||
|
|
showLoadingToast({
|
|||
|
|
message: '上传中...',
|
|||
|
|
forbidClick: true,
|
|||
|
|
duration: 0
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 上传文件
|
|||
|
|
const typeName = currentType.value === 'Alipay' ? '支付宝' : '微信'
|
|||
|
|
const { success, message } = await uploadBillFile(file, currentType.value)
|
|||
|
|
|
|||
|
|
if (!success) {
|
|||
|
|
showToast(message || `${typeName}账单导入失败`)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showSuccessToast(message || `${typeName}账单导入成功`)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('上传失败:', error)
|
|||
|
|
showToast('上传失败: ' + (error.message || '未知错误'))
|
|||
|
|
}
|
|||
|
|
finally {
|
|||
|
|
closeToast()
|
|||
|
|
// 清空文件输入，允许重复选择同一文件
|
|||
|
|
event.target.value = ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 设置页面容器背景色 */
|
|||
|
|
:deep(.van-nav-bar) {
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 页面背景色 */
|
|||
|
|
:deep(body) {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (prefers-color-scheme: dark) {
|
|||
|
|
:deep(body) {
|
|||
|
|
background-color: #1a1a1a;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 增加卡片对比度 */
|
|||
|
|
:deep(.van-cell-group--inset) {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (prefers-color-scheme: dark) {
|
|||
|
|
:deep(.van-cell-group--inset) {
|
|||
|
|
background-color: #2c2c2c;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-header {
|
|||
|
|
padding: 16px 16px 5px 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-header p {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #969799;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
</style>
|