vue大型电商项目尚品汇（后台篇）day05

今天继续是对后台管理部分的一个操作，但是快要结束了，今天结束，明天会进入一个从Vue以来，另外一个名声显著的东西了，一只耳闻从未见识，而且十分的炫酷
他就是——数据可视化Echarts，迫不及待了解了

11.销售属性添加

当我们点击添加就，应该把添加的放到table里面来，table里面每一行数据是一个对象

image-20220619101514502

然后就可以开始整理数据，我们select收集的值不应该只是id

image-20220619102104406

收集到了数据，直接在button点击事件，整理参数，给到我们的data对应的数据

image-20220619102442001

12.销售属性值展示与收集

这里主要是button和input的一个切换

image-20220619112152929

给添加来一个点击事件，此时的row就为当前这一行的数据，我们知道每一行必须有自己独有的控制切换的变量，我们前面也说过先把控制切换的变量还有收集input的变量先放在这里，并没有去做什么时候添加这两个变量，现在就是时候了，当点击添加的时候就可以把两个变量添加进来，但是要注意我们需要点击就重新解析页面出来input所以要做响应式数据，同时需要把上面表单收集的值也做好，因为马上切换为input就要开始收集了

image-20220619113024974

然后就是当我们失去焦点，需要将值呈现出来，这个就要看到我们的tag是遍历的什么了

image-20220619113349188

所以失去焦点后要总结一下值放到这个子列表里面

image-20220619113817669

然后就是两个注意事项，一个是不能存空值，一个是不能存重复的值

image-20220619114230272

13.删除销售属性与属性值

拿到索引，直接根据splice方法删除即可，注意tag组件点击x的事件是close

image-20220619114932079

image-20220619115201199

顺便把除了在场景0显示其他都不能点击的三级联动也做了

image-20220619115506651

14.spu修改保存操作

这个页面涉及到两个操作的保存，一个是修改一个是新增，而且他们两个接口要的数据都差不多就是一个id的区

image-20220619163056607

然后在我们保存点击事件准备发请求，先要整理参数，所有的参数都能够收集到，只是照片墙这里需要整合进数据，我们新增的数据没有imgname和imgurl，其次我们发过去的数据不需要name和url

image-20220619165158365

请求成功应该通知父组件回到table并刷新页面

image-20220619165327122

image-20220619165345072

15.spu添加保存

当我们点击添加spu，应该发起两个请求，获取品牌和销售属性的下拉框选择，添加按钮在父组件，所以通过ref通知子组件发请求

image-20220620084022981

image-20220620084530355

然后观察得知都可以手机，就是category3id收集不到

image-20220620085155039

image-20220620085212172

然后就是几个bug，当出现内容过多我在第三页添加保存之后不应该在第三页要回到第一页

image-20220620093355428

取消按钮也要改

image-20220620093427107

image-20220620094002526

二.删除spu

准备接口，用到组件pop

image-20220620094843192

同时判断当前位置应该停留在那

image-20220620095041741

三.添加sku

1.静态组件

首先点击新增sku会切换场景2

image-20220621085742559

image-20220621085759067

然后完成sku的静态，主要就是注意一下table前面如果不是序号为选择框，type为selection

image-20220621091141630

image-20220621091149690

2.获取skuform数据

当我们点击新增sku，需要发起三个请求，一样的套路通过父组件ref来调用

image-20220621092741354

image-20220621093713278

3.sku收集与展示

总共应该分为三类数据，第一类应该是父组件传过来的

image-20220621094913261

image-20220621095026264

第二类应该是通过v-model可以收集到的数据

image-20220621102320534

主要就是注意一下 input新增 type为number可以限制只能输入数字

image-20220621102404630

第三类数据就是一些需要计算操作的数据

先把平台属性完成，遍历

image-20220621103725173

image-20220621104610757

image-20220621104618191

这里的难点主要在于怎么来收集数据，看接口文档可知，需要这些数据

image-20220621104732200

但是我们这里其实只需要拿到这两个就可以了

image-20220621104856543

attrId表示你选择了那一个select，valueId表示你选择了那一个值，有这两个就可以了

第二个难点就是我们数据要放在哪里，因为你要知道我们这里收集的可能不只一个值，不只一个select，所以最好的方法其实是存放在这个select的对象里面

image-20220621110009350

销售属性同理

image-20220621110335975

接下来是对sku图片的一个收集与展示

image-20220621161820035

