diff --git a/components/dForm/index.vue b/components/dForm/index.vue
index a5c0e1c..24ba612 100644
--- a/components/dForm/index.vue
+++ b/components/dForm/index.vue
@@ -12,10 +12,11 @@
 				</template>
 				<template v-else-if="item.type==='select'">
 					<up-input inputAlign="right" :value="getDesc(formData[item.key], item.options)" disabled disabledColor="#ffffff"
-						:placeholder="item.placeholder" border="none"></up-input>
-					<template #right>
-						<up-icon name="arrow-right"></up-icon>
-					</template>
+						:placeholder="item.placeholder" border="none">
+						<template #suffix>
+							<up-icon name="arrow-right" color="#999999" size="32rpx"></up-icon>
+						</template>
+					</up-input>
 				</template>
 				<template v-else-if="item.type==='radio'">
 					<up-radio-group v-model="formData[item.key]" placement="column">
@@ -35,10 +36,15 @@
 						:multiple="item.multiple" :maxCount="item.maxCount" :accept='item.accept'
 						:previewFullImage="item.previewFullImage"></up-upload>
 				</template>
+				<template v-else>
+					<view>
+						<slot :name="item.key"></slot>
+					</view>
+				</template>
 
 			</up-form-item>
 
-			<slot :name="item.key"></slot>
+			<slot :name="`${item.key}-extend`"></slot>
 
 		</div>
 		<up-button @click="handleSubmit" class="mt20" type="warning" v-if="isFooter">提交</up-button>
diff --git a/otherPages/authentication/components/popupSelect.vue b/otherPages/authentication/components/popupSelect.vue
new file mode 100644
index 0000000..dad2f22
--- /dev/null
+++ b/otherPages/authentication/components/popupSelect.vue
@@ -0,0 +1,93 @@
+<template>
+  <up-popup 
+    :show="show" 
+    round="16rpx"
+    @open="open" 
+    @close="close"
+  >
+    <view class="popup">
+      <view class="popup-header">
+        <text class="popup-title">{{ props.title }}</text>
+        <text class="popup-desc">{{ props.desc }}</text>
+      </view>
+      <view class="popup-content">
+        <slot></slot>
+      </view>
+      <view class="popup-footer">
+        <slot name="footer">
+          <button class="flex-rowc btn" plain @click="onConfirm">确定</button>
+        </slot>
+      </view>
+    </view>
+  </up-popup>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const props = defineProps({
+    title: {
+      type: String,
+      default: '',
+    },
+    desc: {
+      type: String,
+      default: '',
+    }
+  })
+
+  const emit = defineEmits(['confirm'])
+
+  const show = ref(false)
+
+  const open = () => {
+    show.value = true
+  }
+
+  const close = () => {
+    show.value = false
+  }
+
+  const onConfirm = () => {
+    emit('confirm')
+    close()
+  }
+
+  defineExpose({ open, close })
+</script>
+
+<style lang="scss" scoped>
+
+  .popup {
+    padding: 45rpx 28rpx 28rpx 28rpx;
+
+    &-header {
+      margin-bottom: 35rpx;
+    }
+
+    &-title {
+      color: #000000;
+      font-weight: 700;
+      font-size: 30rpx;
+      line-height: 40rpx;
+    }
+
+    &-desc {
+      color: #C7C7C7;
+      font-size: 22rpx;
+    }
+  }
+
+  .btn {
+    width: 594rpx;
+    height: auto;
+    padding: 27rpx 0;
+    box-sizing: border-box;
+    border: none;
+    background-color: #FFBF60;
+    color: #FFFFFF;
+    font-size: 30rpx;
+    line-height: 40rpx;
+    border-radius: 41rpx;
+  }
+</style>
\ No newline at end of file
diff --git a/otherPages/authentication/connectAddress/detail.vue b/otherPages/authentication/connectAddress/detail.vue
new file mode 100644
index 0000000..e738748
--- /dev/null
+++ b/otherPages/authentication/connectAddress/detail.vue
@@ -0,0 +1,12 @@
+<template>
+  <view class="page">
+
+  </view>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/otherPages/authentication/connectAddress/index.vue b/otherPages/authentication/connectAddress/index.vue
index d3dbdc0..c546a5a 100644
--- a/otherPages/authentication/connectAddress/index.vue
+++ b/otherPages/authentication/connectAddress/index.vue
@@ -1,53 +1,123 @@
 <template>
-	<view class="tips flex-rowl">
-		<image src="@/static/images/ydd/icon2.png" mode=""></image>
-		<text class="color-ffb size-22 ml16">普通喂养员可设置3个接单地址，优选喂养员可设置5个接单地址</text>
-	</view>
-	<view class="li bg-fff">
-		<view class="size-30">
-			四季阳光花城
-		</view>
-		<view class="size-22 color-777 mt16">
-			接单范围：10km
+	<view class="page">
+		<view class="tips flex-rowl">
+			<image src="@/static/images/ydd/icon2.png" mode=""></image>
+			<text class="color-ffb size-22 ml16">普通喂养员可设置3个接单地址，优选喂养员可设置5个接单地址</text>
 		</view>
-		<view class="content mt16">
-			<view class="flex-between">
-				<text class="size-22 color-999">不接单日期</text>
-				<view class="flex-rowr">
-					<text class="size-22 color-ccc">修改</text>
-					<image src="@/static/images/ydd/right.png" mode="widthFix" style="width: 20rpx;"></image>
+		<view v-if="list.length">
+			<view class="li bg-fff"
+				v-for="(item, index) in list"
+				:key="`address-${index}`"
+			>
+				<view class="size-30">
+					{{ item.area }}
 				</view>
