feat: 添加打卡功能及服务档案步骤条样式

- 新增打卡功能，支持保存草稿和提交打卡记录
- 添加服务档案步骤条样式，支持分步查看喂养、清洁和附加服务
- 优化图片上传和回显逻辑，支持多张图片上传和预览
- 修复部分样式问题，提升用户体验

api/order/order.js

@@ -12,7 +12,7 @@ export function getAppOrderList() {
 	})
 }
 
-// 获取订单列表
+// 根据订单id获取打卡详情
 export function orderItemLogGetByOrderId(orderId) {
 	return request({
 		headers: {
@@ -22,6 +22,18 @@ export function orderItemLogGetByOrderId(orderId) {
 		method: 'get'
 	})
 }
+// 根据订单id进行打卡
+export function orderItemLogAddOrUpdate(data) {
+	return request({
+		headers: {
+			"isToken": true
+		},
+		url: "/applet/orderItemLog/addOrUpdate",
+		method: 'post',
+		data
+	})
+}
+
 
 // 获取订单中的宠物列表
 export function getOrderPetById(orderId) {
@@ -58,6 +70,7 @@ export function getPetCareByPetId(petId) {
 export default {
 	getAppOrderList,
 	orderItemLogGetByOrderId,
+	orderItemLogAddOrUpdate,
 	getOrderPetById,
 	getPetById,
 	getPetCareByPetId,

otherPages/myOrdersManage/clock/AppletOrderItemDateLog.java

@@ -0,0 +1,94 @@
+package com.ruoyi.model.domain;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import com.ruoyi.common.annotation.Excel;
+import lombok.Data;
+/**
+ * 订单信息表对象 applet_order_item_date_log
+ *
+ * @author daixiande
+ */
+@Data
+public class AppletOrderItemDateLog {
+    private static final long serialVersionUID = 1L;
+
+    /** 唯一标识 */
+    private Long id;
+
+    /** 创建时间 */
+    private String createTime;
+
+    /** 创建者 */
+    private Integer createBy;
+
+    /** 修改时间 */
+    private String updateTime;
+
+    /** 修改者 */
+    private Integer updateBy;
+
+    /** 手套照片 */
+    @Excel(name = "手套照片")
+    private String glovePhoto;
+
+    /** 鞋套照片 */
+    @Excel(name = "鞋套照片")
+    private String shoeCoverPhoto;
+
+    /** 宠物照片 */
+    @Excel(name = "宠物照片")
+    private String petPhoto;
+
+    /** 伴宠师照片 */
+    @Excel(name = "伴宠师照片")
+    private String teacherPhoto;
+
+    /** 粮碗前后对比-前 */
+    @Excel(name = "粮碗前后对比-前")
+    private String grainBowlFront;
+
+    /** 粮碗前后对比-后 */
+    @Excel(name = "粮碗前后对比-后")
+    private String grainBowlAfter;
+
+    /** 水碗前后对比-前 */
+    @Excel(name = "水碗前后对比-前")
+    private String waterBowlFront;
+
+    /** 水碗前后对比-后 */
+    @Excel(name = "水碗前后对比-后")
+    private String waterBowlAfter;
+
+    /** 盆/尿垫前后对比-前 */
+    @Excel(name = "盆/尿垫前后对比-前")
+    private String basinFront;
+
+    /** 盆/尿垫前后对比-后 */
+    @Excel(name = "盆/尿垫前后对比-后")
+    private String basinAfter;
+
+    /** 溜狗 */
+    @Excel(name = "溜狗")
+    private String workDogImage;
+
+    /** 陪玩 */
+    @Excel(name = "陪玩")
+    private String workPalyImage;
+
+    /** 备注 */
+    @Excel(name = "备注")
+    private String notes;
+
+    /** 日订单标识 */
+    @Excel(name = "日订单标识")
+    private Long itemDateId;
+
+    /** 总订单标识 */
+    @Excel(name = "总订单标识")
+    private Long itemOrderId;
+
+    /** 订单标识 */
+    @Excel(name = "订单标识")
+    private Long orderId;
+
+}

otherPages/myOrdersManage/clock/index.scss

@@ -34,6 +34,10 @@
 			align-items: center;
 			justify-content: center;
 		}
+		.buttom-item-2{
+			border: 2rpx solid #ff842c;
+			background-color: #FFBF6022;
+		}
 	}
 }
 

otherPages/myOrdersManage/clock/index.vue

@@ -13,7 +13,7 @@
 				<view class="mt20 ml10">
 
 					<up-upload :fileList="fileList.glove" @afterRead="afterRead" @delete="deletePic" name="glove"
-						multiple :maxCount="2" width="131rpx" height="131rpx">
+						multiple :maxCount="2" width="131rpx" height="131rpx" :disabled="isRead">
 
 						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
 						</image>
@@ -30,7 +30,7 @@
 			<view class="level">
 				<view class="mt20 ml10">
 					<up-upload :fileList="fileList.ShoeCover" @afterRead="afterRead" @delete="deletePic"
-						name="ShoeCover" multiple :maxCount="2" width="131rpx" height="131rpx">
+						name="ShoeCover" multiple :maxCount="2" width="131rpx" height="131rpx" :disabled="isRead">
 
 						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
 						</image>
@@ -51,7 +51,7 @@
 				<view class="level">
 					<view class="mt20 ml10 mr20">
 						<up-upload :fileList="fileList['pet' + index]" @afterRead="afterRead" @delete="deletePic"
-							:name="'pet' + index" multiple :maxCount="2" width="131rpx" height="131rpx">
+							:name="'pet' + index" multiple :maxCount="2" width="131rpx" height="131rpx" :disabled="isRead">
 
 							<image src="/static/images/ydd/add_photo.png" mode=""
 								:style="{width:'131rpx',height:'131rpx'}">
@@ -70,7 +70,7 @@
 			<view class="level">
 				<view class="mt20 ml10">
 					<up-upload :fileList="fileList.foodA" @afterRead="afterRead" @delete="deletePic" name="foodA"
-						multiple :maxCount="1" width="131rpx" height="131rpx">
+						multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead">
 
 						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
 						</image>
@@ -80,7 +80,7 @@
 				</view>
 				<view class="mt20 ml10 ml28">
 					<up-upload :fileList="fileList.foodB" @afterRead="afterRead" @delete="deletePic" name="foodB"
-						multiple :maxCount="1" width="131rpx" height="131rpx">
+						multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead">
 
 						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
 						</image>
@@ -93,7 +93,7 @@
 			<view class="level">
 				<view class="mt20 ml10">
 					<up-upload :fileList="fileList.waterA" @afterRead="afterRead" @delete="deletePic" name="waterA"
-						multiple :maxCount="1" width="131rpx" height="131rpx">
+						multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead">
 
 						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
 						</image>
@@ -103,7 +103,7 @@
 				</view>
 				<view class="mt20 ml10 ml28">
 					<up-upload :fileList="fileList.waterB" @afterRead="afterRead" @delete="deletePic" name="waterB"
-						multiple :maxCount="1" width="131rpx" height="131rpx">
+						multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead">
 
 						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
 						</image>
@@ -116,7 +116,7 @@
 			<view class="level">
 				<view class="mt20 ml10">
 					<up-upload :fileList="fileList.urinalA" @afterRead="afterRead" @delete="deletePic" name="urinalA"
-						multiple :maxCount="1" width="131rpx" height="131rpx">
+						multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead">
 
 						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
 						</image>
@@ -126,7 +126,7 @@
 				</view>
 				<view class="mt20 ml10 ml28">
 					<up-upload :fileList="fileList.urinalB" @afterRead="afterRead" @delete="deletePic" name="urinalB"
-						multiple :maxCount="1" width="131rpx" height="131rpx">
+						multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead">
 
 						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
 						</image>
@@ -147,7 +147,7 @@
 			<view class="level">
 				<view class="mt20 ml10 mr20">
 					<up-upload :fileList="fileList.testa" @afterRead="afterRead" @delete="deletePic" name="testa"
-						multiple :maxCount="3" width="131rpx" height="131rpx">
+						multiple :maxCount="3" width="131rpx" height="131rpx" :disabled="isRead">
 
 						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
 						</image>
@@ -162,7 +162,7 @@
 			<view class="level">
 				<view class="mt20 ml10 mr20">
 					<up-upload :fileList="fileList.testb" @afterRead="afterRead" @delete="deletePic" name="testb"
-						multiple :maxCount="3" width="131rpx" height="131rpx">
+						multiple :maxCount="3" width="131rpx" height="131rpx" :disabled="isRead">
 
 						<image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
 						</image>
@@ -181,13 +181,24 @@
 			<view class="mt24">
 				<textarea name="" id="" cols="30" rows="10" placeholder="请输入内容"
 					:style="{color:'#999999',fontSize:'30rpx',backgroundColor:'#F5F5F5',borderRadius:'16rpx',width:'681rpx',height:'180rpx'}"
-					class="pd20 box-size"></textarea>
+					class="pd20 box-size" :disabled="isRead"></textarea>
 			</view>
 		</view>
-		<view class="buttom mt60 box-size" @click="submit">
-			<view class="buttom-item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}">
+		<view class="buttom mt60 box-size" 
+		style="display: flex;gap: 20rpx;"
+		>
+			<view class="buttom-item buttom-item-2 level size-30" 
+			@click="saveDraft(false)"
+			:style="{borderRadius:'41rpx',color:'#ff842c'}">
+				保存草稿
+			</view>
+			
+			<view class="buttom-item level size-30" 
+			@click="submit"
+			:style="{borderRadius:'41rpx',color:'#fff'}">
 				确定提交
 			</view>
+			
 		</view>
 	</view>
 </template>
@@ -206,13 +217,19 @@
 	} from '@/utils/oss-upload/oss/index.js'
 	
 	import { orderItemLogGetByOrderId } from '@/api/order/order.js'
+	import {
+		getOrderPetById,
+		orderItemLogAddOrUpdate,
+	} from "@/api/order/order.js";
 
 	onLoad((options) => {
 		orderId.value = options.id || null;
+        isRead.value = options.isRead || false;
 		GetByOrderId()
 	});
 	
 	const orderId = ref(0)
+	const isRead = ref(false)
 	
 
 	const fileList = reactive({
@@ -225,17 +242,16 @@
 
 	const form = ref({})
 
-	const petList = ref([{
-			title: '小汪'
-		},
-		{
-			title: '大黄'
-		},
+	const petList = ref([
+		// {
+		// 	title: '小汪'
+		// },
+		// {
+		// 	title: '大黄'
+		// },
 	])
 
-	petList.value.forEach((n, i) => {
-		fileList['pet' + i] = []
-	})
+	
 
 	// 删除图片
 	const deletePic = (event) => {
@@ -274,36 +290,151 @@
 			}
 		}
 
-		if (!fileList.foodA || fileList.foodA.length < 2 ||
-			!fileList.foodB || fileList.foodB.length < 2) {
+		if (!fileList.foodA || fileList.foodA.length < 1 ||
+			!fileList.foodB || fileList.foodB.length < 1) {
 			return msg('请上传粮碗前后照片')
 		}
 
-		if (!fileList.waterA || fileList.waterA.length < 2 ||
-			!fileList.waterB || fileList.waterB.length < 2) {
+		if (!fileList.waterA || fileList.waterA.length < 1 ||
+			!fileList.waterB || fileList.waterB.length < 1) {
 			return msg('请上传水碗前后照片')
 		}
 
-		if (!fileList.urinalA || fileList.urinalA.length < 2 ||
-			!fileList.urinalB || fileList.urinalB.length < 2) {
+		if (!fileList.urinalA || fileList.urinalA.length < 1 ||
+			!fileList.urinalB || fileList.urinalB.length < 1) {
 			return msg('请上传猫砂盆、尿盆照片')
 		}
 
-
+		saveDraft(true)
 	}
 	
 	function GetByOrderId(){
 		orderItemLogGetByOrderId(orderId.value)
+		.then(res => {
+			if(res.code == 200 && res.data) {
+				const data = res.data;
+				form.value = data
+				// 回显手套照片
+				if(data.glovePhoto) {
+					fileList.glove = data.glovePhoto.split(',').map(url => ({ url }));
+				}
+				// 回显鞋套照片
+				if(data.shoeCoverPhoto) {
+					fileList.ShoeCover = data.shoeCoverPhoto.split(',').map(url => ({ url }));
+				}
+				// 回显宠物照片
+				if(data.petPhoto) {
+					const pets = JSON.parse(data.petPhoto);
+                    petList.value = pets;
+					pets.forEach((pet, index) => {
+						if(pet.fileList) {
+							fileList['pet' + index] = pet.fileList.split(',').map(url => ({ url }));
+						}
+					});
+				}
+				// 回显粮碗照片
+				if(data.grainBowlFront) fileList.foodA = data.grainBowlFront.split(',').map(url => ({ url }));
+				if(data.grainBowlAfter) fileList.foodB = data.grainBowlAfter.split(',').map(url => ({ url }));
+				// 回显水碗照片
+				if(data.waterBowlFront) fileList.waterA = data.waterBowlFront.split(',').map(url => ({ url }));
+				if(data.waterBowlAfter) fileList.waterB = data.waterBowlAfter.split(',').map(url => ({ url }));
+				// 回显猫砂盆/尿垫照片
+				if(data.basinFront) fileList.urinalA = data.basinFront.split(',').map(url => ({ url }));
+				if(data.basinAfter) fileList.urinalB = data.basinAfter.split(',').map(url => ({ url }));
+				// 回显定制服务照片
+				if(data.workDogImage) fileList.testa = data.workDogImage.split(',').map(url => ({ url }));
+				if(data.workPalyImage) fileList.testb = data.workPalyImage.split(',').map(url => ({ url }));
+			}else{
+                getOrderPetByIdFN()
+            }
+		})
+	}
+	
+	function getOrderPetByIdFN(){
+		getOrderPetById(orderId.value)
 		.then(res => {
 			if(res.code == 200){
-				
+				res.data.forEach((n, i) => {
+					fileList['pet' + i] = []
+				})
+				res.data.forEach((n, i) => {
+					petList.value.push({
+						title : n.name,
+                        id : n.id,
+					})
+				})
 			}
 		})
 	}
 	
 	
-	function saveDraft() {
-		
+	function saveDraft(flag) {
+	    // 将所有图片数组转换为逗号分隔的字符串
+	    const params = {
+	        orderId: orderId.value,
+	        glovePhoto: fileList.glove?.map(item => item.url).join(',') || '',
+	        shoeCoverPhoto: fileList.ShoeCover?.map(item => item.url).join(',') || '',
+	        // 合并所有宠物照片
+	        petPhoto: JSON.stringify(
+                petList.value.map((pet, index) => {
+                    return {
+                        id : pet.id,
+                        title : pet.title,
+                        fileList: fileList['pet' + index]?.map(item => item.url).join(',') || ''
+                    };
+                })
+            ),
+	        // 粮碗照片
+	        grainBowlFront: fileList.foodA?.map(item => item.url).join(',') || '',
+	        grainBowlAfter: fileList.foodB?.map(item => item.url).join(',') || '',
+	        // 水碗照片
+	        waterBowlFront: fileList.waterA?.map(item => item.url).join(',') || '',
+	        waterBowlAfter: fileList.waterB?.map(item => item.url).join(',') || '',
+	        // 猫砂盆/尿垫照片
+	        basinFront: fileList.urinalA?.map(item => item.url).join(',') || '',
+	        basinAfter: fileList.urinalB?.map(item => item.url).join(',') || '',
+	        // 定制服务照片
+	        workDogImage: fileList.testa?.map(item => item.url).join(',') || '',
+	        workPalyImage: fileList.testb?.map(item => item.url).join(',') || '',
+	        // 备注信息
+	        notes: form.value.notes || '',
+			submitFlag : 1,
+	    }
+
+        if(form.value.id) {
+			params.id = form.value.id
+		}
+
+        if(flag) {
+            params.submitFlag = 2
+        }
+	
+	    orderItemLogAddOrUpdate(params)
+	    .then(res => {
+	        if(res.code === 200) {
+	            uni.showToast({
+	                title: '提交成功',
+	                icon: 'success'
+	            })
+	            // 如果是确认提交（非草稿），则返回上一页
+	            if(flag) {
+	                setTimeout(() => {
+	                    uni.navigateBack()
+	                }, 1500)
+	            }
+	        } else {
+	            uni.showToast({
+	                title: res.msg || '提交失败',
+	                icon: 'none'
+	            })
+	        }
+	    })
+	    .catch(err => {
+	        uni.showToast({
+	            title: '提交失败',
+	            icon: 'none'
+	        })
+	    })
 	}
 
 	function msg(content) {

otherPages/myOrdersManage/service/detail.scss

@@ -12,9 +12,11 @@
 	}
 	
 	.img {
+		width: 173rpx;
+		height: 230rpx;
 		image, .u-image, .img{
-			width: 173rpx;
-			height: 230rpx;
+			width: 173rpx !important;
+			height: 230rpx !important;
 		}
 	}
 	

otherPages/myOrdersManage/service/detail.vue

@@ -1,12 +1,25 @@
 <template>
 	<!-- <div>服务档案</div> -->
 	<view class="box box-size">
-		<!-- <up-steps current="0">
-			<up-steps-item title="已下单"></up-steps-item>
-			<up-steps-item title="已出库"></up-steps-item>
-			<up-steps-item title="运输中"></up-steps-item>
-		</up-steps> -->
-		<view class="top box-size" :style="{borderRadius:'16rpx'}">
+		
+        <view style="margin: 32rpx 0;">
+            <up-steps :current="currentStep" activeColor="#FFA042" inactiveColor="#999999" class="up-steps-custom">
+                <up-steps-item title="喂养要求" :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 0 ? '#FFA042' : '#999999'}"></up-steps-item>
+                <up-steps-item title="清洁要求" :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 1 ? '#FFA042' : '#999999'}"></up-steps-item>
+                <up-steps-item title="附加服务" :titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 2 ? '#FFA042' : '#999999'}"></up-steps-item>
+            </up-steps>
+        </view>
+
+        <!-- 喂养要求内容 -->
+        <view v-if="currentStep === 0">
+		<view class="top box-size" :style="{borderRadius:'16rpx'}"
+        v-if="detail.includeDryFood 
+        || detail.includeWetFood
+        || detail.includeHomemadeFood
+        || detail.includeRawMeat
+        || detail.includeHealthSupplements
+        || detail.includeSnacks
+        ">
 			<view class="form-title">
 				本次喂养过程中，您需要喂养的食品包括
 			</view>
@@ -18,7 +31,7 @@
 					干粮摆放位置
 				</view>
 				<view class="img mt20">
-					<u-image class="img" :src="detail.dryFoodLocation" mode="aspectFill"></u-image>
+					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.dryFoodLocation)" :key="index"></u-image>
 				</view>
 				<view class="size-30 mt24 flex-between">
 					<view :style="{color:'#999999'}">干粮喂养重量</view>
@@ -49,7 +62,7 @@
 					<input type="text" v-model="detail.dryFoodRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
 				</view>
 			</view>
-			<view class="line" :style="{borderRadius:'1rpx'}"></view>
+			<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeDryFood"></view>
 			<view class=" mt32 ml10" v-if="detail.includeWetFood">
 				<view class="color-A55 size-30 fw400">
 					湿粮(罐头等)
@@ -58,7 +71,7 @@
 					湿粮摆放位置
 				</view>
 				<view class="img mt20">
-					<u-image class="img" :src="detail.wetFoodLocation" mode="aspectFill"></u-image>
+					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.wetFoodLocation)" :key="index"></u-image>
 				</view>
 				<view class="size-30 mt24 flex-between">
 					<view :style="{color:'#999999'}">湿粮喂养重量</view>
@@ -89,7 +102,7 @@
 					<input type="text" v-model="detail.wetFoodRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
 				</view>
 			</view>
-			<view class="line" :style="{borderRadius:'1rpx'}"></view>
+			<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeWetFood"></view>
 			<view class=" mt32 ml10" v-if="detail.includeHomemadeFood">
 				<view class="color-A55 size-30 fw400">
 					自制食品
@@ -98,7 +111,7 @@
 					自制食品摆放位置
 				</view>
 				<view class="img mt20">
-					<u-image class="img" :src="detail.homemadeFoodLocation" mode="aspectFill"></u-image>
+					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.homemadeFoodLocation)" :key="index"></u-image>
 				</view>
 				<view class="size-30 mt24" :style="{color:'#999999'}">
 					自制饭制作和喂食说明
@@ -107,7 +120,7 @@
 					<input type="text" v-model="detail.homemadeFoodInstructions" :style="{height:'50rpx',fontSize:'30rpx'}">
 				</view>
 			</view>
-			<view class="line" :style="{borderRadius:'1rpx'}"></view>
+			<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeHomemadeFood"></view>
 			<view class=" mt32 ml10" v-if="detail.includeRawMeat">
 				<view class="color-A55 size-30 fw400">
 					生骨肉
@@ -116,7 +129,7 @@
 					生骨肉摆放位置
 				</view>
 				<view class="img mt20">
-					<u-image class="img" :src="detail.rawMeatLocation" mode="aspectFill"></u-image>
+					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.rawMeatLocation)" :key="index"></u-image>
 				</view>
 				<view class="size-30 mt24" :style="{color:'#999999'}">
 					生骨肉喂食说明
