地址模块接口

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

@@ -1,37 +1,76 @@
 <template>
   <view class="content">
-    <form>
+    <uni-forms :rules="rules" :model="form" ref="formRef">
       <!-- 表单内容 -->
-      <view class="form-item">
+      <uni-forms-item name="receiver" class="form-item">
         <text class="label">收货人</text>
-        <input class="input" placeholder="请填写收货人姓名" value="" />
-      </view>
-      <view class="form-item">
+        <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
+      </uni-forms-item>
+      <uni-forms-item name="contact" class="form-item">
         <text class="label">手机号码</text>
-        <input class="input" placeholder="请填写收货人手机号码" value="" />
-      </view>
-      <view class="form-item">
+        <input
+          class="input"
+          placeholder="请填写收货人手机号码"
+          :maxlength="11"
+          v-model="form.contact"
+        />
+      </uni-forms-item>
+      <uni-forms-item name="countyCode" class="form-item">
         <text class="label">所在地区</text>
-        <picker class="picker" mode="region" value="">
-          <view v-if="false">广东省 广州市 天河区</view>
+        <!-- #ifdef MP-WEIXIN -->
+        <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">
+        <!-- #endif -->
+
+        <!-- #ifdef H5 || APP-PLUS -->
+        <uni-data-picker
+          placeholder="请选择地址"
+          popup-title="请选择城市"
+          collection="opendb-city-china"
+          field="code as value, name as text"
+          orderby="value asc"
+          :step-searh="true"
+          self-field="code"
+          parent-field="parent_code"
+          @change="onCityChange"
+          :clear-icon="false"
+          v-model="form.countyCode"
+        />
+        <!-- #endif -->
+      </uni-forms-item>
+      <uni-forms-item name="address" class="form-item">
         <text class="label">详细地址</text>
-        <input class="input" placeholder="街道、楼牌号等信息" value="" />
-      </view>
+        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
+      </uni-forms-item>
       <view class="form-item">
         <label class="label">设为默认地址</label>
-        <switch class="switch" color="#27ba9b" :checked="true" />
+        <switch
+          @change="onSwitchChange"
+          class="switch"
+          color="#27ba9b"
+          :checked="form.isDefault === 1"
+        />
       </view>
-    </form>
+    </uni-forms>
   </view>
   <!-- 提交按钮 -->
-  <button class="button">保存并使用</button>
+  <button @tap="onSubmit" class="button">保存并使用</button>
 </template>
 
 <script setup lang="ts">
+import {
+  getMemberAddressByIdAPI,
+  postMemberAddressAPI,
+  putMemberAddressByIdAPI,
+} from '@/services/address'
+import { onLoad } from '@dcloudio/uni-app'
 import { ref } from 'vue'
 
 // 表单数据
@@ -51,11 +90,106 @@ const query = defineProps<{
   id?: string
 }>()
 
+// 获取收货地址详情数据
+const getMemberAddressByIdData = async () => {
+  if (query.id) {
+    // 发送请求
+    const res = await getMemberAddressByIdAPI(query.id)
+    // 把数据合并到表单中
+    Object.assign(form.value, res.result)
+  }
+}
+
+// 页面加载
+onLoad(() => {
+  getMemberAddressByIdData()
+})
+
 // 动态设置标题
 uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })
+
+// 收集所在地区
+const onRegionChange: UniHelper.RegionPickerOnChange = (ev) => {
+  // 省市区(前端展示)
+  form.value.fullLocation = ev.detail.value.join(' ')
+  // 省市区(后端参数)
+  const [provinceCode, cityCode, countyCode] = ev.detail.code!
+  // form.value.provinceCode = provinceCode
+  Object.assign(form.value, { provinceCode, cityCode, countyCode })
+}
+
+// 收集是否默认收货地址
+const onSwitchChange: UniHelper.SwitchOnChange = (ev) => {
+  form.value.isDefault = ev.detail.value ? 1 : 0
+}
+
+// 定义校验规则
+const rules: UniHelper.UniFormsRules = {
+  receiver: {
+    rules: [{ required: true, errorMessage: '请输入收货人姓名' }],
+  },
+  contact: {
+    rules: [
+      { required: true, errorMessage: '请输入联系方式' },
+      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
+    ],
+  },
+  countyCode: {
+    rules: [{ required: true, errorMessage: '请选择所在地区' }],
+  },
+  address: {
+    rules: [{ required: true, errorMessage: '请选择详细地址' }],
+  },
+}
+
+// 表单组件实例
+const formRef = ref<UniHelper.UniFormsInstance>()
+
+// 提交表单
+const onSubmit = async () => {
+  try {
+    // 表单校验
+    await formRef.value?.validate?.()
+    // 校验通过后再发送请求
+    if (query.id) {
+      // 修改地址请求
+      await putMemberAddressByIdAPI(query.id, form.value)
+    } else {
+      // 新建地址请求
+      await postMemberAddressAPI(form.value)
+    }
+    // 成功提示
+    uni.showToast({ icon: 'success', title: query.id ? '修改成功' : '添加成功' })
+    // 返回上一页
+    setTimeout(() => {
+      uni.navigateBack()
+    }, 400)
+  } catch (error) {
+    uni.showToast({ icon: 'error', title: '请填写完整信息' })
+  }
+}
+
+// #ifdef H5 || APP-PLUS
+const onCityChange: UniHelper.UniDataPickerOnChange = (ev) => {
+  // 省市区
+  const [province, city, county] = ev.detail.value
+  // 收集后端所需的 code 数据
+  Object.assign(form.value, {
+    provinceCode: province.value,
+    cityCode: city.value,
+    countyCode: county.value,
+  })
+}
+// #endif
 </script>
 
 <style lang="scss">
