1. 新增支出 (Add.vue):
- 增加图片附件上传功能(限制为图片类型)
- 支持最多上传 9 张图片
- 实现图片预览和删除功能
- 将图片转 base64 格式提交到后端 attachments 字段
2. 支出列表 (List.vue):
- 重构卡片布局为 5 行展示:
* 第一行:标题 + 支出时间(右侧对齐)
* 第二行:支出类型(左)+ 支出金额(右,红色突出显示)
* 第三行:收款单位
* 第四行:支付描述(可选,有内容时显示)
* 第五行:查看附件按钮(有附件时显示,蓝色可点击)
- 添加 formatDateTime 函数格式化日期时间
- 添加 getAttachmentCount 函数计算附件数量
- 添加 previewAttachments 函数实现图片预览
- 优化样式:分隔线、图标、标签等细节美化
技术实现:
- 使用 Vant 的 van-uploader 组件上传图片
- 使用 ImagePreview 组件预览图片
- 附件以 base64 逗号分隔字符串形式存储
- 响应式布局适配移动端
30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
/* eslint-disable */
|
|
/* prettier-ignore */
|
|
// @ts-nocheck
|
|
// Generated by unplugin-vue-components
|
|
// Read more: https://github.com/vuejs/core/pull/3399
|
|
export {}
|
|
|
|
declare module 'vue' {
|
|
export interface GlobalComponents {
|
|
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
|
RouterLink: typeof import('vue-router')['RouterLink']
|
|
RouterView: typeof import('vue-router')['RouterView']
|
|
Tabbar: typeof import('./src/components/Tabbar.vue')['default']
|
|
VanButton: typeof import('vant/es')['Button']
|
|
VanCellGroup: typeof import('vant/es')['CellGroup']
|
|
VanDatePicker: typeof import('vant/es')['DatePicker']
|
|
VanField: typeof import('vant/es')['Field']
|
|
VanForm: typeof import('vant/es')['Form']
|
|
VanIcon: typeof import('vant/es')['Icon']
|
|
VanList: typeof import('vant/es')['List']
|
|
VanNavBar: typeof import('vant/es')['NavBar']
|
|
VanPicker: typeof import('vant/es')['Picker']
|
|
VanPopup: typeof import('vant/es')['Popup']
|
|
VanPullRefresh: typeof import('vant/es')['PullRefresh']
|
|
VanSearch: typeof import('vant/es')['Search']
|
|
VanTag: typeof import('vant/es')['Tag']
|
|
VanUploader: typeof import('vant/es')['Uploader']
|
|
}
|
|
}
|