-			</view>
-			<view class="color-999 size-22 mt16">
-				共0天：暂无不可接单日期
-			</view>
-		</view>
-
-		<view class="flex-between mt16">
-			<view class="flex-rowl">
-				<view class="color-ffb size-22">
-					接单中
+				<view class="size-22 color-777 mt16">
+					{{ `接单范围：${item.distance}km` }}
 				</view>
-				<switch checked="true" color="#FFBF60" style="transform: scale(0.6);" />
-			</view>
-			<view class="flex-rowr">
-				<view class="flex-rowl">
-					<image src="@/static/images/ydd/edit.png" mode="widthFix" style="width: 20rpx;"></image>
-					<text class="size-22 color-777 ml10">编辑</text>
+				<view class="content mt16">
+					<view class="flex-between">
+						<text class="size-22 color-999">不接单日期</text>
+						<view class="flex-rowr">
+							<text class="size-22 color-ccc">修改</text>
+							<image src="@/static/images/ydd/right.png" mode="widthFix" style="width: 20rpx;"></image>
+						</view>
+					</view>
+					<view class="color-999 size-22 mt16 flex-rowl">
+						<text>
+							{{ `共${item.disabledDate.length}天：` }}
+						</text>
+						<text class="text-ellipsis" style="flex: 1;">
+							{{ getDisabledDateDesc(item.disabledDate) }}
+						</text>
+					</view>
 				</view>
-				<view class="flex-rowl" style="margin-left: 50rpx;">
-					<image src="@/static/images/ydd/cancel.png" mode="widthFix" style="width: 20rpx;"></image>
-					<text class="size-22 color-777 ml10">删除</text>
+
+				<view class="flex-between mt16">
+					<view class="flex-rowl">
+						<view class="color-ffb size-22">
+							接单中
+						</view>
+						<switch checked="true" color="#FFBF60" style="transform: scale(0.6);" />
+					</view>
+					<view class="flex-rowr">
+						<view class="flex-rowl">
+							<image src="@/static/images/ydd/edit.png" mode="widthFix" style="width: 20rpx;"></image>
+							<text class="size-22 color-777 ml10">编辑</text>
+						</view>
+						<view class="flex-rowl" style="margin-left: 50rpx;">
+							<image src="@/static/images/ydd/cancel.png" mode="widthFix" style="width: 20rpx;"></image>
+							<text class="size-22 color-777 ml10">删除</text>
+						</view>
+					</view>
 				</view>
 			</view>
 		</view>
+		<view v-else class="flex-rowc">
+			<image class="icon-empty" src="../static/connectAddress/icon-empty.png" mode="widthFix"></image>
+		</view>
+		
+		<view class="footer-btn">
+			<view class="btn" @click="toAdd">
+				新增接单地址
+			</view>
+		</view>
 	</view>
 </template>
 
-<script>
+<script setup>
+	import { onShow } from '@dcloudio/uni-app'
+	import dayjs from 'dayjs'
+	import { usePageList } from "@/utils/pageList";
+		
+	// todo
+	const { list, total, getData } = usePageList()
+
+	onShow(() => {
+		// todo: delte test data
+		
+		list.value = [
+			{
+				area: '四季阳光花城',
+				distance: 10,
+				disabledDate: [],
+			},
+			{
+				area: '四季阳光花城',
+				distance: 10,
+				disabledDate: ['02-19', '02-20', '02-21', '02-22', '02-23', '02-24', '02-25', '02-26'],
+			},
+		]
+
+		console.log('--onShow', list.value)
+
+	})
+
+	const getDisabledDateDesc = (dateArr) => {
+		if (!dateArr.length) {
+			return '暂无不可接单日期'
+		}
+
+		return dateArr.map(date => dayjs(date).format('MM-DD')).join('、')
+	}
+
+	const toAdd = () => {
+		uni.navigateTo({
+			url: "/otherPages/authentication/connectAddress/detail"
+		})
+	}
+
 </script>
 
 <style lang="scss" scoped>
+	.page {
+		.icon-empty {
+			width: 259rpx;
+			height: auto;
+			margin-top: 240rpx;
+		}
+	}
+
 	.content {
 		background-color: #F3F3F3;
 		border-radius: 20rpx;
@@ -55,7 +125,7 @@
 	}
 
 	.li {
-		margin: 16rpx 24rpx;
+		margin: 16rpx 24rpx 0 24rpx;
 		border-radius: 20rpx;
 		padding: 24rpx;
 	}
@@ -69,4 +139,10 @@
 			height: 32rpx;
 		}
 	}
+
+	.text-ellipsis{
+		overflow:hidden; //超出的文本隐藏
+		text-overflow:ellipsis; //溢出用省略号显示
+		white-space:nowrap; //溢出不换行
+	}
 </style>
\ No newline at end of file
diff --git a/otherPages/authentication/examination/start.vue b/otherPages/authentication/examination/start.vue
index 4fc9131..be64bbf 100644
--- a/otherPages/authentication/examination/start.vue
+++ b/otherPages/authentication/examination/start.vue
@@ -6,9 +6,9 @@
 				<view class="com-title size-32 fw700 flex-rowl">
 					您选择的宠物类型
 				</view>
