uniapp项目之小兔鲜儿小程序商城(六) 地址模块:地址管理页的实现,地址表单页的实现

地址模块

地址模块共两个页面：地址管理页 address.vue和地址表单页address-form.vue,两个页面都作为会员中心页my.vue的分包,可以在pageMember路径下创建:新建uniapp 页面(分包)

业务流程:

    在`my`页点击我的收货地址可以跳转到`address`页,该页负责地址的管理(增删改),
点击删除可以在当前页操作,点击增加或修改时会跳转到`address-form`页,并根据是否传入id来区分具体是增加还是修改

1.静态结构

新建src/pageMember/address/address.vue,并准备静态页面如下

<script setup lang="ts">
//
</script><template><view class="viewport"><!-- 地址列表 --><scroll-view class="scroll-view" scroll-y><view v-if="true" class="address"><view class="address-list"><!-- 收货地址项 --><view class="item"><view class="item-content"><view class="user">黑马小王子<text class="contact">13111111111</text><text v-if="true" class="badge">默认</text></view><view class="locate">广东省 广州市 天河区 黑马程序员</view><navigatorclass="edit"hover-class="none":url="`/pagesMember/address-form/address-form?id=1`">修改</navigator></view></view><!-- 收货地址项 --><view class="item"><view class="item-content"><view class="user">黑马小公主<text class="contact">13222222222</text><text v-if="false" class="badge">默认</text></view><view class="locate">北京市 北京市 顺义区 黑马程序员</view><navigatorclass="edit"hover-class="none":url="`/pagesMember/address-form/address-form?id=2`">修改</navigator></view></view></view></view><view v-else class="blank">暂无收货地址</view></scroll-view><!-- 添加按钮 --><view class="add-btn"><navigator hover-class="none" url="/pagesMember/address-form/address-form">新建地址</navigator></view></view>
</template><style lang="scss">
page {height: 100%;overflow: hidden;
}/* 删除按钮 */
.delete-button {display: flex;justify-content: center;align-items: center;width: 50px;height: 100%;font-size: 28rpx;color: #fff;border-radius: 0;padding: 0;background-color: #cf4444;
}.viewport {display: flex;flex-direction: column;height: 100%;background-color: #f4f4f4;.scroll-view {padding-top: 20rpx;}
}.address {padding: 0 20rpx;margin: 0 20rpx;border-radius: 10rpx;background-color: #fff;.item-content {line-height: 1;padding: 40rpx 10rpx 38rpx;border-bottom: 1rpx solid #ddd;position: relative;.edit {position: absolute;top: 36rpx;right: 30rpx;padding: 2rpx 0 2rpx 20rpx;border-left: 1rpx solid #666;font-size: 26rpx;color: #666;line-height: 1;}}.item:last-child .item-content {border: none;}.user {font-size: 28rpx;margin-bottom: 20rpx;color: #333;.contact {color: #666;}.badge {display: inline-block;padding: 4rpx 10rpx 2rpx 14rpx;margin: 2rpx 0 0 10rpx;font-size: 26rpx;color: #27ba9b;border-radius: 6rpx;border: 1rpx solid #27ba9b;}}.locate {line-height: 1.6;font-size: 26rpx;color: #333;}
}.blank {margin-top: 300rpx;text-align: center;font-size: 32rpx;color: #888;
}.add-btn {height: 80rpx;text-align: center;line-height: 80rpx;margin: 30rpx 20rpx;color: #fff;border-radius: 80rpx;font-size: 30rpx;background-color: #27ba9b;
}
</style>

2.动态设置标题

新建地址和修改地址共用一个地址表单页,根据页面参数id来动态设置页面标题
(携带id 的是修改地址,不携带的是新建地址)
在address-form页中动态设置页面标题如下:

// 获取页面参数
const query = defineProps<{id?: string
}>()
// 动态设置标题
uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })

3.功能:新建地址

业务逻辑:新用户没有收货地址,必须先新建地址,新建成功后返回上一页(address页)
功能实现:前端提供表单数据,并提交表单给后端

