From 659ec0f4731b2fffaf79505a69e99bdd3662909e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=81=E6=9D=B0?= <727475508@qq.com>
Date: Wed, 6 May 2026 13:25:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=8D=E8=AE=A2=E5=8D=95=E6=97=A5?=
 =?UTF-8?q?=E6=9C=9F=E6=97=B6=E9=97=B4=E6=98=BE=E7=A4=BA=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/home/components/workOrderCard.vue | 517 +++++++++++-------------
 1 file changed, 239 insertions(+), 278 deletions(-)

diff --git a/pages/home/components/workOrderCard.vue b/pages/home/components/workOrderCard.vue
index 14bdcdf..cb77c81 100644
--- a/pages/home/components/workOrderCard.vue
+++ b/pages/home/components/workOrderCard.vue
@@ -6,7 +6,7 @@
 			<view class="stateText" :class="{
 				stateText2: dataItem.state > 4 && dataItem.state !== 7,  // 排除已取消
 				stateText3: dataItem.state === 7  // 已取消状态单独处理
-				}" v-if="showState">
+			}" v-if="showState">
 				{{ stateText }}
 			</view>
 		</view>
@@ -18,8 +18,8 @@
 				<view class="topInfo">
 					<view class="price_title">
 						<view class="service-type white-space-nowrap">{{
-              dataItem.title
-            }}</view>
+							dataItem.title
+						}}</view>
 
 					</view>
 					<view class="service-address">下单时间：{{ dataItem.add_time }}</view>
@@ -45,299 +45,260 @@
 </template>
 
 <script>