-				<image class="mt32" v-if="petType === 'cat'" src="../static/list/cat-active.png" mode="widthFix"></image>
-				<image class="mt32" v-else-if="petType === 'dog'" src="../static/list/dog-active.png" mode="widthFix"></image>
-				<image class="mt32" v-else-if="petType === 'special-pet'" src="../static/list/special-pet-active.png" mode="widthFix"></image>
+				<image class="mt32" v-if="petType === 'cat'" src="@/static/images/ydd/cat-active.png" mode="widthFix"></image>
+				<image class="mt32" v-else-if="petType === 'dog'" src="@/static/images/ydd/dog-active.png" mode="widthFix"></image>
+				<image class="mt32" v-else-if="petType === 'special-pet'" src="@/static/images/ydd/special-pet-active.png" mode="widthFix"></image>
 			</view>
 
 			<view class="text po-r bg-fff">
diff --git a/otherPages/authentication/list/index.vue b/otherPages/authentication/list/index.vue
index e32bb06..4975b07 100644
--- a/otherPages/authentication/list/index.vue
+++ b/otherPages/authentication/list/index.vue
@@ -53,20 +53,35 @@
 				<view class="flex-between wrap mt32">
 
 					<view class="type">
-						<image src="../static/list/cat.png" mode="widthFix" @click="onSelectPet('cat')"></image>
-						<image class="active" v-if="petType === 'cat'" src="../static/list/cat-active.png" mode="widthFix"></image>
+						<image src="@/static/images/ydd/cat.png" mode="widthFix" @click="onSelectPetType('cat')"></image>
+						<template v-if="petType === 'cat'">
+							<image class="active" src="@/static/images/ydd/cat-active.png" mode="widthFix"></image>
+							<view class="active-icon">
+								<up-icon name="checkmark-circle" color="#FFBF60" size="32rpx"></up-icon>
+							</view>
+						</template>
 					</view>
 
 					
 					<view class="type">
-						<image src="../static/list/dog.png" mode="widthFix" @click="onSelectPet('dog')"></image>
-						<image class="active" v-if="petType === 'dog'" src="../static/list/dog-active.png" mode="widthFix"></image>
+						<image src="@/static/images/ydd/dog.png" mode="widthFix" @click="onSelectPetType('dog')"></image>
+						<template v-if="petType === 'dog'">
+							<image class="active" src="@/static/images/ydd/dog-active.png" mode="widthFix"></image>
+							<view class="active-icon">
+								<up-icon name="checkmark-circle" color="#FFBF60" size="32rpx"></up-icon>
+							</view>
+						</template>
 					</view>
 
 					
 					<view class="type">
-						<image src="../static/list/special-pet.png" mode="widthFix" @click="onSelectPet('special-pet')"></image>
-						<image class="active" v-if="petType === 'special-pet'" src="../static/list/special-pet-active.png" mode="widthFix"></image>
+						<image src="@/static/images/ydd/special-pet.png" mode="widthFix" @click="onSelectPetType('special-pet')"></image>
+						<template v-if="petType === 'special-pet'">
+							<image class="active" src="@/static/images/ydd/special-pet-active.png" mode="widthFix"></image>
+							<view class="active-icon">
+								<up-icon name="checkmark-circle" color="#FFBF60" size="32rpx"></up-icon>
+							</view>
+						</template>
 					</view>
 
 				</view>
@@ -192,7 +207,7 @@
 	};
 
 	const petType = ref()
-	const onSelectPet = (type) => {
+	const onSelectPetType = (type) => {
 		petType.value = type
 	}
 
@@ -257,6 +272,12 @@
 			position: absolute;
 			top: 0;
 			left: 0;
+			
+      &-icon {
+  			position: absolute;
+        top: 14rpx;
+        right: 18rpx;
+      }
 		}
 	}
 
diff --git a/otherPages/authentication/serve/index.vue b/otherPages/authentication/serve/index.vue
index 7939c0a..857b5e6 100644
--- a/otherPages/authentication/serve/index.vue
+++ b/otherPages/authentication/serve/index.vue
@@ -1,65 +1,122 @@
 <template>
-	<view class="box bg-fff">
-		<view class="size-22 color-ffb tip">
-			❗完善服务信息和接单状态后，才可以开始接单哦！
+	<view class="page bg-fff">
+		<view class="size-22 color-ffb flex-rowl tip">
+			<up-icon class="icon" name="error-circle" color="#FFBF60" size="36rpx"></up-icon>
+			<text>完善服务信息和接单状态后，才可以开始接单哦！</text>
 		</view>
-		<view class="title mt24">
-			基本资料
+		<view class="info">
+			<view class="title mt24">
+				基本资料
+			</view>
+			<view class="flex-colc">
+				<button class="btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+					<view class="flex-colc">
+						<image class="head" :src="form.headImage" mode="widthFix"></image>
+						<text class="size-28 color-999 mt10">点击更换头像</text>
+					</view>
+				</button>
+			</view>
+			<view class="form">
+				<DForm ref="baseInfoRef" :list="state.baseInfoList" @input="handleSubmit"></DForm>
+			</view>
 		</view>
