小程序 任务详述2:
参与订单流程开发
1.负责 商品分类展示
左侧tab区域
页面样式实现:
外层:小程序滚动容器scroll-view标签,添加属性:滚动方向、属性custom-class添加自定义属性
内层:Vant组件库的Sidebar侧边导航组件
activeKey默认为0,代表选中第一个tab选项
前后端联调拿数据:
在api中定义接口
数据格式
在category.js中引入接口
①当点击分类页面 显示商品的时候,需要去调用接口 加载数据
② 还有就是点击首页金刚区分类的某个板块时,会跳转到分类页面相应的分类
所以以上两种情况的数据加载,需要在两个生命周期中进行
① onLoad()生命周期,是页面首次加载完成之后调用
② onShow()生命周期,是指当前页面被激活的时候调用
- 第一种情况:页面在页面栈中是已经存在的,当A页面跳转到B时,不会触发onLoad(),而会去触发onShow()
- 第二种情况:当小程序进入到后台的时候,也就是点击手机的home键进入手机后台,那么当小程序下一次被激活时,就会被调用
为请求接口的逻辑定义一个方法categotys()
在请求数据的前 添加loading效果,请求后关闭 loading效果
在onLoad()函数中调用 打印出来数据
数据处理显示逻辑:
在请求接口的逻辑方法categotys()中:
先将菜单数组: res.data存储在变量categories里
①菜单逻辑处理:有两种情况,一种是有子菜单,一种是没有子菜单。
如果有子菜单,返回的字段level:“1”,所以需要采用filter方法对level为1的数据进行过滤
过滤的一级菜单的结果,存储在变量firstCategory中
② 两种状态的逻辑处理
- 状态一:从外部金刚区分类点击进来,高亮的是对应 指定的tab标签
- 状态二:点击底部分类进来,默认第一个tab标签显示高亮
data中定义一个数据categorySelected,用于存储当前所显示的tab页签id
状态实现:
总逻辑:
①从Storage中获取金刚区点击分类的id
② 将这个金刚区id存储在data中,和分类页面联系起来
③ 获取两个id相同的数据,就是选中元素的索引
④ 根据索引获取选中的元素
金刚区点击某个分类跳转方法tabClick()实现
点击某一个分类时,如何在两个不一样的界面传递消息?
利用的是缓存wx.setStorageSync(),将点击分类的category.id缓存到了Storage里面
然后跳转到分类页面的时候,分类页面通过拿到category.id,就能在分类页面知道 在金刚区选中的分类了,从而将该分类进行高亮显示。
{
在页面跳转的时候,来获取Storage中的分类id
然后拿到之后,缓存就没用了,一定要清除缓存,否则会有bug的
判断分类id是否存在,如果存在,将其赋值给data中定义的categorySelected.id(注意:这个数据因为不用做响应式,所以不需要调用setData()方法)
拿到id了,再调用一次categotys()方法,来获取tab页签数据
}
在categotys()方法中 通过这个选中分类id来定位到当前的tab页签,
如果选中分类id存在的话
{
某个页签的选中状态是通过activeKey属性值来指定的,值为页签元素的索引,对应位置的页签就会显示高亮
所以需要找到当前tab页签的索引
使用findIndex()返回分类id和选中id一样的索引,并保存到将变量activeCategory中
将选中分类的id赋值给data中的数据,
如果是直接进入分类页面,直接赋值即可
}
进行页面响应显示:
将数据通过setData()存储起来,并定义初始值
然后就可以处理页面上的显示逻辑了
显示效果:
右侧商品展示
点击分类,tab页签高亮显示:
给tab页签设置 点击事件onCategory
当点击时,需要拿到当前分类的id,如何拿到id?
给标签添加自定义属性:data-id、data-index来拿到当前data数据的id和index,绑定到点击事件e里面
将index的值解构出来,是点击页签的index,有了index就知道点击的是哪个分类了
然后更新页面的数据:可实现点击某个分类,并高亮显示的效果
activeCategory是当前元素的索引
因为很多地方都需要请求商品数据,所以使用一个方法goodList()以便复用
点击某个分类,展示对应数据
数据是滚动效果
滚动到底部时有一个分页展示的效果
商品右下角有 加号和购物车 两种符号 :
① 是加号时,表示该商品存在sku的情况,需要用户去选择不同商品不同的规格。选择之后,再添加到购物车
② 如果该商品不用选择规格,则点击购物车图标,直接将商品添加到购物车
切换类目时,会加载指定的类目商品
点击tab页签获取商品列表实现:
api接口
在调用接口的时候,需要对传入的参数进行处理:
在data中初始化page和pageSize
通过选中的类目categorySelected,来获取该类目的id,解构出来id,并起个别名,通过id来获取商品列表
调用接口,并处理参数
获取到数据之后,将数据设置到setData()上的变量currentGoods,用来页面的渲染
加上页码进行优化:
如果当前数据是第一页时,就直接获取商品数据
如果不是第一页的时候,需要将之前请求的数据 和 当前请求的数据进行合并
(数组的合并使用concat)
这里写了两个setData(),可以进行一个优化
声明upData
将setData里的数据赋值给upData
渲染页面:
页面编写:滚动容器、小程序滚动触底事件bindscrolltolower绑定方法goodsBottom()、UI卡片
点击商品会跳转到详情页面,需要给一个跳转链接,这个商品会有不同的类别,跳转的时候,需要根据类别,做不同的逻辑处理
跳转时需要根据后端返回的字段,做一个跳转逻辑的区分
需要使用wxs语法定义
定义完之后,在页面调用
商品列表显示
商品列表触底分页实现:
商品列表触底时,会触发goodsBottom(),让页码+1
注意:需要请求商品列表的地方:
① 页面首次加载的时候,需要请求商品列表(在类目数据处理完之后进行调用)
② 在点击类目的时候,也需要请求商品数据
③ 在商品滚动到底部的时候,分页之后还要再请求商品列表数据
切换tab页签,对应商品列表发生变化
点击tab时,page要重置为1
如果code === 700,表示当前列表没有商品数据
第一页就是空数组
第二页就是:没有更多了
商品sku交互:加号和购物车 选项逻辑实现
显示+号 还是 购物车
页面布局:将加号和购物车图标加上
逻辑判断实现:根据后端返回的字段进行判断,如果那两个字段为true的话,显示+号,说明当前商品是存在规格的;否则不显示加号,显示购物车图标
点击加号图标逻辑:
逻辑:
- ① 触发点击事件方法addShopcar(),获取当前点击的商品数据
- ② 将数据传递到子组件里面(通过父子通信的方式传递数据)
- ③ 在子组件中监听传递过来的数据,需要判断当前商品是否存在,是否有库存,如果没有问题,就去调用商品规格接口,来获取规格数据
- ④将规格数据展示在弹窗里
逻辑①实现:
首先:这两个按钮绑定同一个点击事件addShopcar
自定义属性,将商品id传递进点击事件里面,从而拿到商品数据currentGood
addShopCar(e) { console.log('target',e); // 你要将这个商品加入购物车,肯定是要找到这个商品的,如何找到?通过页面传入的id来找,并保存在一个变量里 // ① 将e中的id解构出来 // ② 在商品中通过id 找到当前商品 // ③ 打印看是否获取到了当前的商品 const { id } = e.currentTarget.dataset const curGood= this.data.currentGoods.find(ele => { return ele.id == id }) console.log('点击加号或购物车获取的商品', curGood);//获取点击商品成功
子组件sku弹窗的实现:
封装成组件
1. 创建弹窗组件goods-pop
2. 在app.json中引入组件
3. 弹窗页面布局
使用Vant库中的基础组件Popup 弹出层组件
注意:需要使用双标签,因为所定义的内容需要使用插槽的形式来确定
复制前别忘记引入UI组件
该弹窗组件的显示与隐藏,是通过show来控制的
4. 在父组件使用弹窗组件
逻辑②实现:父子通信的方式传递数据
当点击加号的时候会显示弹窗,所以这个控制显示还是隐藏的字段是由父组件的字段来定义的。
获取到数据之后保存到data中,然后传给子组件
在父组件中的data中定义初始值
在addShopcar()方法中,点击的时候,给该字段赋值数据
然后将数据传递给弹窗(父子组件之间的通信)步骤:
- 在父组件中将数据传递进去
<goods-pop skuCurGoodsBaseInfo="{{ skuCurGoods }}" />
- 在子组件中定义properties字段,并声明需要接收的属性
逻辑③实现:监听传过来的数据,并调用 规格数据 的接口
监听数据:
if数据不存在的情况,不需要往下执行了,return
if库存<=0的情况,也不需要往下执行了,return
if数据存在 且 库存足够的情况,则可以继续往下执行:
掉接口获取规格数据
将请求规格数据封装成一个方法:在弹窗组件中通过methods来声明方法
然后在监听中继续,调用这个方法,并将数据传递进去(此参数是用来获取商品id的)
在api中定义接口(需要传递id参数)
在弹窗组件中先引入这个接口
然后再弹窗组件中,调用接口并将数据id传递进去
逻辑④实现:在弹窗展示规格数据
弹窗组件中:
在initGoodsData()方法中,获取规格数据
data中设置初始值,将show字段值设为true
页面中使用数据:
渲染规格:
规格名称 和 具体规格不再同一层,所以需要进行一个逻辑上的处理
外面一个循环,里面再套一个循环,因为内外层的id是一样的,所以可以为第二层的id起个别名
wx:for - item = "small"指当前元素的别名small,
wx:for - index = "idx" 索引别名idx
规格逻辑:
①显示效果:选中的有高亮效果
②当第一层的规格进行切换的时候,下面的规格会清空
③点击加入购物车时,需要对点击的数据进行获取
④ 购买数量
逻辑①实现:高亮
绑定点击事件:skuSelect
需要知道 当前选中的是哪一个规格
通过自定义属性来获取外层和内层的索引data - propertyindex和...
skuSelect()中:
先拿到当前规格的数据
需要通过一个字段进行显示,而原有数据中没有这样的字段,所以需要手动给当前的数据添加这样的字段,即需要修改原数据的
不能直接修改原数据:需要对原数据进行深拷贝
拿到索引
通过索引拿到两层的数据,log进行验证
子层级:遍历修改active属性值为false
父层级:处理选中状态
处理完之后,将当前数据进行更新
在页面中,通过样式进行控制
弹窗购买数量的实现:
当前数据不包含用户所选数量这个字段,但是后端又需要拿到用户所选数量,所以应该在数据里添加 “所选数量”这个数据
直接添加字段
加号减号的实现:
注意:
修改数据之前进行深拷贝
修改完之后要进行数据的更新
可以添加回调函数,来检验打印的数据
在调用数据的时候隐藏tabar,在关闭弹窗的时候关闭tabar,调用api来实现
还要关闭弹窗
2.负责商品详情
3. 负责商品sku交互、选择和购物车相关逻辑实现
sku交互:
当选择第一层某一个sku的时候,将其它选择清除
当选择明确的sku时,将所对应的商品图片显示出来
加入购物车校验逻辑:
当sku全部选项都选择之后才能加入购物车,并且购物车有图标提示
否则会有提示让你选择规格
加入购物车调用后端接口:将规格和图片提交
post请求,传入的参数是当前商品数据 和 商品图片
将加入购物车函数改写为async函数,并传入参数
传参成功就是加入成功了,给个提示