496 lines
14 KiB
Vue
496 lines
14 KiB
Vue
<template>
|
||
<div class="orders-container">
|
||
<div class="header">
|
||
<h2>订单管理</h2>
|
||
</div>
|
||
|
||
<div class="filters">
|
||
<el-form :inline="true" :model="filters" class="filter-form">
|
||
<el-form-item label="订单号">
|
||
<el-input
|
||
v-model="filters.orderNumber"
|
||
placeholder="请输入订单号"
|
||
clearable
|
||
@keyup.enter="loadOrders"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="用户名">
|
||
<el-input
|
||
v-model="filters.username"
|
||
placeholder="请输入用户名"
|
||
clearable
|
||
@keyup.enter="loadOrders"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="订单状态">
|
||
<el-select
|
||
v-model="filters.status"
|
||
placeholder="请选择状态"
|
||
clearable
|
||
style="display: inline-block; width: 150px"
|
||
>
|
||
<el-option label="待发货" value="pending" />
|
||
<el-option label="已发货" value="shipped" />
|
||
<el-option label="已完成" value="completed" />
|
||
<el-option label="已取消" value="cancelled" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="创建时间">
|
||
<el-date-picker
|
||
v-model="filters.dateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="loadOrders">搜索</el-button>
|
||
<el-button @click="resetFilters">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<el-table :data="orders" v-loading="loading" stripe>
|
||
<el-table-column prop="order_no" label="订单号" width="200" />
|
||
<el-table-column prop="username" label="用户" width="120" />
|
||
<el-table-column prop="total_points" label="总积分" width="100">
|
||
<template #default="{ row }">
|
||
<span class="points-text">{{ row.total_points }} 积分</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="total_rongdou" label="总融豆" width="100">
|
||
<template #default="{ row }">
|
||
<span class="points-text">{{ row.total_rongdou }} 融豆</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="status" label="状态" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag :type="getStatusType(row.status)">
|
||
{{ getStatusText(row.status) }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="created_at" label="创建时间" width="180">
|
||
<template #default="{ row }">
|
||
{{ formatDate(row.created_at) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="商品信息">
|
||
<template #default="{ row }">
|
||
<div class="order-items">
|
||
<div v-for="item in row.items" :key="item.id" class="order-item">
|
||
<el-image
|
||
:src="getImageUrl(item.image_url)"
|
||
fit="cover"
|
||
style="width: 40px; height: 40px; border-radius: 4px"
|
||
/>
|
||
<div class="item-info">
|
||
<div class="item-name">{{ item.product_name }}</div>
|
||
<div class="item-detail">
|
||
{{ item.points }}积分 × {{ item.quantity }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="producer" label="供应商">
|
||
<template #default="{ row }">
|
||
{{ row.producer || '平台发货' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="logistics_info" label="物流信息">
|
||
<template #default="{ row }">
|
||
快递单号：{{ row.delivery_code || '暂无' }}
|
||
<br>
|
||
物流公司：{{ row.logistics_company || '暂无' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="salesperson" label="分销员id">
|
||
<template #default="{ row }">
|
||
{{ row.salesperson || '无' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="200" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" size="small" @click="viewOrder(row)">
|
||
查看详情
|
||
</el-button>
|
||
<el-dropdown
|
||
v-if="row.status !== 'cancelled' && row.status !== 'completed'"
|
||
>
|
||
<el-button type="warning" size="small">
|
||
更新状态
|
||
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item
|
||
v-if="row.status === 'pending'"
|
||
@click="deliveryDialogVisible = true; selectedOrder = {id: row.id};"
|
||
>
|
||
标记为已发货
|
||
</el-dropdown-item>
|
||
<el-dropdown-item
|
||
v-if="row.status === 'shipped'"
|
||
@click="updateOrderStatus(row, 'completed')"
|
||
>
|
||
标记为已完成
|
||
</el-dropdown-item>
|
||
<el-dropdown-item
|
||
@click="updateOrderStatus(row, 'cancelled')"
|
||
divided
|
||
>
|
||
取消订单
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="pagination">
|
||
<el-pagination
|
||
v-model:current-page="pagination.page"
|
||
v-model:page-size="pagination.limit"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:total="pagination.total"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="loadOrders"
|
||
@current-change="loadOrders"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 订单详情对话框 -->
|
||
<el-dialog
|
||
v-model="dialogVisible"
|
||
title="订单详情"
|
||
width="800px"
|
||
:before-close="closeDialog"
|
||
>
|
||
<div v-if="selectedOrder" class="order-detail">
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="订单号">{{
|
||
selectedOrder.order_no
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="用户">{{
|
||
selectedOrder.username
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="总积分">
|
||
<span class="points-text"
|
||
>{{ selectedOrder.total_points }} 积分</span
|
||
>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="订单状态">
|
||
<el-tag :type="getStatusType(selectedOrder.status)">
|
||
{{ getStatusText(selectedOrder.status) }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="创建时间">{{
|
||
formatDate(selectedOrder.created_at)
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="更新时间">{{
|
||
formatDate(selectedOrder.updated_at)
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="物流单号">{{
|
||
selectedOrder.delivery_code || '暂无'
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="物流公司">{{
|
||
selectedOrder.logistics_company || '暂无'
|
||
}}</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<h4 style="margin: 20px 0 10px 0">商品清单</h4>
|
||
<el-table :data="selectedOrder.items" border>
|
||
<el-table-column label="商品图片" width="100">
|
||
<template #default="{ row }">
|
||
<el-image
|
||
:src="getImageUrl(row.image_url)"
|
||
fit="cover"
|
||
style="width: 60px; height: 60px; border-radius: 4px"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="product_name" label="商品名称" />
|
||
<el-table-column prop="points" label="单价">
|
||
<template #default="{ row }">
|
||
<span class="points-text">{{ row.points_price }} 积分 | {{ row.rongdou_price }} 融豆</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="quantity" label="数量" width="80" />
|
||
<el-table-column label="小计" width="120">
|
||
<template #default="{ row }">
|
||
<span class="points-text"
|
||
>{{ row.points_price * row.quantity }} 积分 | {{ row.rongdou_price * row.quantity }} 融豆</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-button type="primary" size="small" @click="deliveryDialogVisible = true; deliveryForm.id = selectedOrder.id;" class="delivery-btn" v-if="selectedOrder.status === 'pending'">
|
||
发货
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 发货对话框 -->
|
||
<el-dialog
|
||
v-model="deliveryDialogVisible"
|
||
title="发货"
|
||
width="400px"
|
||
:before-close="closeDialog"
|
||
>
|
||
<el-form :model="deliveryForm" :rules="deliveryRules" ref="deliveryFormRef">
|
||
<el-form-item label="物流公司" prop="logistics_company">
|
||
<el-input v-model="deliveryForm.logistics_company" placeholder="请输入物流公司名称" />
|
||
</el-form-item>
|
||
<el-form-item label="物流单号" prop="logistics_no">
|
||
<el-input v-model="deliveryForm.logistics_no" placeholder="请输入物流单号" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button type="primary" @click="updateOrderStatus(selectedOrder, 'shipped', deliveryForm.logistics_company, deliveryForm.logistics_no)">
|
||
提交发货
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||
import { ArrowDown } from '@element-plus/icons-vue';
|
||
import api from '@/utils/api';
|
||
import { getImageUrl } from '@/utils/config';
|
||
import dayjs from 'dayjs';
|
||
|
||
const loading = ref(false);
|
||
const orders = ref([]);
|
||
const dialogVisible = ref(false);
|
||
const deliveryDialogVisible = ref(false);
|
||
const selectedOrder = ref(null);
|
||
|
||
const filters = reactive({
|
||
orderNumber: '',
|
||
username: '',
|
||
status: '',
|
||
dateRange: null,
|
||
});
|
||
|
||
const pagination = ref({
|
||
page: 1,
|
||
limit: 20,
|
||
total: 0,
|
||
});
|
||
|
||
const deliveryForm = reactive({
|
||
logistics_company: '',
|
||
logistics_no: ''
|
||
});
|
||
|
||
// 加载订单列表
|
||
const loadOrders = async () => {
|
||
loading.value = true;
|
||
try {
|
||
const params = {
|
||
page: pagination.value.page,
|
||
limit: pagination.value.limit,
|
||
orderNumber: filters.orderNumber,
|
||
username: filters.username,
|
||
status: filters.status,
|
||
};
|
||
|
||
if (filters.dateRange && filters.dateRange.length === 2) {
|
||
params.startDate = filters.dateRange[0];
|
||
params.endDate = filters.dateRange[1];
|
||
}
|
||
|
||
const { data } = await api.get('/orders', { params });
|
||
orders.value = data.data.orders;
|
||
pagination.value.total = data.data.pagination.total;
|
||
} catch (error) {
|
||
ElMessage.error('加载订单列表失败');
|
||
console.error('加载订单列表失败:', error);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
// 重置筛选条件
|
||
const resetFilters = () => {
|
||
Object.assign(filters, {
|
||
orderNumber: '',
|
||
username: '',
|
||
status: '',
|
||
dateRange: null,
|
||
});
|
||
pagination.page = 1;
|
||
loadOrders();
|
||
};
|
||
|
||
// 查看订单详情
|
||
const viewOrder = async (order) => {
|
||
try {
|
||
const { data } = await api.get(`/orders/${order.id}`);
|
||
selectedOrder.value = data.data.order;
|
||
dialogVisible.value = true;
|
||
} catch (error) {
|
||
ElMessage.error('加载订单详情失败');
|
||
}
|
||
};
|
||
|
||
// 更新订单状态
|
||
const updateOrderStatus = async (order, newStatus, logistics_company, logistics_no) => {
|
||
const statusText = getStatusText(newStatus);
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
`确定要将订单状态更新为「${statusText}」吗？`,
|
||
'确认操作',
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}
|
||
);
|
||
await api.put(`/orders/${order.id}/status`, { status: newStatus, logistics_company: logistics_company, logistics_no: logistics_no });
|
||
ElMessage.success('订单状态更新成功');
|
||
loadOrders();
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
console.log('更新订单状态失败:', error);
|
||
ElMessage.error('更新订单状态失败');
|
||
}
|
||
}
|
||
};
|
||
|
||
// 关闭对话框
|
||
const closeDialog = () => {
|
||
dialogVisible.value = false;
|
||
deliveryDialogVisible.value = false;
|
||
deliveryForm.value = {
|
||
logistics_company: '',
|
||
logistics_no: '',
|
||
id: '',
|
||
};
|
||
selectedOrder.value = null;
|
||
};
|
||
|
||
// 获取状态类型
|
||
const getStatusType = (status) => {
|
||
const types = {
|
||
pending: 'warning',
|
||
shipped: 'primary',
|
||
completed: 'success',
|
||
cancelled: 'danger',
|
||
};
|
||
return types[status] || 'info';
|
||
};
|
||
|
||
// 获取状态文本
|
||
const getStatusText = (status) => {
|
||
const texts = {
|
||
pending: '待发货',
|
||
shipped: '已发货',
|
||
pre_order: '待支付',
|
||
cancelled: '已取消',
|
||
completed: '已完成',
|
||
};
|
||
return texts[status] || status;
|
||
};
|
||
|
||
const deliveryRules = reactive({
|
||
logistics_company: [{ required: true, message: '请输入物流公司名称', trigger: 'blur' }],
|
||
logistics_no: [{ required: true, message: '请输入物流单号', trigger: 'blur' }],
|
||
});
|
||
|
||
// 格式化日期
|
||
const formatDate = (dateString) => {
|
||
return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss');
|
||
};
|
||
|
||
onMounted(() => {
|
||
loadOrders();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.orders-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.header h2 {
|
||
margin: 0;
|
||
color: #303133;
|
||
}
|
||
|
||
.filters {
|
||
background: #f5f7fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.filter-form {
|
||
margin: 0;
|
||
}
|
||
|
||
.points-text {
|
||
color: #e6a23c;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.order-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.order-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.item-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 14px;
|
||
color: #303133;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.item-detail {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
|
||
.order-detail {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.pagination {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.delivery-btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|