用户订单服务时长修改

components/its-calendar/its-calendar.vue

@@ -9,16 +9,16 @@
 				</view>
 			</view>
 			<view class="calendar_time">
-				<view class="time_x" :class="{
-		      'time_x_sty': host_index == item?.timeStamp, 
-		      'disabled-time': isTimeDisabled(item?.timeStamp) // 新增: 添加禁用类
-		    }" v-for="(item, index) in timeHostArr[day_index]" :key="index"
-					@click="(nowTimes < item?.timeStamp && item.hasReservation !== 1 && !isTimeDisabled(item?.timeStamp)) ? hosts(item) : ''"
-					:style="{
-		      'color': ((nowTimes > item?.timeStamp || item.hasReservation === 1 || isTimeDisabled(item?.timeStamp)) ? '#999999' : '')
-		    }">
-					<text>{{item?.hours}}</text>
-					<text v-if="item.hasReservation === 1" class="hasRe-text">已预约</text>
+				<view class="time_x" 
+				  :class="{
+				    'time_x_sty': host_index == item?.timeStamp, 
+				    'disabled-time': shouldDisable(item) 
+				  }" 
+				  v-for="(item, index) in timeHostArr[day_index]" 
+				  :key="index"
+				  @click="handleTimeClick(item)">
+				  <text>{{item?.hours}}</text>
+				  <text v-if="item.hasReservation === 1" class="hasRe-text">已预约</text>
 				</view>
 			</view>
 		</view>
@@ -27,7 +27,6 @@
 		</view> -->
 	</view>
 </template>
