购物车(V2装饰器)-EW帮帮网

九、购物车(V2装饰器)

跟灯按弦超好玩碳纤维智能

经典格子元素,男童格子纯

您还未登录美蔻~

猜你喜欢

购物袋

去登录

2.9万+人付款

碳纤维一体琴身

.9万+人付款

￥599V9G

￥899O

尤克里里

棉衬衫

时尚料技

购物袋是空的

去逛逛

核心步骤：
1创建组件并暴露
2根据文档实现功能
3页面中导入并测试使用
a已登录，无商品，点击去第一个 Tab(下一节做)
b未登录，点击去登录页
基础模版

属性名	类型	说明	默认值
tip	string	提示信息	空字符串
buttonText	string	按钮文本	空字符串
icon	ResourceStr	中间图标	ic_public_empty
onClickButton	()=>void	点击按钮的逻辑	空方法

参考代码
git记录
Cart-MkEmpty组件封装

1.3去首页
使用Emitter进行线程间通信
需求及分析：
1已登录，购物车没有商品的时候，点击切换 tab 到第一个【首页】
2feature/cart -> products/phone 可以通过？？？来实现通讯
3 products/phone 如何控制 tab 切换
核心步骤：
1增加 emmit 的事件 id 常量，并导出（方便管理）
2phone/index 注册事件，接收参数
3feature/cart 触发事件，传递数据
4phone/index 控制 tab 切换
git 记录
Cart-去首页
1.4加入购物车
接口文档

需求：
1详情页点击添加到购物车
2更新服务器数据
核心步骤：
1抽取 api，丢到 common
2页面实现交互逻辑
atoken 校验-》sku 校验-》提交-》api调用-》
1通过一个类管理所有购物车接口，因为有一整套的 CRUD
2导出
3整合业务，在商品详情页调用加入购物车接口
git 记录
Cart-加入购物车
1.5个数及页面跳转

多个地方需要用到个数，并且在很多时候都需要刷新

1.5.1详情页面个数更新

需求：
1获取最新个数（通过接口）
2更新购物车个数（考虑其他界面获取）
核心步骤：
1抽取 api：
a有 Token
ⅰ获取数据，具体的值
b没 Token
ⅰ格式为 0
c更新到AppStorage
2组件中获取并渲染
git 记录
Cart-详情页个数更新

1.5.2首页更新数量

需求：
1首页增加角标
2获取个数并渲染
3如果是首次打开页面，获取个数(已登录的情况)
核心步骤：
1增加 Badge 组件
2通过 AppStorage 获取数据并渲染
3生命周期钩子中获取数据
1更新首页购物车数量
git记录
Cart-首页个数更新
1.5.3登录和登出更新数量
登录和登出：
1登录更新：
a账号密码登录，华为登录之后，保存用户信息，同时更新购物车数量
2登出更新：
a设置页，退出登录时，删除用户信息，同时更新购物车数量
bcart.count() --> 0
1保存用户信息、删除用户信息时，都要更新购物车数量
git记录
Cart-登录登出更新购物车数量
1.6跳转购物车页

需求：
1点击购物车图标，打开购物袋页面
2tabs打开时，没有返回按钮
3跳转打开时，显示返回按钮
注意：
1之前购物袋只是 Tabs 渲染的组件，并不是页面，没有注册页面路由。
核心步骤：
1feature/CartView
a增加 Builder 入口函数和 NavDestination 组件
b配置路由表 route_map.json
c配置 module.json5
2详情页，点击跳转即可
a优化：详情页跳转的时候【显示返回按钮】，并可以点击【返回上一页】
b通过携带参数实现效果
1增加 Builder 入口函数和 NavDestination 组件
2新建路由表文件，并配置路由表
3配置 module.json5，让模块的路由表生效
4页面跳转，并传参
5获取参数
git 记录
Cart-去购物车页
1.7购物车列表渲染
接口文档

需求：
1获取购物车数据并渲染
核心步骤：
1抽取接口
2获取数据之后通过 new 转对象(嵌套数据更新)
3这个过程需要在 2 种情况下执行（分两步完成）
a首次进入，有 token 就获取（生命周期钩子）
b添加商品到购物车中（详情页--》购物车页）
1.7.1默认渲染
git 记录
Cart-默认渲染
1.7.2更新购物车列表
组件可见区域变化事件
问题分析：
1购物车，每次打开重新获取列表数据
a不是页面，只有 aboutToAppear 钩子
b第一次打开之后就不会被销毁，不会再次触发
2详情页
a跳转去购物车是新页面，会触发 aboutToAppear 可以刷新
3tab 页
a切换到购物车 tab 时需要获取列表（不会再次触发aboutToAppear）
思考：如何实现购物车页面数据刷新?
1通过 emitter 触发刷新
2组件可视区域改变时刷新 onVisibleAreaChange

git 记录
Cart-更新购物车列表
1.8个数更新
接口文档

需求：
1修改【个数】时
2更新服务器，更新本地
3更新购物车个数
核心步骤：
1实现Count组件的个数渲染及禁用外观
2累加及递减逻辑:
a修改服务器数据（*）
b更新本地数据
c更新个数
d伴随 loading 效果
3选中：
a修改服务器数据（*）
b更新本地数据

