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