diff --git a/components/dForm/index.vue b/components/dForm/index.vue
index 5e36cea..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>
@@ -131,11 +137,22 @@
 		})
 	}
 
+	const setData = (data) => {
+		list.forEach(item => {
+			const { key } = item
+			formData[key] = data[key] || null
+		})
+	}
+
+	const getData = () => {
+		return formData
+	}
+
 	const validate = () => {
 		return dFormRef.value.validate()
 	}
 
-	defineExpose({ validate })
+	defineExpose({ setData, getData, validate })
 </script>
 
 <style>
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/end.vue b/otherPages/authentication/examination/end.vue
index 523e00d..cc2bb15 100644
--- a/otherPages/authentication/examination/end.vue
+++ b/otherPages/authentication/examination/end.vue
@@ -22,11 +22,12 @@
 								</view>
 							</view>
 							<view class="info">
+								<!-- todo: 实名认证 -->
 								<view class="size-22 color-777">
-									真实姓名：刘思恩
+									{{ `真实姓名：${form.name}` }}
 								</view>
 								<view class="size-22 color-777">
-									身份证号码：48234792837458923
+									{{ `身份证号码：${form.idCard}` }}
 								</view>
 							</view>
 						</view>
@@ -44,9 +45,13 @@
 									<image class="img" src="@/static/images/ydd/end13.png" mode="widthFix"></image>
 									<text class="size-30 color-000 fw700">履约保证金缴纳</text>
 								</view>
-								<view class="size-22 color-ffb jiao">
+								<view class="size-22 color-ffb jiao" @click="jumpToBond">
 									去缴纳
 								</view>
+								<!-- todo -->
+								<!-- <view class="size-22 highlight">
+									已完成
+								</view> -->
 							</view>
 							<view class="info color-777 size-22">
 								请缴纳履约保证金，保证金注销时可申请退还
@@ -66,11 +71,11 @@
 									<image class="img" src="@/static/images/ydd/end1(4).png" mode="widthFix"></image>
 									<text class="size-30 color-000 fw700">添加客服微信</text>
 								</view>
-								<view class="size-22 color-ffb jiao">
-									去缴纳
+								<view class="size-22 highlight">
+									请自行添加
 								</view>
 							</view>
-							<view class="info color-777 size-22 flex-rowc">
+							<view class="info color-777 size-22 flex-rowl">
 								<text class="size-22 color-777">微信二维码</text>
 								<image src="" mode="" style="width: 150rpx;height: 150rpx;"></image>
 							</view>
@@ -89,20 +94,25 @@
 									<image class="img" src="@/static/images/ydd/end13.png" mode="widthFix"></image>
 									<text class="size-30 color-000 fw700">服务工具准备</text>
 								</view>
-								<view class="size-22">
-									查看工具包
+								<!-- todo -->
+								<view class="size-22 flex-rowr">
+									<text>查看工具包</text>
+									<up-icon name="arrow-down" color="#7F7F7F" size="17rpx" style="margin-left: 5rpx;"></up-icon>
 								</view>
 							</view>
 							<view class="info color-777 size-22">
 								<view class="flex-between">
 									<text class="size-22">所在地区:</text>
-									<input type="text" placeholder="请选择" />
+                  <view plain class="flex-rowr" @click="selectAddr">
+										<text>{{ form.area ? form.area : '请选择' }}</text>
+										<up-icon style="margin-left: 22rpx;" name="arrow-down" color="#7F7F7F" size="21rpx"></up-icon>
+                  </view>
 								</view>
 							</view>
 							<view class="info color-777 size-22 mt20">
 								<view class="flex-between">
 									<text class="size-22">详细地址:</text>
-									<input type="text" placeholder="请输入道路、小区、门牌号等" />
+									<input v-model="form.address" type="text" placeholder="请输入道路、小区、门牌号等" />
 								</view>
 							</view>
 						</view>
@@ -119,69 +129,64 @@
 			</view>
 
 		</view>
-		<image src="@/static/images/ydd/chat.png" mode="widthFix" class="chat"></image>
+		<button plain class="chat" open-type="contact">
+			<image src="@/static/images/ydd/chat.png" mode="widthFix"></image>
+		</button>
 	</view>
 </template>
 
 <script setup>
-	import {
-		reactive
-	} from "vue";
+	import { reactive } from "vue";
+	import { onShow } from '@dcloudio/uni-app'
+
 	import stepProgress from '../components/stepProgress.vue';
 
