5 changed files with 199 additions and 163 deletions
@ -1,137 +1,135 @@ |
|||||
<template> |
<template> |
||||
<!-- <view class="flex flex-col h-full bg-gray-50" @click="openAuth"> --> |
<!-- <view class="flex flex-col h-full bg-gray-50" @click="openAuth"> --> |
||||
<view class="flex flex-col h-full bg-gray-50"> |
<view class="flex flex-col h-full bg-gray-50"> |
||||
<view class="relative" @touchmove="onMove"> |
<view class="relative" @touchmove="onMove"> |
||||
<!-- 日历 --> |
<!-- 日历 --> |
||||
<Calendar @selected-change="onDateChange" :show-back="true" ref="calendar" |
<Calendar @selected-change="onDateChange" :show-back="true" ref="calendar" @handleFindPoint="handleFindPoint" /> |
||||
@handleFindPoint="handleFindPoint" |
<!-- 上传 导入wbs --> |
||||
/> |
<Upload @success="onUploadSuccess" @error="onUploadError" /> |
||||
<!-- 上传 导入wbs --> |
</view> |
||||
<Upload @success="onUploadSuccess" @error="onUploadError" /> |
|
||||
</view> |
<!-- 项目列表 --> |
||||
|
<Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" /> |
||||
<!-- 项目列表 --> |
|
||||
<Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" /> |
<!-- 全局提示框 --> |
||||
|
<u-top-tips ref="uTips"></u-top-tips> |
||||
<!-- 全局提示框 --> |
</view> |
||||
<u-top-tips ref="uTips"></u-top-tips> |
</template> |
||||
</view> |
|
||||
</template> |
<script setup> |
||||
|
import { reactive, computed, watchEffect, ref } from 'vue'; |
||||
<script setup> |
import { useStore } from 'vuex'; |
||||
import { reactive, computed, watchEffect, ref } from 'vue'; |
import dayjs from 'dayjs'; |
||||
import { useStore } from 'vuex'; |
|
||||
import dayjs from 'dayjs'; |
const store = useStore(); |
||||
|
|
||||
const store = useStore(); |
|
||||
const token = computed(() => store.state.user.token); |
const token = computed(() => store.state.user.token); |
||||
const uTips = ref(null); |
const uTips = ref(null); |
||||
|
|
||||
const data = reactive({ |
const data = reactive({ |
||||
calendar: null, |
calendar: null, |
||||
days: [], |
days: [], |
||||
}); |
}); |
||||
|
|
||||
// 监听token |
// 监听token |
||||
watchEffect(() => { |
watchEffect(() => { |
||||
if (!token.value) return; |
if (!token.value) return; |
||||
if (token.value) { |
if (token.value) { |
||||
getProjects(); |
getProjects(); |
||||
handleFindPoint(); |
handleFindPoint(); |
||||
} |
} |
||||
}); |
}); |
||||
|
|
||||
// 获取项目列表 |
// 获取项目列表 |
||||
function getProjects(start = dayjs().startOf('day').valueOf(), end = dayjs().endOf('day').valueOf()) { |
function getProjects(start = dayjs().startOf('day').valueOf(), end = dayjs().endOf('day').valueOf()) { |
||||
// const data = await this.$u.api.getProjects(start, end); |
// const data = await this.$u.api.getProjects(start, end); |
||||
uni.$catchReq.getProjects(start, end, (err, data) => { |
uni.$catchReq.getProjects(start, end, (err, data) => { |
||||
if (err) { |
if (err) { |
||||
console.error('err: ', err); |
console.error('err: ', err); |
||||
} else { |
} else { |
||||
data.forEach(item => { |
data.forEach(item => { |
||||
item.show = false; |
item.show = false; |
||||
}); |
}); |
||||
store.commit('project/setProjects', data); |
store.commit('project/setProjects', data); |
||||
} |
} |
||||
}); |
}); |
||||
} |
} |
||||
|
|
||||
async function handleFindPoint(start, end) { |
async function handleFindPoint(start, end) { |
||||
try { |
try { |
||||
const startTime = start || dayjs().startOf('month').valueOf(); |
const startTime = start || dayjs().startOf('month').valueOf(); |
||||
const endTime = end || dayjs().endOf('month').valueOf(); |
const endTime = end || dayjs().endOf('month').valueOf(); |
||||
const res = await uni.$u.api.findRedPoint(startTime, endTime); |
const res = await uni.$u.api.findRedPoint(startTime, endTime); |
||||
store.commit('project/setDotList', res); |
store.commit('project/setDotList', res); |
||||
} catch (error) { |
} catch (error) { |
||||
console.log('error: ', error); |
console.log('error: ', error); |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
// 点击了某个日期 |
// 点击了某个日期 |
||||
const onDateChange = event => { |
const onDateChange = event => { |
||||
const day = dayjs(event.fullDate); |
const day = dayjs(event.fullDate); |
||||
const start = day.startOf('date').valueOf(); |
const start = day.startOf('date').valueOf(); |
||||
const end = day.endOf('date').valueOf(); |
const end = day.endOf('date').valueOf(); |
||||
getProjects(start, end); |
getProjects(start, end); |
||||
}; |
}; |
||||
|
|
||||
// 导入成功 |
// 导入成功 |
||||
const onUploadSuccess = () => { |
const onUploadSuccess = () => { |
||||
uTips.show({ |
uTips.show({ |
||||
title: '导入成功，即将打开新项目', |
title: '导入成功，即将打开新项目', |
||||
type: 'success', |
type: 'success', |
||||
duration: '3000', |
duration: '3000', |
||||
}); |
}); |
||||
}; |
}; |
||||
|
|
||||
// 导入失败 |
// 导入失败 |
||||
const onUploadError = error => { |
const onUploadError = error => { |
||||
uTips.show({ |
uTips.show({ |
||||
title: error || '导入失败', |
title: error || '导入失败', |
||||
type: 'error', |
type: 'error', |
||||
duration: '6000', |
duration: '6000', |
||||
}); |
}); |
||||
}; |
}; |
||||
|
|
||||
// 监听触摸滑动 切换日历的模式 月/周 |
// 监听触摸滑动 切换日历的模式 月/周 |
||||
function onMove(event) { |
function onMove(event) { |
||||
const y = event.changedTouches[0].pageY; |
const y = event.changedTouches[0].pageY; |
||||
if (y - prevY > 0) { |
if (y - prevY > 0) { |
||||
// 向下滑动 如果是周视图weekMode=true 就 变成 月视图weekMode=false |
// 向下滑动 如果是周视图weekMode=true 就 变成 月视图weekMode=false |
||||
data.value.calendar.weekMode && (data.value.calendar.weekMode = false); |
data.value.calendar.weekMode && (data.value.calendar.weekMode = false); |
||||
} else if (y - prevY < 0) { |
} else if (y - prevY < 0) { |
||||
// 向上滑动 如果是月视图weekMode=false 就变成 周视图weekMode=true |
// 向上滑动 如果是月视图weekMode=false 就变成 周视图weekMode=true |
||||
!data.value.calendar.weekMode && (data.value.calendar.weekMode = true); |
!data.value.calendar.weekMode && (data.value.calendar.weekMode = true); |
||||
} |
} |
||||
prevY = y; |
prevY = y; |
||||
data.value.calendar.initDate(); |
data.value.calendar.initDate(); |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style> |
||||
.content { |
.content { |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: center; |
justify-content: center; |
||||
} |
} |
||||
|
|
||||
.logo { |
.logo { |
||||
height: 200rpx; |
height: 200rpx; |
||||
width: 200rpx; |
width: 200rpx; |
||||
margin-top: 200rpx; |
margin-top: 200rpx; |
||||
margin-left: auto; |
margin-left: auto; |
||||
margin-right: auto; |
margin-right: auto; |
||||
margin-bottom: 50rpx; |
margin-bottom: 50rpx; |
||||
} |
} |
||||
|
|
||||
.text-area { |
.text-area { |
||||
display: flex; |
display: flex; |
||||
justify-content: center; |
justify-content: center; |
||||
} |
} |
||||
|
|
||||
.title { |
.title { |
||||
font-size: 36rpx; |
font-size: 36rpx; |
||||
color: #8f8f94; |
color: #8f8f94; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue