leromro-mini/pages/Client/new_file.vue

<template>
	<view>
		<!-- 服务选择 -->
		<template v-if="userType == 1">
			<view class="Wrapper-grid">
				<up-grid :border="false" col="3" @click="handleGridClick">
					<up-grid-item v-for="(item, index) in serviceList1" :key="index"
						:custom-style="{ padding: '20rpx' }">
						<!-- 图标 -->
						<image :src="item.icon" class="service-img" mode="aspectFit" />

						<!-- 文本 -->
						<text class="grid-text">{{ item.name }}</text>
					</up-grid-item>
				</up-grid>

				<up-toast ref="uToastRef" />
			</view>
		</template>

		<template v-else-if="userType == 2">
			<view class="Wrapper-grid">
				<up-grid :border="false" col="4" @click="handleGridClick">
					<up-grid-item v-for="(item, index) in serviceList2" :key="index"
						:custom-style="{ padding: '20rpx' }">
						<!-- 图标 -->
						<image :src="item.icon" class="service-img" mode="aspectFit" />

						<!-- 文本 -->
						<text class="grid-text">111{{ item.name }}</text>
					</up-grid-item>
				</up-grid>

				<up-toast ref="uToastRef" />
			</view>
		</template>

		<Calendar ref="calendar" class="uni-calendar--hook" :clear-date="false" :date="info.date" :insert="info.insert"
			:lunar="info.lunar" :range="info.range" @change="change"
			@confirm="confirm" :selected="selected" />


	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		watch,
		computed
	} from 'vue';
	import {
		typeOptionSelect
	} from "@/api/volunteerDetailsApi/details.js"
	import dayjs from 'dayjs';
	import { workDate } from '@/api/volunteer.js'
	import Calendar from '../../components/uni-calendar/components/uni-calendar/uni-calendar.vue'

	// Toast 控制宫格
	const uToastRef = ref(null);
	const userType = uni.getStorageSync('userType') //读取本地存储

	const calendar =ref(null)
	const datas = ref(["2025-04-10","2025-04-11",]);
	const info = ref({
		lunar: true,
		range: false,
		insert: false,
		// mode:'multiple',//multiple:多选
	})
	const selected = ref([])



	 // 普通用户
	 const serviceList1 = ref([
		 {
	 		icon: '/static/img/统一知识平台-营运@1x.png',
	 		name: '家庭辅导'
	 	},
	 	{
	 		icon: '/static/img/编组.png',
	 		name: '陪伴陪聊'
	 	},
	 	{
	 		icon: '/static/img/清空.png',
	 		name: '家庭助理'
	 	},
	 	{
	 		icon: '/static/img/构建.png',
	 		name: '健康管理'
	 	},
	 	{
	 		icon: '/static/img/报事报修@6x.png',
	 		name: '家庭清洁'
	 	},
	 	{
	 		icon: '/static/img/报事报修@6x.png',
	 		name: '家务帮手'
	 	},
	 ]);
	 //志愿者
	 const serviceList2 = ref([{
	 		icon: '/static/img/统一知识平台-营运@1x.png',
	 		name: '家庭辅导注册',
			key:2,
	 	},
	 	{
	 		icon: '/static/img/编组.png',
	 		name: '陪伴陪聊注册',
			key:1,
	 	},
	 	{
	 		icon: '/static/img/清空.png',
	 		name: '家庭助理注册',
			key:3,
	 	},
	 	{
	 		icon: '/static/img/构建.png',
	 		name: '健康管理注册',
			key:4
	 	},
	 	{
	 		icon: '/static/img/报事报修@6x.png',
	 		name: '家庭清洁注册',
			key:5
	 	},
	 	{
	 		icon: '/static/img/报事报修@6x.png',
	 		name: '家务帮手注册',
			key:6
	 	},
	 	{
	 		icon: '/static/img/清空.png',
	 		name: '时间管理',
			key:7
	 	},
	 ]);
	 
	
	//选中的日期展示格式；
const formatter = (day) => {
	
	
	const  d = dayjs(day.date).format('YYYY-MM-DD')
	for (let i = 0; i < datas.value.length; i++) {
		const e = datas.value[i].split(' ');
		if(e[0] === d){
			console.log('e',e,e[0] === d,d);
			console.log(day,d.e);
			day.bottomInfo = 'xx'
			// day.dot = true
		}
		
	}
	

	return day
}
// 宫格点击事件
const handleGridClick = async (index) => {
	console.log('userType',userType);
	
	if (userType == 1) {
		const res = await typeOptionSelect()
		console.log((res, '获取健值成功'))
		uni.navigateTo({
			url: '/pages_home/pages/client/details'
		});
		return
	}
	if (uToastRef.value) {
		const data = serviceList2.value[index]
		if (data.key !== 7) {
			uni.navigateTo({
				url: `/pages/register/register?data=${encodeURIComponent(JSON.stringify(data))}`
			});
			return;
		}
		calendar.value.open();
	}
};


const change = (e) => {
	console.log('change', e);
	selected.value = [...selected.value,
		{
			date: e.fulldate,
			info: `${e.time.startTime}~${e.time.endTime}`,
			time:e.time
		}
	]
}
const confirm = () => {

	const parmas = selected.value.map(item => {
		return {
			workDate: item.date,
			workStartTime: item.startTime,
			workEndTime: item.endTime
		}
	})
	console.log('确定',parmas);

	workDate(parmas).then(res => {
		if(res.code == 200){
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				})
				close();
				return;
			}
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
	})
};
const close = () => {
	calendar.value.close();
}

onMounted(() => {

});
</script>

<style scoped>
	.Wrapper-grid {
		margin-top: 170rpx;
	}
	
	/* 图标样式 */
	.service-img {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 15rpx;
	}
	
	/* 文本样式 */
	.grid-text {
		font-size: 24rpx;
		color: #333;
		text-align: center;
		margin-top: 10rpx;
	}
	
</style>