pet-front/otherPages/myOrdersManage/date/detail.vue

<template>
	<!-- <div>不接单日期</div> -->
	<view class="box box-size">
		<view class="top box-size level">
			<view>
				<view class="text">
					添加不接单日期
				</view>
				您不会再接收到选择日期内的订单
			</view>
			<view @click="show = true" class="buttom level" :style="{borderRadius:'31rpx'}">
				添加不接单日期
			</view>
		</view>

		<view v-if="selectDateList.length" class="level center">
			<view >
				<view class="text1" :style="{ textAlign: 'right' }">
					{{ selectDateList.length }}天
				</view>
				共不接单时间
			</view>
			<view class="level center_item">
				<view @click="calendarShowEdit = true">
					<!-- <up-icon name="edit-pen" color="#2979ff" size="22"></up-icon> -->
					修改
				</view>
				<view @click="cleanDates" >
					<!-- <up-icon name="trash" color="#2979ff" size="22"></up-icon> -->
					清空
				</view>
			</view>
		</view>

		<view v-if="selectDateList.length" v-for="(dates,month) in groupedDates" :key="month" class="item box-size"
			:style="{borderRadius:'16rpx'}">
			{{ month }}不接单
			<view class="text2">
				共{{ dates.length }}天:<text v-for="(item,index) in dates"
					:key="index">{{ item + (index != dates.length - 1 ? "," : "") }}</text>
			</view>
		</view>
		<view @click="submit" class="buttom_ level" :style="{borderRadius:'41rpx'}">
			保存
		</view>
	</view>

	<up-action-sheet :actions="list" @select="selectClick" :show="show" :round="10"></up-action-sheet>
	
	<up-calendar 
	:show="calendarShow" color="#FFBF60" :round="10" :showTitle="false" :mode="mode" @confirm="confirm"
	@close="closeCandler" 
	:maxDate="maxDate"></up-calendar>
	
	<up-calendar 
	:show="calendarShowEdit" color="#FFBF60" 
	:defaultDate="selectDateList"
	@close="calendarShowEdit = false" 
	:round="10" :showTitle="false" mode="multiple" @confirm="calendarShowEditConfirm"
	:maxDate="maxDate"></up-calendar>
	
</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		insertOutDate,
		outDateList
	} from "@/api/date/index.js"
import dayjs from "dayjs";

	onLoad((options) => {
		addressId.value = options.addressId
	});

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

	const addressId = ref(0)
	const list = ref([{
			index: 0,
			name: '添加不接单日期区间'
		},
		{
			index: 1,
			name: '添加不接单日期'
		},
		{
			index: 2,
			name: '取消'
		}
	]);

	const show = ref(false);
	const calendarShow = ref(false);
	const calendarShowEdit = ref(false);
	const mode = ref('range');
	const selectDateList = ref([]);
	const groupedDates = ref({}); //按月分组
	const d = new Date();
	const currentYear = d.getFullYear() + 10;
	const maxDate = `${currentYear}-12-31`;

	// 方法  
	const selectClick = (selectItem) => {
		if (selectItem.index == 0) {
			mode.value = 'range';//multiple range
			calendarShow.value = true;
		} else if (selectItem.index == 1) {
			mode.value = 'multiple';
			calendarShow.value = true;
		}
		show.value = false;
	};

	const confirm = (e) => {
		const list = [...selectDateList.value, ...e];
		selectDateList.value = [...new Set(list)];
		
		selectDateList.value.sort((a, b) => {
			return dayjs(a).valueOf() - dayjs(b).valueOf();
		});
		
		gruopDate(selectDateList.value);
		calendarShow.value = false;
	};
	
	function calendarShowEditConfirm(data){
		selectDateList.value = data
		calendarShowEdit.value = false
		gruopDate(selectDateList.value);
	}

	const closeCandler = () => {
		calendarShow.value = false;
	}


	// 日期按月分组
	const gruopDate = (dateList) => {
		groupedDates.value = {}
		dateList.forEach(date => {
			const [year, month, day] = date.split('-');
			const formattedDate = `${parseInt(month)}月${parseInt(day)}日`;
			const monthKey = `${parseInt(month)}月`;

			if (!groupedDates.value[monthKey]) {
				groupedDates.value[monthKey] = [];
			}
			groupedDates.value[monthKey].push(formattedDate);
		});

		// 对键进行排序
		const sortedKeys = Object.keys(groupedDates.value).sort((a, b) => {
			const monthA = parseInt(a.replace('月', ''));
			const monthB = parseInt(b.replace('月', ''));
			return monthA - monthB;
		});

		// 根据排序后的键构建新对象
		const sortedGroupedDates = {};
		sortedKeys.forEach(key => {
			sortedGroupedDates[key] = groupedDates.value[key];
		});

		// 更新 groupedDates 的值
		groupedDates.value = sortedGroupedDates;
	}

	// 清除全部
	const cleanDates = () => {
		selectDateList.value = [];
		gruopDate(selectDateList.value);
	}

	// 提交
	const submit = async () => {
		if (!addressId.value) {
			return uni.showToast({
				title: '地址标识不能为空',
				icon: "none"
			})
		}
		let response = await insertOutDate({
			addressId: addressId.value,
			dataJson : selectDateList.value.toString()
		})
		if (response.code == 200) {
			uni.showToast({
				title: response.msg,
				icon: "none"
			})
			uni.navigateBack(-1);
		}
	}

	const getOutDateList = async () => {
		let response = await outDateList({
			addressId: addressId.value,
		});
		if (response.code == 200 && response.data) {
			let list = response.data.filter(item => item.date !== null && item.date !== undefined);
			list = list.map(item => item.date);
			// 去除重复日期
			selectDateList.value = [...new Set(list)];
			gruopDate(selectDateList.value);
		}
	}
</script>

<style scoped lang="scss">
	@import "index";

	.line1 {
		position: relative;
		margin-bottom: 30rpx;

		&::before {
			position: absolute;
			top: 10rpx;
			left: 0;
			content: "";
			width: 718rpx;
			height: 0.5rpx;
			background-color: #EFEFEF;
			// background-color: red;
		}
	}
</style>