@@ -125,7 +138,7 @@
 					<input type="text" v-model="detail.rawMeatFeedingInstructions" :style="{height:'50rpx',fontSize:'30rpx'}">
 				</view>
 			</view>
-			<view class="line" :style="{borderRadius:'1rpx'}"></view>
+			<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeRawMeat"></view>
 			<view class=" mt32 ml10" v-if="detail.includeHealthSupplements">
 				<view class="color-A55 size-30 fw400">
 					保健品
@@ -134,7 +147,7 @@
 					保健品摆放位置
 				</view>
 				<view class="img mt20">
-					<u-image class="img" :src="detail.healthSupplementsLocation" mode="aspectFill"></u-image>
+					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.healthSupplementsLocation)" :key="index"></u-image>
 				</view>
 				<view class="size-30 mt24" :style="{color:'#999999'}">
 					保健品喂养方式
@@ -143,7 +156,7 @@
 					<input type="text" v-model="detail.healthSupplementsFeedingInstructions" :style="{height:'50rpx',fontSize:'30rpx'}">
 				</view>
 			</view>
-			<view class="line" :style="{borderRadius:'1rpx'}"></view>
+			<view class="line" :style="{borderRadius:'1rpx'}" v-ifan class="s">="detail.includeHealthSupplements"></view>
 			<view class=" mt32 ml10" v-if="detail.includeSnacks">
 				<view class="color-A55 size-30 fw400">
 					零食