+	const form = reactive({
+		name: null,
+		idCard: null,
+		area: null,
+		latitude: null,
+		longitude: null,
+		address: null,
+	})
+
+	onShow(() => {
+		// todo: delete test data
+
+		form.name = '李*乐'
+		form.idCard = '4211********5624'
 
-	const state = reactive({
-		list: [{
-				type: "input",
-				label: "姓名",
-				key: "name",
-				placeholder: "请输入您的真实姓名",
-			},
-			{
-				type: "input",
-				label: "身份证号",
-				key: "idCard",
-				placeholder: "请输入您的真实身份证号",
-			},
-			{
-				type: "radio",
-				label: "性别",
-				key: "sex",
-				options: [{
-						name: "男"
-					},
-					{
-						name: "女"
-					}
-				]
-			},
-			{
-				type: "input",
-				label: "年龄",
-				key: "gender",
-				placeholder: "请输入您的年龄",
-			},
-			{
-				type: "input",
-				label: "养宠经验",
-				key: "shij",
-				placeholder: "请输入您的养宠年限",
-				unit: "年"
-			},
-			{
-				type: "select",
-				label: "是否有专业执照",
-				key: "shij",
-				placeholder: "请选择",
-				options: [{
-					name: "是"
-				}, {
-					name: "没有"
-				}]
-			},
-		]
 	})
 
+	const jumpToBond = () => {
+		uni.navigateTo({
+			url: "/otherPages/myOrdersManage/bond/index"
+		})
+	}
+
+	const setAddress = (res) => {
+		//经纬度信息
+		form.latitude = res.latitude
+		form.longitude = res.longitude
+
+		if (!res.address && res.name) { //用户直接选择城市的逻辑
+			return form.area = res.name
+		}
+		if (res.address || res.name) {
+			return form.area = res.address + res.name
+		}
+		form.area = '' //用户啥都没选就点击勾选
+	}
+
+	const selectAddr = () => {
+		console.log('--selectAddr')
+		uni.chooseLocation({
+			success: function(res) {
+				setAddress(res)
+			}
+		})
+	}
+
 	const onClick = () => {
 		// todo
 	}
@@ -189,12 +194,18 @@
 
 <style lang="scss" scoped>
 	.chat {
-		width: 96rpx;
 		position: fixed;
 		right: 20rpx;
 		bottom: 400rpx;
 		z-index: 9999;
-		background-color: #fff;
+		border: none;
+		padding: 0;
+		width: 97rpx;
+		height: auto;
+
+		image {
+			width: 100%;
+		}
 	}
 
 	.line {
@@ -356,4 +367,8 @@
 			}
 		}
 	}
+
+	.highlight {
+		color: #FFBF60;
+	}
 </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 345d42c..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>
@@ -84,6 +99,8 @@
 
 <script setup>
 	import { ref, reactive } from "vue";
+	import { ossUpload } from '@/utils/oss-upload/oss/index.js'
+
 	import dForm from "@/components/dForm/index.vue"
 	import stepProgress from '../components/stepProgress.vue';
 
@@ -175,15 +192,22 @@
 			value: 4,
 		},
 	]
-	const afterRead = () => {
-		// todo
-	}
+	const afterRead = (event) => {
+		event.file.forEach(n => {
+			ossUpload(n.url)
+				.then(url => {
+					licenseData.fileList.push({
+						url
+					})
+				})
+		})
+	};
 	const deletePic = (event) => {
 		licenseData.fileList.splice(event.index, 1);
 	};
 
 	const petType = ref()