-		<view class="flex-colc">
-			<image class="head" src="@/static/images/ydd/img.png" mode="widthFix"></image>
-			<text class="size-28 color-999 mt10">点击更换头像</text>
+
+		<view class="info">
+			<view class="title mt24 flex-rowl">
+				展示信息
+				<text class="size-22 color-ffb fw700">(重要)</text>
+			</view>
+			<view class="form">
+				<DForm ref="displayInfoRef" :list="state.displayInfoList" @input="handleSubmit">
+					<!-- 服务记录 -->
+					<template v-slot:jilu>
+						<view class="flex-rowr" @click="jumpToServeRecord">
+							<text>{{ `${0}条` }}</text>
+							<up-icon name="arrow-right" color="#999999" size="32rpx"></up-icon>
+						</view>
+					</template>
+				</DForm>
+			</view>
 		</view>
-		<DForm :list="state.list" @submit="handleSubmit"></DForm>
 
-		<view class="title mt24 flex-rowl">
-			展示信息
-			<text class="size-22 color-ffb fw700">(重要)</text>
+		<view class="info">
+			<view class="title mt24 flex-rowl">
+				服务资料
+			</view>
+			<view class="form">
+				<DForm ref="serveInfoRef" :list="state.serveInfoList" @input="handleSubmit">
+					<!-- 服务宠物类型 -->
+					<template v-slot:type>
+						<view class="flex-rowr" @click="openTypeSelectPopup">
+							<text>{{ typeDesc }}</text>
+							<up-icon name="arrow-right" color="#999999" size="32rpx"></up-icon>
+						</view>
+					</template>
+					<!-- 增值服务 -->
+					<template v-slot:zenz>
+						<view class="flex-rowr" @click="openServeSelectPopup">
+							<text>{{ serveDesc }}</text>
+							<up-icon name="arrow-right" color="#999999" size="32rpx"></up-icon>
+						</view>
+					</template>
+				</DForm>
+			</view>
 		</view>
-		<DForm :list="state.list1" @submit="handleSubmit"></DForm>
 
-		<view class="title mt24 flex-rowl">
-			服务资料
+		<view class="size-24 color-ffb flex-rowc mt32 pb28">
+			伴宠师查看服务酬劳、服务时长等规则
 		</view>
-		<DForm :list="state.list2" @submit="handleSubmit"></DForm>
-	</view>
-	<view class="size-24 color-ffb flex-rowc mt32 pb28">
-		伴宠师查看服务酬劳、服务时长等规则
+
+		<popupTypeSelect ref="popupTypeSelectRef" v-model="form.type" ></popupTypeSelect>
+
+		<popupServeSelect ref="popupServeSelectRef" v-model="form.serve" :options="serveOptions" ></popupServeSelect>
+
 	</view>
 </template>
 
 <script setup>
+	import { ref, reactive, computed } from "vue";
+	import { onShow } from '@dcloudio/uni-app'
+	import { ossUpload } from '@/utils/oss-upload/oss/index.js'
+
 	import DForm from "@/components/dForm/index.vue"
-	import {
-		reactive
-	} from "vue";
+	import popupTypeSelect from "./popupTypeSelect.vue";
+	import popupServeSelect from "./popupServeSelect.vue";
 
