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>
        <up-grid :border="false" col="3">
          <up-grid-item v-for="(item, index) in serveiceList" :key="index" @click="handleGridClick(item)">
            <view class="grid-box">
              <view class="grid-icon">
                <image :src="item.businessIcon" class="service-img" mode="aspectFit" />
              </view>
              <view class="grid-content">
                <text class="grid-text">{{ item.businessName }}</text>
                <text>{{ item.businessDescribe }}</text>
              </view>
            </view>
          </up-grid-item>
        </up-grid>
        <up-toast ref="uToastRef" />

        <view @click="DataInit" class="paiban-sty" v-if="userType == 2">
          <image src="/static/serverImg/home/icon/icon8.png" class="service-img" mode="aspectFit" />
          排班管理
        </view>
      </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 { getTreeList } from '@/api/volunteer'
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 serveiceList = ref([]);



// 宫格点击事件
const handleGridClick = async (service) => {
	// 用户
	if (userType == 1) {

		// 动态获取 parentId
		const params = {
			parentId: service.id,
		}
		const res = await volunteerSeachgetTreeList(params)
		uni.navigateTo({
			url: `/pages_home/pages/client/details?dataList=${encodeURIComponent(JSON.stringify(res.data))}&serviceCategory=${service.id}`
		});
	}
	// 志愿者
	if (userType == 2) {
		const res = await getVolunteerInfo({
			serviceCategory: service.id
		});
		if (res.code === 200 && res.data) {
			//已有注册，跳转详情页面
			uni.navigateTo({
				url: `/pages_home/pages/details/index?data=${encodeURIComponent(JSON.stringify({...service,key: service.id}))}`
			})
			return
		}

		uni.navigateTo({
			url: `/pages_home/pages/register/index?data=${encodeURIComponent(JSON.stringify({...service,key: service.id}))}`
		})

	}
};

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 = () => {
	getTreeList({ parentId: '0' }).then(res => {
		console.log("TCL: init -> res", res)
		serveiceList.value = res.data;
	})
}

const DataInit = () => {
	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;
}

.grid-content{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.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;
}

.paiban-sty {
	display: flex;
	align-items: center;
	/* justify-content: center; */
	margin: 20rpx 0;
	padding: 0 20rpx;
}
</style>