update
This commit is contained in:
aaron
parent
a6b5160c6a
commit
638508638d
@ -29,8 +29,8 @@ WORKDIR /app
|
||||
# 复制 package.json 和 yarn.lock
|
||||
COPY package.json yarn.lock* ./
|
||||
|
||||
# 安装依赖，确保 dotenv 被正确安装
|
||||
RUN yarn install --frozen-lockfile && \
|
||||
# 安装所有依赖，包括开发依赖
|
||||
RUN yarn install --frozen-lockfile --production=false && \
|
||||
yarn add dotenv@16.3.1 --exact
|
||||
|
||||
# 复制项目文件
|
||||
|
||||
@ -80,3 +80,11 @@ export function cancelWithdraw(withdrawId) {
|
||||
method: 'post'
|
||||
});
|
||||
}
|
||||
|
||||
export function getAccountDetails(params) {
|
||||
return request({
|
||||
url: '/api/account/details',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
@ -31,6 +31,11 @@
|
||||
<template #icon><credit-card-outlined /></template>
|
||||
<span>银行卡管理</span>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item key="finance-account-details" @click="() => $router.push('/finance/account-details')">
|
||||
<template #icon><profile-outlined /></template>
|
||||
<span>账户明细</span>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
|
||||
<a-menu-item key="user-auth" @click="() => $router.push('/user/auth')">
|
||||
@ -101,7 +106,8 @@ import {
|
||||
DollarOutlined,
|
||||
CreditCardOutlined,
|
||||
WalletOutlined,
|
||||
UserOutlined
|
||||
UserOutlined,
|
||||
ProfileOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
@ -112,7 +118,8 @@ export default {
|
||||
DollarOutlined,
|
||||
CreditCardOutlined,
|
||||
WalletOutlined,
|
||||
UserOutlined
|
||||
UserOutlined,
|
||||
ProfileOutlined
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
|
||||
@ -40,6 +40,12 @@ const routes = [
|
||||
component: () => import('../views/BankCard.vue'),
|
||||
meta: { title: '银行卡管理', parentTitle: '财务管理', icon: 'credit-card' }
|
||||
},
|
||||
{
|
||||
path: 'finance/account-details',
|
||||
name: 'FinanceAccountDetails',
|
||||
component: () => import('../views/AccountDetails.vue'),
|
||||
meta: { title: '账户明细', parentTitle: '财务管理', icon: 'profile' }
|
||||
},
|
||||
{
|
||||
path: 'bank-card',
|
||||
name: 'BankCard',
|
||||
|
||||
71
src/utils/format.js
Normal file
71
src/utils/format.js
Normal file
@ -0,0 +1,71 @@
|
||||
/**
|
||||
* 格式化日期时间
|
||||
* @param {string|Date} date - 日期对象或日期字符串
|
||||
* @param {string} format - 格式化模式，默认为 'YYYY-MM-DD HH:mm:ss'
|
||||
* @returns {string} - 格式化后的日期字符串
|
||||
*/
|
||||
export function formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
|
||||
if (!date) return '-';
|
||||
|
||||
const d = typeof date === 'string' ? new Date(date) : date;
|
||||
|
||||
// 检查日期是否有效
|
||||
if (isNaN(d.getTime())) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
const hours = String(d.getHours()).padStart(2, '0');
|
||||
const minutes = String(d.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(d.getSeconds()).padStart(2, '0');
|
||||
|
||||
return format
|
||||
.replace('YYYY', year)
|
||||
.replace('MM', month)
|
||||
.replace('DD', day)
|
||||
.replace('HH', hours)
|
||||
.replace('mm', minutes)
|
||||
.replace('ss', seconds);
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化金额，保留两位小数
|
||||
* @param {number|string} amount - 金额
|
||||
* @param {number} decimals - 小数位数，默认为2
|
||||
* @param {string} prefix - 前缀，默认为空
|
||||
* @returns {string} - 格式化后的金额字符串
|
||||
*/
|
||||
export function formatAmount(amount, decimals = 2, prefix = '') {
|
||||
if (amount === undefined || amount === null) return `${prefix}0.00`;
|
||||
|
||||
const num = parseFloat(amount);
|
||||
if (isNaN(num)) return `${prefix}0.00`;
|
||||
|
||||
return `${prefix}${num.toFixed(decimals)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化手机号码，中间四位显示为星号
|
||||
* @param {string} phone - 手机号码
|
||||
* @returns {string} - 格式化后的手机号码
|
||||
*/
|
||||
export function formatPhone(phone) {
|
||||
if (!phone || phone.length < 11) return phone;
|
||||
|
||||
return `${phone.substring(0, 3)}****${phone.substring(7)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化银行卡号，仅显示后四位
|
||||
* @param {string} cardNumber - 银行卡号
|
||||
* @returns {string} - 格式化后的银行卡号
|
||||
*/
|
||||
export function formatBankCard(cardNumber) {
|
||||
if (!cardNumber) return '';
|
||||
|
||||
if (cardNumber.length <= 4) return cardNumber;
|
||||
|
||||
return `**** **** **** ${cardNumber.slice(-4)}`;
|
||||
}
|
||||
245
src/views/AccountDetails.vue
Normal file
245
src/views/AccountDetails.vue
Normal file
@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="account-details-container">
|
||||
<a-card title="账户明细" :bordered="false">
|
||||
<!-- 筛选区域 -->
|
||||
<div class="filter-container">
|
||||
<a-form layout="inline" :model="filterForm">
|
||||
<a-form-item label="日期范围">
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
format="YYYY-MM-DD"
|
||||
:placeholder="['开始日期', '结束日期']"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="交易类型">
|
||||
<a-select
|
||||
v-model:value="filterForm.type"
|
||||
style="width: 120px"
|
||||
placeholder="全部类型"
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option value="INCOME">收入</a-select-option>
|
||||
<a-select-option value="EXPENSE">支出</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" @click="handleSearch">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="detailsList"
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
rowKey="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 金额列 -->
|
||||
<template v-if="column.dataIndex === 'amount'">
|
||||
<span :class="record.type === 'INCOME' ? 'income-amount' : 'expense-amount'">
|
||||
{{ record.type === 'INCOME' ? '+' : '-' }}{{ record.amount.toFixed(2) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- 类型列 -->
|
||||
<template v-if="column.dataIndex === 'type'">
|
||||
<a-tag :color="record.type === 'INCOME' ? 'green' : 'red'">
|
||||
{{ record.type === 'INCOME' ? '收入' : '支出' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<!-- 交易号列 -->
|
||||
<template v-if="column.dataIndex === 'transaction_id'">
|
||||
<span v-if="record.transaction_id">{{ record.transaction_id }}</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { getAccountDetails } from '../api/finance';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { formatDate } from '../utils/format';
|
||||
|
||||
export default {
|
||||
name: 'AccountDetails',
|
||||
setup() {
|
||||
// 筛选表单
|
||||
const filterForm = reactive({
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
type: undefined
|
||||
});
|
||||
|
||||
// 日期范围
|
||||
const dateRange = ref([]);
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: '交易时间',
|
||||
dataIndex: 'create_time',
|
||||
width: 180,
|
||||
sorter: true,
|
||||
customRender: ({ text }) => formatDate(text)
|
||||
},
|
||||
{
|
||||
title: '交易类型',
|
||||
dataIndex: 'type',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '金额(元)',
|
||||
dataIndex: 'amount',
|
||||
width: 120,
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '交易描述',
|
||||
dataIndex: 'description'
|
||||
},
|
||||
{
|
||||
title: '交易号',
|
||||
dataIndex: 'transaction_id',
|
||||
width: 180
|
||||
}
|
||||
];
|
||||
|
||||
// 明细列表数据
|
||||
const detailsList = ref([]);
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => `共 ${total} 条记录`
|
||||
});
|
||||
|
||||
// 处理日期变化
|
||||
const handleDateChange = (dates, dateStrings) => {
|
||||
filterForm.start_date = dateStrings[0] || '';
|
||||
filterForm.end_date = dateStrings[1] || '';
|
||||
};
|
||||
|
||||
// 获取账户明细列表
|
||||
const fetchAccountDetails = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = {
|
||||
skip: (pagination.current - 1) * pagination.pageSize,
|
||||
limit: pagination.pageSize,
|
||||
...filterForm
|
||||
};
|
||||
|
||||
// 移除空值
|
||||
Object.keys(params).forEach(key => {
|
||||
if (params[key] === '' || params[key] === undefined) {
|
||||
delete params[key];
|
||||
}
|
||||
});
|
||||
|
||||
console.log('请求参数:', params);
|
||||
const response = await getAccountDetails(params);
|
||||
console.log('API返回数据:', response);
|
||||
|
||||
// 根据request.js的处理，response已经是data部分了
|
||||
detailsList.value = response?.items || [];
|
||||
pagination.total = response?.total || 0;
|
||||
console.log('处理后的列表数据:', detailsList.value);
|
||||
} catch (error) {
|
||||
console.error('获取账户明细失败:', error);
|
||||
message.error('获取账户明细失败，请稍后重试');
|
||||
detailsList.value = [];
|
||||
pagination.total = 0;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理查询
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1;
|
||||
fetchAccountDetails();
|
||||
};
|
||||
|
||||
// 处理重置
|
||||
const handleReset = () => {
|
||||
filterForm.start_date = '';
|
||||
filterForm.end_date = '';
|
||||
filterForm.type = undefined;
|
||||
dateRange.value = [];
|
||||
pagination.current = 1;
|
||||
fetchAccountDetails();
|
||||
};
|
||||
|
||||
// 处理表格变化（排序、分页）
|
||||
const handleTableChange = (pag) => {
|
||||
pagination.current = pag.current;
|
||||
pagination.pageSize = pag.pageSize;
|
||||
fetchAccountDetails();
|
||||
};
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
fetchAccountDetails();
|
||||
});
|
||||
|
||||
return {
|
||||
filterForm,
|
||||
dateRange,
|
||||
columns,
|
||||
detailsList,
|
||||
loading,
|
||||
pagination,
|
||||
handleDateChange,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handleTableChange,
|
||||
formatDate
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.account-details-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.income-amount {
|
||||
color: #52c41a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.expense-amount {
|
||||
color: #f5222d;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead > tr > th) {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style>
|
||||
@ -15,6 +15,9 @@
|
||||
<span class="currency">¥</span>
|
||||
<span class="value">{{ accountInfo.total_balance || '0.00' }}</span>
|
||||
</div>
|
||||
<div class="account-details-link">
|
||||
<a @click="goToAccountDetails">查看账户明细 <right-outlined /></a>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
@ -177,8 +180,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import {
|
||||
getAccountSummary,
|
||||
@ -191,8 +194,10 @@ import {
|
||||
WalletOutlined,
|
||||
LockOutlined,
|
||||
DollarOutlined,
|
||||
ReloadOutlined
|
||||
ReloadOutlined,
|
||||
RightOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { formatDate } from '../utils/format';
|
||||
|
||||
export default {
|
||||
name: 'Finance',
|
||||
@ -200,7 +205,8 @@ export default {
|
||||
WalletOutlined,
|
||||
LockOutlined,
|
||||
DollarOutlined,
|
||||
ReloadOutlined
|
||||
ReloadOutlined,
|
||||
RightOutlined
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
@ -354,13 +360,6 @@ export default {
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '-';
|
||||
const date = new Date(dateString);
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
// 获取状态颜色
|
||||
const getStatusColor = (status) => {
|
||||
const statusMap = {
|
||||
@ -385,6 +384,11 @@ export default {
|
||||
return statusMap[status] || '未知状态';
|
||||
};
|
||||
|
||||
// 跳转到账户明细页面
|
||||
const goToAccountDetails = () => {
|
||||
router.push('/finance/account-details');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
refreshData();
|
||||
});
|
||||
@ -409,7 +413,8 @@ export default {
|
||||
handleCancelWithdraw,
|
||||
formatDate,
|
||||
getStatusColor,
|
||||
getStatusText
|
||||
getStatusText,
|
||||
goToAccountDetails
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -466,10 +471,25 @@ export default {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.account-details-link {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.account-details-link a {
|
||||
color: #1890ff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.account-details-link a:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user