leromro-mini/pages/scheduling.vue

<template>
    <view class="uni-calendar">

        <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" />

        <CustomTabBar :page="1" />
    </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 {
	onLoad,
	onShow
} from '@dcloudio/uni-app';
import CustomTabBar from '@/components/CustomTabBar/index.vue'
import Calendar from '@/components/uni-calendar/components/uni-calendar/uni-calendar.vue'

const selected = ref([])
const info = ref({
    lunar: true,
    range: true,
    insert: true,
})
const calendar = ref(null)
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 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();
			}
		})
	}


    onShow(() => {
        init();
    })

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