YiJiYuYue-NanShanFuYou/h5/pages/PlanList.vue

<template>
	<view class="PlanListMain">
		<view class="head"></view>
		<view class="userInfo" v-if="MianInfo">
			<view class="title">选择预约日期及时段</view>
			<view class="row">
				<view class="label">登记号：</view>
				<view class="value">{{MianInfo.reg_num}}</view>
			</view>
			<view class="row">
				<view class="label">医嘱：</view>
				<view class="value">{{MianInfo.entrust}}</view>
			</view>
			<view class="date">
				<view class="datetime">
					<uni-datetime-picker v-model="SearchInfo.date" :clear-icon="false"  type="date" @change="dateSelecteFunc" />
				</view>
			</view>
		</view>
		<view class="list">
			<view class="info" v-for="(item,index) in List">
				<view>
					<view class="row">
						<view class="label">执行科室：</view>
						<view class="value">{{MianInfo.implement_department}}</view>
					</view>
					<view class="row">
						<view class="label">资源：</view>
						<view class="value">{{item.department_resources_name}}</view>
					</view>
					<view class="row">
						<view class="label">时间段：</view>
						<view class="value" v-if="item.begin_time">{{item.begin_time.substring(0,5)}}~{{item.end_time.substring(0,5)}}</view>
					</view>
				</view>
				<view class="right">
					<view class="right_top">
						<view class="button" @click="StartYuYue(item)">确认</view>
					</view>
					<view class="right_bottom">已约/总数：<span style="color: darkturquoise;">{{item.used_count}}</span>/{{item.count}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import{ref,onMounted} from "vue"
	import {GetEnablePlan,H5_YuYue} from "@/api"
	import {onLoad,onShow} from "@dcloudio/uni-app"
	 
	let SearchInfo=ref({
		date:'',
	}) 
	let List=ref([]);
	let MianInfo=ref(null); //主表信息
	const GetList=()=> {
		  GetEnablePlan({...SearchInfo.value}).then(res => {
			  if(res.status){
				  List.value=res.data.plan_list
				  MianInfo.value=res.data.mainInfo
				  SearchInfo.value.mainlistid=[MianInfo.value.id]
			  } 
		  })	
	}
	const dateSelecteFunc=(e)=>{
		 SearchInfo.value.date=e
		 GetList()
	}
	const StartYuYue=(item)=>{
		uni.showModal({
			cancelText:"取消",
			confirmText:"确定",
			title: '提示',
			content: '确定预约 '+SearchInfo.value.date+' '+item.begin_time.substring(0,5)+'~'+item.end_time.substring(0,5)+' 时段吗？',
			success: function (res) {
				if (res.confirm) {
					SearchInfo.value.planid=item.id
					H5_YuYue({...SearchInfo.value}).then(res => {
								  if(res.status){
									 uni.showToast({
									   title: '预约成功',
									 });
									 setTimeout(function(){
										 uni.redirectTo({
										 	url: '/pages/CheckItemMainList'
										 })
									 },1000)
									 
								  } 
					})	
				}  
			}
		});
		
	}
	onLoad((option)=>{
		SearchInfo.value = JSON.parse(decodeURIComponent(option.data))
	 
		 var today = new Date();
		 // 格式化日期为YYYY-MM-DD形式
		 function formatDate(date) {
		     var year = date.getFullYear();
		     var month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份从0开始，所以需要+1
		     var day = ("0" + date.getDate()).slice(-2);
		     return year + "-" + month + "-" + day;
		 }
		 SearchInfo.value.date = formatDate(today);
		  GetList()
	})
</script>

<style scoped>
	.PlanListMain {
		height: calc(100vh - 120rpx);
		background: radial-gradient(circle at top center, #dcdcdc 30%, #e3e3e3, transparent 2%);
		padding-top: 30rpx;
	}

	.userInfo {
		background-color: #33cdc9;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		padding: 40rpx 40rpx 0rpx 40rpx;
		border: 1rpx solid #fff;
	}

	.userInfo .row {
		margin-top: 20rpx;
		font-size: 32rpx;

		color: #fff;
	}

	.userInfo .value {
		margin-left: 20rpx;
	}

	.userInfo .label {
		text-align: right;

		width: 30%;

	}

	.row {
		display: flex;

	}
	.date{
		text-align: center;
		font-size: 30rpx;
		background-color: #fff;
		padding: 20rpx 60rpx;
		border-radius: 30rpx;
		box-shadow: 0rpx 10rpx 10rpx #add2d1;
		color: #333;
		
		/* transform: translateY(40rpx); */
		position: relative;
		top: 50rpx;
		white-space: nowrap;
	}
	.title{
		font-weight: 700;
		color:#fff;
		font-size: 32rpx;
	}
	.list{
		margin-top: 60rpx;
		padding: 20rpx;
	}
	.info{
		background-color: #fff;
		padding: 40rpx 40rpx 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
		border-radius: 20rpx;
		color: #333;
	}
	.info .row{
		margin-bottom: 20rpx;
	}
	.info .row .value{
		font-weight: 700;
	}
	.info .right{
		 
	}
	.info .right .right_top{
		display: flex;
		justify-content: center;
	}
	.info .right .right_bottom{
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}
	.button{
		width: 70rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background-color: #33cdc9;
		padding: 20rpx;
		border-radius: 20rpx;
		color: #fff;
	}
</style>