leromro-mini/components/Client/new_file.vue

<template>
	<view>
		<!-- 服务选择 -->
		<template v-if="userType == 1">
			<view class="Wrapper-grid">
				<up-grid :border="false" col="4" @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">
				<swiper :indicator-dots="true" class="swiper">
					<swiper-item>
						<up-grid :border="false" col="5" @click="handleGridClick">
							<up-grid-item v-for="(item, index) in serviceList2.slice(0,10)" :key="index" :custom-style="custmoStyle">
								<view class="grid-box">
									<view class="grid-icon">
										<image :src="item.icon" class="service-img" mode="aspectFit" />
									</view>

									<text class="grid-text">{{ item.name }}</text>
								</view>
							</up-grid-item>
						</up-grid>
					</swiper-item>
					<swiper-item>
						<up-grid :border="false" col="4" @click="handleGridClick">
							<up-grid-item v-for="(item, index) in serviceList2.slice(10,12)" :key="index" :custom-style="custmoStyle">
								<view class="grid-box">
									<view class="grid-icon">
										<image :src="item.icon" class="service-img" mode="aspectFit" />
									</view>

									<text class="grid-text">{{ item.name }}</text>
								</view>
							</up-grid-item>
						</up-grid>
					</swiper-item>
				</swiper>

				<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" :clearDate="true" @confirm="confirm"
			:selected="selected" @delete="onDelete" />
	</view>

</template>

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

const swiperList = ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'];

// Toast 控制宫格
const uToastRef = ref(null);
const userType = uni.getStorageSync('userType') //读取本地存储
// 用户/志愿者 识别标识
const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储

const calendar = ref(null)
const info = ref({
	lunar: true,
	range: true,
	insert: false,
})
const selected = ref([])

// 普通用户
const serviceList1 = 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/报事报修@6x.png',
	name: '资讯与服务',
	key: 7,
},
]);

//志愿者
const serviceList2 = ref([
	{
		icon: '/static/serverImg/home/icon/icon2.png',
		name: '陪伴陪聊',
		key: 1,
	},
	{
		icon: '/static/serverImg/home/icon/icon4.png',
		name: '孩子陪护',
		key: 2,
	},
	{
		icon: '/static/serverImg/home/icon/icon1.png',
		name: '健康管理',
		key: 3,
	},
	{
		icon: '/static/serverImg/home/icon/icon6.png',
		name: '家庭保洁',
		key: 4
	},
	{
		icon: '/static/serverImg/home/icon/icon3.png',
		name: '临时帮手',
		key: 5
	},
	{
		icon: '/static/serverImg/home/icon/icon5.png',
		name: '专家服务',
		key: 6
	},
	{
		icon: '/static/serverImg/home/icon/icon7.png',
		name: '家电维修',
		key: 8
	},
	{
		icon: '/static/serverImg/home/icon/icon7.png',
		name: '旅游服务',
		key: 9
	},
	{
		icon: '/static/serverImg/home/icon/icon7.png',
		name: '交友专区',
		key: 10
	},
	{
		icon: '/static/serverImg/home/icon/icon7.png',
		name: '商城购物',
		key: 11
	},
	{
		icon: '/static/serverImg/home/icon/icon7.png',
		name: '本地生活',
		key: 12
	},
	{
		icon: '/static/serverImg/home/icon/icon8.png',
		name: '排班管理',
		key: 7
	},
]);

const parentIdMap = {
	'孩子陪护': 2,
	'陪伴陪聊': 1,
	'家庭助理': 3,
	'健康管理': 4,
	'家庭清洁': 5,
	'家务帮手': 6,
	'资讯与服务': 7,
};

const getParentId = (service) => parentIdMap[service.name] || 1;