-	const onSelectPet = (type) => {
+	const onSelectPetType = (type) => {
 		petType.value = type
 	}
 
@@ -248,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/otherPages/myOrdersManage/bond/detail.vue b/otherPages/myOrdersManage/bond/detail.vue
index 4d902e7..1a6aa05 100644
--- a/otherPages/myOrdersManage/bond/detail.vue
+++ b/otherPages/myOrdersManage/bond/detail.vue
@@ -2,37 +2,85 @@
 	<!-- <div>保证金明细</div> -->
 	<view class="box">
 		<view class="top flex" :style="{ borderRadius: '31.5rpx' }">
-			<view class="income flex element" :style="{ borderRadius: '31.5rpx' }">
-				收入明细
-			</view>
-			<view class="income flex element" :style="{ borderRadius: '31.5rpx' }">
-				支出明细
+			<view 
+				class="income flex element" 
+				v-for="(tab, tIdx) in tabs"
+				:key="`tab-${tIdx}`"
+				:class="[queryParams.status === tab.value ? 'is-active' : '']" 
+			>
+				{{ tab.title }}
 			</view>
 		</view>
-		<view class="Recharge flex">
-			<view class="flex">
-				<image src="https://img1.baidu.com/it/u=3034232350,1041791648&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
-					mode=""></image>
-				<view class="text1">
-					<view class="text2">
-						押金充值
-					</view>
-					<view>
-						2020-12-29 12:54:54
+		<view>
+			<view class="Recharge flex"
+				v-for="(item, index) in list"
+				:key="`record-${index}`"
+			>
+				<view class="flex">
+					<image src="https://img1.baidu.com/it/u=3034232350,1041791648&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
+						mode=""></image>
+					<view class="text1">
+						<view class="text2">
+							{{ item.title }}
+						</view>
+						<view>
+							{{ item.createTime }}
+						</view>
 					</view>
 				</view>
-			</view>
-			<view class="text3">
-				¥200
+				<view class="text3">
+					{{ `¥${item.price}` }}
+				</view>
 			</view>
 		</view>
 	</view>
 </template>
 
-<script>
+<script setup>
+import { reactive } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { usePageList } from "@/utils/pageList";
+
+const tabs = reactive([
+	{
+		title: '收入明细',
+		value: '0',
+	},
+	{
+		title: '支出明细',
+		value: '1',
+	},
+])
+
+// todo
+const { queryParams, list, total, getData } = usePageList()
+
+onShow(() => {
+	list.value = [
+		{
+			title: '提现',
+			price: 168,
+			status: '1',
+			createTime: '2020-12-29 12:54:54'
+		},
+		{
+			title: '提现',
+			price: 168,
+			status: '1',
+			createTime: '2020-12-29 12:54:54'
+		},
+		{
+			title: '提现',
+			price: 168,
+			status: '1',
+			createTime: '2020-12-29 12:54:54'
+		},
+	]
+})
+
 </script>
 
-<style>
+<style lang="scss" scoped>
 	.box {
 		width: 750rpx;
 		height: 1452rpx;
@@ -47,10 +95,13 @@
 		background-color: #F3F3F3;
 	}
 
-	.element:hover {
+	.element {
+		border-radius: 32rpx;
 
-		background-color: #FFBF60;
-		color: white;
+		&.is-active {
+			background-color: #FFBF60;
+			color: white;
+		}
 	}
 
 	.income {
@@ -64,9 +115,10 @@
 
 
 	.Recharge {
-		padding: 3% 3% 0 2%;
+		padding: 20rpx 0;
 		box-sizing: border-box;
 		justify-content: space-between;
+		border-bottom: 1rpx solid #E0E0E0;
 	}
 
 	.flex {
diff --git a/otherPages/myOrdersManage/bond/index.vue b/otherPages/myOrdersManage/bond/index.vue
index 0976609..e6308a3 100644
--- a/otherPages/myOrdersManage/bond/index.vue
+++ b/otherPages/myOrdersManage/bond/index.vue
@@ -7,10 +7,10 @@
 					账户总览
 				</view>
 				<view class="level text4">
-					<view>
+					<view @click="jumpToDetail">
 						资金明细
 					</view>
-					<view class="line">
+					<view @click="jumpToRefund" class="line">
 						申请退还
 					</view>
 				</view>
@@ -18,9 +18,9 @@
 			<view class="level Recharge">
 				<view class="money level">
 					<text>¥</text>
-					<input type="text" />
+					<input v-model="money" type="text" />
 				</view>
-				<view class="text2" :style="{ borderRadius: '23.5rpx' }">
+				<view class="text2" :style="{ borderRadius: '23.5rpx' }" @click="onPay">
 					去充值
 				</view>
 			</view>
@@ -41,7 +41,27 @@
 
 </template>
 
-<script>
+<script setup>
+	import { ref } from 'vue'
+
+	const money = ref()
+
+	const jumpToDetail = () => {
+		uni.navigateTo({
+			url: "/otherPages/myOrdersManage/bond/detail"
+		})
+	}
+
+	const jumpToRefund = () => {
+		uni.navigateTo({
+			url: "/otherPages/myOrdersManage/bond/refund"
+		})
+	}
+
+	const onPay = () => {
+		// todo: wx pay
+	}
+
 </script>
 
 <style scoped lang="scss">
diff --git a/otherPages/myOrdersManage/detail/index.vue b/otherPages/myOrdersManage/bond/refund.vue
similarity index 69%
rename from otherPages/myOrdersManage/detail/index.vue
rename to otherPages/myOrdersManage/bond/refund.vue
index 0bf419c..5a38269 100644
--- a/otherPages/myOrdersManage/detail/index.vue
+++ b/otherPages/myOrdersManage/bond/refund.vue
@@ -6,22 +6,11 @@
 				<view class="">
 					账户总览
 				</view>
-				<view class="level text2">
-					<view>
-						资金明细
-					</view>
-					<view class="line">
-						申请退还
-					</view>
-				</view>
 			</view>
 			<view class="level Recharge">
 				<view class="money level">
 					<text>¥</text>
-					<input type="text" />
-				</view>
-				<view class="text3" :style="{ borderRadius: '23.5rpx' }">
-					去充值
+					<input v-model="money" type="text" />
 				</view>
 			</view>
 		</view>
@@ -47,37 +36,54 @@
 				《履约保证金&认证费协议》
 			</view>
 		</view>
-		<view class="buttom level" :style="{ borderRadius: '41rpx' }">
+		<view class="buttom level" :style="{ borderRadius: '41rpx' }" @click="onRefund">
 			<text>退还并注销伴宠师</text>
 		</view>
-		<!-- <up-popup :show="show" mode="top" @close="close" @open="open">
-			<view>
-				<text>人生若只如初见，何事秋风悲画扇</text>
+
+		<up-popup 
+			:show="popupVisible"
+			mode="center" 
+			bgColor="transparent"
+			@close="onPopupClose" 
+		>
+			<view class="popup">
+				<image class="popup-bg" src="../static/bond/bg-popup.png"></image>
+
+				<view class="flex-colc popup-content">
+					<text>您已申请退还，请联系服务顾问</text>
+
+					<image class="qr" :src="qrCodeImage" mode="widthFix"></image>
+				</view>
+
+				<view class="btn-close" @click="popupVisible = false">
+					<up-icon name="close-circle-fill" color="#ffffff" size="60rpx"></up-icon>
+				</view>
 			</view>
-		</up-popup> -->
+		</up-popup>
 	</view>
 </template>
 
 <script setup>
-	// import {
-	// 	ref
-	// } from 'vue';
-
-	// // 创建响应式数据  
-	// const show = ref(false);
-
-	// // 定义方法  
-	// function open() {
-	// 	// 打开逻辑，比如设置 show 为 true  
-	// 	show.value = true;
-	// 	// console.log('open');  
-	// }
-
-	// function close() {
-	// 	// 关闭逻辑，设置 show 为 false  
-	// 	show.value = false;
-	// 	// console.log('close');  
-	// }
+	import { ref } from 'vue'
+
+	const money = ref()
+	const qrCodeImage = ref()
+
+	const popupVisible = ref(false)
+
+	const onPopupClose = () => {
+		uni.reLaunch({
+			 url: '/pages/workbenchManage/index'
+		})
+	}
+
+	
+	const onRefund = () => {
+		// todo: subimt refund and fetch qrcode and open popup 
+
+		popupVisible.value = true
+	}
+
 </script>
 
 <style scoped lang="scss">
@@ -200,4 +206,40 @@
 		color: #FFFFFF;
 		font-size: 30rpx;
 	}
+
+	.popup {
+		width: 632rpx;
+		height: 835rpx;
+		position: relative;
+
+		&-bg,
+		&-content {
+			width: 100%;
+			height: 100%;
+		}
+
+		&-content {
+			position: absolute;
+			top: 0;
+			left: 0;
+
+			padding-top: 276rpx;
+			box-sizing: border-box;
+			color: #707070;
+			font-size: 28rpx;
+			line-height: 37rpx;
+
+			.qr {
+				margin-top: 89rpx;
+				width: 307rpx;
+				height: auto;
+			}
+		}
+
+		.btn-close {
+			position: absolute;
+			top: -27rpx;
+			right: -13rpx;
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/otherPages/myOrdersManage/static/bond/bg-popup.png b/otherPages/myOrdersManage/static/bond/bg-popup.png
new file mode 100644
index 0000000..654d8b9
Binary files /dev/null and b/otherPages/myOrdersManage/static/bond/bg-popup.png differ
diff --git a/pages.json b/pages.json
index d2fe40e..acb9e25 100644
--- a/pages.json
+++ b/pages.json
@@ -110,6 +110,11 @@
 				"style": {
 					"navigationBarTitleText": "接单地址"
 				}
+			}, {
+				"path": "connectAddress/detail",
+				"style": {
+					"navigationBarTitleText": "新增接单地址"
+				}
 			}]
 		},
 		{
@@ -208,14 +213,14 @@
 						"navigationBarTitleText": "保证金"
 					}
 				}, {
-					"path": "withdrawal/index",
+					"path": "bond/refund",
 					"style": {
-						"navigationBarTitleText": "提现"
+						"navigationBarTitleText": "保证金退还"
 					}
 				}, {
-					"path": "detail/index",
+					"path": "withdrawal/index",
 					"style": {
-						"navigationBarTitleText": "保证金退还"
+						"navigationBarTitleText": "提现"
 					}
 				}, {
 					"path": "transaction/index",
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