网站建设与管理的实训报告_企业所得税政策最新2023_汕头seo全网营销_市场监督管理局

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

文章目录

🚀前言
🚀一、订单管理模块的开发
- 🔎1.使用 Mock.js 进行模拟数据的生成
- - 🦋1.1 安装 Mock.js 模块
  - 🦋1.2 创建 Mock 数据文件
- 🔎2.编写工具类与全局样式
- - 🦋2.1 全局样式
  - 🦋2.2 工具类
- 🔎3.订单管理页面
- - 🦋3.1 代码详细解析

🚀前言

在电商行业中，订单管理模块是后台管理系统的核心组成部分之一。它直接关系到商家的运营效率和客户的购物体验。一个高效的订单管理模块不仅能够帮助商家实时追踪订单状态，减少处理时间，还能提升客户满意度，实现更好的业务增长。

本文将深入探讨电商后台管理系统中订单管理模块的开发实战。我们将从功能需求分析入手，逐步构建一个完整的订单管理模块，包括订单的创建、查看、修改、删除，以及订单状态的更新和搜索功能等。

🚀一、订单管理模块的开发

🔎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 元素的 hreflink.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-pickertype="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-pickertype="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-tableref="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 用于展示和操作订单列表。

上述代码中没有特别复杂的逻辑，并且每个方法的功能都有注释。运行工程后，你可以尝试体验订单管理的各个功能，虽然所需的数据都是模拟的，但整个交互流程已经非常完善。