1. 效果图

因为有时候，客户只是需要我们帮助其修改地址，那么就无需跳转到另一个页面来修改地址，直接点击修改地址按钮，订单列表中的“发货地址”就会随之变化。

另外，在修改订单页面，我也进行了补充：

2. 具体实现

在Order.vue中增加代码：

1。先修改页面布局，并且为按钮绑定事件
以及修改地址的对话框，为“确定”按钮添加事件：

代码如下：

  <el-table-column prop="consignee_addr" label="发货地址"></el-table-column>

<el-tooltip effect="dark"content="修改地址" placement="top" :enterable="false"><el-button size="mini"icon="el-icon-edit" circle @click="editAddress(scope.row.order_id)"></el-button></el-tooltip>

2。点击 “修改地址” 这一按钮时，其实是要发送查询请求的，当选择完地址，填写完详细地址，点击“确定”，要做的才是修改地址。

在methods节点下面加入代码如下：

 // 点击修改订单地址按钮触发的事件async editAddress (id) {this.addressVisible = truethis.orderId = idconst { data: res1 } = await this.$http.get('orders/' + id)this.orderInfo = res1.dataconsole.log(this.orderInfo)},// 修改地址，并刷新页面async edit () {const { data: res } = await this.$http.put('orders/' + this.orderId, {order_price: this.orderInfo.order_price,consignee_addr: this.addressForm.address1 + ' ' + this.addressForm.address2})console.log(res)if (res.meta.status !== 201) {return this.$message.error('修改订单失败!')}this.$message.success('修改订单成功!')this.getOrderList()this.addressVisible = false}

关于修改订单 OrderEdit.vue，加入几行代码即可：

 <!-- 表单区域 --><el-form :model="orderForm" label-width="80px"ref="orderFormRef"><el-form-item label="订单编号"><el-input v-model="orderForm.order_number" disabled></el-input></el-form-item><el-form-item label="是否发货"><p style="font-size:15px">1表示发货,0表示不发货</p><el-input v-model="orderForm.is_send"></el-input></el-form-item><el-form-item label="支付状态"><p style="font-size:15px">0表示 未支付, 1表示支付宝, 2表示微信, 3表示银行卡</p><el-input v-model="orderForm.order_pay"></el-input></el-form-item><el-form-item label="发票抬头"><p style="font-size:15px">'个人' 或者 '公司'</p><el-input v-model="orderForm.order_fapiao_title"></el-input></el-form-item><el-form-item label="发票内容"><el-input v-model="orderForm.order_fapiao_content"></el-input></el-form-item><el-form-item label="公司名称"><el-input v-model="orderForm.order_fapiao_company" ></el-input></el-form-item><el-form-item label="订单价格"><el-input v-model="orderForm.order_price"></el-input></el-form-item></el-form><el-button type="primary" @click="edit">修改订单</el-button>

后续，还会继续完善订单模块，比如：在订单详情页面，也就是修改订单页面，加入该订单包含的商品信息等。

10.3 黑马Vue电商后台管理系统进一步完善订单模块--修改发货地址相关推荐

10.1 黑马Vue电商后台管理系统之完善订单管理模块--加入修改订单模块
效果如下: 实现如下: 1.我仍然保留了添加地址这一个对话框,但只是绑定在另一个按钮上面,而点击左侧第一个按钮就会跳转到"修改订单"模块 <template v-slot=& ...
10.2 黑马Vue电商后台管理系统完善订单模块--搜索订单（修改后端）
效果如下: 搜索时列表动态变化,在我专栏下另一篇文章写了,这篇文章不再讲述,这篇文章只讲述如何从后端(打开vue_api_server这个文件夹,而不是vue_shop)修改代码来实现这个功能我的思 ...
9.1黑马Vue电商后台管理系统商品管理模块完善：编辑商品的功能
在原视频中,老师跳过了这个功能,我觉得自己去实现也可以锻炼自己,于是自己补充了编辑功能同用户管理,权限管理等之前各个模块的编辑功能不同,因为商品具有很多可编辑的选项,所以选择像添加商品一样,单独放在 ...
Vue电商后台管理系统（1）
Vue电商后台管理系统(1) 登录在components文件夹下创建登录组件,Login.vue,并快速生成template.script和style骨架. 配置路由,进入router文件夹,导入L ...
Vue项目实战之电商后台管理系统(一) 用户登录模块
目录一.项目概述二.项目初始化 2.1 前端项目初始化步骤 2.2 后台项目的环境安装配置三.用户登录/登出功能实现 3.1 登录功能概述 3.1.1 登录状态保持 3.1.2 登录逻辑: 3. ...
Vue电商后台管理系统项目开发实战（一）
前言当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式.如下图. 不同的客户端共用同一个服务器,数据库,API.本次项目着重设计PC后台管理,供电商后台管 ...
关于黑马-Vue电商后台项目管理（2）
2.2 后台项目的环境安装配置安装MySQL数据库关于数据库文件,黑马教程有提供一个叫phpstudy的软件,可以按照视频流程进行配置,但是之后可能会经常出现在该软件无法启动mysql.因此我们这 ...
vue电商后台管理系统--订单管理篇
渲染订单table表格 <el-table :data="orderList" border stripe><el-ta ...
Vue全家桶 - 电商后台管理系统项目开发实录（详）
目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤码云相关操作 2. ...
【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面
文章目录 0. 项目介绍电商管理系统(Element-UI) 开发模式前端技术栈后端技术栈 1. 配置--初始化前端项目 ① 安装 Vue 脚手架 ② 通过 Vue 脚手架创建项目 ③ 配置 ...

10.3 黑马Vue电商后台管理系统进一步完善订单模块--修改发货地址

1. 效果图

2. 具体实现

10.3 黑马Vue电商后台管理系统进一步完善订单模块--修改发货地址相关推荐

最新文章

热门文章

10.3 黑马Vue电商后台管理系统 进一步完善订单模块--修改发货地址

1. 效果图

2. 具体实现

10.3 黑马Vue电商后台管理系统 进一步完善订单模块--修改发货地址相关推荐

最新文章

热门文章

10.3 黑马Vue电商后台管理系统进一步完善订单模块--修改发货地址

10.3 黑马Vue电商后台管理系统进一步完善订单模块--修改发货地址相关推荐