hainan_2024_zhenghe/h5/common/WeeklyCalendar.vue

<template>
	<view style="background-color: #fff;">
		<view class="zhou" >
			<view class="day" v-for="(item,index) in dataInfo.weeklist">
					<view  :class="selected_date==item.date?'day_top selected':'day_top'" @click="selectDate(item)">
						<view>{{item.date.split('-').slice(1).join('/')}}</view>
						<view class="zhou_title">{{ item.xingqi.replace('星期', '周')}}</view>
					</view>
					<view class="yu" v-if="item.count>0">余{{item.count}}</view>
					<view class="yu2" v-else>满号</view>
		 
			</view>
			<view class="xian_k">
				<view class="xian"></view>
			</view>
			<view class="rili_icon" @click="ClickMore()">
				<uni-icons type="calendar" style="font-size: 50rpx;" color="#239EA3"></uni-icons>
				<text>更多</text>
			</view>
		</view>
		<view class="hengxian"></view>
		<view class="timelist">
			<view v-for="(item,index) in dataInfo.list" @click="timeClick(item)" :class="(item.time==selectedTime)?'time selectedtime':'time'" ><span :class="(item.status==2 || item.is_lock==1)?'used':''">{{item.time.substring(0, 5)}}</span></view>
		</view>
	</view>
</template>

<script setup>
	import { defineEmits,ref,watch } from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	const emit = defineEmits();
	const props = defineProps({
	  dataInfo: {
	    type: Object,
	    required: true
	  },
	  selectedTime: {
	    type: String,
	   // required: true
	  },
	  YuYueInfo: {
	    type: Object,
	   // required: true
	  },
	  TjDTime: {
	    type: String,
	   // required: true
	  },
	  ItemSelected: {
	    type: Object,
	   // required: true
	  },
	 
	});
	
	let weekInfo=ref([]);
	let selected_date=ref('');//选中的日期
	onShow(()=>{
		weekInfo.value=props.dataInfo.weeklist
		selected_date.value=props.dataInfo.weeklist[0].date
	})
	watch(()=>props.TjDTime,(newvalue,oldvalue)=>{
		console.log('777777777',newvalue)
		selected_date.value=newvalue.substring(0,10)
	})
 
	const selectDate = (item) => {
		// if(item.count<=0){
		// 	uni.$lu.toast("此日期无可用号源");
		// 	return false
		// }
		selected_date.value=item.date
	  emit('selectDate', item.date);
	};
	const timeClick=(timeInfo)=>{
		if(timeInfo.status==2 || timeInfo.is_lock==1 ){
			uni.$lu.toast("该号源已经被占用");
			return false;
		}
		if(props.ItemSelected.type=="tj"){
			if(props.YuYueInfo.NmrInfo.length>0){
				console.log(props.YuYueInfo.NmrInfo)
				//选出日期最小的
				let minDateItem = props.YuYueInfo.NmrInfo[0];
				for (let i = 1; i < props.YuYueInfo.NmrInfo.length; i++) {
				    if (new Date(props.YuYueInfo.NmrInfo[i].date) < new Date(minDateItem.date)) {
				        minDateItem = props.YuYueInfo.NmrInfo[i];
				    }
				}
			 
				const NmrDTime=minDateItem.date+' '+minDateItem.time
				const a = new Date(NmrDTime);
				if (!isNaN(a.getTime())){
					if(!validateDates(props.TjDTime,NmrDTime)){
						return  false;
					} 
				}
			}
		}
		emit('selectTime', timeInfo);
	}
	const ClickMore=()=>{
		emit('openMonth');
		
	}

	const validateDates=(dateA, dateB)=> {
		console.log(dateA)
		console.log(dateB)
	 // 将输入的字符串转换为 Date 对象
	  const a = new Date(dateA.substring(0,10));
	  const b = new Date(dateB.substring(0,10));
	
	  // 检查日期是否有效
	  if (isNaN(a.getTime()) || isNaN(b.getTime())) {
		 uni.$lu.toast("格式错误");
	    return false;
	  }
	
	  // 计算两个日期之间的差值（以毫秒为单位）
	  const diffInMilliseconds = b - a;
	  // 将毫秒转换成天数
	  const diffInDays = diffInMilliseconds / (1000 * 60 * 60 * 24);
	
	  // 检查 a 是否早于 b
	  if (diffInDays < 0) {
	     uni.$lu.toast("体检日期必须在核磁日期前3天范围内");
		  return false;
	  }
	  // 检查 a 是否在 b 的前三天内
	  else if (diffInDays > 3) {
	     uni.$lu.toast("体检日期必须在核磁日期前3天范围内");
		  return false;
	  }
	
	  // 如果所有条件都满足
	  return true;
	}
</script>

<style scoped>
	.zhou {
		display: flex;
		justify-content: space-between; 
	}

	.day {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 25rpx;
		font-weight: 500;
		color: #131313;
	}

	.day_top {
		font-size: 24rpx;
		font-weight: 500;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10rpx;
		padding: 10rpx;
		border-radius: 16rpx;
	}

	.selected {
		/* background-color: #239EA3; */
		color: #008F96 !important;
	}
	.selectedtime{
		background-color: #239EA3;
		color: #fff !important;
	}

	.zhou_title {
		font-size: 28rpx;
		margin-top: 6rpx;
	}

	.yu {
		background-color: #E0F5F6;
		margin-top: 8rpx;
		border-radius: 6rpx;
		padding: 2rpx 16rpx;
		font-size: 20rpx;
		color: #239EA3;
	}
	.yu2 {
		background-color: #f4f4f4;
		margin-top: 8rpx;
		border-radius: 6rpx;
		padding: 2rpx 20rpx;
		font-size: 20rpx;
		color: #c7c7c7;
	}

	.xian_k {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.xian {

		height: 70rpx;
		border-left: 1px solid #d8d8d8;
	}

	.rili_icon {
		font-size: 24rpx;
		font-weight: 500;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #239EA3;
		font-weight: 500;
	}

	.hengxian {
		width: 100%;
		border-top: 1px solid #239EA3;
		margin-top: 18rpx;
	}

	.timelist {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		justify-content: flex-start;
	}

	.timelist::after {
		content: '';
		flex: auto;
		/* 或者 flex: 1; */
	}

	.time {
		font-size: 28rpx;
		 
		text-align: center;
		margin-top: 40rpx;
		border-radius: 14rpx;
		padding: 10rpx 16rpx;
		flex: 0 0 calc(16.3% - 32rpx);
		/* 假设一行有4个项目，减去想要的间隔 */
		 
		/* 设置右侧边距 */
		color: #008F96;

	}

	.time:nth-child(6n) {
		margin-right: 0;
	}
	.used{
		color:#B5B5B6;
	}
</style>