TaskData.vue
2.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!-- 车辆信息 -->
<template>
<view class="taskData">
<!-- 日历模块 - 使用uni的日历重写 - start -->
<Calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @monthSwitch="monthSwitch" >
<!-- 任务栏数据展示 -->
<view class="taskCont">
<TaskInfo :title="false" :data="taskData" class="task" />
</view>
</Calendar>
<!-- 日历模块 - start -->
</view>
</template>
<script setup>
// 模块、接口导入
import { ref,reactive, onMounted } from 'vue';
import TaskInfo from './TaskInfo.vue'
import Calendar from './Calendar/components/uni-calendar/uni-calendar.vue'
// 请求API
import { getTaskData } from '@/pages/api/user.js';
// ------定义变量------
// 日历的展示数据
const info = reactive({
lunar: true,
range: true,
insert: false,
selected: []
})
const taskData = ref({})
// 生命周期
onMounted(()=>{
const date = getDate(new Date())
getTask({year: date.year, month: date.month});
// 配置任务日历展示订单数量的数据处理 - 等日历展示处理后添加数据
setTimeout(() => {
info.date = getDate(new Date(),-30).fullDate
info.startDate = getDate(new Date(),-60).fullDate
info.endDate = getDate(new Date(),30).fullDate
info.selected = info.selected
}, 1000)
})
// 获取任务数据
async function getTask(params){
await getTaskData(params)
.then(res => {
if (res.code == 200) {
const { data } = res
// 任务数据赋值
taskData.value = data
// 日历中任务数量显示数据处理
info.selected = data.dailyMileage.map((n)=>{
if (getDate(n.dateTime).fullDate != getDate(new Date()).fullDate){
return {date: getDate(n.dateTime).fullDate, info: n.mileage}
}
}).filter(n => n != undefined)
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
// 通过左右箭头(和确认)改变月份 从新请求数据
function monthSwitch(e) {
getTask(e)
}
// 日期处理
function getDate(date, AddDayCount = 0) {
if (!date) {
date = new Date()
}
if (typeof date !== 'object') {
date = date.replace(/-/g, '/')
}
const dd = new Date(date)
// 获取AddDayCount天后的日期
dd.setDate(dd.getDate() + AddDayCount)
const y = dd.getFullYear()
// 获取当前月份的日期，不足10补0
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1
// 获取当前几号，不足10补0
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
return {
fullDate: y + '-' + m + '-' + d,
year: y,
month: m,
date: d,
day: dd.getDay()
}
}
</script>
<style lang="scss" >
.taskCont{
position: relative;
margin-bottom: 40rpx;
.task{
top: 0;
border-radius: 0;
}
}
</style>