-	export default {
-		name: "OrderCard",
-		props: {
-			dataItem: {
-				type: Object,
-			},
-			typeId: {
-				type: Number,
-			},
-			showState: {
-				type: Boolean,
-				default: true,
-			}
+export default {
+	name: "OrderCard",
+	props: {
+		dataItem: {
+			type: Object,
 		},
-		computed: {
-			photo() {
-				return this.dataItem.photo? JSON.parse(this.dataItem.photo):"";
-			},
-			useTime() {
-				const start = this.dataItem.reserve_start_time;
-				const endTime = this.dataItem.reserve_end_time;
-
-				function formatTimeRange(startTimeStr, endTimeStr) {
-					if (!startTimeStr || !endTimeStr) return "未设置";
-					
-					// 解析开始时间为Date对象
-					const startTime = new Date(startTimeStr.replace(/-/g, '/'));
-					const endTime = new Date(endTimeStr.replace(/-/g, '/'));
-					
-					if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) {
-						console.error("无效的时间格式");
-						return "时间格式错误";
-					}
-					
-					// 格式化年份：YYYY年
-					const formatYear = (date) => {
-						return date.getFullYear() + '年';
-					};
-					
-					// 格式化月份和日期：MM月DD
-					const formatMonthDay = (date) => {
-						const month = String(date.getMonth() + 1).padStart(2, "0");
-						const day = String(date.getDate()).padStart(2, "0");
-						return `${month}月${day}`;
-					};
-					
-					// 格式化时间部分：HH:MM
-					const formatTimePart = (date) => {
-						const hours = String(date.getHours()).padStart(2, "0");
-						const minutes = String(date.getMinutes()).padStart(2, "0");
-						return `${hours}:${minutes}`;
-					};
-					
-					// 判断是否同一天
-					const isSameDay = startTime.getFullYear() === endTime.getFullYear() &&
-									  startTime.getMonth() === endTime.getMonth() &&
-									  startTime.getDate() === endTime.getDate();
-					
-					if (isSameDay) {
-						// 同一天：2025年05月29 12:30-13:30
-						return `${formatYear(startTime)}${formatMonthDay(startTime)} ${formatTimePart(startTime)}-${formatTimePart(endTime)}`;
-					} else {
-						// 跨天：2025年05月29 12:30-2025年05月30 13:30
-						return `${formatYear(startTime)}${formatMonthDay(startTime)} ${formatTimePart(startTime)}-${formatYear(endTime)}${formatMonthDay(endTime)} ${formatTimePart(endTime)}`;
-					}
-				}
-				return formatTimeRange(start, endTime);
-			},
-			stateText() {
-				const textList = [
-					"",
-					"待支付",
-					"待接单",
-					"待开始",
-					"进行中",
-					"已完成",
-					"已评价",
-					"已取消",
-				];
-				return textList[this.dataItem.state];
-			},
+		typeId: {
+			type: Number,
 		},
-		methods: {
-			// 触发取消事件
-			emitCancel() {
-				this.$emit("cancel", this.dataItem);
-			},
-			// 触发接单事件
-			emitAccept() {
-				this.$emit("accept", this.dataItem);
-			},
-			emitStart() {
-				this.$emit("start", this.dataItem);
-			},
-			emitDone() {
-				this.$emit("done", this.dataItem);
-			},
-			goDetail() {
-				this.$emit("goDetail", this.dataItem);
-			},
-			emitGoPay() {
-				this.$emit("goPay", this.dataItem);
-			},
-			emitRefund() {
-				this.$emit("goRefund", this.dataItem);
-			}
+		showState: {
+			type: Boolean,
+			default: true,
+		}
+	},
+	computed: {
+		photo() {
+			return this.dataItem.photo ? JSON.parse(this.dataItem.photo) : "";
 		},
-	};
+		useTime() {
+			const start = this.dataItem.reserve_start_time;
+			const end = this.dataItem.reserve_end_time;
+			if (!start || !end) return "未设置";
+			const startDate = new Date(start.replace(/-/g, '/'));
+			const endDate = new Date(end.replace(/-/g, '/'));
+			if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) return "时间格式错误";
+			const pad = (n) => String(n).padStart(2, "0");
+			const fmt = (d) => `${pad(d.getMonth() + 1)}.${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+			return `${fmt(startDate)}-${fmt(endDate)}`;
+		},
+		stateText() {
+			const textList = [
+				"",
+				"待支付",
+				"待接单",
+				"待开始",
+				"进行中",
+				"已完成",
+				"已评价",
+				"已取消",
+			];
+			return textList[this.dataItem.state];
+		},
+	},
+	methods: {
+		// 触发取消事件
+		emitCancel() {
+			this.$emit("cancel", this.dataItem);
+		},
+		// 触发接单事件
+		emitAccept() {
+			this.$emit("accept", this.dataItem);
+		},
+		emitStart() {
+			this.$emit("start", this.dataItem);
+		},
+		emitDone() {
+			this.$emit("done", this.dataItem);
+		},
+		goDetail() {
+			this.$emit("goDetail", this.dataItem);
+		},
+		emitGoPay() {
+			this.$emit("goPay", this.dataItem);
+		},
+		emitRefund() {
+			this.$emit("goRefund", this.dataItem);
+		}
+	},
+};
 </script>
 
 <style lang="less" scoped>
-	.order-card {
-		position: relative;  // 必须加，确保父容器有定位
-		padding: 24rpx 20rpx 0rpx;
-		margin: 0rpx 30rpx 20rpx 30rpx;
-		background-color: #fff;
-		border-radius: 12px;
-		/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
-	}
+.order-card {
+	position: relative; // 必须加，确保父容器有定位
+	padding: 24rpx 20rpx 0rpx;
+	margin: 0rpx 30rpx 20rpx 30rpx;
+	background-color: #fff;
+	border-radius: 12px;
+	/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
+}
 
-	.orderNumBox {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 40rpx;
+.orderNumBox {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 40rpx;
 
-		.stateText {
-			font-weight: 400;
-			font-size: 26rpx;
-			color: #E8101E;
-			text-align: left;
-			font-style: normal;
-			position: absolute;
-			right: 0;
-			top: 0;
-			background-image: url("/static/images/icons/tabBj.png");
-			background-size: 100% auto;
-			background-position: center top;
-			background-repeat: no-repeat;
-			width: 128rpx;
-			height: 49rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		.stateText2 {
-			background-image: url("/static/images/icons/tabBj2.png");
-			color: #333;
-		}
-
-		.stateText3 {
-			background-image: url("/static/images/icons/tabBj2.png");
-			color: #999999 !important;
-		}
-	}
-
-	/* 订单编号 */
-	.order-id {
-		width: 530rpx;
-		font-size: 28rpx;
-		color: #333333;
-	}
-
-	/* 服务信息容器 */
-	.service-container {
-		display: flex;
-		align-items: center;
-		padding-bottom: 24rpx;
-		border-bottom: 1px solid #f6f5f5;
-		width: 100%;
-	}
-
-	/* 服务图片 */
-	.service-img {
-		width: 172rpx;
-		height: 168rpx;
-		border-radius: 24rpx;
-		margin-right: 30rpx;
-		flex-shrink: 0;
-	}
-
-	/* 服务信息 */
-	.service-info {
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		width: 100%;
-		height: 168rpx;
-
-		.topInfo {
-			display: flex;
-			flex-direction: column;
-
-			.price_title {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				margin-bottom: 20rpx;
-
-				.service-type {
-					font-weight: 500;
-					font-size: 30rpx;
-					color: #333333;
-					line-height: 34rpx;
-					max-width: 300rpx;
-				}
-
-
-			}
-
-		}
-
-		.service-price {
-			font-family: DINPro, DINPro;
-			font-weight: 500;
-			font-size: 36rpx;
-			color: #E8101E;
-			line-height: 34rpx;
-			text-align: left;
-			font-style: normal;
-		}
-	}
-
-	.service_subTitle {
-		font-size: 26rpx;
-		line-height: 26rpx;
-		color: #666666;
-		margin-top: 18rpx;
-	}
-
-
-
-	.service-address {
+	.stateText {
 		font-weight: 400;
 		font-size: 26rpx;
-		color: #999999;
-		line-height: 33rpx;
+		color: #E8101E;
 		text-align: left;
 		font-style: normal;
-	}
-
-	/* 时间信息 */
-	.time-info {
-		font-weight: 400;
-		font-size: 26rpx;
-		color: #333333;
-		line-height: 34rpx;
-		text-align: left;
-		font-style: normal;
-		padding-bottom: 20rpx;
-		margin-top: 28rpx;
-	}
-
-	/* 按钮组 */
-	.button-group {
-		display: flex;
-		justify-content: flex-end;
-		gap: 30rpx;
-		padding-bottom: 30rpx;
-	}
-
-	/* 通用按钮样式 */
-	.btn {
-		white-space: nowrap;
-		width: 100rpx;
-		height: 32rpx;
+		position: absolute;
+		right: 0;
+		top: 0;
+		background-image: url("/static/images/icons/tabBj.png");
+		background-size: 100% auto;
+		background-position: center top;
+		background-repeat: no-repeat;
+		width: 128rpx;
+		height: 49rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 10px 20px;
-		border-radius: 64rpx;
-		// box-sizing: border-box;
-		//height: 64rpx;
-		//border-radius: 32rpx;
-		border: 2rpx solid #979797;
-		font-weight: 400;
-		font-size: 26rpx;
-		color: #333333;
-		line-height: 64rpx;
-		// padding: 0 28rpx;
+	}
+
+	.stateText2 {
+		background-image: url("/static/images/icons/tabBj2.png");
+		color: #333;
+	}
+
+	.stateText3 {
+		background-image: url("/static/images/icons/tabBj2.png");
+		color: #999999 !important;
+	}
+}
+
+/* 订单编号 */
+.order-id {
+	width: 530rpx;
+	font-size: 28rpx;
+	color: #333333;
+}
+
+/* 服务信息容器 */
+.service-container {
+	display: flex;
+	align-items: center;
+	padding-bottom: 24rpx;
+	border-bottom: 1px solid #f6f5f5;
+	width: 100%;
+}
+
+/* 服务图片 */
+.service-img {
+	width: 172rpx;
+	height: 168rpx;
+	border-radius: 24rpx;
+	margin-right: 30rpx;
+	flex-shrink: 0;
+}
+
+/* 服务信息 */
+.service-info {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	width: 100%;
+	height: 168rpx;
+
+	.topInfo {
+		display: flex;
+		flex-direction: column;
+
+		.price_title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 20rpx;
+
+			.service-type {
+				font-weight: 500;
+				font-size: 30rpx;
+				color: #333333;
+				line-height: 34rpx;
+				max-width: 300rpx;
+			}
+
+
+		}
 
 	}
 
-	/* 取消按钮 */
-	.cancel-btn {
-		border: 2rpx solid #979797;
-		color: #333333;
-	}
-
-	/* 接单按钮 */
-	.accept-btn {
-		border: 2rpx solid #E8101E;
+	.service-price {
+		font-family: DINPro, DINPro;
+		font-weight: 500;
+		font-size: 36rpx;
 		color: #E8101E;
+		line-height: 34rpx;
+		text-align: left;
+		font-style: normal;
 	}
+}
+
+.service_subTitle {
+	font-size: 26rpx;
+	line-height: 26rpx;
+	color: #666666;
+	margin-top: 18rpx;
+}
+
+
+
+.service-address {
+	font-weight: 400;
+	font-size: 26rpx;
+	color: #999999;
+	line-height: 33rpx;
+	text-align: left;
+	font-style: normal;
+}
+
+/* 时间信息 */
+.time-info {
+	font-weight: 400;
+	font-size: 26rpx;
+	color: #333333;
+	line-height: 34rpx;
+	text-align: left;
+	font-style: normal;
+	padding-bottom: 20rpx;
+	margin-top: 28rpx;
+}
+
+/* 按钮组 */
+.button-group {
+	display: flex;
+	justify-content: flex-end;
+	gap: 30rpx;
+	padding-bottom: 30rpx;
+}
+
+/* 通用按钮样式 */
+.btn {
+	white-space: nowrap;
+	width: 100rpx;
+	height: 32rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 10px 20px;
+	border-radius: 64rpx;
+	// box-sizing: border-box;
+	//height: 64rpx;
+	//border-radius: 32rpx;
+	border: 2rpx solid #979797;
+	font-weight: 400;
+	font-size: 26rpx;
+	color: #333333;
+	line-height: 64rpx;
+	// padding: 0 28rpx;
+
+}
+
+/* 取消按钮 */
+.cancel-btn {
+	border: 2rpx solid #979797;
+	color: #333333;
+}
+
+/* 接单按钮 */
+.accept-btn {
+	border: 2rpx solid #E8101E;
+	color: #E8101E;
+}
 </style>
\ No newline at end of file