@@ -152,7 +165,7 @@
 					零食摆放位置
 				</view>
 				<view class="img mt20">
-					<u-image class="img" :src="detail.snacksLocation" mode="aspectFill"></u-image>
+					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.snacksLocation)" :key="index"></u-image>
 				</view>
 				<view class="size-30 mt24" :style="{color:'#999999'}">
 					零食喂养方式
@@ -161,7 +174,7 @@
 					<input type="text" v-model="detail.snacksFeedingMethod" :style="{height:'50rpx',fontSize:'30rpx'}">
 				</view>
 			</view>
-			<view class="line" :style="{borderRadius:'1rpx'}"></view>
+			<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeSnacks"></view>
 		</view>
 		<view class="top mt24" :style="{borderRadius:'16rpx'}">
 			<view class="form-title">
@@ -172,7 +185,7 @@
 					喂食器具摆放位置
 				</view>
 				<view class="mt20">
-					<u-image class="img" :src="detail.feedingTrayAutomaticFeederLocation" mode="aspectFill"></u-image>
+					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.feedingTrayAutomaticFeederLocation)" :key="index"></u-image>
 				</view>
 				<view class="size-30 mt24" :style="{color:'#999999'}">
 					备注信息
@@ -191,7 +204,7 @@
 					饮用水摆放位置
 				</view>
 				<view class="mt20">
