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>
              <navigator
                class="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>
              <navigator
                class="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收集地区数据 -->
        <picker
          class="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收集数据 -->
        <switch
          class="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>
    <navigator
      class="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收集地区数据 -->
        <picker
          class="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收集数据 -->
        <switch
          class="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>