小兔鲜儿 - 地址模块

目录

小兔鲜儿 - 地址模块

准备工作​

静态结构​

地址管理页​

地址表单页​

动态设置标题​

新建地址页​

接口封装​

参考代码​

地址管理页​

接口调用​

参考代码​

修改地址页​

数据回显​

更新地址​

表单校验​

操作步骤​

删除地址​

侧滑组件用法 

接口封装​

参考代码​

---

小兔鲜儿 - 地址模块

• 能够获取不同类型的表单数据
• 能够动态设置导航栏的标题
• 能够使用 uni-ui 组件库的组件
• 能够完成收货地址的增删改查的功能

准备工作

​

静态结构​

地址模块共两个页面：地址管理页，地址表单页 ，划分到会员分包中。

地址管理页​

src/pagesMember/address/address.vue

地址表单页​

src/pagesMember/address-form/address-form.vue

动态设置标题​

新建地址 和 修改地址 复用同一个地址表单页，需要根据页面参数 id 动态设置页面标题。

新建地址页

​

新用户没有收货地址，先完成新建地址，新建成功返回地址管理页。

主要功能：前端收集表单的数据，提交表单给后端。

接口封装​

接口调用

接口地址：/member/address

请求方式：POST

登录权限: 是

请求参数：

Body

字段名称	是否必须	类型	备注
receiver	是	string	收货人姓名
contact	是	string	收货人联系方式
provinceCode	是	string	省对应的 code
cityCode	是	string	市对应的 code
countyCode	是	string	区/县对应的 code
address	是	string	收货人详细地址
isDefault	是	number	是否设置为默认地址（数值类型）

接口封装

src/services/address.ts

import type { AddressParams } from '@/types/address'
import { http } from '@/utils/http'

/**
 * 添加收货地址
 * @param data 请求参数
 */
export const postMemberAddressAPI = (data: AddressParams) => {
  return http({
    method: 'POST',
    url: '/member/address',
    data,
  })
}

类型声明

src/types/address.d.ts

/** 添加收货地址: 请求参数 */
export type AddressParams = {
  /** 收货人姓名 */
  receiver: string
  /** 联系方式 */
  contact: string
  /** 省份编码 */
  provinceCode: string
  /** 城市编码 */
  cityCode: string
  /** 区/县编码 */
  countyCode: string
  /** 详细地址 */
  address: string
  /** 默认地址，1为是，0为否 */
  isDefault: number
}

参考代码​

地址表单页，input 组件通过 v-model 获取数据，其他表单组件结合 @change 事件获取。

地址管理页

​

为了能及时看到新建的收货地址，需在 onShow 生命周期中获取地址列表数据。

接口调用​

接口地址：/member/address

请求方式：GET

登录权限: 是

请求参数：无

接口封装

src/types/address.ts

/**
 * 获取收货地址列表
 */
export const getMemberAddressAPI = () => {
  return http({
    method: 'GET',
    url: '/member/address',
  })
}

类型声明

src/types/address.d.ts

/** 收货地址项 */
export type AddressItem = {
  /** 收货人姓名 */
  receiver: string
  /** 联系方式 */
  contact: string
  /** 省份编码 */
  provinceCode: string
  /** 城市编码 */
  cityCode: string
  /** 区/县编码 */
  countyCode: string
  /** 详细地址 */
  address: string
  /** 默认地址，1为是，0为否 */
  isDefault: number
  /** 收货地址 id */
  id: string
  /** 省市区 */
  fullLocation: string
}

复用地址类型：src/types/goods.d.ts

+ import type { AddressItem } from './global'

- /** 地址信息 */
- export type AddressItem = {
-   receiver: string
-   contact: string
-   provinceCode: string
-   cityCode: string
-   countyCode: string
-   address: string
-   isDefault: number
-   id: string
-   fullLocation: string
- }

温馨提示

用户登录后再访问商品详情，商品详情字段中包含用户收货地址列表，可以复用收货地址类型。

参考代码​

地址管理页

修改地址页

​

通过页面参数 id 来区分当前是修改地址还是新建地址。

数据回显​

修改地址之前，需要先实现数据回显，用户再进行有针对性的修改。

接口详情

接口地址：/member/address/:id

请求方式：GET

登录权限: 是

请求参数：

路径参数

字段名称	是否必须	默认值	备注
id	是	无	收货地址 ID

接口封装

src/services/address.ts

/**
 * 获取收货地址详情
 * @param id 地址id(路径参数)
 */
export const getMemberAddressByIdAPI = (id: string) => {
  return http({
    method: 'GET',
    url: `/member/address/${id}`,
  })
}

参考代码

页面初始化的时候根据 id 获取地址详情，把获取的数据合并到表单数据中，用于数据回显。

更新地址

​

将用户修改后的地址信息重新发送到服务端进行存储。

接口详情

接口地址：/member/address/:id

请求方式：PUT

登录权限: 是

请求参数：

路径参数

字段名称	是否必须	默认值	备注
id	是	无	收货地址 ID

Body

字段名称	是否必须	默认值	备注
receiver	是	无	收货人姓名
contact	是	无	收货人联系方式
provinceCode	是	无	行政省对应的 code
cityCode	是	无	行政市对应的 code
countyCode	是	无	行政区县对应的 code
address	是	无	收货人详细地址
isDefault	是	无	是否设置为默认地址（数值类型）

接口封装 

/**
 * 修改收货地址
 * @param id 地址id(路径参数)
 * @param data 表单数据(请求体参数)
 */
export const putMemberAddressByIdAPI = (id: string, data: AddressParams) => {
  return http({
    method: 'PUT',
    url: `/member/address/${id}`,
    data,
  })
}

参考代码

根据是否有地址 id 来判断提交表单到底是新建地址还是更新地址。

表单校验

​

通过 uni-ui 组件库的 uni-forms 组件实现表单校验。

操作步骤​

1. 定义校验规则
2. 修改表单结构
3. 绑定校验规则
4. 提交时校验表单

删除地址

​

通过 uni-ui 组件库的 uni-swipe-action 组件实现侧滑删除。

侧滑组件用法 

接口封装​

接口详情

接口地址：/member/address/:id

请求方式：DELETE

登录权限: 是

请求参数：

路径参数

字段名称	是否必须	默认值	备注
id	是	无	ID

接口封装

/**
 * 删除收货地址
 * @param id 地址id(路径参数)
 */
export const deleteMemberAddressByIdAPI = (id: string) => {
  return http({
    method: 'DELETE',
    url: `/member/address/${id}`,
  })
}

参考代码​

侧滑地址列表项，右侧显示删除按钮，删除地址前需二次确认。