然后这个图片怎么来收集的问题，复选框表格有一个事件，是当选择按钮发生变化时触发，而且还会有参数，参数就为当前勾选的这些图片的一行的数据

image-20220621162432194

image-20220621162531013

先不要放进skuInfo接口参数里面，因为还不完整

image-20220621162624831

image-20220621162642111

查看我们接口数据可知有一个isDefault的参数，它是表示当前这个图片是否是默认值，但是我们从服务器拿回来数据的时候就没有这个参数，所以一开始就要添加上

image-20220621163111387

然后做默认button

image-20220621163531225

image-20220621163612206

image-20220621163739436

4.sku保存

在做这一步之前，肯定是要先整理参数，首先是平台属性和销售属性的参数整理，应该点击保存后，就对attrData来一个遍历，然后依次每一条数据字符串转为数组，push到一个对象里面，最后把这个对象给到skuinfo的参数

image-20220621175229253

但是我这里不这样做，用另一个方法，因为这里你会重复往一个数组里面添加内容，所以可以通过迭代来做

image-20220621175643026

销售属性同理

image-20220621175949968

整理图片参数

image-20220621181339686

发起保存请求，成功返回页面

image-20220621181730821

5.sku列表展示

完成接口后，这里使用dialog展示出来，将标题改为动态

image-20220622111227305

image-20220622111233344

image-20220622111250171

然后修改table的结构

image-20220622111725099

image-20220622112937747

image-20220622113036830

6.loading效果

用到elementUI全新的组件loading

直接给table来一个v-loading指令

image-20220622114149569

然后需要在数据data定义loading为true

image-20220622114226958

记得数据回来将其改为false

image-20220622114258929

然后有两个bug

一个是我们的loading只会执行一次，因为改为false后就永远是false了，还有一个是会有数据回显的问题，点了一个sku显示之后在去点其他的 他一瞬间会显示下上一条的数据

这些都可以通过dialog的一个回调来解决，before-close注意它是一个属性，所以要用v-bind绑定，然后他有一个形参done，必须写上才能正常关闭，他表示关闭dialog前的回调

image-20220622114650040

image-20220622114716952

四.Sku

1.数据展示与分页

首先做好接口，然后完成静态页面

image-20220622120415339

image-20220622120421267

发请求获取table数据

image-20220622120807483

image-20220622120813282

动态展示数据在表格上

image-20220622121457084

image-20220622121502847

然后做分页器，点击改变还是用的之前的套路

image-20220622121749257

image-20220622121658461

2.上架与下架功能

这是两个接口，然后点击切换上下架的按钮，并发起相应的接口请求

image-20220622145624817

image-20220622150022575

3.查看详情（多个新组件）

首先点击查看详情由一个从右往左出来的内容，用到Drawer 抽屉

image-20220622152817962

image-20220622153001270

同时点开查看详情还应该发起请求

image-20220622153512766

然后给我们drawer抽屉整理下布局，这里应该用到一个新组件layout，跟bootstrap的栅格系统一样，但是饿了吗是分为了24份

image-20220622153854247

要注意要自己去修改样式，并不是用这里的组件当成组件标签去修改，可以去看最终在页面上呈现的标签类名等来修改

image-20220622154520378

image-20220622154547613

然后页面布局完毕，就可以放入动态数据了，平台属性用的是tag标签

image-20220622155308562

最后是图片展示这里，需要一个轮播图carousel

image-20220622155605154

要修改单独的指示器

image-20220622155851256

image-20220622155942170

image-20220622160008298

4.深度选择器

首先回顾一点，我们给css加scoped，是为了让当前样式只在这个组件生效，他的方法就是给当前组件所有的标签都加上一个随机的属性，再通过你的选择器和他的属性选择器达到只在这里生效

image-20220622162202509

但是要注意一点，我们的子组件 根组件也会有这个属性，所以如果子组件根组件跟父组件设置的选择器一样的话那么根组件是会受影响的，但是只影响根组件，根组件下面的其他标签就没事了

image-20220622162400855

image-20220622162337862

当我有这样一个子组件，我也想要父组件设置了子组件能够跟着生效

image-20220622162451331

一种方法就是父组件去掉scoped，但是我就是不能去掉，这个时候就要用到深度选择器了，也叫样式穿透在原生css里面是>>>，less里面是/deep/，scss里面是::v-deep

image-20220622162624581

所以针对刚才那种情况样式穿透也可以实现

image-20220622162650393

Tags:

VirMach 便宜 VPS

QNews

QNews