diff --git a/src/views/Transfers.vue b/src/views/Transfers.vue
index 6463e84..7008e5b 100644
--- a/src/views/Transfers.vue
+++ b/src/views/Transfers.vue
@@ -5,9 +5,6 @@
货款管理
-
-
-
@@ -69,6 +66,17 @@
已回款
+
+
+
+
+ 确认收到回款
+
+
@@ -122,7 +130,7 @@
@click="statusFilter = ''"
>
全部
- {{ totalCount }}
+ {{ pagination.total }}
+
+
+
@@ -292,6 +314,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -311,24 +372,11 @@ const userStore = useUserStore()
const loading = ref(false)
const submitLoading = ref(false)
const confirmLoading = ref(false)
-const showCreateTransfer = ref(false)
const showVoucherDialog = ref(false)
+const showReturnDialog = ref(false)
const statusFilter = ref('')
const currentTransfer = ref({})
const currentAllocation = ref({})
-const confirmFormRef = ref(null)
-
-const confirmForm = reactive({
- confirmedAmount: '',
- remarks: ''
-})
-
-const confirmRules = {
- confirmedAmount: [
- { required: true, message: '请输入实际收到的金额', trigger: 'blur' },
- { type: 'number', min: 0, message: '金额必须大于0', trigger: 'blur' }
- ]
-}
const pendingTransfers = ref([])
const pendingAllocations = ref([])
@@ -336,26 +384,48 @@ const allTransferHistory = ref([])
const filteredTransferHistory = ref([])
const userList = ref([])
-// 移动端检测
+const pagination = reactive({
+ page: 1,
+ limit: 10,
+ total: 0
+})
+
+const returnForm = reactive({
+ returnAmount: '',
+ description: ''
+})
+
+// 移动端检测和分页布局
const windowWidth = ref(window.innerWidth)
const isMobile = computed(() => {
return windowWidth.value <= 768
})
+const paginationLayout = computed(() => {
+ if (windowWidth.value <= 480) {
+ return 'prev, pager, next'
+ } else if (windowWidth.value <= 768) {
+ return 'total, prev, pager, next'
+ } else {
+ return 'total, sizes, prev, pager, next, jumper'
+ }
+})
+
// 计算属性
-const totalCount = computed(() => allTransferHistory.value.length)
const pendingCount = computed(() => {
return allTransferHistory.value.filter(t =>
t.status === 'pending' &&
t.to_user_id === userStore.user.id
).length
})
+
const confirmedCount = computed(() => {
return allTransferHistory.value.filter(t =>
t.status === 'confirmed'
).length
})
+
const rejectedCount = computed(() => {
return allTransferHistory.value.filter(t =>
t.status === 'rejected'
@@ -382,22 +452,11 @@ onUnmounted(() => {
// 监听状态筛选
watch(statusFilter, () => {
- filteredTransferHistory.value = filterTransfers(allTransferHistory.value)
+ pagination.page = 1
+ loadTransferHistory()
})
// 方法
-const filterTransfers = (transfers) => {
- if (!statusFilter.value) return transfers
-
- return transfers.filter(transfer => {
- if (statusFilter.value === 'pending') {
- return transfer.status === 'pending' &&
- transfer.to_user_id === userStore.user.id
- }
- return transfer.status === statusFilter.value
- })
-}
-
const loadPendingTransfers = async () => {
try {
const response = await api.get('/transfers/pending', {
@@ -431,10 +490,21 @@ const loadPendingAllocations = async () => {
const loadTransferHistory = async () => {
try {
loading.value = true
- const response = await api.get(`/transfers/user/${userStore.user.id}`)
+ const params = {
+ page: pagination.page,
+ limit: pagination.limit
+ }
+
+ if (statusFilter.value) {
+ params.status = statusFilter.value
+ }
+
+ const response = await api.get(`/transfers/user/${userStore.user.id}`, { params })
if (response.data.success) {
allTransferHistory.value = response.data.data.transfers || []
- filteredTransferHistory.value = filterTransfers(allTransferHistory.value)
+ filteredTransferHistory.value = allTransferHistory.value
+ pagination.total = response.data.data.pagination?.total || 0
+ console.log(allTransferHistory.value)
}
} catch (error) {
console.error('加载转账记录失败:', error)
@@ -504,7 +574,8 @@ const getStatusText = (status) => {
confirmed: '已确认',
rejected: '已拒绝',
received: '已收款',
- not_received: '未收到款'
+ not_received: '未收到款',
+ cancelled: '已取消'
}
return texts[status] || '未知'
}
@@ -560,36 +631,31 @@ const canConfirmReturn = (allocation) => {
return now >= canReturnTime
}
-const confirmReturn = async (allocation) => {
+const showReturnConfirmDialog = (allocation) => {
+ currentAllocation.value = allocation
+ returnForm.returnAmount = allocation.amount
+ returnForm.description = `匹配订单 ${allocation.matching_order_id} 回款确认`
+ showReturnDialog.value = true
+}
+
+const confirmReturn = async () => {
try {
- await ElMessageBox.confirm(
- `确定已收到¥${allocation.amount}回款吗?`,
- '确认回款',
- {
- confirmButtonText: '确认',
- cancelButtonText: '取消',
- type: 'warning'
- }
- )
-
confirmLoading.value = true
- const response = await api.post(`/matching/confirm-return/${allocation.id}`, {
- returnAmount: allocation.amount,
- description: `匹配订单 ${allocation.matching_order_id} 回款确认`
+ const response = await api.post(`/matching/confirm-return/${currentAllocation.value.id}`, {
+ returnAmount: returnForm.returnAmount,
+ description: returnForm.description
})
if (response.data.success) {
ElMessage.success('回款确认成功')
+ showReturnDialog.value = false
await loadPendingAllocations()
await loadTransferHistory()
}
} catch (error) {
- if (error !== 'cancel') {
- console.error('确认回款失败:', error)
- const errorMsg = error.response?.data?.message || '确认回款失败'
- ElMessage.error(errorMsg)
- }
+ console.error('确认回款失败:', error)
+ ElMessage.error(error.response?.data?.message || '确认回款失败')
} finally {
confirmLoading.value = false
}
@@ -777,7 +843,7 @@ const confirmNotReceived = async (transferId) => {
.transfer-item.confirmed {
border-color: #67c23a;
- background: #f0f9ff;
+ background: #f0f9eb;
}
.transfer-item.rejected {
@@ -917,30 +983,32 @@ const confirmNotReceived = async (transferId) => {
font-weight: 500;
}
-.return-time-status {
- font-size: 13px;
- font-weight: 500;
- margin-top: 4px;
+.return-info {
+ margin-top: 8px;
+ padding-top: 8px;
+ border-top: 1px dashed #ebeef5;
}
-.return-time-status.can-return {
+.return-time.can-return {
color: #67c23a;
+ font-weight: 500;
}
-.return-time-status.waiting {
+.return-time.waiting {
color: #e6a23c;
}
-.return-time-status.normal {
- color: #909399;
+.return-status.can-return {
+ color: #67c23a;
+ font-weight: 500;
}
-.transfer-header .el-tag {
- margin-left: 8px;
- font-size: 11px;
- height: 20px;
- line-height: 18px;
- padding: 0 6px;
+.return-status.waiting {
+ color: #e6a23c;
+}
+
+.return-action {
+ margin-top: 10px;
}
.empty-state {
@@ -1033,15 +1101,8 @@ const confirmNotReceived = async (transferId) => {
}
}
}
-
-.confirm-form {
- margin-top: 20px;
- padding: 16px;
- background-color: #f8f9fa;
- border-radius: 8px;
-}
-
+/* 移动端适配 */
@media (max-width: 768px) {
.status-filter-nav {
overflow-x: auto;
@@ -1049,7 +1110,7 @@ const confirmNotReceived = async (transferId) => {
padding-bottom: 5px;
.filter-item {
- min-width: 80px;
+ min-width: 80px; // 在移动端保持最小宽度
flex: none;
padding: 6px 0;
@@ -1117,4 +1178,11 @@ const confirmNotReceived = async (transferId) => {
border-radius: 12px 12px 0 0 !important;
}
}
+
+.pagination {
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+}
+
\ No newline at end of file