From 27574a1ced87c9b32655b9c1c16c09a68c417634 Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Tue, 15 Apr 2025 14:27:35 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E8=AE=A2=E5=8D=95=E7=AE=A1=E7=90=86):?=
 =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E8=AE=A2=E5=8D=95=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=92=8C=E6=9C=8D=E5=8A=A1=E6=A1=A3=E6=A1=88=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构订单管理页面的样式和布局，增加圆角和溢出隐藏
- 提取服务时间处理逻辑到独立工具文件 utils/serviceTime.js
- 优化宠物档案页面的数据展示，使用计算属性动态显示疫苗、驱虫和绝育状态
- 新增时间线服务组件 timelineService.vue，用于展示订单服务时间线
- 修复订单列表和详情页面的数据展示问题，优化用户体验
---
 api/system/user.js                                 |   7 +
 manifest.json                                      |   2 +-
 .../myOrdersManage/service/index - 副本.vue      |  80 ++++
 otherPages/myOrdersManage/service/index.vue        | 236 +++++++---
 otherPages/orderTakingManage/pet/detail.vue        |  52 ++-
 pages/myOrdersManage/components/systemOrder.vue    |  17 +-
 .../myOrdersManage/components/timelineService.vue  | 504 +++++++++++++++++++++
 pages/myOrdersManage/index.scss                    |   2 +
 pages/myOrdersManage/index.vue                     |  32 +-
 pages/orderTakingManage/components/list.vue        |  21 +-
 pages/orderTakingManage/index.scss                 |   5 +
 pages/orderTakingManage/index.vue                  |  31 +-
 utils/serviceTime.js                               |  43 ++
 13 files changed, 906 insertions(+), 126 deletions(-)
 create mode 100644 otherPages/myOrdersManage/service/index - 副本.vue
 create mode 100644 pages/myOrdersManage/components/timelineService.vue
 create mode 100644 utils/serviceTime.js

diff --git a/api/system/user.js b/api/system/user.js
index abd00a6..896a498 100644
--- a/api/system/user.js
+++ b/api/system/user.js
@@ -35,4 +35,11 @@ export const wxLogin = (data) => {
 		method: 'post',
 		data
 	})
