行业知识
小程序-收货地址管理模块实现
页面结构代码：
address-form.vue --->新建地址和修改地址页面
收货人 手机号码 所在地区 {{ form.fullLocation }} 请选择省/市/区(县) 详细地址 设为默认地址 保存并使用 address.vue ---> 地址列表页面
{{ item.receiver }} {{ item.contact }} 默认 {{ item.fullLocation }} {{ item.address }} 修改 暂无收货地址 新建地址 form表单： address-form.vue
// 表单数据
const form = ref({
receiver: '', // 收货人
contact: '', // 联系方式
fullLocation: '', // 省市区(前端展示)
provinceCode: '', // 省份编码(后端参数)
cityCode: '', // 城市编码(后端参数)
countyCode: '', // 区/县编码(后端参数)
address: '', // 详细地址
isDefault: 0, // 默认地址，1为是，0为否
})
1、添加地址
实现思路：封装 API 接口 --> 定义参数类型 --> 点击保存调用接口 --> 成功提示 --> 返回上一页
封装接口：address.ts
/**
* 添加收货地址
* @param data 请求参数
* @returns
*/
export const postMemberAddressAPI = (data: AddressParams) => {
return http({
method: 'POST',
url: '/member/address',
data,
})
}
定义参数类型 ：address.d.ts
/** 添加收货地址: 请求参数 */
export type AddressParams = {
/** 收货人姓名 */
receiver: string
/** 联系方式 */
contact: string
/** 省份编码 */
provinceCode: string
/** 城市编码 */
cityCode: string
/** 区/县编码 */
countyCode: string
/** 详细地址 */
address: string
/** 默认地址，1为是，0为否 */
isDefault: number
}
点击保存按钮调用接口 --> 成功提示 --> 返回上一页： address-form.vue
// 保存并使用按钮
const onSubmit = async () => {
// 新建地址请求
await postMemberAddressAPI(form.value)
// 返回上一页
uni.navigateBack()
// 成功提示
uni.showToast({ icon: 'success', title: '添加成功' })
}
2、地址列表
实现思路：封装 API 接口 --> 初始化调用 --> 渲染列表
封装 API 接口：address.ts
/**
* 获取收货地址列表
* @returns
*/
export const getMemberAddressAPI = () => {
return http({
method: 'GET',
url: '/member/address',
})
}
初始化调用：address.vue
import { getMemberAddressAPI } from '@/services/address'
import type { AddressItem } from '@/types/address'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
// 获取收货地址列表数据
const addressList = ref()
const getMemberAddressData = async () => {
const res = await getMemberAddressAPI()
console.log(res)
addressList.value = res.result
}
// 页面展示 -- 初始化调用
onShow(() => {
getMemberAddressData()
})
渲染列表：
3、修改地址
封装 API 接口 --> 是否有地址 id ？ (有) --->初始化调用 --> 表单数据回显
封装 API 接口：address.ts
/**
* 获取收货地址详情 用于回显修改表单上用户地址详情的数据
* @param id 地址id（路径参数）
* @returns
*/
export const getMemberAddressByIdAPI = (id: string) => {
return http({
method: 'GET',
url: `/member/address/${id}`,
})
}
/**
* 修改收货地址
* @param id 地址id（路径）
* @param data 表单数据（请求体参数）
* @returns
*/
export const putMemberAddressByAPI = (id: string, data: AddressParams) => {
return http({
method: 'PUT',
url: `/member/address/${id}`,
data,
})
}
address-form.vue： 是否有地址 id ？ 有id - 修改地址 没用id - 新建地址
如果是修改地址的话，回显表单数据到页面
// 获取页面参数
const query = defineProps
p id?: string/p p}>()// 获取收货地址详情数据 并回显表单数据到修改地址页面
const getMemberAddressByIdData = async () => {
if (query.id) {
const res = await getMemberAddressByIdAPI(query.id)
// 把数据合并到表单中 即回显表单数据
Object.assign(form.value, res.result)
}
}
// 保存并使用按钮 修改或者新建地址按钮
const onSubmit = async () => {
if (query.id) {
// 修改地址请求
await putMemberAddressByAPI(query.id, form.value)
} else {
// 新建地址请求
await postMemberAddressAPI(form.value)
}
// 返回上一页
uni.navigateBack()
// 成功提示
uni.showToast({ icon: 'success', title: query.id ? '修改成功' : '添加成功' })
}
初始化调用：
// 页面加载 回显调用函数 - 回显数据
onLoad(() => {
getMemberAddressByIdData()
})
修改成功
4、删除地址
实现思路：使用 uni-swipe-action 侧滑组件 --> 绑定删除事件 --> 二次确认删除 --> 调用删除地址API
{{ item.receiver }}
{{ item.contact }}
默认
{{ item.fullLocation }} {{ item.address }}
修改
删除
封装删除接口 API --> address.ts
/**
* 删除收货地址
* @param id 地址id(路径参数)
* @returns
*/
export const deleteMemberAddressByIdAPI = (id: string) => {
return http({
method: 'DELETE',
url: `/member/address/${id}`
})
}
绑定删除事件 --> 二次确认删除 --> 调用删除地址API address.vue
删除成功
上一篇：魔站网上怎么运营?
