feat: 地址簿、新增、编辑

src/pages.json

@@ -96,6 +96,24 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/mine/addressBook",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "Address Book",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
+      "path": "pages/mine/addressBookOperate",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "Address Book",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
     {
       "path": "pages/mine/mine",
       "type": "page",

src/pages/mine/addressBook.vue

@@ -0,0 +1,75 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: 'Address Book',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
+
+defineOptions({
+  name: 'AddressBook', // 地址簿
+})
+// z-paging
+const paging = ref(null)
+// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
+useZPaging(paging)
+// 搜索结果
+const dataList = ref([])
+function queryList(pageNo, pageSize) {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  setTimeout(() => {
+    dataList.value = [
+      { title: '123' },
+      { title: '123' },
+      { title: '123' },
+      { title: '12345' },
+    ]
+    paging.value.complete(dataList.value)
+  }, 1000)
+}
+function toPage(url: string) {
+  uni.navigateTo({
+    url,
+  })
+}
+</script>
+
+<template>
+  <z-paging ref="paging" use-page-scroll refresher-only @query="queryList">
+    <view class="py-20rpx">
+      <view class="flex items-center justify-between bg-white px-22rpx py-18rpx">
+        <view class="flex-1">
+          <view class="mb-20rpx text-24rpx">
+            <text class="mr-20rpx">
+              Aamir Khan
+            </text>
+            <text>0642251008</text>
+          </view>
+          <view class="text-22rpx text-#3A444C">
+            55/66 The Bliss Koolpunt Vlile 16, P3QM+RW8, San Kamphaeng, San Kamphaeng District, Chiang Mai  50130
+          </view>
+        </view>
+        <wd-icon name="arrow-right" custom-class="flex-shrink-0 ml-8rpx" color="#7D7D7D" size="24rpx" />
+      </view>
+    </view>
+    <template #bottom>
+      <view class="bg-white/60 px-28rpx py-30rpx backdrop-blur-20">
+        <wd-button plain block @click="toPage('/pages/mine/addressBookOperate')">
+          Add New Address
+        </wd-button>
+      </view>
+    </template>
+  </z-paging>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/mine/addressBookOperate.vue

@@ -0,0 +1,98 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: 'Address Book',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
+
+defineOptions({
+  name: 'AddressBookOperate', // 地址簿新增&编辑
+})
+// z-paging
+const paging = ref(null)
+// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
+useZPaging(paging)
+
+const model = ref({})
+</script>
+
+<template>
+  <z-paging ref="paging" use-page-scroll>
+    <view class="py-20rpx">
+      <wd-form ref="form" :model="model">
+        <wd-cell-group border>
+          <wd-input
+            v-model="model.value1"
+            label="Full Name"
+            label-width="240rpx"
+            custom-label-class="text-28rpx"
+            prop="value1"
+            clearable
+            placeholder="Full Name"
+            :rules="[{ required: true, message: 'Full Name is required' }]"
+          />
+          <wd-input
+            v-model="model.value1"
+            label="Phone Number"
+            label-width="240rpx"
+            custom-label-class="text-28rpx"
+            prop="value1"
+            clearable
+            placeholder="+88"
+            :rules="[{ required: true, message: 'Phone Number is required' }]"
+          />
+          <wd-input
+            v-model="model.value1"
+            label="Privince/District"
+            label-width="240rpx"
+            custom-label-class="text-28rpx"
+            prop="value1"
+            clearable
+            placeholder="Please choose"
+            :rules="[{ required: true, message: 'Privince/District is required' }]"
+          />
+          <wd-cell title="Floor/Unit No./Street" vertical required>
+            <wd-textarea
+              v-model="model.value1"
+
+              prop="value1"
+              clearable auto-height
+              placeholder="Detailed address"
+              :rules="[{ required: true, message: 'Floor/Unit No./Street is required' }]"
+            />
+          </wd-cell>
+          <wd-input
+            v-model="model.value1"
+            label="Postcode"
+            label-width="240rpx"
+            custom-label-class="text-28rpx"
+            prop="value1"
+            clearable
+            placeholder="Your postcode"
+            :rules="[{ required: true, message: 'Postcode is required' }]"
+          />
+        </wd-cell-group>
+      </wd-form>
+    </view>
+    <template #bottom>
+      <view class="bg-white/60 px-28rpx py-30rpx backdrop-blur-20">
+        <wd-button plain block>
+          Save
+        </wd-button>
+      </view>
+    </template>
+  </z-paging>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/mine/mine.vue

@@ -40,7 +40,7 @@ function queryList(pageNo, pageSize) {
 // 简单的模拟数据
 const menuList = ref([
   { name: 'My Profile', url: '/pages/mine/myProfile' },
-  { name: 'Address Book' },
+  { name: 'Address Book', url: '/pages/mine/addressBook' },
   { name: 'Share' },
   { name: 'My Favorite' },
   { name: 'Live Chat' },

src/style/index.scss

@@ -37,3 +37,7 @@ page {
     }
   }
 }
+
+.wd-tabs__nav-item.is-active {
+  font-weight: bold !important;
+}