07-弹出层的结构和样式实现
- HTML结构
- 实现对应的样式：少了一个计数器
- 引入对应的计数器组件
效果如下：
- 实现+1或-1方法
08-点击购物车去购物车
- 需求：
- 给对应的按钮绑定点击事件，如下：
- 实现上述方法
- 之前我们实现的导航守卫是对Tabbar的导航守卫，只有点击tabbar时才能实现守卫。先看一下有没有登录
- 没有登录，之前做过路由守卫。下面的守卫代码，只有点击tabbar时才能守卫到
- 判断有没有token，若没有就是没登录。看一下本地：
- 现在我们点击tabbar测试一下
- 现在不一样，我们需要在详情页中点击去购物车，我们还需要在详情页中实现守卫
- 测试守卫是否OK。
- 1s后，就返回到了登录页
09-登录成功后，返回上一个页面
- 现在有这样一个问题，我们点击详情页中的购物车，如果没有登录，跳到登录页，现在如果开始登录，关键是登陆完后，跳到什么地方，我们是从详情页点击购物车，由于没有登录，跳到登录页面
- 现在点击登录，登录成功后，我们去哪里
- 以前的代码，登录成功后在 我的页面
- 现在我们从详情页跑到了登录页，登录成功后，还是要回到详情页，也就是上一页。在app.json中定义一个上一页的路径
- 在详情页去购物时，需要把这个详情页路径存储起来
prevRoute
- 登录成功后，我们就需要从全局中获取上面的保存的路径，跳到上面的路径对应的页面
测试：登录成功后，又跳回详情页。但是有问题，详情页中没有数据
- 原因：跳转时，没有传递ID
10-返回上一页面时，带ID
- 把ID也存在全局中
- 在详情页中存储ID
- 返回上一页时，也需要把ID传过去
测试：登录后，又回到详情页
11-并不是每一次都需要返回上一页
- 编译后，直接点我的，去登录
- 不是从详情页过来，就得不到prevRoute和detailId
定义一个状态控制是否返回上一页
- 并不是每一次都需要返回上一页，定义一个状态，来表示是否需要返回上一页
- 在详情页中，需要把这个状态设置成true
- 登录成功后，就可以做判断
测试OK。
12-封装成一个返回上一页的工具函数
- 刚才在点击详情页的购物车时，需要鉴权，我们写了很多代码，如果其他地方也需要鉴权，还需要写一遍。解决方法：把鉴权的代码封装成一个函数
- 从detail.js中复制鉴权的代码
- 在详情页中使用
、 测试OK
- 封装过，点击收藏按钮也是一样的
测试OK
13-返回上一页内容补充
- 现在我们没有登录，不会去点击详情页中的购物车，而是点击tabbar中的购物车
- 没有登录，提示请先登录
- 因为，我们之前在自定义tabbar中也实现了守卫
- 现在我们点击tabbar中的购物车，提示需要登录，登录完后，去购物车。也就是说，此时的上一页并不是详情页，而是购物车。
- 测试：登录成功了，但是并没有跳到购物车，也报错了
- 分析如下：利用navigateTo是去不到购物车页的
- 解决方法：再定义一个全局的状态，表示是否是tabbar页面
- 在tabbar页给这个状态赋值
- 登录成功后再一次判断
测试OK。
14-处理详情页中的弹出层
- 点击购物车中的+1需要把此商品添加到购物车，导入接口
- 定义一个状态，获取当前购物车中某个商品的数量
- 点击+1或-1就需要给这个状态赋值
- 收集到数据后，添加商品到购物车，需要使用这个数量
代码如下：
结果如下：
- 然后提示添加购物车成功
测试：
15-添加购物车时，显示数量
- 需求：
- 定义一个状态，表示购物车中商品的数量
- 调用完毕后，需要给上面的状态赋值
测试是否有数据，如下：
- 然后给购物车添加一个小图标
这样写，购物车上的图标数量还是0，因此我们需要调用接口，获取数量
- 发起ajax请求，获取数量
16-解决一个小bug
- 为了防止页面闪一下，登录成功后，添加一个定时器
06-首页面其他内容渲染
01-分类数据渲染
- 确保channel中有数据
- 引入组件
- 使用组件
02-品牌机制商实现
- 对应状态，并赋值
- 查看数据
- HTML
- 样式
03-周一到周四实现
- 定义状态
- 查看数据，确保newGoodsList中有值
- HTML渲染数据
04-人气推荐
- 定义状态
- 查看数据
- 渲染数据
05-专题推荐
- 定义状态
- 查看数据
- HTML渲染数据
- 样式
06-居家(两次渲染)
- 定义状态
- 查看数据
- HTML渲染(两次for循环)
07-点击商品去详情页+回到顶部
- 给每个商品绑定点击事件即可
07-专题页数据渲染
01-专题页数据渲染
- 引入对应的组件
- 添加接口
- 定义状态
- 渲染出HTML中的数据
- 报错
- 原因：tabbar中多加了.js
- 效果
- 样式
