1. 实现效果如下：

2. 具体实现

1。先将OrderEdit.vue页面中的表格布局弄出来，表格布局在面包屑导航下面，以及把对应的数据，图片渲染出来：

代码如下：

 <!-- 表格区域 --><el-table border :data="goodsInfo" stripe><el-table-column type="index" label="#"></el-table-column><el-table-column prop="pics[0].pics_sma_url"label="商品图片"><template v-slot="scope"><el-imagestyle="width: 150px; height: 150px":src="scope.row.pics[0].pics_sma_url"></el-image></template></el-table-column><el-table-column prop="goods_name" label="商品名称"></el-table-column><el-table-column prop="goods_price" label="商品价格"></el-table-column><el-table-column prop="add_time" label="添加时间"><template slot-scope="scope">{{scope.row.add_time | dataFormat}}</template></el-table-column><el-table-column prop="goods_weight" label="商品重量"></el-table-column></el-table>

2。在data节点下添加两个数组变量，为什么是两个呢？

解释：我们通过order_id可以得到一个goods数组，这个goods数组里面有goods_id，但是仅仅获取到goods数组是不够的，因为没有商品名称以及其他商品详细信息，我们还需要通过goods数组里面的goods_id去获得每一个商品的详细信息。

对于在for循环里面连续发axios请求，想做具体解释：

之后查阅资料，得知：因为里面是异步请求，而有可能for循环的每一遍循环会先于数据返回，导致拿不到完整数据或者顺序混乱。

于是需要.then来获取返回的结果，这样的话，for循环会等待结果返回再进入下一次循环

 // 获得订单信息以及根据获得的商品id得到商品信息汇总async getOrderInfoAndGoods () {const { data: res } = await this.$http.get('orders/' + this.id)this.orderForm = res.data// console.log(this.orderForm)this.goods = res.data.goods// 查询商品详细信息// 数组里面有几个元素就查询几次for (var i = 0; i < this.goods.length; i++) {awaitthis.$http.get('goods/' + this.goods[i].goods_id).then((res1) => {this.goodsInfo.push(res1.data.data)console.log(this.goodsInfo)})}},

3。 OrderEdit.vue中再去弄备注信息，但是关于备注信息要注意：因为数据库的表中，本身是没有“备注”这一字段的，（虽然我学了Node，但是学得实属比较菜，所以不敢去改动sql文件之后再去改后端代码）。

所以，我选择了把备注信息进行本地存储（localStorage），在mounted钩子中，也就是等页面所有dom元素渲染完成后我们可以把本地存储的值再重新付给 input 绑定的值

为input绑定失去焦点事件：

<!-- 关于备注 --><div class="tip">买家备注:<el-input type="text" placeholder="请输入买家备注"@blur="saveTip"v-model="tip" clearable></el-input></div>

样式：

.tip {position: absolute;bottom: 50px;right:50px;width: 500px;}

再去methods下定义函数，以及定义mounted函数：

 mounted () {this.tip = localStorage.getItem('tip-' + this.id)}，

// 失去焦点时，将备注内容存到本地存储中saveTip () {localStorage.setItem('tip-' + this.id, this.tip)}

打开调试面板，可以看到如下：

10.5 Vue电商后台管理完善--订单详情页面显示商品信息，添加备注相关推荐

10.4 Vue电商后台管理完善订单模块--用Tab切换对订单进行分类
1. 效果如下: 2. 实现代码四个el-tab-pane中,< el-table >是一样的: <el-tab-pane name="all" label=& ...
10.2 黑马Vue电商后台管理系统完善订单模块--搜索订单（修改后端）
效果如下: 搜索时列表动态变化,在我专栏下另一篇文章写了,这篇文章不再讲述,这篇文章只讲述如何从后端(打开vue_api_server这个文件夹,而不是vue_shop)修改代码来实现这个功能我的思 ...
电商项目总结java_Vue 电商后台管理项目阶段性总结(推荐)
一.阶段总结该项目偏向前端更多一点,后端 API 服务是已经搭建好了的,我们只需要用既可以,(但是作为一个全栈开发人员,它的数据库的表设计,Restful API 的设计是我们要着重学习的!!!) ...
Vue电商后台管理系统项目开发实战（一）
前言当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式.如下图. 不同的客户端共用同一个服务器,数据库,API.本次项目着重设计PC后台管理,供电商后台管 ...
scrm电商后台管理、公司管理、店铺管理、特卖活动、营销活动、订单管理、优惠券管理、商品管理、会员管理、标签管理、会员卡、签到配置、积分、拼团、砍价、快递配置、短信配置、充值、运营活动
scrm电商后台管理.公司管理.店铺管理.特卖活动.营销活动.订单管理.优惠券管理.商品管理.会员管理.标签管理.会员卡.签到配置.积分.拼团.砍价.快递配置.短信配置.充值.运营活动 Axure原型 ...
超市百货电商app移动端原型+通用模块全局规则说明+超市电商后台管理web端原型+超市电商产品原型及需求文档+业务后台（商品管理+广告管理+活动管理）
作品介绍:Axure原型内容主要包括:超市百货电商app移动端原型+文档变更记录+名词术语说明+产品业务功能框架+通用模块和全局规则说明(消息推送机制+输入提交规则+图片加载机制+权限类提示说明+搜索 ...
Vue电商后台管理系统（1）
Vue电商后台管理系统(1) 登录在components文件夹下创建登录组件,Login.vue,并快速生成template.script和style骨架. 配置路由,进入router文件夹,导入L ...
电商后台管理---Vue实战
1. 项目概述 1.1 电商项目基本业务概述根据不同的应用场景,电商系统一般都提供了 PC 端.移动 APP.移动 Web.微信小程序等多种终端访问方式. 1.2 电商后台管理系统的功能电商后台管 ...
9.1黑马Vue电商后台管理系统商品管理模块完善：编辑商品的功能
在原视频中,老师跳过了这个功能,我觉得自己去实现也可以锻炼自己,于是自己补充了编辑功能同用户管理,权限管理等之前各个模块的编辑功能不同,因为商品具有很多可编辑的选项,所以选择像添加商品一样,单独放在 ...
10.1 黑马Vue电商后台管理系统之完善订单管理模块--加入修改订单模块
效果如下: 实现如下: 1.我仍然保留了添加地址这一个对话框,但只是绑定在另一个按钮上面,而点击左侧第一个按钮就会跳转到"修改订单"模块 <template v-slot=& ...

10.5 Vue电商后台管理完善--订单详情页面显示商品信息，添加备注

1. 实现效果如下：

2. 具体实现

10.5 Vue电商后台管理完善--订单详情页面显示商品信息，添加备注相关推荐

最新文章

热门文章