3.1.封装api接口

接口文档:https://www.apifox.cn/apidoc/shared/0e6ee326-d646-41bd-9214-29dbf47648fa/api-43426957
新建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,})
}

3.2.类型声明

新建 src/types/address.d.ts

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

3.3.收集表单数据

*注:switch也不支持v-model,处理方法和picker一样,通过@change收集数据

• step1:通过在组件上绑定@change事件或v-model收集数据

    <form><!-- 表单内容 --><view class="form-item"><text class="label">收货人</text><input class="input" placeholder="请填写收货人姓名" value="" /></view><view class="form-item"><text class="label">手机号码</text><input class="input" placeholder="请填写收货人手机号码" value="" /></view><view class="form-item"><text class="label">所在地区</text><!-- picker通过@change收集数据 --><!-- :value是用于前端展示,@change收集地区数据 --><pickerclass="picker"mode="region":value="form.fullLocation.split(' ')"@change="onRegionChange"><view v-if="false">{{ form.fullLocation }}</view><view v-else class="placeholder">请选择省/市/区(县)</view></picker></view><view class="form-item"><text class="label">详细地址</text><!-- input直接通过v-model绑定数据 --><input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" /></view><view class="form-item"><label class="label">设为默认地址</label><!-- switch通过@change收集数据 --><switchclass="switch"color="#27ba9b":checked="form.isDefault === 1"@change="onSwitchChange"/></view></form>

• step2:在事件中获取数据

// 获取省市区数据
const onRegionChange = (e) => {// 省市区(前端展示)form.value.fullLocation = e.detail.value.join(' ') //数组转字符串// 省市区编码(后端参数)const { provinceCode, cityCode, countyCode } = e.detail.code!// 合并数据Object.assign(form.value, {provinceCode,cityCode,countyCode,})
}
// 获取是否是默认地址
const onSwitchChange: UniHelper.SwitchOnChange = (e) => {form.value.isDefault = e.detail.value ? 1 : 0
}

• step3:提交更新数据:页面调用api接口

<!-- 提交按钮 -->
<button @tap="onSubmit" class="button">保存并使用</button>

import { postMemberAddressAPI } from '@/services/address'
// 提交数据
const onSubmit = async () => {// 新建地址请求await postMemberAddressAPI(form.value)// 成功提示uni.showToast({title: '添加成功',icon: 'success',})// 返回上一页setTimeout(() => {uni.navigateBack()}, 400)
}

4.address页的列表渲染

4.1.封装api接口

官方文档:https://www.apifox.cn/apidoc/shared/0e6ee326-d646-41bd-9214-29dbf47648fa/api-43426956

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

4.2.页面调用

//address.vue//获取收获地址的列表数据
const addressList=ref<AddressItem[]>([])
const getMemberAddressData=async()=>{const res=await getMemberAddressAPI()addressList.value=res.result
}
onLoad(()=>{getMemberAddressData()
})

4.3.类型声明(复用)

• 声明AddressItem类型

//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
}
/*****优化为:******/
/** 收货地址项 */
export type AddressItem = AddressParams & {/** 收货地址 id */id: string/** 省市区 */fullLocation: string
}

• 给res.result声明类型

export const getMemberAddressAPI = () => {return http<AddressItem[]>({method: 'GET',url: '/member/address',})
}

• 给addressList声明类型

const addressList=ref<AddressItem[]>([])

• 优化:把goods.d.ts中也存在的AddressItem删掉,从address.d.ts导入

4.5.动态渲染

<!-- 收货地址项 -->
<view class="item" v-for="item in addressList" :key="item.id"><view class="item-content"><view class="user">{{ item.receiver }}<text class="contact">{{ item.contact }}</text><text v-if="item.isDefault" class="badge">默认</text></view><view class="locate">{{ item.fullLocation }} {{ item.receiver }}</view><navigatorclass="edit"hover-class="none":url="`/pagesMember/address-form/address-form?id=${item.id}`">修改</navigator></view>
</view>

