BeiJingGuoKang/北京国康小程序/pages/buy/time/time.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年5月27日 02:26:36
	 */
	import {
		ref,
		computed,
		watch
	} from 'vue'
	import {
		$image,
		AppointmentListAction,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()
	const calendar_ref = ref(null)
	const calendarRef = (e) => {
		calendar_ref.value = e
	}
	const monthWatch = computed(() => {
		if (!calendar_ref.value) return ''
		return calendar_ref.value.nowDate.year + '-' + calendar_ref.value.nowDate.month
	})
	const appointment_list = ref([])
	const AppointmentList = async (month) => {
		const response = await AppointmentListAction({
			hospital: $store.buy_info.hospital,
			month
		})
		$response(response, () => {
			appointment_list.value = response.data.list
		})
	}
	const date_show_list = computed(() => {
		if (!calendar_ref.value) return []
		let date = calendar_ref.value.calendar.fullDate
		for (let i in appointment_list.value) {
			if (appointment_list.value[i].date === date) {
					if(appointment_list.value[i].data.list.length==1){
						let info=appointment_list.value[i].data.list
						if (info.max_count - info.used_count <= 0) return
						$store.buy_info.time = info[0]
					}
				return appointment_list.value[i].data.list
			}
		}
		return []
	})
	const dateChange = (date) => {
		for (let i in appointment_list.value) {
			if (appointment_list.value[i].date === date) {
				return appointment_list.value[i].data.list
			}
		}
		return []
	}
	const timeChoose = (info) => {
		if ($store.buy_info.time.id === info.id) {
			$store.buy_info.time = {
				id: 0,
				date: null
			}
		} else {
			if (info.max_count - info.used_count <= 0) return
			$store.buy_info.time = info
		}
	}
	const backClick = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	watch(monthWatch, (month) => {
		AppointmentList(month)
	})
	//设置灰度
		const SysGreyType=ref(0)
		const GetGreySet=()=>{
			uni.getStorage({
				key: 'SysGreytype',
				success: function (res) {
					console.log(res.data);
					if(res.data==1){
						SysGreyType.value=1
					}
				}
			});
		}
		onShow(() => {
			GetGreySet()
			 
		})
</script>
<template>
	<view>
		<view :class="SysGreyType==1? 'grey' :''">
			<uni-calendar :selected="appointment_list" :date="$store.buy_info.date" :ref="calendarRef" />
		</view>
		<view class="time_wrapper" :class="SysGreyType==1? 'grey' :''">
			<view class="time_title_wrapper">请选择预约时间段</view>
			<view class="no_time_wrapper" v-if="date_show_list.length === 0">当前选择日期没有可预约的时间段</view>
			<view class="time_list_wrapper">
				<view @click="timeChoose(i)" class="time_item_wrapper" v-for="(i,k) in date_show_list" :key="k" :class="[
					i.max_count - i.used_count <= 0 ? 'op5' : ''
				]">
					<view class="time_item_bg_wrapper">
						<image v-if="$store.buy_info.time.id !== i.id" :src="$image('/storage/assets/mp/combo/未选.png')"></image>
						<image v-if="$store.buy_info.time.id === i.id" :src="$image('/storage/assets/mp/combo/选中.png')"></image>
					</view>
					<view class="time_item_box_wrapper">
						<view class="time_item_choose_wrapper">
							<image v-if="$store.buy_info.time.id !== i.id" :src="$image('/storage/assets/mp/items/未选中.png')"></image>
							<image v-if="$store.buy_info.time.id === i.id" :src="$image('/storage/assets/mp/items/选中.png')"></image>
						</view>
						<view class="time_item_show_wrapper">{{ i.start_show }} - {{ i.end_show }}</view>
						<view class="time_item_line_wrapper"></view>
						<view class="time_item_count_wrapper">可预约{{ i.max_count - i.used_count }}人</view>
					</view>
				</view>
				<view @click="backClick()" class="back_button_wrapper">确认</view>
			</view>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	.back_button_wrapper {
		width: 580rpx;
		height: 90rpx;
		background: linear-gradient(-90deg, #23D3AF, #0DC5CF);
		border-radius: 45rpx;
		margin: 94rpx auto 0;
		font-size: 31rpx;
		font-weight: 500;
		color: #F6FDFD;
		line-height: 90rpx;
		text-align: center;
	}

	.op5 {
		opacity: .5;
	}

	.time_item_count_wrapper {
		font-size: 24rpx;
		font-weight: 400;
		color: #AFB0B1;
		margin-left: 16rpx;
	}

	.time_item_show_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #181818;
		margin-left: 29rpx;
	}

	.time_item_line_wrapper {
		width: 1rpx;
		height: 30rpx;
		background: #0BBACF;
		margin-left: 36rpx;
	}

	.time_item_choose_wrapper image {
		width: 40rpx;
		height: 40rpx;
		display: block;
	}

	.time_item_choose_wrapper {
		width: 40rpx;
		height: 40rpx;
		margin-left: 41rpx;
	}

	.time_item_box_wrapper {
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
		height: 133rpx;
	}

	.time_list_wrapper {
		margin-top: 20rpx;
	}

	.time_wrapper {
		margin-top: 20rpx;
		overflow: hidden;
		background: #ffffff;
		padding-bottom: 50rpx;
	}

	.time_title_wrapper {
		font-size: 28rpx;
		font-weight: 500;
		color: #6A6A6A;
		line-height: 1;
		margin-top: 40rpx;
		margin-left: 36rpx;
	}

	.no_time_wrapper {
		font-size: 28rpx;
		font-weight: 500;
		color: #6A6A6A;
		line-height: 1;
		margin-top: 40rpx;
		text-align: center;
	}

	.time_item_bg_wrapper image {
		width: 699rpx;
		height: 133rpx;
		display: block;
	}

	.time_item_bg_wrapper {
		position: absolute;
		width: 699rpx;
		height: 133rpx;
		z-index: 0;
	}

	.time_item_wrapper {
		position: relative;
		width: 699rpx;
		height: 133rpx;
		margin: 0 auto;
	}

	.uni-calendar-item__weeks-box-circle {
		opacity: 0;
	}

	.uni-calendar-item--extra {
		color: #5494ff !important;
	}

	.uni-calendar-item--checked {
		color: #ffffff !important;
	}
	.grey{
			   filter: grayscale(100%);   
		}
</style>
<style scoped>

</style>