-					<u-image class="img" :src="detail.waterBowlLocation" mode="aspectFill"></u-image>
+					<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.waterBowlLocation)" :key="index"></u-image>
 				</view>
 				<view class="size-30 mt24" :style="{color:'#999999'}">
 					饮用水添加要求
@@ -214,9 +227,110 @@
 				</view>
 			</view>
 		</view>
+        </view>
+        
+        <!-- 清洁要求内容 -->
+        <view v-if="currentStep === 1">
+            <view class="top box-size" :style="{borderRadius:'16rpx'}">
+                <view class="form-title">
+                    您需要的清洁内容
+                </view>
+                <view class="mt32 ml10" v-if="detail.includeCatLitter">
+                    <view class="color-A55 size-30 fw400">
+                        猫砂
+                    </view>
+                    <view class="size-30 mt32 fw400">
+                        猫砂摆放位置
+                    </view>
+                    <view class="img mt20">
+                        <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.catLitterLocation)" :key="index"></u-image>
+                    </view>
+                    <view class="size-30 mt24 flex-between">
+                        <view :style="{color:'#999999'}">猫砂更换频率</view>
+                        <view class="level">
+                            <view class="input_ mr10">
+                                <input type="text" v-model="detail.catLitterChangeFrequencyDays" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
+                            </view>
+                            <view>天</view>
+                            <view class="input_ mr10">
+                                <input type="text" v-model="detail.catLitterChangeFrequencyTimes" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
+                            </view>
+                            <view>次</view>
+                        </view>
+                    </view>
+                    <view class="size-30 mt24" :style="{color:'#999999'}">
+                        备注信息
+                    </view>
+                    <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
+                        <input type="text" v-model="detail.catLitterRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
+                    </view>
+                </view>
+                <view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeCatLitter"></view>
+                
+                <view class="mt32 ml10" v-if="detail.includeUrinePad">
+                    <view class="color-A55 size-30 fw400">
+                        尿垫
+                    </view>
+                    <view class="size-30 mt32 fw400">
+                        尿垫摆放位置
+                    </view>
+                    <view class="img mt20">
+                        <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx" @click="previewImage(item)" v-for="(item, index) in handleImageUrl(detail.urinePadLocation)" :key="index"></u-image>
+                    </view>
+                    <view class="size-30 mt24 flex-between">
+                        <view :style="{color:'#999999'}">更换尿垫</view>
+                        <view class="level">
+                            <view class="input_ mr10">
+                                <input type="text" v-model="detail.urinePadChangeFrequency" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
+                            </view>
+                            <view>是</view>
+                        </view>
+                    </view>
+                    <view class="size-30 mt24 flex-between">
+                        <view :style="{color:'#999999'}">尿垫更换频率</view>
+                        <view class="level">
+                            <view class="input_ mr10">
+                                <input type="text" v-model="detail.urinePadChangeFrequencyDays" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
+                            </view>
+                            <view>天</view>
+                            <view class="input_ mr10">
+                                <input type="text" v-model="detail.urinePadChangeFrequencyTimes" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
+                            </view>
+                            <view>次</view>
+                        </view>
+                    </view>
+                    <view class="size-30 mt24" :style="{color:'#999999'}">
+                        备注信息
+                    </view>
+                    <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
+                        <input type="text" v-model="detail.urinePadRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
+                    </view>
+                </view>
+            </view>
+        </view>
+        
+        <!-- 附加服务内容 -->
+        <view v-if="currentStep === 2">
+            <view class="top box-size" :style="{borderRadius:'16rpx'}">
+                <view class="form-title">
+                    附加服务
+                </view>
+                <!-- 这里可以添加附加服务的内容 -->
+                <view class="mt32 ml10">
+                    <view class="size-30 mt24" :style="{color:'#999999'}">
+                        备注信息
+                    </view>
+                    <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
+                        <input type="text" v-model="detail.additionalServiceRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
+                    </view>
+                </view>
+            </view>
+        </view>
+        
+        <!-- 底部按钮 -->
 		<view class="buttom mt60 box-size">
