| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
文章目录
🚀前言
在电商行业中，订单管理模块是后台管理系统的核心组成部分之一。它直接关系到商家的运营效率和客户的购物体验。一个高效的订单管理模块不仅能够帮助商家实时追踪订单状态，减少处理时间，还能提升客户满意度，实现更好的业务增长。
本文将深入探讨电商后台管理系统中订单管理模块的开发实战。我们将从功能需求分析入手，逐步构建一个完整的订单管理模块，包括订单的创建、查看、修改、删除，以及订单状态的更新和搜索功能等。
🚀一、订单管理模块的开发
🔎1.使用 Mock.js 进行模拟数据的生成
Mock.js 是一款基于 JavaScript 的小巧的模拟数据生成器。在 Vue 项目中，我们可以使用 Mock.js 生成随机数据，方便在前端开发过程中调试页面功能。
🦋1.1 安装 Mock.js 模块
首先，在项目中安装 Mock.js 模块：
npm install mockjs --save
🦋1.2 创建 Mock 数据文件
安装完成后，在项目的 src 文件夹下新建一个名为 mock 的子文件夹，在其中新建一个名为 Mock.js 的文件，编写代码如下：
// src/mock/Mock.js
import mockjs from "mockjs";
const Mock = {
// 模拟获取订单数据
// type: 订单类型。0 为普通订单，1 为秒杀订单
getOrder(type) {
let array = [];
for (let i = 0; i < mockjs.Random.integer(5, 10); i++) {
array.push(mockjs.mock({
'name': type === 0 ? '普通商品' : '秒杀商品' + i,
'price': mockjs.Random.integer(20, 500) + '元',
'buyer': mockjs.Random.cname(),
'time': mockjs.Random.datetime('yyyy-MM-dd A HH:mm:ss'),
'role': mockjs.Random.boolean(),
'state': mockjs.Random.boolean(),
'payType': mockjs.Random.boolean(),
'source': mockjs.Random.url(),
'phone': mockjs.mock(/\d{11}/)
}));
}
return array;
}
};
export default Mock;
如以上代码提供了一个获取订单列表的 getOrder 方法，该方法将返回生成的模拟数据。关于 Mock.js 模块的使用语法，本书中不做详细的介绍，读者只需了解通过上面的方法将返回一组模拟的订单数据即可。现在，尝试运行该项目，在控制台打印 getOrder 方法返回的数据，可以体会到 Mock.js 模块的强大之处。
🔎2.编写工具类与全局样式
在编写具体的功能模块前，我们先分析一下这些功能模块是否有通用的部分。有些样式是通用的，例如容器样式、输入框样式等，我们可以将这些通用的样式定义为全局样式，这样在之后编写其他功能模块时就会方便很多。另外，对于一些工具方法，我们也可以将其整合到一个单独的 JavaScript 模块中，方便复用。
🦋2.1 全局样式
首先在 App.vue 文件中编写如下样式代码，这些 CSS 样式都是全局生效的：
<!-- src/App.vue -->
<style>
body {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
.content-container {
background-color: white;
padding: 20px;
margin: 20px;
border-radius: 10px;
min-width: 1200px;
display: inline-block;
width: 90%;
}
.input-tip {
margin: 0 10px;
line-height: 40px;
}
.input-field {
margin-right: 40px;
}
.content-row {
margin-bottom: 20px;
}
</style>
后面在编写 HTML 模板时，对于这些通用的样式直接使用即可。
🦋2.2 工具类
在工程的 tools 文件夹下新建一个名为 Tools.js 的文件，编写代码如下：
// src/tools/Tools.js
const Tools = {
// 导出文件
exportJson(name, data) {
var blob = new Blob([data]); // 创建 blob 对象
var link = document.createElement("a");
link.href = URL.createObjectURL(blob); // 创建一个 URL 对象并传给 a 元素的 href
link.download = name; // 设置下载的默认文件名
link.click();
}
};
export default Tools;
我们暂时只实现一个导出 JSON 文件的方法，在订单管理模块的订单导出相关功能中会使用这个方法。
🔎3.订单管理页面
在 Order.vue 文件中，我们可以看到完整的示例代码。下面是详细整理后的代码和注释：
<script setup>
import Mock from '../../mock/Mock'
import Tools from '../../tools/Tools'
import { ref, onMounted } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { ElMessage } from 'element-plus'
// 路由对象
const route = useRoute()
// 订单列表数据
const orderList = ref([])
// 筛选订单的参数
const queryParam = ref({
goods: "",
consignee: "",
phone: "",
name: "",
payTime: "",
sendTime: ""
})
// 当前选中的订单对象
const multipleSelection = ref([])
// 组件加载时获取数据
onMounted(() => {
orderList.value = Mock.getOrder(route.params.type)
})
// 路由更新时刷新数据
onBeforeRouteUpdate((to) => {
orderList.value = Mock.getOrder(to.params.type)
})
// 模拟请求数据
function requestData() {
ElMessage({
type: 'success',
message: '筛选请求参数:' + JSON.stringify(queryParam.value)
})
orderList.value = Mock.getOrder(route.params.type)
}
// 切换 tab 刷新数据
function handleClick(tab) {
ElMessage({
type: 'success',
message: '切换tab刷新数据:' + tab.props.label
})
orderList.value = Mock.getOrder(route.params.type)
}
// 清空筛选项
function clear() {
queryParam.value = {
goods: "",
consignee: "",
phone: "",
name: "",
payTime: "",
sendTime: ""
}
orderList.value = Mock.getOrder(route.params.type)
}
// 导出订单
function exportData() {
Tools.exportJson('订单.json', JSON.stringify(orderList.value))
}
// 导出选中的发货单
function exportDispatchGoods() {
Tools.exportJson('发货单.json', JSON.stringify(multipleSelection.value))
}
// 处理多选
function handleSelectionChange(val) {
multipleSelection.value = val
}
// 进行发货
function dispatchGoods() {
ElMessage({
type: 'success',
message: '发货商品:' + JSON.stringify(multipleSelection.value)
})
}
// 删除订单
function deleteItem(index) {
orderList.value.splice(index, 1)
}
// 联系用户
function callUser(item) {
ElMessage({
type: 'success',
message: '联系客户:' + item.phone
})
}
</script>
<template>
<div class="content-container" direction="vertical">
<!-- Input -->
<div>
<el-container class="content-row">
<div class="input-tip">商品名称:</div>
<div class="input-field">
<el-input v-model="queryParam.goods"></el-input>
</div>
<div class="input-tip">收货人:</div>
<div class="input-field">
<el-input v-model="queryParam.consignee"></el-input>
</div>
<div class="input-tip">支付时间:</div>
<div class="input-field">
<el-date-picker
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
v-model="queryParam.payTime">
</el-date-picker>
</div>
</el-container>
<el-container class="content-row">
<div class="input-tip">用户名称:</div>
<div class="input-field">
<el-input v-model="queryParam.name"></el-input>
</div>
<div class="input-tip">手机号:</div>
<div class="input-field">
<el-input v-model="queryParam.phone"></el-input>
</div>
<div class="input-tip">发货时间:</div>
<div class="input-field">
<el-date-picker
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
v-model="queryParam.sendTime">
</el-date-picker>
</div>
</el-container>
</div>
<div class="content-row">
<el-container>
<el-button type="primary" @click="requestData">筛选</el-button>
<el-button type="danger" @click="clear">清空筛选</el-button>
<el-button type="primary" @click="exportData">导出</el-button>
<el-button type="primary" @click="dispatchGoods">批量发货</el-button>
<el-button type="primary" @click="exportDispatchGoods">下载批量发货单</el-button>
</el-container>
</div>
<!-- List -->
<div>
<el-tabs type="card" @tab-click="handleClick">
<el-tab-pane label="全部"></el-tab-pane>
<el-tab-pane label="未支付"></el-tab-pane>
<el-tab-pane label="已支付"></el-tab-pane>
<el-tab-pane label="待发货"></el-tab-pane>
<el-tab-pane label="已发货"></el-tab-pane>
<el-tab-pane label="支付超时"></el-tab-pane>
</el-tabs>
<el-table
ref="multipleTable"
:data="orderList"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="商品" width="100" prop="name"></el-table-column>
<el-table-column label="总价/数量" width="100" prop="price"></el-table-column>
<el-table-column label="买家信息" width="100" prop="buyer"></el-table-column>
<el-table-column label="交易时间" width="200" prop="time"></el-table-column>
<el-table-column label="分销信息" width="100">
<template #default="scope">
<el-tag>{{ scope.row.role ? '经理' : '分销员' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" width="100">
<template #default="scope">
<el-tag :type="scope.row.state ? 'success' : 'danger'">
{{ scope.row.state ? '已完成' : '未完成' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button size="small" type="danger" @click="deleteItem(scope.$index)">删除</el-button>
<el-button size="small" type="primary" @click="callUser(scope.row)">联系客户</el-button>
</template>
</el-table-column>
<el-table-column label="支付方式" width="100">
<template #default="scope">
<el-tag size="default">{{ scope.row.payType ? '微信' : '支付宝' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="来源" width="200" prop="source"></el-table-column>
</el-table>
</div>
</div>
</template>
🦋3.1 代码详细解析
-
模块导入：
Mock和Tools模拟数据和工具函数的导入。- Vue 和 Vue Router 的相关函数和
Element Plus消息组件的导入。
-
数据定义：
route获取当前路由对象。orderList存储订单列表数据。queryParam存储筛选订单的参数。multipleSelection存储当前选中的订单对象。
-
生命周期钩子：
onMounted：组件加载时获取当前订单数据。onBeforeRouteUpdate：路由更新时刷新订单数据。
-
方法定义：
requestData：模拟请求数据并更新订单列表。handleClick：处理 Tab 切换事件，刷新数据。clear：清空筛选项并刷新订单列表。exportData：导出订单数据为 JSON 文件。exportDispatchGoods：导出选中的发货单数据为 JSON 文件。handleSelectionChange：处理多选事件，更新选中的订单。dispatchGoods：模拟发货操作。deleteItem：删除订单。callUser：联系客户。
-
模板定义：
- 各种输入框和按钮，用于筛选和操作订单。
el-tabs和el-table用于展示和操作订单列表。
上述代码中没有特别复杂的逻辑，并且每个方法的功能都有注释。运行工程后，你可以尝试体验订单管理的各个功能，虽然所需的数据都是模拟的，但整个交互流程已经非常完善。
扫一扫
1233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
