mrr.sj.front/pages/shop/manHour/components/orderCard.vue

<template>
	<view class="order-card" @click="goDetail">
		<!-- 订单编号 -->
		<view class="orderNumBox">
			<!-- <view class="order-id white-space-nowrap">订单编号：{{ dataItem.number }}</view> -->
			<view class="time-info"><text style="color:#999999 ;">服务时段：</text>{{ useTime }}</view>
			<view class="stateText" :class="{
				stateText2: dataItem.state > 4 && dataItem.state !== 7,  // 排除已取消
				stateText3: dataItem.state === 7  // 已取消状态单独处理
				}" v-if="showState">
				{{ stateText }}
			</view>
		</view>

		<!-- 服务信息区域 -->
		<view class="service-container" @click="$emit('goOrderDetail', dataItem)">
			<image class="service-img" :src="photo[0]" mode="aspectFill"></image>
			<view class="service-info">
				<view class="topInfo">
					<view class="price_title">
						<view class="service-type white-space-nowrap">{{
              dataItem.title
            }}</view>

					</view>
					<!-- <view class="service_subTitle white-space-nowrap"
            >使用场景：{{
              dataItem.first_class_title +
              " " +
              dataItem.second_class_title.join("、")
            }}</view
          > -->
					<view class="service-address">下单时间：{{ dataItem.add_time }}</view>
				</view>
				<view class="service-price"><text style="font-size: 24rpx;">￥</text>{{ Number(dataItem.order_money) }}
				</view>

			</view>
		</view>

		<!-- 时间信息 -->
		<!-- <view class="time-info"><text style="color:#999999 ;">服务时段：</text>{{ useTime }}</view> -->

		<!-- 操作按钮 -->
		<view class="button-group">
			<!-- 待支付状态 -->
			<view class="btn cancel-btn" v-if="dataItem.state == 1" @click.stop="emitCancel">取消订单</view>
			<view class="btn accept-btn" @click.stop="emitGoPay" v-if="dataItem.state == 1">去支付</view>
			
			<!-- 待接单、待服务状态 -->
			<view class="btn accept-btn" v-if="dataItem.state == 2 || dataItem.state == 3" @click.stop="emitRefund">申请退款</view>
			
			<!-- 已完成状态：再来一单 -->
			<view class="btn accept-btn" v-if="dataItem.state == 5 || dataItem.state == 7" @click.stop="emitReOrder">再来一单</view>
			
			<!-- 已取消状态：重新预订 -->
			<!-- <view class="btn accept-btn" v-if="dataItem.state == 7" @click.stop="emitReOrder">重新预订</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "OrderCard",
		props: {
			dataItem: {
				type: Object,
			},
			typeId: {
				type: Number,
			},
			showState: {
				type: Boolean,
				default: true,
			}
		},
		computed: {
			photo() {
				return 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];
			},
		},
		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);
			},
			// 再来一单/重新预订
			emitReOrder() {
				this.$emit("reOrder", this.dataItem);
			}
		},
	};
</script>

<style lang="less" scoped>
	.order-card {
		position: relative;  // 必须加，确保父容器有定位
		padding: 24rpx 20rpx 0rpx;
		margin: 20rpx 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;

		.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 {
		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-top: 20rpx;
		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>