-			<view class="buttom-item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}">
-				下一页
+			<view class="buttom-item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="nextStep">
+				{{ currentStep === 2 ? '完成' : '下一页' }}
 			</view>
 		</view>
 	</view>
@@ -241,6 +355,7 @@
 				petTypes: [],
 				petType: '',
 				orderId: 0,
+				currentStep: 0, // 当前步骤，0:喂养要求，1:清洁要求，2:附加服务
 			}
 		},
 		onLoad(options) {
@@ -253,10 +368,29 @@
 					this.detail = res.data
 				})
 			},
+			handleImageUrl(url) {
+				if (!url) return []
+				return url.split(',')
+			},
+			previewImage(url) {
+				uni.previewImage({
+					urls: [url]
+				})
+			},
+			// 切换到下一步
+			nextStep() {
+				if (this.currentStep < 2) {
+					this.currentStep++;
+				} else {
+					// 如果是最后一步，可以提交表单或返回上一页
+					uni.navigateBack();
+				}
+			},
 		}
 	}
 </script>
 
 <style scoped lang="scss">
 	@import"detail.scss";
+	@import"steps-custom.scss";
 </style>

otherPages/myOrdersManage/service/steps-custom.css

@@ -0,0 +1,35 @@
+@charset "UTF-8";
+.box .up-steps-custom {
+  /* 自定义步骤条样式 */
+  /* 步骤条线条样式 */
+  /* 当前步骤前的线条为橙色 */
+  /* 步骤圆点样式 */
+  /* 未激活的步骤圆点 */
+  /* 步骤标题样式 */
+}
+
+.box .up-steps-custom :deep(.u-steps-item__line) {
+  background-color: #DDDDDD !important;
+  height: 4rpx !important;
+}
+
+.box .up-steps-custom :deep(.u-steps-item:first-child .u-steps-item__line) {
+  background-color: #FFA042 !important;
+}
+
+.box .up-steps-custom :deep(.u-steps-item__wrapper__circle) {
+  background-color: #FFA042 !important;
+  border-color: #FFA042 !important;
+  width: 36rpx !important;
+  height: 36rpx !important;
+}
+
+.box .up-steps-custom :deep(.u-steps-item:nth-child(2) .u-steps-item__wrapper__circle,
+.u-steps-item:nth-child(3) .u-steps-item__wrapper__circle) {
+  background-color: transparent !important;
+  border-color: #999999 !important;
+}
+
+.box .up-steps-custom :deep(.u-steps-item__content) {
+  margin-top: 16rpx !important;
+}

