增加在线买单列表
This commit is contained in:
aaron
parent
8a934ca93d
commit
ebad62338b
@ -35,6 +35,9 @@
|
||||
<a-menu-item key="order-delivery">
|
||||
<router-link to="/order/delivery">配送订单</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="order-online">
|
||||
<router-link to="/order/online">买单订单</router-link>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
|
||||
<a-sub-menu key="finance">
|
||||
@ -208,6 +211,11 @@ export default defineComponent({
|
||||
key: 'order-delivery',
|
||||
title: '配送订单',
|
||||
path: '/order/delivery'
|
||||
},
|
||||
{
|
||||
key: 'order-online',
|
||||
title: '买单订单',
|
||||
path: '/order/online'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -87,6 +87,11 @@ const routes = [
|
||||
path: 'delivery',
|
||||
component: () => import('@/views/order/DeliveryList.vue'),
|
||||
meta: { title: '配送订单' }
|
||||
},
|
||||
{
|
||||
path: 'online',
|
||||
component: () => import('@/views/order/OnlineList.vue'),
|
||||
meta: { title: '买单订单' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
324
src/views/order/OnlineList.vue
Normal file
324
src/views/order/OnlineList.vue
Normal file
@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<page-container>
|
||||
<div class="online-list">
|
||||
<div class="table-header">
|
||||
<h1>买单订单列表</h1>
|
||||
</div>
|
||||
|
||||
<!-- 过滤区域 -->
|
||||
<div class="table-filter">
|
||||
<a-form layout="inline">
|
||||
<a-form-item label="订单号">
|
||||
<a-input
|
||||
v-model:value="filterForm.order_id"
|
||||
placeholder="请输入订单号"
|
||||
style="width: 200px"
|
||||
allowClear
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="用户ID">
|
||||
<a-input
|
||||
v-model:value="filterForm.user_id"
|
||||
placeholder="请输入用户ID"
|
||||
style="width: 200px"
|
||||
allowClear
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="商家ID">
|
||||
<a-input
|
||||
v-model:value="filterForm.merchant_id"
|
||||
placeholder="请输入商家ID"
|
||||
style="width: 200px"
|
||||
allowClear
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="订单状态">
|
||||
<a-select
|
||||
v-model:value="filterForm.status"
|
||||
style="width: 200px"
|
||||
placeholder="请选择状态"
|
||||
allowClear
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<a-select-option value="UNPAID">未支付</a-select-option>
|
||||
<a-select-option value="PAID">已支付</a-select-option>
|
||||
<a-select-option value="REFUNDING">退款中</a-select-option>
|
||||
<a-select-option value="REFUNDED">已退款</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
查询
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 订单状态列 -->
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="getStatusColor(record.status)">
|
||||
{{ getStatusText(record.status) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<!-- 金额列 -->
|
||||
<template v-if="column.key === 'amount'">
|
||||
¥{{ record.amount }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import PageContainer from '@/components/PageContainer.vue'
|
||||
import request from '@/utils/request'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PageContainer
|
||||
},
|
||||
setup() {
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
|
||||
const filterForm = ref({
|
||||
order_id: '',
|
||||
user_id: '',
|
||||
merchant_id: '',
|
||||
status: undefined
|
||||
})
|
||||
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => `共 ${total} 条记录`
|
||||
})
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '订单号',
|
||||
dataIndex: 'order_id',
|
||||
key: 'order_id',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '商家ID',
|
||||
dataIndex: 'merchant_id',
|
||||
key: 'merchant_id',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '商家名称',
|
||||
dataIndex: 'merchant_name',
|
||||
key: 'merchant_name',
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'user_id',
|
||||
key: 'user_id',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '支付金额',
|
||||
dataIndex: 'amount',
|
||||
key: 'amount',
|
||||
width: 120,
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '获得积分',
|
||||
dataIndex: 'gift_points',
|
||||
key: 'gift_points',
|
||||
width: 100,
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '订单状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'create_time',
|
||||
key: 'create_time',
|
||||
width: 180
|
||||
}
|
||||
]
|
||||
|
||||
// 获取订单列表
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
// 构建基础参数
|
||||
const params = {
|
||||
skip: (pagination.value.current - 1) * pagination.value.pageSize,
|
||||
limit: pagination.value.pageSize
|
||||
}
|
||||
|
||||
// 只在有值时添加筛选参数
|
||||
if (filterForm.value.order_id?.trim()) {
|
||||
params.order_id = filterForm.value.order_id.trim()
|
||||
}
|
||||
|
||||
if (filterForm.value.user_id?.trim()) {
|
||||
params.user_id = filterForm.value.user_id.trim()
|
||||
}
|
||||
|
||||
if (filterForm.value.merchant_id?.trim()) {
|
||||
params.merchant_id = filterForm.value.merchant_id.trim()
|
||||
}
|
||||
|
||||
if (filterForm.value.status) {
|
||||
params.status = filterForm.value.status
|
||||
}
|
||||
|
||||
const res = await request.get('/api/merchant-pay/admin/list', { params })
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.items
|
||||
pagination.value.total = res.data.total
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取订单列表失败:', error)
|
||||
message.error('获取订单列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
'UNPAID': '未支付',
|
||||
'PAID': '已支付',
|
||||
'REFUNDING': '退款中',
|
||||
'REFUNDED': '已退款'
|
||||
}
|
||||
return statusMap[status] || status
|
||||
}
|
||||
|
||||
// 获取状态标签颜色
|
||||
const getStatusColor = (status) => {
|
||||
const colorMap = {
|
||||
'UNPAID': 'orange',
|
||||
'PAID': '#87d068',
|
||||
'REFUNDING': '#faad14',
|
||||
'REFUNDED': '#2db7f5'
|
||||
}
|
||||
return colorMap[status] || 'default'
|
||||
}
|
||||
|
||||
// 表格变化处理
|
||||
const handleTableChange = (pag) => {
|
||||
pagination.value.current = pag.current
|
||||
pagination.value.pageSize = pag.pageSize
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 过滤条件变化
|
||||
const handleFilterChange = () => {
|
||||
pagination.value.current = 1
|
||||
}
|
||||
|
||||
// 搜索按钮点击
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 重置按钮点击
|
||||
const handleReset = () => {
|
||||
filterForm.value = {
|
||||
order_id: '',
|
||||
user_id: '',
|
||||
merchant_id: '',
|
||||
status: undefined
|
||||
}
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
|
||||
return {
|
||||
loading,
|
||||
columns,
|
||||
tableData,
|
||||
pagination,
|
||||
filterForm,
|
||||
handleTableChange,
|
||||
handleFilterChange,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
getStatusText,
|
||||
getStatusColor
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-filter {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-tag) {
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user