+// 深度选择器修改 uni-data-picker 组件样式
+:deep(.selected-area) {
+  flex: 0 1 auto;
+  height: auto;
+}
+
 page {
   background-color: #f4f4f4;
 }
@@ -71,7 +205,7 @@ page {
     display: flex;
     align-items: center;
     min-height: 96rpx;
-    padding: 25rpx 10rpx 40rpx;
+    padding: 25rpx 10rpx;
     background-color: #fff;
     font-size: 28rpx;
     border-bottom: 1rpx solid #ddd;

src/pagesMember/address/address.vue

@@ -1,46 +1,35 @@
 <template>
   <view class="viewport">
     <!-- 地址列表 -->
-    <scroll-view class="scroll-view" scroll-y>
-      <view v-if="true" class="address">
-        <view class="address-list">
+    <scroll-view enable-back-to-top class="scroll-view" scroll-y>
+      <view v-if="addressList.length" class="address">
+        <uni-swipe-action class="address-list">
           <!-- 收货地址项 -->
-          <view class="item">
-            <view class="item-content">
+          <uni-swipe-action-item class="item" v-for="item in addressList" :key="item.id">
+            <view class="item-content" @tap="onChangeAddress(item)">
               <view class="user">
-                黑马小王子
-                <text class="contact">13111111111</text>
-                <text v-if="true" class="badge">默认</text>
+                {{ item.receiver }}
+                <text class="contact">{{ item.contact }}</text>
+                <text v-if="item.isDefault" class="badge">默认</text>
               </view>
-              <view class="locate">广东省 广州市 天河区 黑马程序员</view>
+              <view class="locate">{{ item.fullLocation }} {{ item.address }}</view>
+              <!-- H5 端需添加 .prevent 阻止链接的默认行为 -->
               <navigator
                 class="edit"
                 hover-class="none"
-                :url="`/pagesMember/address-form/address-form?id=1`"
+                :url="`/pagesMember/address-form/address-form?id=${item.id}`"
+                @tap.stop="() => {}"
+                @tap.prevent="() => {}"
               >
                 修改
               </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>
+            <!-- 右侧插槽 -->
+            <template #right>
+              <button @tap="onDeleteAddress(item.id)" class="delete-button">删除</button>
+            </template>
+          </uni-swipe-action-item>
+        </uni-swipe-action>
       </view>
       <view v-else class="blank">暂无收货地址</view>
     </scroll-view>
@@ -54,7 +43,49 @@
 </template>
 
 <script setup lang="ts">
-//
+import { deleteMemberAddressByIdAPI, getMemberAddressAPI } from '@/services/address'
+import { useAddressStore } from '@/stores/modules/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()
+  addressList.value = res.result
+}
+
+// 初始化调用(页面显示)
+onShow(() => {
+  getMemberAddressData()
+})
+
+// 删除收货地址
+const onDeleteAddress = (id: string) => {
+  // 二次确认
+  uni.showModal({
+    content: '删除地址?',
+    confirmColor: '#27BA9B',
+    success: async (res) => {
+      if (res.confirm) {
+        // 根据id删除收货地址
+        await deleteMemberAddressByIdAPI(id)
+        // 重新获取收货地址列表
+        getMemberAddressData()
+      }
+    },
+  })
+}
+
+// 修改收货地址
+const onChangeAddress = (item: AddressItem) => {
+  // 修改地址
+  const addressStore = useAddressStore()
+  addressStore.changeSelectedAddress(item)
+  // 返回上一页
+  uni.navigateBack()
+}
 </script>
 
 <style lang="scss">

src/services/address.ts

@@ -0,0 +1,59 @@
+import type { AddressItem, AddressParams } from '@/types/address'
+import { http } from '@/utils/http'
+
+/**
+ * 添加收货地址
+ * @param data 请求参数
+ */
+export const postMemberAddressAPI = (data: AddressParams) => {
+  return http({
+    method: 'POST',
+    url: '/member/address',
+    data,
+  })
+}
+
+/**
+ * 获取收货地址列表
+ */
+export const getMemberAddressAPI = () => {
+  return http<AddressItem[]>({
+    method: 'GET',
+    url: '/member/address',
+  })
+}
+
+/**
+ * 获取收货地址详情
+ * @param id 地址id(路径参数)
+ */
+export const getMemberAddressByIdAPI = (id: string) => {
+  return http<AddressItem>({
+    method: 'GET',
+    url: `/member/address/${id}`,
+  })
+}
+
+/**
+ * 修改收货地址
+ * @param id 地址id(路径参数)
+ * @param data 表单数据(请求体参数)
+ */
+export const putMemberAddressByIdAPI = (id: string, data: AddressParams) => {
+  return http({
+    method: 'PUT',
+    url: `/member/address/${id}`,
+    data,
+  })
+}
+
+/**
+ * 删除收货地址
+ * @param id 地址id(路径参数)
+ */
+export const deleteMemberAddressByIdAPI = (id: string) => {
+  return http({
+    method: 'DELETE',
+    url: `/member/address/${id}`,
+  })
+}

src/stores/modules/address.ts

@@ -0,0 +1,16 @@
+import type { AddressItem } from '@/types/address'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAddressStore = defineStore('address', () => {
+  const selectedAddress = ref<AddressItem>()
+
+  const changeSelectedAddress = (val: AddressItem) => {
+    selectedAddress.value = val
+  }
+
+  return {
+    selectedAddress,
+    changeSelectedAddress,
+  }
+})

src/types/address.d.ts

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