Skip to content

S
schedule
Commit d7cb773e by xiexiaoqin
Options

feat: index page month and scroll related

parent 5644cfff
Showing with 315 additions and 168 deletions
app.json
{
"pages": [
"pages/index/index",
"pages/scheduleList/scheduleList",
"pages/index/index",
"pages/meetingDetail/meetingDetail",
"pages/excutorList/excutorList",
"pages/createMeeting/createMeeting",
......
components/relatedApp/relatedApp.axml 0 → 100644
<view class="sidebarContent" catchTap="preventSort">
<view class="sidebarLogo">
<view>
<image a:if="{{userMsg.headUrl}}" mode="scaleToFill" src="{{userMsg.headUrl}}" />
<text a:else>{{ userMsg.userName.slice(-1) }}</text>
</view>
<view>
{{ userMsg.userName }}
</view>
</view>
<view class="hasAssociated">
<view class="associated">
已关联应用
</view>
<view class="applicationList">
<view class="applicationLogo">
</view>
<view class="applicationMsg">
<view>
<view>
Outlook日历
</view>
<view>
支持会议日程双向同步，实时同步日程信息等
</view>
</view>
<view class="operateIcon">
<text class="iconfont iconright"></text>
</view>
</view>
</view>
</view>
<view class="unAssociated">
<view class="associated">
可关联应用
</view>
<view class="applicationList">
<view class="applicationLogo">
</view>
<view class="applicationMsg">
<view>
<view>
Outlook日历
</view>
<view>
支持会议日程双向同步，实时同步日程信息等
</view>
</view>
<view class="operateIcon">
<text class="iconfont iconright"></text>
</view>
</view>
</view>
<view class="applicationList">
<view class="applicationLogo">
</view>
<view class="applicationMsg">
<view>
<view>
Outlook日历
</view>
<view>
支持会议日程双向同步，实时同步日程信息等
</view>
</view>
<view class="operateIcon">
<text class="iconfont iconright"></text>
</view>
</view>
</view>
<view class="applicationList">
<view class="applicationLogo">
</view>
<view class="applicationMsg">
<view>
<view>
Outlook日历
</view>
<view>
支持会议日程双向同步，实时同步日程信息等
</view>
</view>
<view class="operateIcon">
<text class="iconfont iconright"></text>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
components/relatedApp/relatedApp.js 0 → 100644
Component({
mixins: [],
data: {
userMsg: {}
},
props: {},
didMount() {
this.setData({
userMsg: {
headUrl: getApp().globalData.avatar || "",
userName: getApp().globalData.name
}
});
},
didUpdate() { },
didUnmount() { },
methods: {},
});
components/relatedApp/relatedApp.json 0 → 100644
{
"component": true
}
\ No newline at end of file
pages/scheduleList/schedule.js
......@@ -6,7 +6,7 @@ export function getDateMap(minYear, maxYear) {
const getOneYear = (year) => {
const yearDays = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ? 366 : 365;
for (let i = 1; i <= yearDays; i++) {
DateMap.set(new Date(year, 0, i).toLocaleDateString(), []);
DateMap.set(toLocaleDateString(new Date(year, 0, i)), []);
}
}
for (let i = minYear; i <= maxYear; i++) {
......@@ -60,7 +60,7 @@ export function getNextDateList(startTime, endTime) {
//返回跨天的日期数组
for (let i = 1; i <= days; i++) {
const newDate = new Date(startTime);
const nextDate = new Date(newDate.setDate(newDate.getDate() + i)).toLocaleDateString();
const nextDate = toLocaleDateString(new Date(newDate.setDate(newDate.getDate() + i)));
nextDateList.push(nextDate)
}
return nextDateList
......@@ -134,4 +134,15 @@ export function getBlankList(year) {
}
})
return DateList;
}
export function toLocaleDateString(date) {
if (typeof date === 'string') {
date = new Date(date)
}
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
}
export function getEndIndex() {
}
\ No newline at end of file
pages/scheduleList/scheduleList.acss
......@@ -268,4 +268,5 @@
.indexScrollView {
height: calc( 100vh - 88rpx);
background: #Fff;
}
\ No newline at end of file
pages/scheduleList/scheduleList.axml
<import src="../../template/loading/loading.axml"/>
<view a:if="{{!loading}}">
<view class="scheduleHeader">
<view>2020年3月</view>
<view>{{currentData.split('/')[0]}}年{{currentData.split('/')[1] || '1'}}月</view>
<view onTap="changesidebar" class="headerIcon">
<text class="iconfont iconicon_app1">
</text>
......@@ -9,29 +9,29 @@
</view>
</view>
</view>
<scroll-view class="indexScrollView" scroll-y="{{true}}" style="background: #FFFFFF" lower-threshold="100" onScrollToLower="lower" scroll-into-view="{{todayStr}}">
<scroll-view class="indexScrollView" scroll-y="{{true}}" onScroll="scroll" lower-threshold="400" onScrollToLower="lower" scroll-into-view="{{todayStr}}">
<block a:for="{{scheduleList}}" key="{{item.dateStr}}">
<!-- 年 -->
<block a:if="{{item.type == 'year'}}">
<view class="year" id="{{item.dateStr}}">
<view class="year li" id="{{item.dateStr}}">
{{item.value}}年
</view>
</block>
<!-- 月 -->
<block a:elif="{{item.type == 'month'}}">
<view class="month" id="{{item.dateStr}}">
<view class="month li" id="{{item.dateStr}}">
{{item.value}}月
</view>
</block>
<!-- 周 -->
<block a:elif="{{item.type == 'week'}}">
<view class="week" id="{{item.dateStr}}">
<view class="week li" id="{{item.dateStr}}">
{{item.value}}
</view>
</block>
<!-- 天 -->
<block a:elif="{{item.type == 'day' || item.type == 'today'}}">
<view class="date" id="{{item.dateStr}}">
<view class="date li" id="{{ item.dateStr}}">
<view class="hasDateTitle {{item.type == 'today' && item.hasDateLabel ? 'today' : ''}} {{item.value.isBeOverdue ? 'overdueLabel':''}}">
<view>
{{item.week}}
......@@ -52,8 +52,8 @@
</view>
</block>
<!-- 今天有无会议 -->
<block a:elif="{{item.type == 'thisDay'}}">
<view class="date" id="{{item.dateStr}}">
<block a:elif="{{item.type == 'thisday'}}">
<view class="date li" id="{{item.dateStr}}">
<view class="hasDateTitle today">
<view>
{{item.week}}
......@@ -69,95 +69,6 @@
</block>
</scroll-view>
<popup show="{{show}}" onClose="closePop" position="left">
<view class="sidebarContent" catchTap="preventSort">
<view class="sidebarLogo">
<view>
<image a:if="{{userMsg.headUrl}}" mode="scaleToFill" src="{{userMsg.headUrl}}" />
<text a:else>{{ userMsg.userName.slice(-1) }}</text>
</view>
<view>
{{ userMsg.userName }}
</view>
</view>
<view class="hasAssociated">
<view class="associated">
已关联应用
</view>
<view class="applicationList">
<view class="applicationLogo">
</view>
<view class="applicationMsg">
<view>
<view>
Outlook日历
</view>
<view>
支持会议日程双向同步，实时同步日程信息等
</view>
</view>
<view class="operateIcon">
<text class="iconfont iconright"></text>
</view>
</view>
</view>
</view>
<view class="unAssociated">
<view class="associated">
可关联应用
</view>
<view class="applicationList">
<view class="applicationLogo">
</view>
<view class="applicationMsg">
<view>
<view>
Outlook日历
</view>
<view>
支持会议日程双向同步，实时同步日程信息等
</view>
</view>
<view class="operateIcon">
<text class="iconfont iconright"></text>
</view>
</view>
</view>
<view class="applicationList">
<view class="applicationLogo">
</view>
<view class="applicationMsg">
<view>
<view>
Outlook日历
</view>
<view>
支持会议日程双向同步，实时同步日程信息等
</view>
</view>
<view class="operateIcon">
<text class="iconfont iconright"></text>
</view>
</view>
</view>
<view class="applicationList">
<view class="applicationLogo">
</view>
<view class="applicationMsg">
<view>
<view>
Outlook日历
</view>
<view>
支持会议日程双向同步，实时同步日程信息等
</view>
</view>
<view class="operateIcon">
<text class="iconfont iconright"></text>
</view>
</view>
</view>
</view>
</view>
</popup>
</view>
<template is="loading" a:else>
......
pages/scheduleList/scheduleList.js
import { RRule, RRuleSet, rrulestr } from "rrule";
import { getHomeUserSchedule1 } from "../../api/request";
import { getDateMap, getExcludeDate, getNextDateList, getWeekNumber, getBlankList } from './schedule.js';
import { getDateMap, getExcludeDate, getNextDateList, getWeekNumber, getBlankList, toLocaleDateString } from './schedule.js';
import {
getFormatDate,
throttle,
padZero
} from "../../utils/utils";
const currentDate = new Date();
let minYear = 2019;
let maxYear = currentDate.getFullYear();
let minYear = 2020;
let maxYear = currentDate.getFullYear() + 1;
const DateMap = getDateMap(minYear, maxYear);
const weekList = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
import create from "dd-store";
import { once } from "events";
create.Page({
data: {
$data: null,
scheduleList: [],
todayStr: "",
todayStr: toLocaleDateString(currentDate),
currentData: toLocaleDateString(currentDate),
currentDataIndex: 0,
show: false,
userMsg: {},
loading: true
},
onLoad() {
this.resetPagination();
this.getDate();
this.setData({
userMsg: {
headUrl: getApp().globalData.avatar || "",
userName: getApp().globalData.name
scrollTop: 0,
pageSize: 10,
totalPages: 1,
currentPage: 1,
firstPage: 1,
scheduleList: [],
getRpx() {
dd.createSelectorQuery().select('.date').boundingClientRect().exec((rect) => {
if (rect[0]) {
this.otherHeight = rect[0].height;
this.dateHeight = 128 * rect[0].height / 96
}
});
})
},
onLoad() {
this.getData();
this.$store.locationSchedule = () => {
this.locationScheduleList();
};
},
resetPagination() {
this.pageSize = 20;
this.totalPages = 1;
this.currentPage = 1;
this.firstPage = 1;
this.scheduleList = [];
},
getPagination(scheduleList = []) {
this.totalPages = Math.ceil(scheduleList.length / this.pageSize);
for (let i = 0; i < scheduleList.length; i++) {
if (scheduleList[i].dateStr == currentDate.toLocaleDateString()) {
if (scheduleList[i].dateStr == toLocaleDateString(currentDate)) {
this.firstPage = Math.floor(i / this.pageSize);
this.currentPage = this.firstPage + 1;
this.currentPage = this.firstPage + 2;
break
}
}
},
getDate: throttle(function (e) {
getData: throttle(function (e) {
getHomeUserSchedule1({
startTime: "2020-01-01 00:00:00",
endTime: "2025-12-30 23:59:59"
}).then(res => {
this.scheduleList = this.getScheduleList(res.data.data)
this.scheduleList = this.getScheduleList(res.data.data);
this.getPagination(this.scheduleList);
// 第一次加载
this.setData({
scheduleList: this.scheduleList.slice(this.firstPage * this.pageSize, this.currentPage * this.pageSize),
todayStr: currentDate.toLocaleDateString(),
loading: false
});
});
}, 1000),
nextDetail: throttle(function (e) {
let item = e.target.dataset.item;
dd.navigateTo({
url: `./../meetingDetail/meetingDetail?scheduleItem=${JSON.stringify(
item
)}`
});
}, 1000),
closePop() {
this.setData({
show: false
});
},
changesidebar() {
this.setData({
show: true
});
},
preventSort() {
return false;
},
//生成DateMap值
setDateMapValue(startTime, endTime, item) {
const pushItem = {
......@@ -103,8 +78,8 @@ create.Page({
confirmAttendance: item.confirmAttendance,
title: item.title,
};
if (DateMap.has(startTime.toLocaleDateString())) {
DateMap.get(startTime.toLocaleDateString()).push(pushItem)
if (DateMap.has(toLocaleDateString(startTime))) {
DateMap.get(toLocaleDateString(startTime)).push(pushItem)
}
// 如果是跨天会议，需要手动在今天以后的其他天 添加会议日程
const nextDateList = getNextDateList(startTime, endTime);
......@@ -174,7 +149,7 @@ create.Page({
}
// 有scheduleTemplateId则是虚拟会议转成实体会议，需要替换rrule生成的会议记录
else if (repeatIdList.includes(item.scheduleTemplateId)) {
const list = DateMap.get(new Date(item.planDate.replace(/-/g, '/')).toLocaleDateString()) || [];
const list = DateMap.get(toLocaleDateString(new Date(item.planDate.replace(/-/g, '/')))) || [];
list.forEach((o, index) => {
if (o.scheduleTemplateId == item.scheduleTemplateId) {
list.splice(index, 1)
......@@ -185,7 +160,6 @@ create.Page({
});
}
},
//日程数据
getScheduleList(response) {
this.setDateMapByResponse(response);
......@@ -232,7 +206,7 @@ create.Page({
value.forEach((item, index) => {
if (index === 0) {
DateList.push({
type: key !== currentDate.toLocaleDateString() ? "day" : 'today',
type: key !== toLocaleDateString(currentDate) ? "day" : 'today',
week: weekList[day],
hasDateLabel: padZero(date),
value: item,
......@@ -246,9 +220,9 @@ create.Page({
});
}
});
} else if (value.length === 0 && key === currentDate.toLocaleDateString()) {
} else if (value.length === 0 && key === toLocaleDateString(currentDate)) {
DateList.push({
type: "thisDay",
type: "thisday",
value: "",
hasDateLabel: padZero(date),
week: weekList[day],
......@@ -258,7 +232,6 @@ create.Page({
});
return DateList;
},
lower() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
......@@ -266,14 +239,21 @@ create.Page({
scheduleList: this.scheduleList.slice(this.firstPage * this.pageSize, this.currentPage * this.pageSize)
});
} else {
//超出加载一年的数据
maxYear++;
this.data.scheduleList.push(...getBlankList(maxYear));
this.scheduleList.push(...getBlankList(maxYear));
this.setData({
scheduleList: this.data.scheduleList
scheduleList: this.scheduleList.slice(this.firstPage * this.pageSize)
})
}
},
onPullDownRefresh() {
//到顶部的时候才下拉加载数据，否则定位距离太长
if (this.scrollTop !== 0) {
dd.stopPullDownRefresh();
return
}
const todayStr = this.data.scheduleList[0].dateStr;
if (this.firstPage > 0) {
this.firstPage--;
this.setData({
......@@ -281,36 +261,166 @@ create.Page({
scheduleList: this.scheduleList.slice(this.firstPage * this.pageSize, this.currentPage * this.pageSize)
}, () => {
this.setData({
todayStr: this.scheduleList[(this.firstPage + 1) * this.pageSize].dateStr
todayStr: todayStr
});
dd.stopPullDownRefresh()
dd.stopPullDownRefresh();
});
} else {
minYear--;
this.data.scheduleList.unshift(...getBlankList(minYear));
const yearData = getBlankList(minYear);
this.scheduleList.unshift(...yearData);
this.setData({
todayStr: '',
scheduleList: this.data.scheduleList
scheduleList: this.scheduleList.slice(0, this.currentPage * this.pageSize),
//加载一年的数据重定位可能会有点问题，重置一下
currentData: todayStr,
currentDataIndex: yearData.length
}, () => {
this.setData({
// 我已经算不清楚了
// todayStr: this.data.scheduleList[(2019 - minYear) * 76].dateStr
todayStr: todayStr
});
dd.stopPullDownRefresh()
})
}
},
//计算高度
caculateHeight(scrollTop) {
let height = 0;
let i = 0;
while (height <= scrollTop) {
if (this.data.scheduleList[i].type.indexOf('day') !== '-1') {
height += this.dateHeight
} else {
height += this.otherHeight
}
i++
}
return i
// for (let i = 0; i < this.data.scheduleList.length; i++) {
// if (this.data.scheduleList[i].type.indexOf('day') !== '-1') {
// height += this.dateHeight
// } else {
// height += this.otherHeight
// }
// if (height >= scrollTop) {
// index = i;
// break;
// }
// }
// return index
},
scroll(e) {
//计算有偏差
// const index = this.caculateHeight(e.detail.scrollTop);
// console.log(index)
// if (this.data.scheduleList[index].dateStr.split('/')[1] !== this.data.currentData.split('/')[1]) {
// console.log('setDate: ' + this.data.scheduleList[index].dateStr)
// this.setData({
// currentData: this.data.scheduleList[index].dateStr
// })
// }
//循环次数过多
// dd.createSelectorQuery().selectAll('.li').boundingClientRect().exec((rect) => {
// for (let i = rect[0].length; i > 0; i--) {
// if (rect[0][i] && rect[0][i].top < 50) {
// if (this.data.scheduleList[i].dateStr.split('/')[1] !== this.data.currentData.split('/')[1]) {
// this.setData({
// currentData: this.data.scheduleList[i].dateStr,
// })
// }
// break;
// }
// }
// })
// 一次性惯性拉到顶速度跟不上，重置
if (e.detail.scrollTop == 0) {
this.setData({
currentData: this.data.scheduleList[0].dateStr,
currentDataIndex: 0
})
}
//每次计算偏移值
const offset = this.getScrollOffset(e.detail.scrollTop);
dd.createSelectorQuery().selectAll('.li').boundingClientRect().exec((rect) => {
if (offset == 'next') {
for (let i = this.data.currentDataIndex; i < rect[0].length; i++) {
if (rect[0][i].top > 0) {
if (this.data.scheduleList[i].dateStr.split('/')[1] !== this.data.currentData.split('/')[1]) {
this.setData({
currentData: this.data.scheduleList[i].dateStr,
currentDataIndex: i
})
}
break;
}
}
}
else if (offset == 'before') {
for (let i = this.data.currentDataIndex; i > 0; i--) {
if (rect[0][i].top < 50) {
if (this.data.scheduleList[i].dateStr.split('/')[1] !== this.data.currentData.split('/')[1]) {
this.setData({
currentData: this.data.scheduleList[i].dateStr,
currentDataIndex: i
})
}
break;
}
}
}
})
},
//判断滚动方向
getScrollOffset(scrollTop) {
let offset = '';
if (scrollTop > this.scrollTop) {
//向下滚动
offset = 'next'
} else {
//向上滚动
offset = 'before'
}
//给scrollTop重新赋值
this.scrollTop = scrollTop;
return offset
},
nextDetail: throttle(function (e) {
let item = e.target.dataset.item;
dd.navigateTo({
url: `./../meetingDetail/meetingDetail?scheduleItem=${JSON.stringify(
item
)}`
});
}, 1000),
closePop() {
this.setData({
show: false
});
},
changesidebar() {
this.setData({
show: true
});
},
preventSort() {
return false;
},
nextPage() {
dd.navigateTo({ url: "./../createMeeting/createMeeting" });
},
locationScheduleList() {
//需要先清空todayStr再设置才有效
this.setData(
{
todayStr: ""
},
() => {
this.setData({
todayStr: currentDate.toLocaleDateString()
todayStr: toLocaleDateString(currentDate)
});
this.$store.data.isLocation = false;
this.update();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment