# my_harmony

**Repository Path**: phper_leo/my_harmony

## Basic Information

- **Project Name**: my_harmony
- **Description**: harmonyos 测试项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-30
- **Last Updated**: 2024-12-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 功能界面
## 1、手机号注册
![images/mobileLogin.png](images/mobileLogin.png)

1、国家地区选择：使用HMRouter路由跳转 选择地区后关闭当前界面 退回到 注册/登录界面 并且携带 选中的地区对象

2、许可协议使用webview渲染HTML内容进行显示协议信息

3、前端格式校验 后端也会进行格式、频率校验。全局已经使用axios 进行错误拦截。使用harmony-dialog进行错误提示

## 2、验证码校验
![images/verifycode.png](images/verifycode.png)

1、登录验证 调用后端接口获取token与用户信息，保存到首选项中

2、因为HMRouter导致大部分生命周期失效 重定义生命周期 在onShown与onHidden对定时器创建与销毁进行控制 并且通过传递对象控制UI的渲染

3、其他路由使用拦截器进行登录校验

## 3、主界面
![images/index.png](images/index.png)

1、使用Tabs配合TabContent 实现底部导航切换

2、在aboutToAppear生命周期中调用后端接口(调用service方法通过自定义注解控制缓存)
获取轮播图片与推荐商品

## 4、分类界面
![images/category.png](images/category.png)

1、调用后端接口获取无限极分类数据

2、左侧使用list与ListItem组件现实出第一层的分类

3、左侧顶级分类点击事件，切换数据动态渲染右侧二级、三级导航

## 5、详情界面
![images/goodsDetail.png](images/goodsDetail.png)

1、通过路由传递的参数获取到商品的详情

2、使用内置的swiper组件轮播显示相册

3、通过弹出层选择商品sku信息实现弹出层与详情界面进行交互

4、使用hp-richtext插件渲染出后端的HTML内容

## 6、购物车界面
![images/carts.png](images/carts.png)

1、调用后端接口获取用户购物车数据

2、实现全选、加、减 计算价格功能

3、点击结算根据勾选的商品切换到结算界面并且携带勾选商品购物车编号

## 7、结算界面
![images/submitOrder.png](images/submitOrder.png)

此界面只是显示了结算商品与支付方式，还未对接支付功能

## 8、个人中心界面
![images/user.png](images/user.png)

1、头像上传  使用picker选中图片 然后上传到服务器上拿到服务器地址在更新 首选项中缓存的数据