git 记录
Cart-个数及选中状态更新

1.9MkCheckBox组件
checkBox

原生的 CheckBox 使用起来有一些不便,咱们来：
1试试这个不便之处
2然后自己实现个组件，替换到购物车页面的【列表项】和【全选】

如果不用双向绑定那么选中状态和绑定的状态变量就没有关联
基础模版

属性名	类型	说明	默认值
checked	boolean	是否选中	false
boxSize	number	大小	18
onClickBox	()=>void	点击组件	()=>{}

git记录
Cart-MkCheckBox组件封装

1.10选中状态更新
接口文档

需求：
1修改【选中状态】时
2更新服务器，更新本地
核心步骤：
1点击选中：
a修改服务器数据（*）
b更新本地数据
git记录 Cart-选中状态更新
1.11全选
接口文档

Array.prototype.every() - JavaScript | MDN

every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。

MDN Web Docs

需求：
1点击列表项目，同步更新全选状态
2点击全选，批量设置每一项的选中状态
核心步骤：
1计算全选状态并绑定(方法)：
a返回每一项是否被选中（selected==true）（every）
b点击子组件（CheckBox）通过回调函数通知父组件（强制刷新页面）
2抽取 api
3点击全选：
a获取本地选中状态
b调用接口更新服务器
c设置列表项的选中状态
git 记录
Cart-全选
1.12总价格
链接

需求：
1根据选中状态，个数，单价计算总价格
核心步骤：
1实现方法：
a筛选-》累加-》小数点 2 位-》转字符串
2组件中使用该方法
git 记录
Cart-总价格
1.13删除
接口文档

原产兰州,气清味美,甜百合干16...

3秒快速拆琴轻松保养ODIN奥丁12...

若羌红枣脆片138克

规格:410克

颜色:午夜.,

￥329.00

紫米410克

￥19.00

规格:138克

规格:168克

￥18.00

半42.80

删除

出明日R王

更新本地(数据及个数)

更新服务器

删除数据

抽取API

需求：
1点击删除，删除购物车数据
核心步骤：
1抽取接口（坑，delete 请求方法第二个参数和之前的不同）
2点击删除调用接口，删除服务器数据
3更新个数
4删除本地
5伴随 loading 效果

commons/basic/src/main/ets/utils/Request.ets

ArkTS复制代码

export class RequestAxios {

// get -> params -> { params: {} }

// T 响应的内容的类型！！

static get<T>(url: string, params?: object): Promise<T> {

return axiosInstance.get<null, T>(url, { params })

}

static getPlus<T>(url: string, config?: AxiosRequestConfig): Promise<T> {

return axiosInstance.get<null, T>(url, config)

}

// post -> data -> { data: {} }

static post<T>(url: string, data?: object): Promise<T> {

return axiosInstance.post<null, T>(url, data)

}

static delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {

return axiosInstance.delete<null, T>(url, config)

}

static put<T>(url: string, data?: object): Promise<T> {

return axiosInstance.put<null, T>(url, data)

}

commons/basic/src/main/ets/apis/cart.ets

ArkTS复制代码

import { Log } from '@abner/log'

import { auth, Logger } from '../../../../Index'

import { RequestAxios } from '../utils/Request'

import { CartGoods } from '../viewmodel'

interface UpdateParams {

selected?: boolean

count?: number

}

interface AddParams {

skuId: string

count: number

}

interface CountResult {

count: number

}

interface CheckAllParams {

selected: boolean

}

// 删除的参数

interface DeleteParams {

ids: string[]

}

export const CartKey: string = 'cartCount'

export class Cart {

// 添加

add(data: AddParams) {

return RequestAxios.post<null>('/member/cart', data)

}

// 获取个数

async count() {

let count = 0

if (auth.getUser()

.token) {

const res = await RequestAxios.get<CountResult>('/member/cart/count')

count = res.data.result.count

}

AppStorage.setOrCreate(CartKey, count)

}

// 获取列表

async list() {

return RequestAxios.get<CartGoods[]>('/member/cart')

}

// 更新商品

async update(skuid: string, data: UpdateParams) {

return RequestAxios.put<CartGoods>(`/member/cart/${skuid}`, data)

}

// 全选

async checkAll(data: CheckAllParams) {

return RequestAxios.put<null>('/member/cart/selected', data)

}

// 删除

async remove(data: DeleteParams) {

return RequestAxios.delete<null>('/member/cart', { data: data })

}

export const cart = new Cart()

git 记录
Cart-删除购物袋商品

2bug-ForEach 的keyGenerator参数
ForEach 键值规则
ForEach的第三个参数如果不给，那么默认值
bug 复现
1保证购物车有数据，测试交互效果
2切换到其他tab，再切换购物车，测试交互效果
3修改选中状态，修改个数，无法触发【全选】和【价格】的重新计算

结论：
1默认的键值生成逻辑，在使用相同数据覆盖的时候不会触发子组件的重新生成
2子组件交互时修改的依旧是上一份数据，但是数据源已经更改所以无法触发 UI 更新
解决方案：
1自定义 keyGenerator 函数，希望子组件全部重新创建时，使生成结果和上一次不同
2可以使用时间戳，随机数，累加的数。。核心就是保证循环的 key 发生改变
优化代码

3自定义弹窗优化