leromro-mini/components/Client/new_file.vue

<template>
	<view>
		<template>
			<view class="Wrapper-grid">
				<view class="serve-title client-title" v-if="userType == 2">注册专区</view>
				<swiper :indicator-dots="true" class="swiper" v-if="serveiceList && serveiceList.length > 0">
					<swiper-item>
						<up-grid :border="false" col="5">
							<up-grid-item v-for="(item, index) in serveiceList.slice(0,10)" :key="index"
								:custom-style="custmoStyle" @click="handleGridClick(item)">
								<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="5">
							<up-grid-item v-for="(item, index) in serveiceList.slice(10,serveiceList.length)"
								:key="index" :custom-style="custmoStyle" @click="handleGridClick(item)">
								<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 {
		workDate,
		getDataTime,
		getVolunteerInfo
	} from '@/api/volunteer.js'
	import {
		volunteerSeachgetTreeList,
		volunteerDataList
	} 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 = [{
			icon: '/static/Tioimages/1v专业指导.png',
			name: '陪伴陪聊',
			key: 1,
		},
		{
			icon: '/static/Tioimages/1 妇女儿童权益保护服务.png',
			name: '孩子陪伴',
			key: 2,
		},
		{
			icon: '/static/Tioimages/临时帮手.png',
			name: '临时帮手',
			key: 3,
		},
		{
			icon: '/static/Tioimages/专家服务.png',
			name: '专家服务',
			key: 4,
		},
		{
			icon: '/static/Tioimages/家电维修.png',
			name: '家电维护',
			key: 5,
		},
		{
			icon: '/static/Tioimages/家庭保洁.png',
			name: '家庭保洁',
			key: 6,
		},
		{
			icon: '/static/Tioimages/旅游服务.png',
			name: '旅游服务',
			key: 7,
		},
		{
			icon: '/static/Tioimages/健康管理.png',
			name: '健康管理',
			key: 8,
		},
		{
			icon: '/static/Tioimages/交友.png',
			name: '交友专区',
			key: 9,
		},
		{
			icon: '/static/Tioimages/购物商城.png',
			name: '商城购物',
			key: 10,
		},
		{
			icon: '/static/Tioimages/本地生活.png',
			name: '本地生活',
			key: 11,
		},
	]

	//志愿者
	const serviceList2 = [{
			icon: '/static/Tioimages/1v专业指导.png',
			name: '陪伴陪聊',
			key: 1,
		},
		{
			icon: '/static/Tioimages/1 妇女儿童权益保护服务.png',
			name: '孩子陪护',
			key: 2,
		},
		{
			icon: '/static/Tioimages/健康管理.png',
			name: '健康管理',
			key: 3,
		},
		{
			icon: '/static/Tioimages/家庭保洁.png',
			name: '家庭保洁',
			key: 4
		},
		{
			icon: '/static/Tioimages/临时帮手.png',
			name: '临时帮手',
			key: 5
		},
		{
			icon: '/static/Tioimages/专家服务.png',
			name: '专家服务',
			key: 6
		},
		{
			icon: '/static/Tioimages/家电维修.png',
			name: '家电维护',
			key: 8
		},
		{
			icon: '/static/Tioimages/旅游服务.png',
			name: '旅游服务',
			key: 9
		},
		{
			icon: '/static/Tioimages/交友.png',
			name: '交友专区',
			key: 10
		},
		{
			icon: '/static/Tioimages/购物商城.png',
			name: '商城购物',
			key: 11
		},
		{
			icon: '/static/Tioimages/本地生活.png',
			name: '本地生活',
			key: 12
		},
		{
			icon: '/static/serverImg/home/icon/icon8.png',
			name: '排班管理',
			key: 7
		},
	]

	const serveiceList = computed(() => {
		console.log('userType ____>', userType);

		if (userType === 1) {
			return serviceList1
		}
		return serviceList2
	})

	

	
	// 宫格点击事件
	const handleGridClick = async (service) => {

		
		// 用户
		if (userType == 1) {

			// 动态获取 parentId
			const params = {
				parentId: service.key,
			}
			const res = await volunteerSeachgetTreeList(params)

			// 只有第一条和第二条可以跳转
			if (service.key === 1 || service.key === 2) {
				uni.navigateTo({
					url: `/pages_home/pages/client/details?dataList=${encodeURIComponent(JSON.stringify(res.data))}&serviceCategory=${service.key}`
				});
			} else {
				// 其他条目提示“敬请期待”
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				});
			}
		}
		// 志愿者
		if (userType == 2) {
			if (service.key !== 7) {
				const res = await getVolunteerInfo({
					serviceCategory: service.key
				});
				if (res.code === 200 && res.data) {
					//已有注册，跳转详情页面
					uni.navigateTo({
						url: `/pages_home/pages/details/index?data=${encodeURIComponent(JSON.stringify(service))}`
					})
					return
				}
				[1,2].includes(service.key) ? uni.navigateTo({
					url: `/pages_home/pages/register/index?data=${encodeURIComponent(JSON.stringify(service))}`
				}) : 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: 78rpx;
		height: 78rpx;
	}

	.swiper {
		height: 340rpx;
	}

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

	.client-title {
		padding: 0 32rpx;
	}
</style>