+}
+// 字典
+export function getDictList(type){
+	return request({
+	  url: `/h5/system/dict/data/type/${type}`,
+	  method: 'get'
+	})
 }
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 055404f..495b4fd 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,6 +1,6 @@
 {
     "name" : "uni-vuu3",
-    "appid" : "__UNI__08423D1",
+    "appid" : "__UNI__197A38F",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",
diff --git a/otherPages/myOrdersManage/service/index - 副本.vue b/otherPages/myOrdersManage/service/index - 副本.vue
new file mode 100644
index 0000000..e65d635
--- /dev/null
+++ b/otherPages/myOrdersManage/service/index - 副本.vue	
@@ -0,0 +1,80 @@
+<template>
+	<!-- <div>服务档案</div> -->
+	<view class="box box-size">
+		<view class="container box-size level"
+		@click="toDetail" :style="{borderRadius:'16rpx'}">
+			<view class="level">
+				<view class="img">
+					<image src="" mode=""></image>
+				</view>
+				<view class="text">
+					查看猫猫“小咪”的服务信息
+				</view>
+			</view>
+			<view class="img_">
+				<image src="/static/images/ydd/right.png" mode=""></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	
+	function toDetail() {
+		uni.navigateTo({
+			url: "/otherPages/myOrdersManage/service/detail"
+		})
+	}
+	
+	
+</script>
+
+<style scoped lang="scss">
+	.box {
+		width: 100vw;
+		height: 100vh;
+		padding: 2% 3%;
+	}
+
+	.box-size {
+		box-sizing: border-box;
+	}
+
+	.level {
+		display: flex;
+	}
+
+	.container {
+		width: 710rpx;
+		height: 121rpx;
+		background-color: #fff;
+		padding: 1% 4% 3% 2%;
+		justify-content: space-between;
+		margin-bottom: 20rpx;
+	}
+
+	.img image {
+		width: 104rpx;
+		height: 104rpx;
+		border-radius: 100rpx;
+		background-color: red;
+		margin-right: 20rpx;
+	}
+
+	.text {
+		font-size: 30rpx;
+		display: grid;
+		place-items: center;
+	}
+
+	.img_ {
+		display: grid;
+		place-items: center;
+	}
+
+	.img_ image {
+		width: 40rpx;
+		height: 40rpx;
+		/* background-color: red; */
+	}
+</style>
\ No newline at end of file
diff --git a/otherPages/myOrdersManage/service/index.vue b/otherPages/myOrdersManage/service/index.vue
index e65d635..f0fb546 100644
--- a/otherPages/myOrdersManage/service/index.vue
+++ b/otherPages/myOrdersManage/service/index.vue
@@ -1,80 +1,180 @@
 <template>
-	<!-- <div>服务档案</div> -->
-	<view class="box box-size">
-		<view class="container box-size level"
-		@click="toDetail" :style="{borderRadius:'16rpx'}">
-			<view class="level">
-				<view class="img">
-					<image src="" mode=""></image>
+	<view class="personal-pet">
+		<view v-if="petList.length>0" class="personal-service-list">
+			<view v-for="(item,index) in petList" :key="index">
+				<view class="personal-service-list-item" @click="goServiceInfo(item)">
+					<view style="display: flex;align-items: center;">
+						<u-avatar :src="item.photo?item.photo:defaultPhoto" size="46" shape="circle"></u-avatar>
+						<view class="personal-service-tips ellipsis">
+							{{serviceTips(item)}}
+						</view>
+					</view>
+					<view>
+						<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
+					</view>
 				</view>
-				<view class="text">
-					查看猫猫“小咪”的服务信息
-				</view>
-			</view>
-			<view class="img_">
-				<image src="/static/images/ydd/right.png" mode=""></image>
 			</view>
 		</view>
+		
+		<!-- <view v-else class="personal-pet-none">
+			<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png" alt="pet"  
+			style="width: 149px;height: 124px;" mode="widthFix"/>
+			<view class="personal-pet-none-text">这里还没有您的宠物,请点击添加吧~</view>
+		</view>
+		<view class="personal-pet-add" v-if="petList.length==0">
+			<button class="personal-pet-add-btn" @click="addPet">添加宠物</button>
+		</view>
+		<view class="">
+			<u-picker
+				:showToolbar='false'
+				:show="show"
+				:columns="petTypes"
+				@change="petTypeChange"
+				@cancel="cancel"
+				@confirm="confirm"
+			></u-picker>
+		</view> -->
 	</view>
 </template>
 
-<script setup>
-	
-	function toDetail() {
-		uni.navigateTo({
-			url: "/otherPages/myOrdersManage/service/detail"
-		})
+<script>
+	import { getpetList } from "@/api/pet/index.js"
+	import { getDictList } from "@/api/system/user.js"
+	export default{
+		data(){
+			return{
+				petList:[],
+				show:false,
+				petTypes:[],
+				petType:''
+			}
+		},
+		onShow() {
+			this.getPetList();
+		},
+		methods:{
+			getPetList(){
+				getpetList({owner:this.openIdStr}).then(res=>{
+					if(res&&res.content){
+						this.petList=res.content
+						if(this.petList.length==0){
+							this.getPetTypeList()
+						}
+					} 
+				})
+			},
+			getPetTypeList(){
+				getDictList('pet_type').then(res=>{
+					if (res.code == 200) {
+						let petType = res.data.map(e=>e.dictLabel)
+						this.petTypes=[petType]
+						console.log(this.petTypes)
+					} else {
+						this.$modal.showToast('获取pet type失败')
+					}
+				})
+			},
+			addPet(){
+				this.show = true;
+			},
+			cancel() {
+				this.show = false
+			},
+			petTypeChange(e){
+				console.log(e)
+				this.petType=e.value[0]
+			},
+			confirm(e) {
+				this.show = false
+				if(this.petType==='猫猫'){
+					uni.navigateTo({
+						url: `/pages/personalCenter/petInfo?petType=cat&optionType=add`
+					});
+				}
+				if(this.petType==='狗狗'){
+					uni.navigateTo({
+						url: `/pages/personalCenter/petInfo?petType=dog&optionType=add`
+					});
+				}
+				if(!this.petType){
+					if(e.value[0]==='猫猫'){
+						uni.navigateTo({
+							url: `/pages/personalCenter/petInfo?petType=cat&optionType=add`
+						});
+					}
+					if(e.value[0]==='狗狗'){
+						uni.navigateTo({
+							url: `/pages/personalCenter/petInfo?petType=dog&optionType=add`
+						});
+					}
+				}
+			},
+			serviceTips(item){
+				return `查看${item.petType=='dog'?"狗狗":"猫猫"}"${item.name}"的服务信息`
+			},
+			goServiceInfo(item){
+				uni.navigateTo({
+					url: `/pages/personalCenter/serviceInfo?petType=${item.petType}&petId=${item.id}`
+				});
+			}
+		}
 	}
-	
-	
 </script>
 
-<style scoped lang="scss">
-	.box {
-		width: 100vw;
-		height: 100vh;
-		padding: 2% 3%;
-	}
-
-	.box-size {
-		box-sizing: border-box;
-	}
-
-	.level {
-		display: flex;
-	}
-
-	.container {
-		width: 710rpx;
-		height: 121rpx;
-		background-color: #fff;
-		padding: 1% 4% 3% 2%;
-		justify-content: space-between;
-		margin-bottom: 20rpx;
-	}
-
-	.img image {
-		width: 104rpx;
-		height: 104rpx;
-		border-radius: 100rpx;
-		background-color: red;
-		margin-right: 20rpx;
-	}
-
-	.text {
-		font-size: 30rpx;
-		display: grid;
-		place-items: center;
-	}
-
-	.img_ {
-		display: grid;
-		place-items: center;
-	}
-
-	.img_ image {
-		width: 40rpx;
-		height: 40rpx;
-		/* background-color: red; */
+<style lang="scss">
+	.personal-pet{
+		position: relative;
+		height: 100%;
+		padding-bottom: 58px;
+		.personal-pet-add{
+			background-color: #FFFFFF;
+			padding: 10px 20px 40px;
+			width: 100%;
+			height: 90px;
+			position: fixed;
+			bottom: 0;
+			z-index: 100;
+			display: flex;
+			.personal-pet-add-btn{
+				width: 100%;
+				border-radius: 6px;
+				background: #FFB13F;
+				font-size: 16px;
+				color: #FFFFFF;
+			}
+		}
+		.personal-service-list{
+			.personal-service-list-item{
+				background-color: #fff;
+				margin: 10px 10px 0 10px;
+				border-radius: 5px;
+				padding: 10px;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				.personal-service-tips{
+					margin-left: 10px;
+					color:#333; 
+					font-size: 14px;
+				}
+			}
+		}
+	
+		.personal-pet-none{
+			display:flex;
+			justify-content: center;
+			align-items: center;
+			flex-wrap: wrap;
+			margin-top: 40%;
+			.personal-pet-none-text{
+				color: #666;
+				text-align: center;
+				font-size: 14px;
+				width: 100%;
+				margin-top: 10px;
+			}
+		}
+		
 	}
+	
 </style>
\ No newline at end of file
diff --git a/otherPages/orderTakingManage/pet/detail.vue b/otherPages/orderTakingManage/pet/detail.vue
index c4e3458..3a60b68 100644
--- a/otherPages/orderTakingManage/pet/detail.vue
+++ b/otherPages/orderTakingManage/pet/detail.vue
@@ -84,7 +84,8 @@
 					疫苗
 					<!-- <input type="text" placeholder="请输入宠物名字" /> -->
 					<view class="item_">
-						有免疫史
+						<!-- 有免疫史 -->
+						{{ vaccineText }}
 					</view>
 				</view>
 				<view class="line1">
@@ -96,7 +97,8 @@
 						<up-button @click="show = true">请选择</up-button>
 					</view> -->
 					<view class="item_">
-						未驱虫
+						{{ dewormText }}
+						<!-- 未驱虫 -->
 					</view>
 				</view>
 				<view class="line1">
@@ -104,7 +106,8 @@
 				<view class="level name box-size pad_4">
 					绝育
 					<view class="item_">
-						已绝育
+						{{ neuteredText }}
+						<!-- 已绝育 -->
 					</view>
 				</view>
 				<view class="line1">
@@ -136,7 +139,9 @@
 
 <script setup>
 	import {
-		ref
+		ref,
+		reactive,
+		computed,
 	} from "vue"
 	import {
 		onLoad,
@@ -145,6 +150,7 @@
 	import {
 		getByPetId
 	} from "@/api/pet/index.js"
+	import { getDictList } from "@/api/system/user"
 
 	onLoad((options) => {
 		petId.value = options.id || null;
@@ -154,6 +160,39 @@
 		getPetDetail()
 	})
 
+	
+	const vaccineText = computed(() => {
+		const vaccineMap = {
+			0: '每年都免疫',
+			1: '有免疫史',
+			2: '未免疫'
+		};
+		return vaccineMap[petInfo.value.vaccine] || ''
+	});
+	const dewormText = computed(() => {
+		const dewormMap = {
+			0: '未驱虫',
+			1: '定期驱虫',
+			2: '有驱虫史'
+		};
+		return dewormMap[petInfo.value.deworm] || ''
+	});
+	const neuteredText = computed(() => {
+		const neuteredMap = {
+			0: '已绝育',
+			1: '未绝育'
+		};
+		return neuteredMap[petInfo.value.neutered] || ''
+	});
+	const petCartText = computed(() => {
+		const petCartMap = {
+			0: '是',
+			1: '否'
+		};
+		return petCartMap[petInfo.value.petCard] || ''
+	});
+	
+	
 	const petId = ref(null);
 	const petInfo = ref({})
 
@@ -166,6 +205,11 @@
 			petInfo.value = response.data;
 		}
 	}
+	
+	function getDictListInfo(){
+		getDictList('')
+	}
+	
 </script>
 
 <style lang="scss">
diff --git a/pages/myOrdersManage/components/systemOrder.vue b/pages/myOrdersManage/components/systemOrder.vue
index 479210f..57c323d 100644
--- a/pages/myOrdersManage/components/systemOrder.vue
+++ b/pages/myOrdersManage/components/systemOrder.vue
@@ -5,22 +5,22 @@
 				<view class="flex-between flex" style="background: #FFF4E5;padding: 22rpx 42rpx">
 					<view>{{ orderStatus[item.status] }}</view>
 					<view>本单酬劳
-						<text style="color: #FF530A">￥{{ item.price }}</text>
+						<text style="color: #FF530A">￥{{ item.orderGivePrice }}</text>
 					</view>
 				</view>
 				<view class="container-list">
-					<view class="flex-between flex mb28">
+					<view class="flex-between flex mb28" v-for="(pet, index) in item.h5OrderVO.petVOList">
 						<up-image style="flex-shrink:0" class="mr20" width="70px" height="70px"
-							src="https://cdn.catmdogd.com/Work/image/work/tx.png" shape="circle"></up-image>
+							:src="pet.photo" shape="circle"></up-image>
 						<view>
-							<view class="font28 col3">服务天数: 共{{ item.orderServiceTime }}天 I {{ item.orderServiceDate }}
+							<view class="font28 col3">服务天数: 共{{ pet.orderServiceText.length }}天 I {{ pet.orderServiceText.join('，') }}
 							</view>
 							<view style="margin: 18rpx 0">期望上门时间：早</view>
-							<view>中华田园犬(小型犬) | 专业喂养+提前熟悉+陪玩</view>
+							<view>{{ pet.breed }}{{ pet.bodyType }} | {{ pet.productNameText.join('+') }}</view>
 						</view>
 					</view>
-					<view class="mb28 address">{{ item.orderVisitAddress }}</view>
-					<view class="mb28">订单为系统派发，请确认订单信息后再抢单</view>
+					<view class="mb28 address">{{ item.address }}</view>
+					<view class="mb28" v-if="item.type == 0">订单为系统派发，请确认订单信息后再抢单</view>
 					<view class="flex flex-between">
 
 						<up-button type="primary" v-if="true" :text="btnTexts[current]" @click="toClock(item.id)" shape="circle"
@@ -65,7 +65,8 @@ import { onMounted } from 'vue';
 	function toClock(id) {
 		const paths = [`/otherPages/orderTakingManage/detail/index?id=${id}`,'/otherPages/myOrdersManage/clock/index','/otherPages/myOrdersManage/clock/detail']
 		uni.navigateTo({
-			url: paths[props.current]
+			url: paths[1],
+			// url: paths[props.current]
 		})
 	}
 
diff --git a/pages/myOrdersManage/components/timelineService.vue b/pages/myOrdersManage/components/timelineService.vue
new file mode 100644
index 0000000..29692c2
--- /dev/null
+++ b/pages/myOrdersManage/components/timelineService.vue
@@ -0,0 +1,504 @@
+<template>
+	<view class="timeline-container">
+		<!-- 日期和状态标签 -->
+		<view class="date-header">
+			<view class="date-box">
+				<view class="date-box-color" :style="{'background-color': getTopBgColor()}"></view>
+				<view class="date-month-day">{{ formatDate(date).month }}-{{ formatDate(date).day }}</view>
+			</view>
+			<view class="status-tag" :class="{'status-tag-pending': status === 'pending'}">
+				<image src="/static/images/ydd/icon1.png" mode="aspectFit" class="status-icon"></image>
+				{{ status === 'pending' ? '待上门' : '已完成' }}{{ orderCount }}单
+			</view>
+		</view>
+		
+		<!-- 时间线主体 -->
+		<view class="timeline-body">
+			<view class="timeline-line" :class="{'timeline-line-completed': status === 'completed'}"></view>
+			
+			<!-- 服务时间点 -->
+			<view class="time-point">
+				<view class="time-icon">
+					<image src="/static/images/ydd/icon1.png" mode="aspectFit" class="time-image"></image>
+				</view>
+				<view class="time-text">{{ timeOfDay }}</view>
+			</view>
+			
+			<!-- 服务内容卡片 -->
+			<view class="service-card">
+				<!-- 服务日期 -->
+				<view class="service-section">
+					<view class="section-title">
+						<view class="title-indicator"></view>
+						<text>服务日期</text>
+					</view>
+					<view class="section-content date-content">
+						{{ fullDate }}
+					</view>
+				</view>
+				
+				<!-- 陪伴对象 -->
+				<view class="service-section">
+					<view class="section-title">
+						<view class="title-indicator"></view>
+						<text>陪伴对象</text>
+						<view class="collapse-icon" @click="togglePetList">
+							收起 <text class="arrow" :class="{'arrow-up': !petListCollapsed}">▼</text>
+						</view>
+					</view>
+					<view class="section-content pet-list" v-if="!petListCollapsed">
+						<view v-for="(pet, index) in pets" :key="index" class="pet-item">
+							<view class="pet-avatar">
+								<image :src="pet.avatar || '/static/images/ydd/dog.png'" mode="aspectFill" class="avatar-image"></image>
+							</view>
+							<view class="pet-info">
+								<view class="pet-name">
+									{{ pet.name }}
+									<text class="pet-gender" :class="{'pet-gender-male': pet.gender === 'male', 'pet-gender-female': pet.gender === 'female'}">
+										{{ pet.gender === 'male' ? '♂' : '♀' }}
+									</text>
+								</view>
+								<view class="pet-description">
+									{{ pet.breed }}{{ pet.bodyType }} | {{ pet.services.join('，') }}
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				
+				<!-- 上门地址 -->
+				<view class="service-section">
+					<view class="section-title">
+						<view class="title-indicator"></view>
+						<text>上门地址</text>
+					</view>
+					<view class="section-content address-content">
+						{{ address }}
+					</view>
+				</view>
+				
+				<!-- 操作按钮 -->
+				<view class="action-buttons">
+					<view class="btn btn-clock" @click="handleClock">打卡</view>
+					<view class="btn btn-clock" @click="handlePetFile">宠物档案</view>
+					<view class="btn btn-clock" @click="handleServiceFile">服务档案</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, computed } from 'vue';
+	import { getOrderServiceText, getProductNameText } from '@/utils/serviceTime.js';
+	
+	// 定义组件属性
+	const props = defineProps({
+		date: {
+			type: String,
+			default: '2024-12-08'
+		},
+		timeOfDay: {
+			type: String,
+			default: '早上'
+		},
+		status: {
+			type: String,
+			default: 'pending' // 'pending' 或 'completed'
+		},
+		orderCount: {
+			type: Number,
+			default: 2
+		},
+		pets: {
+			type: Array,
+			default: () => [{
+				name: '小汪',
+				gender: 'male',
+				breed: '中华田园犬',
+				bodyType: '(小型犬)',
+				services: ['专业喂养', '提前熟悉', '陪玩'],
+				avatar: '/static/images/ydd/dog.png'
+			}, {
+				name: 'Billion',
+				gender: 'female',
+				breed: '豹猫',
+				bodyType: '(小型猫)',
+				services: ['上门喂养', '陪玩'],
+				avatar: '/static/images/ydd/cat.png'
+			}]
+		},
+		address: {
+			type: String,
+			default: '重庆市南岸区长嘉汇18栋9-2'
+		}
+	});
+	
+	// 宠物列表折叠状态
+	const petListCollapsed = ref(false);
+	
+	// 切换宠物列表显示状态
+	const togglePetList = () => {
+		petListCollapsed.value = !petListCollapsed.value;
+	};
+	
+	// 格式化日期
+	const formatDate = (dateString) => {
+		const date = new Date(dateString);
+		return {
+			day: date.getDate().toString().padStart(2, '0'),
+			month: (date.getMonth() + 1).toString().padStart(2, '0')
+		};
+	};
+	
+	// 完整日期显示
+	const fullDate = computed(() => {
+		const date = new Date(props.date);
+		const year = date.getFullYear();
+		const month = (date.getMonth() + 1).toString().padStart(2, '0');
+		const day = date.getDate().toString().padStart(2, '0');
+		return `${year}年${month}月${day}日`;
+	});
+	
+	// 按钮事件处理函数
+	const handleClock = (id) => {
+		// 打卡功能实现
+		const paths = [`/otherPages/orderTakingManage/detail/index?id=${id}`,'/otherPages/myOrdersManage/clock/index','/otherPages/myOrdersManage/clock/detail']
+		uni.navigateTo({
+			url: paths[props.current]
+		})
+	};
+	
+	const handlePetFile = () => {
+		// 宠物档案功能实现
+		uni.navigateTo({
+			url: "/otherPages/orderTakingManage/pet/index"
+		})
+	};
+	
+	const handleServiceFile = () => {
+		uni.navigateTo({
+			url: "/otherPages/myOrdersManage/service/index"
+		})
+	};
+	function getTopBgColor(){
+		return '#FFAA48'
+	}
+</script>
+
+<style lang="scss" scoped>
+.timeline-container {
+	position: relative;
+	padding: 20rpx;
+	margin-bottom: 30rpx;
+	
+	.date-header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 20rpx;
+		
+		.date-box {
+			width: 80rpx;
+			background-color: #ffffff;
+			border: 2px solid #333;
+			border-radius: 0;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			margin-right: 20rpx;
+			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+			border-radius: 14rpx;
+			
+			.date-box-color{
+				height: 20rpx;
+				width: 100%;
+				border-top-left-radius: 14rpx;
+				border-top-right-radius: 14rpx;
+				position: relative;
+				&::before{
+					content: '';
+					display: block;
+					background-color: #ddd;
+					width: 100%;
+					height: 26rpx;
+					top: 100%;
+					left: 0;
+					position: absolute;
+				}
+			}
+			
+			.date-month-day {
+				position: relative;
+				font-size: 26rpx;
+				font-weight: bold;
+				color: #333;
+				height: 50rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+			}
+		}
+		
+		.status-tag {
+			background-color: #4CD96422;
+			color: #4CD964;
+			border: 4rpx solid #4CD964;
+			padding: 16rpx 26rpx;
+			border-radius: 14rpx;
+			font-size: 26rpx;
+			display: flex;
+			align-items: center;
+			position: relative;
+			margin-left: 20rpx;
+			
+			.status-icon {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 8rpx;
+			}
+			&::after{
+				content: '';
+				display: block;
+				position: absolute;
+				width: 0;
+				height: 0;
+				top: 50%;
+				transform: translateY(-50%);
+				left: -16rpx;
+				border-top: 16rpx solid transparent;
+				border-bottom: 16rpx solid transparent;
+				border-right: 16rpx solid #4CD964;
+			}
+			
+			&::before{
+				content: '';
+				display: block;
+				position: absolute;
+				width: 0;
+				height: 0;
+				top: 50%;
+				transform: translateY(-50%);
+				left: -12rpx;
+				border-top: 12rpx solid transparent;
+				border-bottom: 12rpx solid transparent;
+				border-right: 12rpx solid #4CD96422;
+				z-index: 1;
+			}
+		}
+		
+		.status-tag-pending {
+			background-color: #FFAA4822;
+			color: #FFAA48;
+			border-color: #FFAA48;
+			&::after{
+				border-right-color: #FFAA48;
+			}
+			&::before{
+				border-right-color: #FFAA4822;
+			}
+		}
+	}
+	
+	.timeline-body {
+		position: relative;
+		padding-left: 40rpx;
+		
+		.timeline-line {
+			position: absolute;
+			left: 40rpx;
+			top: 0;
+			height: 100%;
+			width: 2rpx;
+			background-color: #FFAA48;
+			z-index: 0;
+		}
+		
+		.timeline-line-completed {
+			background-color: #4CD964;
+		}
+		
+		.time-point {
+			display: flex;
+			align-items: center;
+			margin-bottom: 20rpx;
+			position: relative;
+			z-index: 1;
+			
+			.time-icon {
+				width: 60rpx;
+				height: 60rpx;
+				background-color: #fff;
+				border-radius: 50%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin-right: 20rpx;
+				position: relative;
+				left: -20rpx;
+				
+				.time-image {
+					width: 40rpx;
+					height: 40rpx;
+				}
+			}
+			
+			.time-text {
+				font-size: 28rpx;
+				color: #333;
+			}
+		}
+		
+		.service-card {
+			background-color: #fff;
+			border-radius: 12rpx;
+			padding: 30rpx;
+			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+			margin-left: 20rpx;
+			
+			.service-section {
+				margin-bottom: 30rpx;
+				
+				.section-title {
+					display: flex;
+					align-items: center;
+					margin-bottom: 15rpx;
+					
+					.title-indicator {
+						width: 6rpx;
+						height: 30rpx;
+						background-color: #FFAA48;
+						margin-right: 15rpx;
+					}
+					
+					text {
+						font-size: 28rpx;
+						color: #333;
+						font-weight: bold;
+					}
+					
+					.collapse-icon {
+						margin-left: auto;
+						font-size: 24rpx;
+						color: #999;
+						
+						.arrow {
+							transition: transform 0.3s;
+							display: inline-block;
+						}
+						
+						.arrow-up {
+							transform: rotate(180deg);
+						}
+					}
+				}
+				
+				.section-content {
+					padding: 0 15rpx;
+                    background-color: #FFF9F0;
+				}
+				
+				.date-content {
+					background-color: #FFF9F0;
+					padding: 20rpx;
+					border-radius: 8rpx;
+					font-size: 28rpx;
+					color: #333;
+				}
+				
+				.pet-list {
+					padding: 15rpx;
+					.pet-item {
+						display: flex;
+						margin-bottom: 20rpx;
+						
+						&:last-child {
+							margin-bottom: 0;
+						}
+						
+						.pet-avatar {
+							width: 80rpx;
+							height: 80rpx;
+							border-radius: 50%;
+							overflow: hidden;
+							margin-right: 20rpx;
+							
+							.avatar-image {
+								width: 100%;
+								height: 100%;
+							}
+						}
+						
+						.pet-info {
+							flex: 1;
+							
+							.pet-name {
+								font-size: 28rpx;
+								color: #333;
+								margin-bottom: 8rpx;
+								
+								.pet-gender {
+									display: inline-block;
+									width: 32rpx;
+									height: 32rpx;
+									line-height: 32rpx;
+									text-align: center;
+									border-radius: 50%;
+									color: #fff;
+									font-size: 20rpx;
+									margin-left: 10rpx;
+								}
+								
+								.pet-gender-male {
+									background-color: #4A90E2;
+								}
+								
+								.pet-gender-female {
+									background-color: #FF6B9A;
+								}
+							}
+							
+							.pet-description {
+								font-size: 24rpx;
+								color: #7D8196;
+							}
+						}
+					}
+				}
+				
+				.address-content {
+					padding: 20rpx;
+					border-radius: 8rpx;
+					font-size: 28rpx;
+					color: #7D8196;
+				}
+			}
+			
+			.action-buttons {
+				display: flex;
+				justify-content: space-between;
+				
+				.btn {
+					width: 30%;
+					height: 80rpx;
+					line-height: 80rpx;
+					text-align: center;
+					border-radius: 40rpx;
+					font-size: 28rpx;
+				}
+				
+				.btn-clock {
+					background-color: #FFAA48;
+					color: #fff;
+				}
+				
+				.btn-pet-file, .btn-service-file {
+					background-color: #F6F7FB;
+					color: #333;
+					border: 1px solid #E5E6EB;
+				}
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/myOrdersManage/index.scss b/pages/myOrdersManage/index.scss
index 74daa66..04d4aca 100644
--- a/pages/myOrdersManage/index.scss
+++ b/pages/myOrdersManage/index.scss
@@ -25,6 +25,8 @@
 
 .container-list-item {
   background: #FFFFFF;
+  border-radius: 20rpx;
+  overflow: hidden;
 }
 .header-buts{
   background: #FFBF60;
diff --git a/pages/myOrdersManage/index.vue b/pages/myOrdersManage/index.vue
index 0b40fdc..850e42f 100644
--- a/pages/myOrdersManage/index.vue
+++ b/pages/myOrdersManage/index.vue
@@ -16,7 +16,7 @@
 				}" :inactiveStyle="{
 					color: '#FFFFFF',
 					transform: 'scale(1)'
-				}" :itemStyle="{height:'88rpx',padding:'0 52rpx'}" lineColor="#FFFFFF"></up-tabs>
+				}" :itemStyle="{height:'88rpx',width : '33%'}" lineColor="#FFFFFF"></up-tabs>
 			</view>
 		</up-sticky>
 
@@ -35,7 +35,8 @@
 
 		<view class="container">
 			<systemOrder :list="list" :current="current" v-if="activeIndex == 1" />
-			<orderListByData :list="list" v-else />
+			<timelineService v-else />
+			<!-- <orderListByData :list="list" v-else /> -->
 		</view>
 	</view>
 </template>
@@ -48,6 +49,7 @@
 	} from "vue";
 	import systemOrder from "./components/systemOrder.vue";
 	import orderListByData from "./components/orderListByData.vue";
+	import timelineService from "./components/timelineService.vue";
 	import {
 		onShow
 	} from "@dcloudio/uni-app"
@@ -62,6 +64,7 @@
 	import {
 		useStore
 	} from "vuex"
+import { getOrderServiceText, getProductNameText } from '@/utils/serviceTime.js'
 
 	onShow(() => {
 		if (!getLoginStatus()) return;
@@ -80,19 +83,19 @@
 	const tabList1 = reactive([{
 			name: '待服务',
 			badge: {
-				// value: 5,
+				value: 0,
 			}
 		},
 		{
 			name: '进行中',
 			badge: {
-				// value: 5,
+				value: 0,
 			}
 		},
 		{
 			name: '已完成',
 			badge: {
-				// value: 5,
+				value: 0,
 			}
 		},
 	])
@@ -100,13 +103,13 @@
 	const tabList2 = reactive([{
 			name: '待上门',
 			badge: {
-				// value: 5,
+				value: 0,
 			}
 		},
 		{
 			name: '已完成',
 			badge: {
-				// value: 5,
+				value: 0,
 			}
 		},
 	])
@@ -118,7 +121,20 @@
 			})
 			.then(res => {
 				if (res.code == 200) {
-					list.value = res.data
+					list.value = res.data.rows
+					
+					if(activeIndex.value == 0){
+						tabList2[current.value].badge.value = res.data.total
+					}else{
+						tabList1[current.value].badge.value = res.data.total
+					}
+					
+					list.value.forEach(item => {
+						item.h5OrderVO.petVOList.forEach(pet => {
+							pet.orderServiceText = getOrderServiceText(pet.id, item.h5OrderVO.orderServiceList)
+							pet.productNameText = getProductNameText(pet.id, item.h5OrderVO.orderItemList, item.h5OrderVO.orderServiceList)
+						})
+					})
 				}
 			})
 	}
diff --git a/pages/orderTakingManage/components/list.vue b/pages/orderTakingManage/components/list.vue
index 670e1d1..d6ec38d 100644
--- a/pages/orderTakingManage/components/list.vue
+++ b/pages/orderTakingManage/components/list.vue
@@ -15,7 +15,7 @@
                         <up-image style="flex-shrink:0" class="mr20" width="70px" height="70px" :src="pet.photo"
                             shape="circle"></up-image>
                         <view>
-                            <view class="font28 col3 text-ellipsis">服务天数: 共{{ pet.orderServiceText.length }}天 I {{ pet.orderServiceText.join('，') }}</view>
+                            <view class="font28 col3">服务天数: 共{{ pet.orderServiceText.length }}天 I {{ pet.orderServiceText.join('，') }}</view>
                             <!-- <view class="font28 col3">服务天数: 共{{ item.h5OrderVO.orderServiceList.length }}天 I
 
                                 <text v-for="itemService in item.h5OrderVO.orderServiceList" :key="itemService.id">
@@ -25,7 +25,7 @@
                             </view> -->
 
                             <!-- <view style="margin: 18rpx 0">期望上门时间：{{itemService.expectServiceTime}}</view> -->
-                            <view class="text-ellipsis">{{ pet.breed }}{{ pet.bodyType }} | {{ pet.productNameText.join('，') }}
+                            <view class="" style="margin-top: 10rpx;">{{ pet.breed }}{{ pet.bodyType }} | {{ pet.productNameText.join('，') }}
 
                                 <!-- <text v-for="itemPet in item.h5OrderVO.orderItemList" :key="itemPet.id">
                                     {{ itemPet.productName }}
@@ -36,13 +36,16 @@
                         </view>
                     </view>
                 </view>
-                <view class="mb28 address">{{ item.address }}</view>
-                <view class="mb28">订单为系统派发，请确认订单信息后再抢单</view>
-                <view class="flex flex-between">
-                    <up-button @click="unableToAcceptOrder(item.id)" text="无法接单" shape="circle" plain
-                        class="mr20"></up-button>
-                    <up-button @click="toOrderDetail(item.id)" type="primary" text="查看详情后接单" shape="circle"
-                        color="#FFAA48"></up-button>
+                <view class="btm">
+                	<view class="mb28 address" style="font-size: 26rpx;">{{ item.address }}</view>
+                	<view class="mb28" style="padding-left: 20rpx;font-size: 26rpx;"
+                	v-if="item.type == 0">订单为系统派发，请确认订单信息后再抢单</view>
+                	<view class="flex flex-between">
+                	    <up-button @click="unableToAcceptOrder(item.id)" text="无法接单" shape="circle" plain
+                	        class="mr20"></up-button>
+                	    <up-button @click="toOrderDetail(item.id)" type="primary" text="查看详情后接单" shape="circle"
+                	        color="#FFAA48"></up-button>
+                	</view>
                 </view>
             </view>
         </up-list-item>
diff --git a/pages/orderTakingManage/index.scss b/pages/orderTakingManage/index.scss
index 01067c2..9057115 100644
--- a/pages/orderTakingManage/index.scss
+++ b/pages/orderTakingManage/index.scss
@@ -25,4 +25,9 @@
 
 .container-list-item {
   background: #FFFFFF;
+  border-radius: 20rpx;
+  overflow: hidden;
+  .btm{
+	  padding: 0 20rpx 20rpx 20rpx;
+  }
 }
\ No newline at end of file
diff --git a/pages/orderTakingManage/index.vue b/pages/orderTakingManage/index.vue
index 72620f3..48190c7 100644
--- a/pages/orderTakingManage/index.vue
+++ b/pages/orderTakingManage/index.vue
@@ -9,7 +9,7 @@
         }" :inactiveStyle="{
             color: '#FFFFFF',
             transform: 'scale(1)'
-        }" :itemStyle="{height:'88rpx',padding:'0 52rpx'}" lineColor="#FFFFFF" @click="clickEvent"></up-tabs>
+        }" :itemStyle="{height:'88rpx',width : '33%'}" lineColor="#FFFFFF" @click="clickEvent"></up-tabs>
 			</view>
 		</up-sticky>
 
