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