+	const form = reactive({
+		headImage: null,
+		type: [],
+		serve: [],
+	})
+
+	const onChooseAvatar = (res) => {
+		ossUpload(res.target.avatarUrl)
+		.then(url => {
+			form.headImage = url
+		})
+	}
+
+	const baseInfoRef = ref()
+	const displayInfoRef = ref()
+	const serveInfoRef = ref()
 
 	const state = reactive({
-		list2: [{
-				type: "select",
-				label: "服务宠物类型",
-				key: "type",
-				placeholder: "请选择",
-				options: [{
-						name: "大兴区"
-					},
-					{
-						name: "小型犬"
-					}
-				]
+		baseInfoList: [{
+				type: "input",
+				label: "昵称",
+				key: "name",
+				placeholder: "请输入",
 			},
 			{
 				type: "input",
-				label: "基础服务",
-				unit: "年",
-				key: "base",
-				placeholder: "宠物喂养上门遛狗",
+				label: "手机号",
+				key: "idCard",
+				placeholder: "请输入",
 			},
 			{
 				type: "select",
-				label: "增值服务",
-				key: "zenz",
+				label: "性别",
+				key: "sex",
 				placeholder: "请选择",
 				options: [{
 						name: "男"
@@ -70,7 +127,7 @@
 				]
 			}
 		],
-		list1: [{
+		displayInfoList: [{
 				type: "input",
 				label: "个人简介",
 				key: "jianjie",
@@ -84,7 +141,7 @@
 				placeholder: "请输入",
 			},
 			{
-				type: "select",
+				type: "custom",
 				label: "服务记录",
 				key: "jilu",
 				placeholder: "请选择",
@@ -97,65 +154,208 @@
 				]
 			}
 		],
-		list: [{
-				type: "input",
-				label: "昵称",
-				key: "name",
-				placeholder: "请输入",
+		serveInfoList: [{
+				type: "custom",
+				label: "服务宠物类型",
+				key: "type",
+				placeholder: "请选择",
 			},
 			{
 				type: "input",
-				label: "手机号",
-				key: "idCard",
-				placeholder: "请输入",
+				label: "基础服务",
+				unit: "年",
+				key: "base",
+				placeholder: "宠物喂养上门遛狗",
 			},
 			{
-				type: "select",
-				label: "性别",
-				key: "sex",
+				type: "custom",
+				label: "增值服务",
+				key: "zenz",
 				placeholder: "请选择",
-				options: [{
-						name: "男"
-					},
-					{
-						name: "女"
-					}
-				]
 			}
-		]
+		],
 	})
-	const handleSubmit = () => {}
+
+	onShow(() => {
+		// todo: fetch data and init data
+	})
+
+	const handleSubmit = () => {
+		// todo
+	}
+
+	const jumpToServeRecord = () => {
+		uni.navigateTo({
+			url: "/otherPages/authentication/serve/record"
+		})
+	}
+
+	const popupTypeSelectRef = ref()
+	const openTypeSelectPopup = () => {
+		popupTypeSelectRef.value.open()
+	}
+	const typeDesc = computed(() => {
+		const typeCodes = form.type
+		if (!typeCodes.length) {
+			return '请选择'
+		}
+		
+		let descArr = typeCodes.reduce((arr, item) => {
+			switch(item) {
+				case 'cat':
+					arr.push('猫咪')
+					break
+				case 'dog':
+					arr.push('狗狗')
+					break
+				case 'special-pet':
+					arr.push('异宠')
+					break
+				default:
+					break
+			}
+
+			return arr
+		}, [])
+
+		return descArr.join('、')
+	})
+
+	const popupServeSelectRef = ref()
+	const serveOptions = reactive([
+		{
+			title: '陪玩/遛狗',
+			desc: '外出遛狗或者陪玩，10mins/次',
+			value: 0,
+		},
+		{
+			title: '一天多次',
+			desc: '每额外上门一次，收取基础服务费用的80%',
+			value: 1,
+		},
+		{
+			title: '护理',
+			desc: '清洁宠物耳道、眼部、鼻部以及梳毛，10mins/次',
+			value: 2,
+		},
+		{
+			title: '提前熟悉',
+			desc: '提前上门熟悉，购买此服务支持免费更换伴宠师1次',
+			value: 3,
+		},
+		{
+			title: '清洁',
+			desc: '清洗砂盆或其他区域卫生，15mins/次',
+			value: 4,
+		},
+		{
+			title: '喂药',
+			desc: '将药品喂入宠物口中',
+			value: 5,
+		},
+		{
+			title: '上药',
+			desc: '将药品放入宠物水粮、或者涂抹在皮肤外表',
+			value: 6,
+		},
+		{
+			title: '打针',
+			desc: '兽医上门打针，自备药品',
+			value: 7,
+		},
+		{
+			title: '在线问诊',
+			desc: '在线问诊在职兽医健康问题',
+			value: 8,
+		},
+		{
+			title: '线下体察',
+			desc: '上门外表体查，给予宠物健康咨询',
+			value: 9,
+		},
+	])
+	const openServeSelectPopup = () => {
+		popupServeSelectRef.value.open()
+	}
+	const serveDesc = computed(() => {
+		const serveCodes = form.serve
+		if (!serveCodes.length) {
+			return '请选择'
+		}
+		
+		let descArr = serveCodes.reduce((arr, item) => {
+			const desc = serveOptions.find(option => option.value === item)?.title
+
+			arr.push(desc)
+
+			return arr
+		}, [])
+
+		return descArr.join('、')
+	})
+
 </script>
 
 <style lang="scss" scoped>
+
+	.page {
+		padding-top: 16rpx;
+
+		.tip {
+			background-color: rgba($color: #FFBF60, $alpha: 0.16);
+			padding: 13rpx 22rpx;
+			margin: 0 28rpx 37rpx 28rpx;
+
+			.icon {
+				margin-right: 15rpx;
+			}
+		}
+	}
+
+	.info {
+
+		& + & {
+			margin-top: 50rpx;
+		}
+
+	}
+	
 	.head {
 		width: 165rpx;
+    height: auto;	
 		margin-top: 28rpx;
 	}
 
+	.btn-avatar {
+		border: none;
+		padding: 0;
+	}
+
 	.title {
 		font-size: 30rpx;
 		font-weight: 700;
 		display: flex;
 		align-items: center;
+		padding: 0 40rpx;
 
 		&:before {
-			display: block;
+			display: inline-block;
 			content: "";
 			width: 10rpx;
-			border-radius: 10rpx;
-			height: 34rpx;
+			border-radius: 5rpx;
+			height: 33rpx;
 			background-color: #FFBF60;
-			margin-right: 15rpx;
+			margin-right: 7rpx;
 		}
 	}
 
-	.box {
-		padding: 24rpx 36rpx;
+	.form {
+		padding: 0 22rpx;
 
-		.tip {
-			background-color: rgb(255, 245, 229);
-			padding: 15rpx;
+		:deep(.form-item){
+			padding-left: 24rpx;
+			padding-right: 30rpx;
+			box-sizing: border-box;
 		}
 	}
 </style>
\ No newline at end of file
diff --git a/otherPages/authentication/serve/popupServeSelect.vue b/otherPages/authentication/serve/popupServeSelect.vue
new file mode 100644
index 0000000..1989f2e
--- /dev/null
+++ b/otherPages/authentication/serve/popupServeSelect.vue
@@ -0,0 +1,116 @@
+<template>
+  <popupSelect
+    ref="popupRef"
+    title="请选择增值服务"
+    @confirm="onConfirm"
+  >
+    <view class="content">
+      <view class="flex-between option"
+        v-for="(option, index) in props.options"
+        :key="`option-${index}`"
+        @click="onSelectServe(option.value)"
+      >
+        <view class="option-info">
+          <view class="option-title">{{ option.title }}</view>
+          <view class="option-desc">{{ option.desc }}</view>
+        </view>
+        <up-icon 
+          name="checkmark-circle-fill" 
+          :color="serves.includes(option.value) ? '#FFBF60' : '#BDBDBD'" 
+          size="46rpx"
+        ></up-icon>
+      </view>
+    </view>
+  </popupSelect>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  import popupSelect from '../components/popupSelect.vue';
+
+  const props = defineProps({
+    modelValue: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    options: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+  })
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const serves = ref([])
+
+  const onSelectServe = (serve) => {
+    const oldServes = serves.value
+    let newServes = []
+
+    if (oldServes.includes(serve)) {
+      newServes = oldServes.filter(item => item !== serve)
+    } else {
+      newServes = oldServes.concat(serve)
+    }
+
+    serves.value = newServes
+  }
+
+  const popupRef = ref()
+
+  const open = () => {
+    serves.value = props.modelValue
+    popupRef.value.open()
+  }
+
+  const close = () => {
+    popupRef.value.close()
+  }
+  
+  const onConfirm = () => {
+    emit('update:modelValue', serves.value)
+  }
+
+  defineExpose({ open, close })
+
+</script>
+
+<style lang="scss" scoped>
+
+  .content {
+    padding-bottom: 25rpx;
+  }
+
+  .option {
+    padding: 0 49rpx 0 25rpx;
+    background-color: #FFF5E5;
+    border-radius: 8rpx;
+
+    & + & {
+      margin-top: 12rpx;
+    }
+
+    &-info {
+      padding: 7rpx 0 13rpx 0;
+    }
+
+    &-title {
+      color: #000000;
+      font-size: 28rpx;
+      line-height: 37rpx;
+    }
+
+    &-desc {
+      margin-top: 12rpx;
+      color: #707070;
+      font-size: 20rpx;
+      line-height: 26rpx;
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/otherPages/authentication/serve/popupTypeSelect.vue b/otherPages/authentication/serve/popupTypeSelect.vue
new file mode 100644
index 0000000..c4af8db
--- /dev/null
+++ b/otherPages/authentication/serve/popupTypeSelect.vue
@@ -0,0 +1,120 @@
+<template>
+  <popupSelect
+    ref="popupRef"
+    title="请选择服务宠物类型"
+    desc="（可多选）"
+    @confirm="onConfirm"
+  >
+    <view class="flex-between content">
+
+      <view class="type" @click="onSelectPetType('cat')">
+        <image src="@/static/images/ydd/cat.png" mode="widthFix"></image>
+        <template v-if="petTypes.includes('cat')">
+          <image class="active" src="@/static/images/ydd/cat-active.png" mode="widthFix"></image>
+          <view class="active-icon">
+            <up-icon name="checkmark-circle" color="#FFBF60" size="32rpx"></up-icon>
+          </view>
+        </template>
+      </view>
+
+      <view class="type" @click="onSelectPetType('dog')">
+        <image src="@/static/images/ydd/dog.png" mode="widthFix"></image>
+        <template v-if="petTypes.includes('dog')">
+          <image class="active" src="@/static/images/ydd/dog-active.png" mode="widthFix"></image>
+          <view class="active-icon">
+            <up-icon name="checkmark-circle" color="#FFBF60" size="32rpx"></up-icon>
+          </view>
+        </template>
+      </view>
+
+      <view class="type" @click="onSelectPetType('special-pet')">
+        <image src="@/static/images/ydd/special-pet.png" mode="widthFix"></image>
+        <template v-if="petTypes.includes('special-pet')">
+          <image class="active" src="@/static/images/ydd/special-pet-active.png" mode="widthFix"></image>
+          <view class="active-icon">
+            <up-icon name="checkmark-circle" color="#FFBF60" size="32rpx"></up-icon>
+          </view>
+        </template>
+      </view>
+
+    </view>
+  </popupSelect>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  import popupSelect from '../components/popupSelect.vue';
+
+  const props = defineProps({
+    modelValue: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  })
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const petTypes = ref([])
+
+  const onSelectPetType = (type) => {
+    const oldTypes = petTypes.value
+    let newTypes = []
+
+    if (oldTypes.includes(type)) {
+      newTypes = oldTypes.filter(item => item !== type)
+    } else {
+      newTypes = oldTypes.concat(type)
+    }
+
+    petTypes.value = newTypes
+  }
+
+  const popupRef = ref()
+
+  const open = () => {
+    petTypes.value = props.modelValue
+    popupRef.value.open()
+  }
+
+  const close = () => {
+    popupRef.value.close()
+  }
+  
+  const onConfirm = () => {
+    emit('update:modelValue', petTypes.value)
+  }
+
+  defineExpose({ open, close })
+
+</script>
+
+<style lang="scss" scoped>
+
+  .content {
+    padding: 46rpx 26rpx;
+  }
+
+  .type {
+		width: 190rpx;
+		position: relative;
+
+		image {
+			width: 100%;
+		}
+
+		.active {
+			position: absolute;
+			top: 0;
+			left: 0;
+
+      &-icon {
+  			position: absolute;
+        top: 14rpx;
+        right: 18rpx;
+      }
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/otherPages/authentication/serve/record.vue b/otherPages/authentication/serve/record.vue
index 5ae58b7..6428ba4 100644
--- a/otherPages/authentication/serve/record.vue
+++ b/otherPages/authentication/serve/record.vue
@@ -1,28 +1,49 @@
 <template>
-	<view class="box">
+	<view class="page">
 		<view class="flex-rowl">
 			<view class="size-28 color-ffb fw700 tab">
 				全部记录
 			</view>
 		</view>
-		<view class="flex-rowc">
+		<view v-if="list.length">
+
+		</view>
+		<view v-else class="flex-rowc">
 			<image src="@/static/images/ydd/empy.png" mode="widthFix"></image>
 		</view>
-	</view>
-	<view class="footer" @click="toUp">
-		立即上传
+
+		<view class="footer-btn">
+			<view class="btn" @click="toUp">
+				立即上传
+			</view>
+		</view>
 	</view>
 </template>
 
 <script setup>
-	const toUp = () => {
+	import { onShow } from '@dcloudio/uni-app'
+	import { usePageList } from "@/utils/pageList";
+		
+	// todo
+	const { list, total, getData } = usePageList()
+
+	onShow(() => {
+		// todo: delte test data
+		
+	})
 
+	const toUp = () => {
+		uni.navigateTo({
+			url: "/otherPages/authentication/serve/upload"
+		})
 	}
 </script>
 
 <style lang="scss" scoped>
-	.box {
-		padding: 24rpx;
+	.page {
+		min-height: 100vh;
+		padding: 24rpx 24rpx 144rpx 24rpx;
+		background-color: #fff;
 
 		.tab {
 			border-bottom: 4rpx solid #FFBF60;
diff --git a/otherPages/authentication/serve/upload.vue b/otherPages/authentication/serve/upload.vue
index bc6815c..4595db3 100644
--- a/otherPages/authentication/serve/upload.vue
+++ b/otherPages/authentication/serve/upload.vue
@@ -1,80 +1,91 @@
 <template>
-	<view class="tips color-ffb size-22">
-		注意:这段内容将会在您的喂养员个人主页，做为"服务案例”展示，并开放给其他铲屎官查看，请认真编辑哟！
-	</view>
-	<view class="li bg-fff">
-		<view class="title">
-			服务类型
-			<text class="size-22 color-999 ml10">可多选</text>
+	<view class="page">
+		<view class="tips color-ffb size-22">
+			注意:这段内容将会在您的喂养员个人主页，做为"服务案例”展示，并开放给其他铲屎官查看，请认真编辑哟！
 		</view>
-		<up-checkbox-group v-model="state.checkboxValue" placement="column" @change="checkboxChange">
-			<view class="flex-rowl mt40">
-				<up-checkbox shape="circle" class="mr10" :customStyle="{marginBottom: '8px'}"
-					v-for="(item, index) in checkboxList1" :key="index" :label="item.name" :name="item.name">
-				</up-checkbox>
+		<view class="li bg-fff">
+			<view class="title">
+				服务类型
+				<text class="size-22 color-999 ml10">可多选</text>
 			</view>
-		</up-checkbox-group>
-	</view>
-
-	<view class="li bg-fff">
-		<view class="title">
-			服务时间
+			<up-checkbox-group v-model="state.petType" @change="checkboxChange">
+				<view class="flex-between mt40" style="width: 100%;">
+					<up-checkbox shape="circle" class="mr10" :customStyle="{marginBottom: '8px'}"
+						v-for="(item, index) in petTypeOptions" :key="index" :label="item.name" :name="item.name">
+					</up-checkbox>
+				</view>
+			</up-checkbox-group>
 		</view>
-		<view class="flex-between mt16">
-			<text class="size-28 color-999">选择服务时间</text>
-			<view class="flex-rowr">
-				<input disabled type="text" placeholder="请选择" class="t-r size-28 mr10" />
-				<image src="@/static/images/ydd/bottom.png" mode="widthFix" style="width: 30rpx;"></image>
+
+		<view class="li bg-fff">
+			<view class="title">
+				服务时间
 			</view>
+			<view class="flex-between mt16">
+				<text class="size-28 color-999">选择服务时间</text>
+				<view class="flex-rowr" @click="openTimePicker">
+					<view class="t-r size-28 mr10" :class="[state.serveTime ? 'highlight' : '']">{{ serveTimeDesc }}</view>
+					<up-icon name="arrow-right" color="#999999" size="27rpx"></up-icon>
+				</view>
+			</view>
+			<up-datetime-picker
+				v-model="state.serveTime"
+				:show="showTimePicker"
+				mode="date"
+				:closeOnClickOverlay="true"
+				@close="closeTimePicker"
+				@cancel="closeTimePicker"
+				@confirm="closeTimePicker"
+			></up-datetime-picker>
 		</view>
-	</view>
 
-	<view class="li bg-fff">
-		<view class="title">
-			服务地点
-		</view>
-		<view class="flex-between mt16">
-			<text class="size-28 color-999">选择服务地点</text>
-			<view class="flex-rowr">
-				<input disabled type="text" placeholder="请选择" class="t-r size-28 mr10" />
-				<image src="@/static/images/ydd/bottom.png" mode="widthFix" style="width: 30rpx;"></image>
+		<view class="li bg-fff">
+			<view class="title">
+				服务地点
+			</view>
+			<view class="flex-between mt16">
+				<text class="size-28 color-999">选择服务地点</text>
+				<view class="flex-rowr" @click="jumpToSeletAddress">
+					<view class="t-r size-28 mr10" :class="[selectedAddress.address ? 'highlight' : '']">{{ selectedAddress.address || '请选择' }}</view>
+					<up-icon name="arrow-right" color="#999999" size="27rpx"></up-icon>
+				</view>
 			</view>
 		</view>
-	</view>
 
-	<view class="li bg-fff">
-		<view class="title">
-			文字记录
+		<view class="li bg-fff">
+			<view class="title">
+				文字记录
+			</view>
+			<textarea class="text" placeholder="请输入文字记录，可简单描述服务过程中发生的趣事，或夸奖一下服务宠物吧，10-100字"></textarea>
 		</view>
-		<textarea class="text" placeholder="请输入文字记录，可简单描述服务过程中发生的趣事，或夸奖一下服务宠物吧，10-100字"></textarea>
-	</view>
 
-	<view class="li bg-fff">
-		<view class="title">
-			图片记录
-		</view>
-		<view class="size-28 color-999 mt16">
-			请选择具有代表性的2-3张服务宠物图片，服务过程图片或视频截图，让铲屎官感受到您对毛孩子的爱吧
+		<view class="li bg-fff">
+			<view class="title">
+				图片记录
+			</view>
+			<view class="size-28 color-999 mt16">
+				请选择具有代表性的2-3张服务宠物图片，服务过程图片或视频截图，让铲屎官感受到您对毛孩子的爱吧
+			</view>
 		</view>
-	</view>
 
-	<view class="footer-box">
-		<view class="btn">
-			立即上传
+		<view class="footer-btn">
+			<view class="btn">
+				立即上传
+			</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
-	import {
-		reactive
-	} from 'vue';
-
+	import { ref, reactive, computed } from 'vue';
+	import { onShow } from '@dcloudio/uni-app'
+	import dayjs from 'dayjs'
 
 	const state = reactive({
-		checkboxValue: []
+		petType: [],
+		serveTime: null,
 	})
-	const checkboxList1 = [{
+	const petTypeOptions = [{
 			name: '猫咪喂养',
 		},
 		{
@@ -86,9 +97,42 @@
 	]
 
 	const checkboxChange = () => {}
+
+	const showTimePicker = ref(false)
+	const openTimePicker = () => {
+		showTimePicker.value = true
+	}
+	const closeTimePicker = () => {
+		showTimePicker.value = false
+	}
+	const serveTimeDesc = computed(() => {
+		if (!state.serveTime) {
+			return '请选择'
+		}
+
+		return dayjs(state.serveTime).format('YYYY/MM/DD')
+	})
+
+	const selectedAddress = ref({})
+	const jumpToSeletAddress = () => {
+		// todo: check select from map or address book ?
+		
+		uni.navigateTo({
+			url: "/otherPages/authentication/connectAddress/index"
+		})
+	}
+
+	onShow(() => {
+		selectedAddress.value = uni.getStorageSync('serveAddress')
+	})
 </script>
 
 <style lang="scss" scoped>
+	.page {
+		min-height: 100vh;
+		padding-bottom: 144rpx;
+	}
+
 	.text {
 		padding: 16rpx;
 		background-color: #F3F3F3;
@@ -124,4 +168,8 @@
 			margin-right: 15rpx;
 		}
 	}
+
+	.highlight {
+		color: #FFBF60;
+	}
 </style>
\ No newline at end of file
diff --git a/otherPages/authentication/static/connectAddress/icon-empty.png b/otherPages/authentication/static/connectAddress/icon-empty.png
new file mode 100644
index 0000000..5352c68
Binary files /dev/null and b/otherPages/authentication/static/connectAddress/icon-empty.png differ
diff --git a/pages.json b/pages.json
index ccfaa1e..acb9e25 100644
--- a/pages.json
+++ b/pages.json
@@ -110,6 +110,11 @@
 				"style": {
 					"navigationBarTitleText": "接单地址"
 				}
+			}, {
+				"path": "connectAddress/detail",
+				"style": {
+					"navigationBarTitleText": "新增接单地址"
+				}
 			}]
 		},
 		{
diff --git a/otherPages/authentication/static/list/cat-active.png b/static/images/ydd/cat-active.png
similarity index 100%
rename from otherPages/authentication/static/list/cat-active.png
rename to static/images/ydd/cat-active.png
diff --git a/otherPages/authentication/static/list/cat.png b/static/images/ydd/cat.png
similarity index 100%
rename from otherPages/authentication/static/list/cat.png
rename to static/images/ydd/cat.png
diff --git a/otherPages/authentication/static/list/dog-active.png b/static/images/ydd/dog-active.png
similarity index 100%
rename from otherPages/authentication/static/list/dog-active.png
rename to static/images/ydd/dog-active.png
diff --git a/otherPages/authentication/static/list/dog.png b/static/images/ydd/dog.png
similarity index 100%
rename from otherPages/authentication/static/list/dog.png
rename to static/images/ydd/dog.png
diff --git a/otherPages/authentication/static/list/special-pet-active.png b/static/images/ydd/special-pet-active.png
similarity index 100%
rename from otherPages/authentication/static/list/special-pet-active.png
rename to static/images/ydd/special-pet-active.png
diff --git a/otherPages/authentication/static/list/special-pet.png b/static/images/ydd/special-pet.png
similarity index 100%
rename from otherPages/authentication/static/list/special-pet.png
rename to static/images/ydd/special-pet.png