-
 <script>
 	export default {
 		props: {
@@ -40,18 +39,20 @@
 				type: Array,
 				default: () => []
 			},
-
+			businessDuration: {
+				type: Number,
+				default: 0
+			} // 从父组件接收的服务时长（分钟）
 		},
 		data() {
 			return {
 				dayArr: [],
-				hostArr: [],
 				day_index: 0,
 				host_index: '',
-				host_All: [],
-				nowTimes: '',
-				frequency: '',
-				disableAfterTime: null, //记录当前时间
+				nowTimes: new Date().getTime(), // 只保留一个定义
+				disableAfterTime: null,
+				selectedTime: null,
+				selectedDay: null // 新增：记录选择的日期
 			}
 		},
 		watch: {
@@ -73,65 +74,94 @@
 		},
 		mounted() {},
 		methods: {
+			handleTimeClick(item) {
+				if (!this.shouldDisable(item)) {
+					this.hosts(item);
+				}
+			},
 			// 点击日期
 			dayList(e, index) {
 				this.day_index = index
 				this.$emit('getByDate', this.timeArr[index])
 			},
-			// 点击时间
-			hosts(e) {
-				this.host_All = e
-				this.host_index = e.timeStamp
-				this.host_All.yearToDate = this.timeArr[this.day_index]
-				this.disableAfterTime = e.timeStamp //记录当前选择时间戳
-				this.$emit('getByTime', this.host_All)
+			// 转换时间戳为毫秒
+			ensureMillisecond(timestamp) {
+				return timestamp > 9999999999 ? timestamp : timestamp * 1000;
+			},
+
+			shouldDisable(item) {
+				if (!item) return true;
+
+				const itemTime = this.ensureMillisecond(item.timeStamp);
+
+				// 已预约
+				if (item.hasReservation === 1) return true;
+
+				// 过去时间
+				if (this.nowTimes > itemTime) return true;
+
+				// 选择后的时间段
+				if (this.selectedTime) {
+					return itemTime > this.selectedTime &&
+						itemTime <= this.disableAfterTime;
+				}
+
+				return false;
 			},
-			isTimeDisabled(timeStamp) {
-				return this.disableAfterTime && timeStamp > this.disableAfterTime;
+			hosts(item) {
+				const itemTime = this.ensureMillisecond(item.timeStamp);
+
+				this.host_index = item.timeStamp; // 显示用原始值
+				this.selectedTime = itemTime;
+				this.disableAfterTime = itemTime + (this.businessDuration * 60 * 1000);
+				this.$emit('getByTime', {
+					...item,
+					timeStamp: itemTime // 传递转换后的值
+				});
 			},
+
 			// 点击立即预约
 			sub() {
 				if (this.host_index == '') {
-					this.$tool.toast('请选择时间')
+					this.$tool.toast('请选择时间');
 				} else {
-					let day = this.dayArr[this.day_index]
-					let time = this.time(this.host_index)
+					let day = this.dayArr[this.day_index];
+					let time = this.times(this.host_index);
 					let comTime = {
 						days: day.days,
 						weeks: day.weeks,
 						hours: this.host_All.hours,
 						timeStamp: this.host_All.timeStamp,
 						time: time
-					}
+					};
 					this.$emit('getTime', comTime);
 				}
 			},
+
 			// 格式化时间
 			times(data) {
 				let date = new Date(data * 1000);
-				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
 				let h = date.getHours();
-				h = h < 10 ? ('0' + h) : h; //小时补0
+				h = h < 10 ? ('0' + h) : h; // 小时补0
 				let m = date.getMinutes();
-				m = m < 10 ? ('0' + m) : m; //分钟补0
-				return h + ':' + m
+				m = m < 10 ? ('0' + m) : m; // 分钟补0
+				return h + ':' + m;
 			},
 			time(data, type) {
 				let date = new Date(data * 1000);
-				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
 				let y = date.getFullYear();
 				let MM = date.getMonth() + 1;
-				MM = MM < 10 ? ('0' + MM) : MM; //月补0
+				MM = MM < 10 ? ('0' + MM) : MM; // 月补0
 				let d = date.getDate();
-				d = d < 10 ? ('0' + d) : d; //天补0
+				d = d < 10 ? ('0' + d) : d; // 天补0
 				let h = date.getHours();
-				h = h < 10 ? ('0' + h) : h; //小时补0
+				h = h < 10 ? ('0' + h) : h; // 小时补0
 				let m = date.getMinutes();
-				m = m < 10 ? ('0' + m) : m; //分钟补0
+				m = m < 10 ? ('0' + m) : m; // 分钟补0
 				let s = date.getSeconds();
-				s = s < 10 ? ('0' + s) : s; //秒补0
+				s = s < 10 ? ('0' + s) : s; // 秒补0
 				if (type == 'yymmdd') {
-					return y + '-' + MM + '-' + d
+					return y + '-' + MM + '-' + d;
 				} else if (type == 'hhmmss') {
 					return h + ':' + m + ':' + s;
 				} else {
@@ -222,12 +252,18 @@
 	}
 
 
-	.disabled-time {
-		background-color: #f2f2f2;
-		/* 灰色背景 */
-		color: #999999;
-		/* 灰色文字 */
-		pointer-events: none;
-		/* 禁用点击事件 */
+
+	.time_x {
+	  /* 正常状态样式 */
+	  &.disabled-time {
+	    background-color: #f2f2f2;
+	    color: #999999;
+	    pointer-events: none;
+	  }
+	  
+	  &.time_x_sty {
+	    background-color: #FFE97B;
+	    color: #000000;
+	  }
 	}
 </style>

pages_home/pages/Volunteerside/goodsDetails.vue

@@ -75,7 +75,7 @@
 							type="daterange"></uniDatetimePickerMy>
 					</view>
 					<view>
-						<its-calendar :timeArr="doorToDoorTimeArr" :timeHostArr="timeHostArr" @getByDate="getByDate"
+						<its-calendar :businessDuration="listData.businessDuration" :timeArr="doorToDoorTimeArr" :timeHostArr="timeHostArr" @getByDate="getByDate"
 							@getByTime="getByTime"></its-calendar>
 					</view>
 				</view>