4.5.优化:onLoad不能实时获取最新地址数据

用户在address-form页新增地址后,返回上一页(address页)
此时address页中的onLoad不能获取最新的地址数据,(只会在初始化时调用一次,在页面切换时也会保留数据)
应优化为:

import { onShow } from '@dcloudio/uni-app'
onShow(() => {getMemberAddressData()
})

5.功能:修改地址–数据回显

要求在address-form页中显示数据

5.1.封装api接口

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

5.2.当有id时(修改操作),页面调用

import { postMemberAddressAPI, getMemberAddressByIdAPI } from '@/services/address'
const getMemberAddressByIdData=async()=>{if(query.id){//有id时是修改功能const res =await getMemberAddressByIdAPI(query.id)//获取收获地址详情数据Object.assgin(form.value,res.result)//把数据合并到表单中}
}
onLoad(()=>{getMemberAddressByIdData()
})

6.功能:修改地址–提交表单并保存修改

要求:在用户点击提交按钮时,把表单数据存到后端
思路:

在用户点击按钮时,在按钮事件的内部判断是否有id,有:调修改地址的api,轻提示没有:调新建地址的api,轻提示

6.1.封装api接口

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

6.2.提交事件中:判断id+调用接口

import { postMemberAddressAPI, getMemberAddressByIdAPI, putMemberAddressByIdAPI } from '@/services/address'
const onSubmit = async () => {if (query.id) {// 修改地址请求await putMemberAddressByIdAPI(query.id, form.value)} else {// 新建地址请求await postMemberAddressAPI(form.value)}......
}

7.表单校验

用户新增或修改地址时,对填写的地址数据进行校验
使用到了uni-forms组件
https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html
(省流:属性和用法都类似Element-plus 的el-form,除了把props改成name)

7.1.回顾对比,element-plus中如何添加表单校验?

step1:准备formModel对象--代表整个用于提交的form数据对象---formRef
step2:再准备校验规则rules对象
step3:在el-form中绑定formModel和rules---uni-forms
step4:配置prop来绑定具体的校验规则,以示生效的是哪条规则---name
step5:在与username相关的el-input中v-model绑定formModel的子属性username---input和formRef

7.2.在uni-forms中添加表单校验

address-form.vue完整代码

<script setup lang="ts">
import { ref } from 'vue'
import {postMemberAddressAPI,getMemberAddressByIdAPI,putMemberAddressByIdAPI,
} from '@/services/address'
import { onLoad } from '@dcloudio/uni-app'
// 表单数据
const form = ref({receiver: '', // 收货人contact: '', // 联系方式fullLocation: '', // 省市区(前端展示)provinceCode: '', // 省份编码(后端参数)cityCode: '', // 城市编码(后端参数)countyCode: '', // 区/县编码(后端参数)address: '', // 详细地址isDefault: 0, // 默认地址，1为是，0为否
})
//获取页面参数
const query = defineProps<{id: string
}>()
// 动态设置标题
uni.setNavigationBarTitle({title: query.id ? '修改地址' : '新增地址',
})
/*修改功能--数据回显*/
//获取收获地址详情数据
const getMemberAddressByIdData = async () => {if (query.id) {//有id才是修改功能const res = await getMemberAddressByIdAPI(query.id)Object.assign(form.value, res) //把数据合并到表单中}
}
onLoad(() => {getMemberAddressByIdData()
})
// 获取省市区数据
const onRegionChange = (e: any) => {// 省市区(前端展示)form.value.fullLocation = e.detail.value.join(' ') //数组转字符串// 省市区编码(后端参数)const { provinceCode, cityCode, countyCode } = e.detail.code!// 合并数据Object.assign(form.value, {provinceCode,cityCode,countyCode,})
}
// 获取是否是默认地址
const onSwitchChange: UniHelper.SwitchOnChange = (e) => {form.value.isDefault = e.detail.value ? 1 : 0
}
// 提交数据
const onSubmit = async () => {if (query.id) {// 修改地址请求await putMemberAddressByIdAPI(query.id, form.value)} else {// 新建地址请求await postMemberAddressAPI(form.value)}// 成功提示uni.showToast({title: '添加成功',icon: 'success',})// 返回上一页setTimeout(() => {uni.navigateBack()}, 400)
}
/*表单校验*/
// step1:准备formRef对象,用于收集表单数据
const formRef = ref<UniHelper.UniFormsInstance>()
// step2.定义校验规则
const rules: UniHelper.UniFormsRules = {receiver: {rules: [{ required: true, errorMessage: '请输入收货人姓名' }],},contact: {rules: [{ required: true, errorMessage: '请输入联系方式' },{ pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },],},fullLocation: {rules: [{ required: true, errorMessage: '请选择所在地区' }],},address: {rules: [{ required: true, errorMessage: '请选择详细地址' }],},
}
</script><template><view class="content"><!-- step3:改变表单结构:form=>uni-forms,并绑定rules和formRef --><uni-forms :rules="rules" ref="formRef" :model="form"><!-- 表单内容 --><!-- step4:view替换成uni-forms-item,并配置name来绑定具体的校验规则 --><uni-forms-item class="form-item" name="receiver"><text class="label">收货人</text><!-- step5:在与receiver相关的input中,v-model绑定form的子属性receiver --><input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" /></uni-forms-item><uni-forms-item class="form-item" name="contact"><text class="label">手机号码</text><input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" /></uni-forms-item><uni-forms-item class="form-item" name="fullLocation"><text class="label">所在地区</text><!-- picker通过@change收集数据 --><!-- :value是用于前端展示,@change收集地区数据 --><pickerclass="picker"mode="region":value="form.fullLocation.split(' ')"@change="onRegionChange"><view v-if="false">{{ form.fullLocation }}</view><view v-else class="placeholder">请选择省/市/区(县)</view></picker></uni-forms-item><uni-forms-item class="form-item" name="address"><text class="label">详细地址</text><!-- input直接通过v-model绑定数据 --><input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" /></uni-forms-item><uni-forms-item class="form-item"><label class="label">设为默认地址</label><!-- switch通过@change收集数据 --><switchclass="switch"color="#27ba9b":checked="form.isDefault === 1"@change="onSwitchChange"/></uni-forms-item></uni-forms></view><!-- 提交按钮 --><button class="button" @tap="onSubmit">保存并使用</button>
</template>

8.功能:删除地址

删除功能在address页中实现,删除按钮在用户侧滑编辑按钮后出现
使用到了uni-swipe-action组件来实现侧滑操作
https://uniapp.dcloud.net.cn/component/uniui/uni-swipe-action.html

8.1.封装api接口

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

8.2.页面调用

步骤:

step1:仿造uni-swipe-action组件改造列表结构step2:绑定删除事件step3:二次确认删除step4:删除地址(调用api接口)

address.vue

<script setup lang="ts">
import { getMemberAddressAPI, deleteMemberAddressByIdAPI } from '@/services/address'// step2:绑定删除事件
const onDeleteAddress = (id: string) => {// step3:二次确认删除uni.showModal({content: '删除地址?',success: async (res) => {if (res.confirm) {// step4:删除地址(调用api接口)---根据id删除收货地址await deleteMemberAddressByIdAPI(id)// 重新获取收货地址列表getMemberAddressData()}},})
}
</script>
<template><view class="viewport"><!-- 地址列表 --><scroll-view class="scroll-view" scroll-y><view v-if="addressList.length" class="address"><uni-swipe-action class="address-list"><!-- 收货地址项 --><!-- step1:改变页面标签 --><uni-swipe-action-item class="item" v-for="item in addressList" :key="item.id">......</uni-swipe-action-item></uni-swipe-action></view><view v-else class="blank">暂无收货地址</view></scroll-view><!-- 添加按钮 --><view class="add-btn"><navigator hover-class="none" url="/pagesMember/address-form/address-form">新建地址</navigator></view></view>
</template>