// 宫格点击事件
const handleGridClick = async (index) => {
	const service = serviceList1.value[index]; // 获取点击的服务条目
	// 用户
	if (userType == 1) {
		// 动态获取 parentId
		const parentId = getParentId(service); // 通过服务条目动态获取 parentId
		const params = {
			parentId: parentId
		}
		const res = await volunteerSeachgetTreeList(params)
		console.log(res, '>>>>>dictSort = null')

		// 只有第一条和第二条可以跳转
		if (index === 0 || index === 1) {
			uni.navigateTo({
				url: `/pages_home/pages/client/details?dataList=${encodeURIComponent(JSON.stringify(res.data))}`
			});
		} else {
			// 其他条目提示“敬请期待”
			uni.showToast({
				title: '敬请期待',
				icon: 'none'
			});
		}
	}
	// 志愿者
	if (userType == 2 && uToastRef.value) {
		// pages_home/pages

		const data = serviceList2.value[index]
		if (data.key !== 7) {
			const res = await getVolunteerInfo({ serviceCategory: data.key });
			if (res.code === 200 && res.data) {
				//已有注册，跳转详情页面
				uni.navigateTo({
					url: `/pages_home/pages/details/index?data=${encodeURIComponent(JSON.stringify(data))}`
				})
				return
			}
			data.key === 1 || data.key === 2 ? uni.navigateTo({
				url: `/pages_home/pages/register/index?data=${encodeURIComponent(JSON.stringify(data))}`
			}) : uni.showToast({
				title: '敬请期待',
				icon: 'none'
			})
			return;
		}
		init();

	}
};

const change = (e) => {
	console.log('change', e);
	let dates = [{
		date: e.fulldate,
		info: `${e.time.startTime}~${e.time.endTime}`,
		time: e.time
	}]
	if (e.range.before && e.range.after) {
		dates = e.range.data.map(item => {
			return {
				date: item,
				info: `${e.time.startTime}~${e.time.endTime}`,
				time: e.time
			}
		})
	}
	selected.value = [...selected.value, ...dates]
}

const onDelete = (e) => {
	selected.value = selected.value.filter(item => {
		console.log('item.fulldate !== e.date', item.date, e.fulldate);

		return item.date !== e.fulldate
	})
	console.log(e, selected.value);
}


//排班时间去重处理
const handleDates = computed(() => {
	const parmas = selected.value.map(item => {
		return {
			workDate: item.date,
			workStartTime: item.time.startTime,
			workEndTime: item.time.endTime
		}
	})
	return parmas.reduce((acc, current) => {
		const existing = acc.find(item => item.workDate === current.workDate);
		if (existing) {
			Object.assign(existing, current);
		} else {
			acc.push(current);
		}
		return acc;
	}, []);
});
const confirm = (e) => {
	const parmas = handleDates.value;
	console.log('确定', parmas);
	workDate(parmas).then(res => {
		if (res.code == 200) {
			uni.showToast({
				title: '修改成功',
				icon: 'success',
				success: () => {
					setTimeout(() => {
						close();
					}, 1000)
				}
			})

			return;
		}
		uni.showToast({
			title: res.msg,
			icon: 'none'
		})
	})
};
const close = () => {
	calendar.value.close();
}

const init = () => {
	getDataTime().then(res => {
		console.log('res', res);
		if (res.code === 200) {
			selected.value = res.data.map(item => {
				return {
					date: item.workDate,
					info: `${item.workStartTime}~${item.workEndTime}`,
					time: {
						startTime: item.workStartTime,
						endTime: item.workEndTime
					}
				}
			})
			calendar.value.open();
		}


	})
}



onMounted(() => {
	// init();
});
</script>

<style scoped>
.Wrapper-grid {
	margin-top: 36rpx;
}

/* 图标样式 */
.service-img {
}

/* 文本样式 */
.grid-text {
	font-size: 24rpx;
	color: #333;
	text-align: center;
	margin-top: 18rpx;
}

.grid-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-bottom: 12rpx;
}

.grid-icon {
	width: 100rpx;
	height: 100rpx;
	opacity: 1;
	border-radius: 12rpx;
	background: rgba(251, 229, 225, 1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-img {
	width: 58rpx;
	height: 58rpx;
}

.swiper {
	height: 205px;
}

.grid-text {
	font-size: 14px;
	color: #909399;
	padding: 10rpx 0 20rpx 0rpx;
}
</style>