小程序-收货地址管理模块实现

页面结构代码：

address-form.vue   --->新建地址和修改地址页面

<template><view class="content"><form><!-- 表单内容 --><view class="form-item"><text class="label">收货人</text><input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" /></view><view class="form-item"><text class="label">手机号码</text><input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" /></view><view class="form-item"><text class="label">所在地区</text><picker@change="onRegionChange"class="picker"mode="region":value="form.fullLocation.split(' ')"><view v-if="form.fullLocation">{{ form.fullLocation }}</view><view v-else class="placeholder">请选择省/市/区(县)</view></picker></view><view class="form-item"><text class="label">详细地址</text><input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" /></view><view class="form-item"><label class="label">设为默认地址</label><switch@change="onSwitchChange"class="switch"color="#27ba9b":checked="form.isDefault === 1"/></view></form></view><!-- 提交按钮 --><button class="button" @tap="onSubmit">保存并使用</button>
</template>

address.vue   --->  地址列表页面

<template><view class="viewport"><!-- 地址列表 --><scroll-view class="scroll-view" scroll-y><view v-if="true" class="address"><view class="address-list"><!-- 收货地址项 --><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.address }}</view><navigatorclass="edit"hover-class="none":url="`/pagesMember/address-form/address-form?id=${item.id}`">修改</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>

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<AddressItem[]>({

    method: 'GET',

    url: '/member/address',

  })

}

初始化调用：address.vue

<script setup lang="ts">

import { getMemberAddressAPI } from '@/services/address'

import type { AddressItem } from '@/types/address'

import { onShow } from '@dcloudio/uni-app'

import { ref } from 'vue'

// 获取收货地址列表数据

const addressList = ref<AddressItem>()

const getMemberAddressData = async () => {

  const res = await getMemberAddressAPI()

  console.log(res)

  addressList.value = res.result

}

// 页面展示  --  初始化调用

onShow(() => {

  getMemberAddressData()

})

</script>

渲染列表：

3、修改地址

封装 API 接口  --> 是否有地址 id ？   (有) --->初始化调用  --> 表单数据回显

封装 API 接口：address.ts

/**

 * 获取收货地址详情     用于回显修改表单上用户地址详情的数据

 * @param id 地址id（路径参数）

 * @returns

 */

export const getMemberAddressByIdAPI = (id: string) => {

  return http<AddressItem>({

    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<{

  id?: string

}>()

// 获取收货地址详情数据    并回显表单数据到修改地址页面

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

<uni-swipe-action class="address-list">

          <!-- 收货地址项 -->

          <uni-swipe-action-item 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.address }}</view>

              <navigator

                class="edit"

                hover-class="none"

                :url="`/pagesMember/address-form/address-form?id=${item.id}`"

              >

                修改

              </navigator>

            </view>

            <!-- 右侧插槽 -->

            <template #right>

              <button class="delete-button" @tap="onDeleteAddress(item.id)">删除</button>

            </template>

          </uni-swipe-action-item>

        </uni-swipe-action>

封装删除接口 API     --> address.ts

/**

 * 删除收货地址

 * @param id 地址id(路径参数)

 * @returns

 */

export const deleteMemberAddressByIdAPI = (id: string) => {

  return http({

    method: 'DELETE',

    url: `/member/address/${id}`

  })

}

绑定删除事件  --> 二次确认删除  -->  调用删除地址API              address.vue

删除成功