完善SkuForm
添加sku保存与取消的操作
保存的操作
当用户点击保存的时候,应该将之前收集的数据进行整理,把spuInfo的信息整理好,然后书写接口,将整理好的数据发送给服务器进行存储。
首先先书写存储的接口。
接下来给保存按钮绑定点击事件,当用户点击的时候,将数据整理到spuInfo中,并且发请求。发完请求存储完成之后,需要将页面跳转到第一页。因此需要发请求完成之后再次调用一下自定义事件,把页面转换的数据传递给spu组件。
需要注意的是,reduce与map。reduce的使用是遍历item,将符合的结果传给prev所定义的结构,可以通过以下两个例子理解。需要注意的是使用prev最后return的结果是最终结果。如果还是不太明白可以阅读以下文章arr.reduce的使用
//第一个例子通过遍历arr数组,将符合回调函数的结果重新添加到所定义的{}中。
// 普通数组统计
let arr = ['李明', '韩梅梅', '张三', '李明', '李明', '张三', '韩梅梅', '李明', 'Jack', '韩梅梅']
const sum = arr.reduce((acc, cur) => {
if (!acc[cur]) {
acc[cur] = 0
}
acc[cur]++
return acc
}, {})
console.log(sum) // {李明: 4, 韩梅梅: 3, 张三: 2, Jack: 1}
//第二个例子类似,但是原数组复杂一些
// 对象数组统计
let arr1 = [{
hobby: 'basketball'
}, {
hobby: 'badminton'
}, {
hobby: 'basketball'
}, {
hobby: 'swim'
}, {
hobby: 'basketball'
}, {
hobby: 'swim'
}, {
hobby: 'pingpong'
}]
const sum2 = arr1.reduce((acc, cur) => {
if (!acc[cur.hobby]) {
acc[cur.hobby] = 0
}
acc[cur.hobby]++
return acc
}, {})
console.log(sum2) // {basketball: 3, badminton: 1, swim: 2, pingpong: 1}
关于map的使用。可以阅读以下文章。arr.map的使用
取消的操作
当用户点击取消,应该将页面从skuForm转换为第一个界面,并清空数据。
首先给取消按钮绑定点击事件,接下来书写逻辑,具体代码如下所示。
sku列表的展示
接下来处理列表展示的内容,当用户点击如下按钮时,应该将添加好的以及之前的sku展示出来。
为了展示数据,首先需要书写获取列表的接口
接口书写完成后,考虑如何展示列表,在这里使用elementUI中的Dialog对话框来展示sku列表。将Dialog对话框引入到项目中进行修改,修改完成之后需要利用按钮控制Dialog对话框的出现,因此给展示sku列表的按钮绑定一个点击事件。当点击的时候,展示对话框,并且发送请求,为了展示列表,需要将请求返回的数据进行存储,最后动态渲染到页面上。具体代码如下所示。需要注意的是,在table里还用到了loading效果。当loading 为true的时候,就是给表格加了loading的效果,当请求到数据之后,将loading置为false,取消loading效果。然后当对话框关闭的时候,将loading再次置为true。
sku模块的展示
接下来搭建sku模块
静态页面
静态界面代码如下所示
页面效果如下所示
展示数据
首先书写接口
书写完成之后当sku组件挂载完成,发起一次请求,并存储数据
接下来动态渲染页面。
接下来分页器,当点击分页器重新发请求,加载不同数据。
上架与下架操作
处理表格中的按钮,在sku模块中一共有五个按钮,但只展示四个按钮,上架与下架按钮通过v-if进行切换。上架与下架通过isSale属性来决定展示哪个按钮,当点击上架,需要发请求然后弹提示,当点击下架同样发请求弹提示,因此再给这两个按钮绑定点击事件。书写这两个按钮需要调用的接口
SKU详情查看
接下来书写详情查看的功能,当用户点击如下按钮时。
应该将SKU的详情进行展示。为了获取到详情,应该先调用接口拿到详情数据,随后在页面进行展示。
具体步骤如下所示,首先书写接口
接下来绑定点击事件请求数据并储存。
此时已经成功获取数据,接下来考虑展示的问题,为了让页面更美观,在展示的时候采用elementUI的抽屉效果(从右往左)。注意:span 24代表一行
接下来完善当点击的时候展示抽屉。
此时页面效果如下所示