107 lines
2.7 KiB
Vue
107 lines
2.7 KiB
Vue
<!-- 车辆信息 -->
|
||
<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> |