@@ -38,6 +38,7 @@
 		useStore
 	} from "vuex"
 import dayjs from "dayjs";
+import { getOrderServiceText, getProductNameText } from '@/utils/serviceTime.js'
 
 	const current = ref(0)
 	const list = reactive([{
@@ -90,33 +91,7 @@ import dayjs from "dayjs";
 		}
 	}
 	
-	function getOrderServiceText(petId, orderServiceList){
-		
-		let YYYY = undefined
-		
-		return orderServiceList
-		.filter(service => service.petId == petId)//过滤
-		.map(service => dayjs(service.serviceDate))//转成时间
-		.sort((a, b) => a.valueOf() - b.valueOf())//排序
-		.map((service, i) => {
-			// if(YYYY && YYYY.format('YYYY-MM') == service.format('YYYY-MM')){
-			// 	return service.format('DD')
-			// }
-			// if(YYYY && YYYY.format('YYYY') == service.format('YYYY')){
-			// 	return service.format('MM-DD')
-			// }
-			// YYYY = service
-			return service.format('MM-DD')
-		})
-	}
-	function getProductNameText(petId, productList, orderServiceList){
-		
-		let orderService = orderServiceList.filter(service => service.petId == petId)
-		
-		return productList
-		.filter(product => orderService.filter(service => service.id == product.orderServiceId).length > 0)
-		.map(product => product.productName)
-	}
+	
 
 	const clickEvent = (item) => {
 		current.value = item.index;
diff --git a/utils/serviceTime.js b/utils/serviceTime.js
new file mode 100644
index 0000000..a8294ef
--- /dev/null
+++ b/utils/serviceTime.js
@@ -0,0 +1,43 @@
+
+
+
+
+
+import dayjs from "dayjs";
+
+
+
+
+export function getOrderServiceText(petId, orderServiceList) {
+
+	let YYYY = undefined
+
+	return orderServiceList
+		.filter(service => service.petId == petId) //过滤
+		.map(service => dayjs(service.serviceDate)) //转成时间
+		.sort((a, b) => a.valueOf() - b.valueOf()) //排序
+		.map((service, i) => {
+			// if(YYYY && YYYY.format('YYYY-MM') == service.format('YYYY-MM')){
+			// 	return service.format('DD')
+			// }
+			// if(YYYY && YYYY.format('YYYY') == service.format('YYYY')){
+			// 	return service.format('MM-DD')
+			// }
+			// YYYY = service
+			return service.format('MM-DD')
+		})
+}
+
+export function getProductNameText(petId, productList, orderServiceList) {
+
+	let orderService = orderServiceList.filter(service => service.petId == petId)
+
+	return productList
+		.filter(product => orderService.filter(service => service.id == product.orderServiceId).length > 0)
+		.map(product => product.productName)
+}
+
+export default {
+	getProductNameText,
+	getOrderServiceText,
+}
\ No newline at end of file