otherPages/myOrdersManage/service/steps-custom.min.css

@@ -0,0 +1 @@
+.box .up-steps-custom :deep(.u-steps-item__line){background-color:#DDDDDD !important;height:4rpx !important}.box .up-steps-custom :deep(.u-steps-item:first-child .u-steps-item__line){background-color:#FFA042 !important}.box .up-steps-custom :deep(.u-steps-item__wrapper__circle){background-color:#FFA042 !important;border-color:#FFA042 !important;width:36rpx !important;height:36rpx !important}.box .up-steps-custom :deep(.u-steps-item:nth-child(2) .u-steps-item__wrapper__circle,.u-steps-item:nth-child(3) .u-steps-item__wrapper__circle){background-color:transparent !important;border-color:#999999 !important}.box .up-steps-custom :deep(.u-steps-item__content){margin-top:16rpx !important}

otherPages/myOrdersManage/service/steps-custom.scss

@@ -0,0 +1,36 @@
+.box {
+	.up-steps-custom {
+		/* 自定义步骤条样式 */
+		
+		/* 步骤条线条样式 */
+		:deep(.u-steps-item__line) {
+			background-color: #DDDDDD !important;
+			height: 4rpx !important;
+		}
+		
+		/* 当前步骤前的线条为橙色 */
+		:deep(.u-steps-item:first-child .u-steps-item__line) {
+			background-color: #FFA042 !important;
+		}
+		
+		/* 步骤圆点样式 */
+		:deep(.u-steps-item__wrapper__circle) {
+			background-color: #FFA042 !important;
+			border-color: #FFA042 !important;
+			width: 36rpx !important;
+			height: 36rpx !important;
+		}
+		
+		/* 未激活的步骤圆点 */
+		:deep(.u-steps-item:nth-child(2) .u-steps-item__wrapper__circle,
+		.u-steps-item:nth-child(3) .u-steps-item__wrapper__circle) {
+			background-color: transparent !important;
+			border-color: #999999 !important;
+		}
+		
+		/* 步骤标题样式 */
+		:deep(.u-steps-item__content) {
+			margin-top: 16rpx !important;
+		}
+	}
+}

pages/myOrdersManage/components/systemOrder.vue

@@ -58,15 +58,15 @@ import { onMounted } from 'vue';
 			required: true
 		}
 	});
-	const btnTexts = ['打卡', '打开记录', '订单详情']
+	const btnTexts = ['打卡', '打卡', '打开记录']
 	const orderStatus = ['待接单','进行中','已完成']
 
 
 	function toClock(item) {
 		const paths = [
-			`/otherPages/myOrdersManage/clock/index?id=${item.id}`,
-			`/otherPages/myOrdersManage/clock/detail?id=${item.id}`,
-			`/otherPages/orderTakingManage/detail/index?id=${item.id}`,
+			`/otherPages/myOrdersManage/clock/index?id=${item.orderId}`,
+			`/otherPages/myOrdersManage/clock/index?id=${item.orderId}`,
+			`/otherPages/orderTakingManage/detail/index?isRead=true&id=${item.orderId}`,
 		]
 		uni.navigateTo({
 			url: paths[item.orderStatus]