You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
237 lines
5.5 KiB
237 lines
5.5 KiB
<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>
|