init
This commit is contained in:
@@ -0,0 +1,344 @@
|
||||
// component/calendar/calendar.js
|
||||
const dayjs = require('dayjs');
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
calendarAllList: {
|
||||
type: Array
|
||||
}
|
||||
// isShow:{
|
||||
// type:Boolean,
|
||||
// value:false
|
||||
// },
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
calendarWeek: ['一', '二', '三', '四', '五', '六', '日'],
|
||||
currentTime: '',
|
||||
nowYear: '',
|
||||
nowMonth: '',
|
||||
swiperHeight: '',
|
||||
calendarPageIndex: 1,
|
||||
selectedIndex: '',
|
||||
isShow: false //是否展开
|
||||
},
|
||||
lifetimes: {
|
||||
attached: function () {
|
||||
//在组件实例进入页面节点树时执行
|
||||
this.setData({
|
||||
currentTime: `${new Date().getFullYear()}/${
|
||||
new Date().getMonth() + 1
|
||||
}/${new Date().getDate()}`,
|
||||
nowYear: new Date().getFullYear(),
|
||||
nowMonth:
|
||||
new Date().getMonth() + 1 > 9
|
||||
? new Date().getMonth() + 1
|
||||
: '0' + (new Date().getMonth() + 1)
|
||||
});
|
||||
this.getMonthDate();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
setSwiperHeight() {
|
||||
// swiper高度
|
||||
const query = wx.createSelectorQuery().in(this);
|
||||
if (this.data.isShow) {
|
||||
query
|
||||
.select('.currentBox')
|
||||
.boundingClientRect(res => {
|
||||
this.setData({
|
||||
swiperHeight: res.height
|
||||
});
|
||||
})
|
||||
.exec();
|
||||
}
|
||||
},
|
||||
changeSwiper(e) {
|
||||
let index = this.data.calendarPageIndex;
|
||||
const diff = e.detail.current - index;
|
||||
if (diff == 1 || diff == -2) {
|
||||
// 向右边滑动，显示swiper左边内容
|
||||
this.nextMonth();
|
||||
} else if (diff == -1 || diff == 2) {
|
||||
// 向左边滑动 显示swiper右边内容
|
||||
this.prevMonth();
|
||||
}
|
||||
},
|
||||
transitionStop(e) {
|
||||
//更新轮播图当前index
|
||||
this.setData({
|
||||
calendarPageIndex: e.detail.current
|
||||
});
|
||||
this.setSwiperHeight();
|
||||
},
|
||||
prevMonth() {
|
||||
//上一个月
|
||||
if (!this.data.isShow) {
|
||||
//收起时切换上下月有问题所以做了限制
|
||||
return;
|
||||
}
|
||||
const index = this.data.calendarPageIndex;
|
||||
let pre = index == 0 ? 2 : index - 1;
|
||||
this.setData({
|
||||
calendarPageIndex: pre
|
||||
});
|
||||
let year = new Date(this.data.currentTime).getFullYear();
|
||||
let month = new Date(this.data.currentTime).getMonth() - 1;
|
||||
if (month < 0) {
|
||||
month = 11;
|
||||
year--;
|
||||
}
|
||||
this.initDate(new Date(year, month, 1));
|
||||
this.getMonthDate();
|
||||
},
|
||||
nextMonth() {
|
||||
//下一个月
|
||||
if (!this.data.isShow) {
|
||||
return;
|
||||
}
|
||||
const index = this.data.calendarPageIndex;
|
||||
let next = index == 2 ? 0 : index + 1;
|
||||
this.setData({
|
||||
calendarPageIndex: next
|
||||
});
|
||||
let year = new Date(this.data.currentTime).getFullYear();
|
||||
let month = new Date(this.data.currentTime).getMonth() + 1;
|
||||
if (month > 11) {
|
||||
month = 0;
|
||||
year++;
|
||||
}
|
||||
this.initDate(new Date(year, month, 1));
|
||||
this.getMonthDate();
|
||||
},
|
||||
initDate(date = new Date()) {
|
||||
//初始化日期
|
||||
const year = date.getFullYear();
|
||||
const month =
|
||||
date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
||||
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
||||
const currentDate = year + '/' + month + '/' + day;
|
||||
this.setData({
|
||||
currentTime: currentDate,
|
||||
nowYear: year,
|
||||
nowMonth: month
|
||||
});
|
||||
},
|
||||
getMonthDate() {
|
||||
let showMonthList = this.getShowMonthList();
|
||||
const calendarAllList = [];
|
||||
showMonthList.forEach(item => {
|
||||
calendarAllList.push(this.getAllMonthDay(item));
|
||||
});
|
||||
let allList = [];
|
||||
const index = this.data.calendarPageIndex;
|
||||
if (index == 1) {
|
||||
allList = [calendarAllList[0], calendarAllList[1], calendarAllList[2]];
|
||||
} else if (index == 2) {
|
||||
allList = [calendarAllList[2], calendarAllList[0], calendarAllList[1]];
|
||||
} else if (index == 0) {
|
||||
allList = [calendarAllList[1], calendarAllList[2], calendarAllList[0]];
|
||||
}
|
||||
this.setData({
|
||||
calendarAllList: allList
|
||||
});
|
||||
if (!this.data.selectedIndex) {
|
||||
//初始化才进
|
||||
let day = new Date().getDate();
|
||||
let index = allList[1].list.findIndex(
|
||||
x => x.day == day && (!x.isLastMon || !x.isNextMon)
|
||||
);
|
||||
this.setData({
|
||||
selectedIndex: index,
|
||||
selectDate: allList[1].month,
|
||||
currentSelectDate: allList[1].month + '-' + allList[1].list[index].day
|
||||
});
|
||||
}
|
||||
this.setSwiperHeight();
|
||||
if (!this.data.isShow) {
|
||||
this.getCurrentWeek();
|
||||
}
|
||||
let params = {
|
||||
date: this.data.nowYear + '-' + this.data.nowMonth,
|
||||
calendarAllList: this.data.calendarAllList,
|
||||
isShow: this.data.isShow
|
||||
};
|
||||
this.triggerEvent('selectMonth', params);
|
||||
},
|
||||
getAllMonthDay(time) {
|
||||
//获取每月的每一天
|
||||
const timeArr = time.split('-');
|
||||
let dayLenth = new Date(timeArr[0], timeArr[1], 0).getDate();
|
||||
let dayList = [];
|
||||
for (let i = 0; i < dayLenth; i++) {
|
||||
dayList.push({
|
||||
day: i + 1,
|
||||
// timestamp: new Date(`${timeArr[0]}-${Number(timeArr[1])}-${i+1}`).getTime(),
|
||||
week: new Date(timeArr[0], timeArr[1] * 1 - 1, i + 1).getDay(),
|
||||
date: dayjs(timeArr[0] + '-' + timeArr[1] + '-' + (i + 1)).format(
|
||||
'YYYY-M-D'
|
||||
),
|
||||
isClock: 0
|
||||
});
|
||||
}
|
||||
|
||||
for (let j = 0; j < 7; j++) {
|
||||
if (dayList[0].week != 1) {
|
||||
// 补全月首日期
|
||||
let month = Number(timeArr[1]) - 1 == 0 ? 12 : Number(timeArr[1]) - 1;
|
||||
let year =
|
||||
Number(timeArr[1]) - 1 == 0 ? Number(timeArr[0]) - 1 : timeArr[0];
|
||||
const lastMonthDay = new Date(
|
||||
timeArr[0],
|
||||
Number(timeArr[1]) - 1,
|
||||
0
|
||||
).getDate();
|
||||
const day = {
|
||||
day: lastMonthDay - j,
|
||||
// timestamp: new Date(`${year}-${month}-${lastMonthDay - j}`).getDay(),
|
||||
week: new Date(year, month - 1, lastMonthDay - j).getDay(),
|
||||
isLastMon: true,
|
||||
date: dayjs(year + '-' + month + '-' + (lastMonthDay - j)).format(
|
||||
'YYYY-M-D'
|
||||
)
|
||||
};
|
||||
dayList.unshift(day);
|
||||
}
|
||||
if (dayList[dayList.length - 1].week != 0) {
|
||||
// 补全末位 下月日期
|
||||
let month = Number(timeArr[1]) + 1 > 12 ? 1 : Number(timeArr[1]) + 1;
|
||||
let year =
|
||||
Number(timeArr[1]) + 1 > 12 ? Number(timeArr[0]) + 1 : timeArr[0];
|
||||
const day = {
|
||||
day: j + 1,
|
||||
// timestamp: new Date(`${year}-${month}-${j + 1}`).getTime(),
|
||||
week: new Date(year, month - 1, j + 1).getDay(),
|
||||
date: dayjs(year + '-' + month + '-' + (j + 1)).format('YYYY-M-D'),
|
||||
isNextMon: true
|
||||
};
|
||||
dayList.push(day);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
month: `${timeArr[0]}-${Number(timeArr[1])}`,
|
||||
list: dayList
|
||||
};
|
||||
},
|
||||
getShowMonthList() {
|
||||
//获取前后三个月的月份
|
||||
const timeArr = this.data.currentTime.split('/');
|
||||
let searchMonthList = [`${timeArr[0]}-${timeArr[1]}`];
|
||||
if (Number(timeArr[1]) > 1 && Number(timeArr[1]) < 12) {
|
||||
const preMonth = Number(timeArr[1]) - 1;
|
||||
const nextMonth = Number(timeArr[1]) + 1;
|
||||
searchMonthList = [
|
||||
`${timeArr[0]}-${preMonth}`,
|
||||
searchMonthList[0],
|
||||
`${timeArr[0]}-${nextMonth}`
|
||||
];
|
||||
} else if (Number(timeArr[1]) == 1) {
|
||||
const preYear = Number(timeArr[0]) - 1;
|
||||
searchMonthList = [
|
||||
`${preYear}-12`,
|
||||
searchMonthList[0],
|
||||
`${timeArr[0]}-02`
|
||||
];
|
||||
} else if (Number(timeArr[1]) == 12) {
|
||||
const nextYear = Number(timeArr[0]) + 1;
|
||||
searchMonthList = [
|
||||
`${timeArr[0]}-11`,
|
||||
searchMonthList[0],
|
||||
`${nextYear}-01`
|
||||
];
|
||||
}
|
||||
return searchMonthList;
|
||||
},
|
||||
selectWeekDay(e) {
|
||||
let item = e.currentTarget.dataset.item;
|
||||
if (item.isLastMon || item.isNextMon) {
|
||||
return false;
|
||||
}
|
||||
this.setData({
|
||||
currentSelectDate: item.date
|
||||
});
|
||||
this.triggerEvent('getSelectDate', this.data.currentSelectDate);
|
||||
},
|
||||
selectDay(e) {
|
||||
//选择日期
|
||||
let { arr_item, item, index } = e.currentTarget.dataset;
|
||||
if (item.isLastMon || item.isNextMon || !this.data.isShow) {
|
||||
return false;
|
||||
}
|
||||
this.setData({
|
||||
selectedIndex: index,
|
||||
selectDate: arr_item.month
|
||||
});
|
||||
let currentSelectDate = arr_item.month + '-' + arr_item.list[index].day;
|
||||
this.setData({
|
||||
currentSelectDate
|
||||
});
|
||||
this.triggerEvent('getSelectDate', currentSelectDate);
|
||||
},
|
||||
changeShowStatus() {
|
||||
this.setData({
|
||||
isShow: !this.data.isShow
|
||||
});
|
||||
this.setData({
|
||||
currentTime: dayjs(this.data.currentSelectDate).format('YYYY/M/D')
|
||||
});
|
||||
this.getMonthDate();
|
||||
this.setSwiperHeight();
|
||||
},
|
||||
getCurrentWeek() {
|
||||
//初始化选择项的这一周
|
||||
let list = [];
|
||||
let currentMonth = dayjs(this.data.currentSelectDate).format('YYYY-M');
|
||||
let item = this.data.calendarAllList.filter(
|
||||
x => x.month === currentMonth
|
||||
)[0];
|
||||
item.list.map(x => (x.date = dayjs(x.date).format('YYYY-MM-DD')));
|
||||
let weekOfDay = dayjs(this.data.currentSelectDate).format('d'); //计算今天是这周第几天
|
||||
for (let i = 1; i < 8; i++) {
|
||||
let dayTime;
|
||||
if (weekOfDay == 0) {
|
||||
dayTime = dayjs(this.data.currentSelectDate).subtract(7 - i, 'days');
|
||||
} else {
|
||||
if (i == 7) {
|
||||
dayTime = dayjs(this.data.currentSelectDate).add(
|
||||
i - weekOfDay,
|
||||
'days'
|
||||
);
|
||||
} else {
|
||||
dayTime = dayjs(this.data.currentSelectDate).subtract(
|
||||
weekOfDay - i,
|
||||
'days'
|
||||
);
|
||||
}
|
||||
}
|
||||
let obj = {
|
||||
day: dayTime.format('D'),
|
||||
date: dayTime.format('YYYY-M-D'),
|
||||
isNextMon: dayTime.format('YYYY-M') > currentMonth ? true : false,
|
||||
isLastMon: dayTime.format('YYYY-M') < currentMonth ? true : false,
|
||||
isClock: item.list.filter(
|
||||
x => x.date == dayTime.format('YYYY-MM-DD')
|
||||
)[0].isClock
|
||||
};
|
||||
list.push(obj);
|
||||
}
|
||||
this.setData({
|
||||
nowYear: dayjs(this.data.currentSelectDate).format('YYYY'),
|
||||
nowMonth: dayjs(this.data.currentSelectDate).format('MM'),
|
||||
showFalseList: list
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
<!--component/calendar/calendar.wxml-->
|
||||
|
||||
|
||||
<view class="main">
|
||||
<view class="current-time">
|
||||
<view class="pre" bindtap="prevMonth">＜</view>
|
||||
<view class="time">{{nowYear}}-{{nowMonth}}</view>
|
||||
<view class="next" bindtap="nextMonth">＞</view>
|
||||
</view>
|
||||
<view class="calendar-week">
|
||||
<view class="weekday" wx:for="{{ calendarWeek }}" wx:key="index" data-item='{{item}}'>{{item}}</view>
|
||||
</view>
|
||||
<!-- wx:if="{{isShow}}" -->
|
||||
<view style="position:relative;" wx:if="{{isShow}}">
|
||||
<swiper style="height:{{isShow?(swiperHeight+5)+'px':'95rpx'}};" current="{{calendarPageIndex}}" circular="{{true}}" bindchange="changeSwiper" bindanimationfinish="transitionStop" >
|
||||
<block wx:for="{{calendarAllList}}" wx:for-item="arrItem" wx:for-index="arrIndex" wx:key="arrIndex">
|
||||
<swiper-item class="swiper-item">
|
||||
<view class="day-box {{calendarPageIndex==arrIndex?'currentBox':''}}">
|
||||
<!-- item.week == 6 || item.week == 0 -->
|
||||
<block wx:for="{{arrItem.list}}" wx:key="index">
|
||||
<view catchtap="selectDay" data-arr_item="{{arrItem}}" data-item="{{item}}" data-index="{{index}}" class="day-item {{ item.isLastMon || item.isNextMon ? 'disable':''}}" >
|
||||
<view class="{{currentSelectDate===item.date?'select_on':''}}">{{ item.isNow?'今天': item.day }}</view>
|
||||
<view class="{{item.isClock==1?'clockTrue':(item.isLastMon || item.isNextMon || item.isClock==0 ?'':'clockFalse')}}"></view>
|
||||
<!-- <view class="{{item.isClock==1?'clockTrue':(item.isClock==2?'':(item.isLastMon || item.isNextMon?'':'clockFalse'))}}"></view> -->
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- -->
|
||||
<view wx:else style="height:95rpx">
|
||||
<view class="day-box">
|
||||
<block wx:for="{{showFalseList}}" wx:key="index">
|
||||
<view class="day-item {{ item.isLastMon || item.isNextMon ? 'disable':''}}" >
|
||||
<view catchtap="selectWeekDay" data-item="{{item}}" class="{{currentSelectDate===item.date?'select_on':''}}">{{ item.isNow?'今天': item.day }}</view>
|
||||
<view class="{{item.isClock==1?'clockTrue':(item.isLastMon || item.isNextMon || item.isClock==0 ?'':'clockFalse')}}"></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="splitLine">
|
||||
<view class="toShowBtn" wx:if="{{!isShow}}" catchtap="changeShowStatus">
|
||||
<view class="bottom-arrow1"></view>
|
||||
<view class="bottom-arrow2"></view>
|
||||
</view>
|
||||
<view class="toShowBtn toHideBtn" wx:else catchtap="changeShowStatus">
|
||||
<view class="bottom-arrow1"></view>
|
||||
<view class="bottom-arrow2"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 40rpx;" catchtap="changeShowStatus"></view>
|
||||
</view>
|
||||
@@ -0,0 +1,125 @@
|
||||
/* component/calendar/calendar.wxss */
|
||||
.calendar-week{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
color:#939191;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.main{
|
||||
/* padding: 0rpx 24rpx; */
|
||||
}
|
||||
.day-box {
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.day-item{
|
||||
position: relative;
|
||||
line-height: 85rpx;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.clockTrue,.clockFalse{
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #7CD47B;
|
||||
bottom: 6rpx;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.clockFalse{
|
||||
background-color: red;
|
||||
}
|
||||
.day-item.disable {
|
||||
color: #999999;
|
||||
}
|
||||
.current-time{
|
||||
padding: 6px 16px;
|
||||
background: #F8F8F8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
.pre, .next{
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
background: #EAEAEA;
|
||||
border-radius: 4rpx;
|
||||
color: #666666;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.time{
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
/* padding: 0 50rpx; */
|
||||
}
|
||||
.select_on{
|
||||
width: 85rpx;
|
||||
height: 85rpx;
|
||||
line-height: 85rpx;
|
||||
border-radius: 50%;
|
||||
background: #3D7EEA;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.splitLine{
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
/* background: #EAEAEA; */
|
||||
position: relative;
|
||||
}
|
||||
.toShowBtn{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.toHideBtn {
|
||||
top: 8rpx;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.bottom-arrow1,.bottom-arrow2{
|
||||
width:0;
|
||||
height:0;
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
z-index: 5;/*兼容ie8-*/
|
||||
border-bottom:0 transparent dashed;
|
||||
border-left:16rpx transparent dashed;
|
||||
border-right:16rpx transparent dashed;
|
||||
/* border-top:16rpx white solid; */
|
||||
overflow:hidden;
|
||||
}
|
||||
.bottom-arrow1{
|
||||
top:8rpx;/*重要*/
|
||||
border-top:16rpx #707070 solid;
|
||||
}
|
||||
.bottom-arrow2{
|
||||
border-top:16rpx #ffffff solid;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-icon": "@vant/weapp/icon/index",
|
||||
"calendar":"./component/calendar/calendar"
|
||||
},
|
||||
"navigationBarTitleText": "打卡记录"
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
.calendar-container {
|
||||
min-height: 138px;
|
||||
background: #ffffff;
|
||||
.top {
|
||||
padding: 12px 8px;
|
||||
margin-bottom: 4px;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.th {
|
||||
width: calc(100% / 7);
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.week {
|
||||
padding: 0px 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.td {
|
||||
width: calc(100% / 7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
.date-box {
|
||||
width: 100%;
|
||||
padding: calc(50% - 10.5px) 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
.val {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
.isSignIn {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #7CD47B;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.select {
|
||||
background: linear-gradient(90deg, #3B7CFC 0%, #548BFC 100%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-show {
|
||||
height: 44px;
|
||||
padding: 6px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
.btn {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
>.date {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background: #EBEFF6;
|
||||
color: #2E3A4F;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.record-list {
|
||||
min-height: calc(100vh - 36px -138px);
|
||||
background: #fff;
|
||||
.record-item {
|
||||
width: calc(100% - 42px);
|
||||
min-height: 94px;
|
||||
margin-left: 12px;
|
||||
padding: 6px 15px;
|
||||
color: #2E3A4F;
|
||||
position: relative;
|
||||
// display: flex;
|
||||
// justify-content: flex-end;
|
||||
.r-left {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 0;
|
||||
.step {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: linear-gradient(90deg, #3B7CFC 0%, #548BFC 100%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.line {
|
||||
width: 2px;
|
||||
height: 84%;
|
||||
margin: 5px auto 0;
|
||||
background: #B5CEFF;
|
||||
}
|
||||
}
|
||||
.r-inf {
|
||||
margin-left: 12px;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
.date {
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
.status {
|
||||
padding: 0 4px;
|
||||
margin-right: 8px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.status-in {
|
||||
background: linear-gradient(to right, #3B7CFC , #548BFC);
|
||||
}
|
||||
.status-out {
|
||||
background: linear-gradient(to right, #16DBB4 , #16DBB4);
|
||||
}
|
||||
.time {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.inf-row {
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 4px 4px 4px 0;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.val {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-data {
|
||||
padding: 76px 0;
|
||||
image {
|
||||
width: 74vw;
|
||||
height: 37vw;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.tips {
|
||||
margin: 4px auto;
|
||||
color: #374256;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
// index.ts
|
||||
// 获取应用实例
|
||||
const app = getApp<IAppOption>();
|
||||
import { getAction, postAction } from '../../../../api/base';
|
||||
|
||||
// import { Dayjs } from 'dayjs/index';
|
||||
const dayjs = require('dayjs');
|
||||
Page({
|
||||
data: {
|
||||
calendarAllList: [],
|
||||
recordListAll: [],
|
||||
recordList: [],
|
||||
show: false,
|
||||
selectDate: '' as any,
|
||||
selectDateString: '' as any
|
||||
},
|
||||
getSelectDate(e: any) {
|
||||
//用户点击日期项
|
||||
let status;
|
||||
if (dayjs(e.detail).format('YYYY-MM-DD') === dayjs().format('YYYY-MM-DD')) {
|
||||
//是否为当天的时间
|
||||
status = true;
|
||||
} else {
|
||||
status = false;
|
||||
}
|
||||
let day = '';
|
||||
switch (dayjs(e.detail).day()) {
|
||||
case 0:
|
||||
day = '日';
|
||||
break;
|
||||
case 1:
|
||||
day = '一';
|
||||
break;
|
||||
case 2:
|
||||
day = '二';
|
||||
break;
|
||||
case 3:
|
||||
day = '三';
|
||||
break;
|
||||
case 4:
|
||||
day = '四';
|
||||
break;
|
||||
case 5:
|
||||
day = '五';
|
||||
break;
|
||||
case 6:
|
||||
day = '六';
|
||||
break;
|
||||
}
|
||||
|
||||
let recordList = [] as any;
|
||||
this.data.recordListAll.map((x: any) => {
|
||||
console.log(dayjs(e.detail).format('YYYY-MM-DD'), x.signInDate);
|
||||
console.log(dayjs(e.detail).format('YYYY-MM-DD') === x.signInDate);
|
||||
if (dayjs(e.detail).format('YYYY-MM-DD') === x.signInDate) {
|
||||
recordList.push(x);
|
||||
}
|
||||
});
|
||||
this.setData({
|
||||
selectDate: dayjs(e.detail).format('YYYY-MM-DD'),
|
||||
selectDateString: dayjs(e.detail).format('MM月DD日 周') + day,
|
||||
recordList: recordList
|
||||
});
|
||||
this.getCheckStatus(dayjs(e.detail).format('YYYY-MM-DD'));
|
||||
},
|
||||
onDisplay() {
|
||||
this.setData({ show: true });
|
||||
},
|
||||
onClose() {
|
||||
this.setData({ show: false });
|
||||
},
|
||||
selectMonth(e: any) {
|
||||
//用户切换月份
|
||||
console.log(e);
|
||||
let { date, calendarAllList, isShow } = e.detail;
|
||||
this.getMonthCheckRecord(date, calendarAllList, isShow);
|
||||
},
|
||||
getMonthCheckRecord(
|
||||
month: number | string,
|
||||
calendarAllList: any,
|
||||
isShow: boolean
|
||||
) {
|
||||
let parms = {
|
||||
month: month
|
||||
};
|
||||
getAction('api/driverSignIn/monthList', parms).then((res: any) => {
|
||||
let result: any = res.result;
|
||||
let findIndex = calendarAllList.findIndex(
|
||||
(x: any) => dayjs(x.month).format('YYYY-MM') === month
|
||||
);
|
||||
calendarAllList[findIndex].list.forEach((dateItem: any) => {
|
||||
//isClock 0不显示红点或蓝点 1签到展示红点 2未签到展示红点
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
if (
|
||||
result[i].signInDate === dayjs(dateItem.date).format('YYYY-MM-DD')
|
||||
) {
|
||||
dateItem.isClock = 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log(calendarAllList);
|
||||
this.setData({
|
||||
calendarAllList
|
||||
});
|
||||
|
||||
if (!isShow) {
|
||||
this.selectComponent('#selectDate').getCurrentWeek();
|
||||
}
|
||||
});
|
||||
},
|
||||
getCheckStatus(date: string) {
|
||||
let parms = {
|
||||
signInDate: date
|
||||
};
|
||||
getAction('api/driverSignIn/list', parms).then((res: any) => {
|
||||
if (res.code == 200) {
|
||||
res.result.map((x: any) => {
|
||||
x.signInTime = x.signInTime.split(' ')[1];
|
||||
});
|
||||
let recordList = [] as any;
|
||||
console.log(123);
|
||||
res.result.map((x: any) => {
|
||||
console.log(x);
|
||||
if (
|
||||
dayjs(this.data.selectDate).format('YYYY-MM-DD') === x.signInDate
|
||||
) {
|
||||
console.log(123);
|
||||
recordList.push(x);
|
||||
}
|
||||
});
|
||||
this.setData({
|
||||
recordListAll: res.result,
|
||||
recordList: recordList
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: res.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 防止切后台后拿不到数据，所以重新初始化
|
||||
this.selectComponent('#selectDate').data.selectedIndex = '';
|
||||
this.selectComponent('#selectDate').initDate();
|
||||
this.selectComponent('#selectDate').getMonthDate();
|
||||
// this.getSelectDate({ detail: new Date() });
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
Promise.all([this.getSelectDate({ detail: new Date() })]).then(() => {
|
||||
// this.selectComponent('#selectDate').data.selectedIndex = '';
|
||||
// this.selectComponent('#selectDate').initDate();
|
||||
// this.selectComponent('#selectDate').getMonthDate();
|
||||
this.getCheckStatus(dayjs(new Date()).format('YYYY-MM-DD'));
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {}
|
||||
});
|
||||
@@ -0,0 +1,44 @@
|
||||
<!-- signInFeedback.wxml -->
|
||||
<view class="container">
|
||||
<view class="calendar-container">
|
||||
<calendar bind:getSelectDate="getSelectDate" bind:getCurrentWeek="getCurrentWeek" bind:selectMonth="selectMonth" calendarAllList="{{calendarAllList}}" id="selectDate"></calendar>
|
||||
</view>
|
||||
<view class="date">{{selectDateString}}</view>
|
||||
<view class="record-list">
|
||||
<view class="record-item" wx:for="{{ recordList }}" wx:key="index">
|
||||
<view class="r-left">
|
||||
<view class="step"></view>
|
||||
<view class="line" wx:if="{{index < recordList.length - 1}}"></view>
|
||||
</view>
|
||||
<view class="r-inf">
|
||||
<view class="date">
|
||||
<view class="status status-in" wx:if="{{ item.signInType == '1' }}">签到</view>
|
||||
<view class="status status-out" wx:else>签退</view>
|
||||
<view class="time">{{ item.signInTime }}</view>
|
||||
</view>
|
||||
<view class="inf-row">
|
||||
<view class="icon">
|
||||
<image src="../../../../images/icon_project.png" mode=""/>
|
||||
</view>
|
||||
<view class="val">{{ item.projectName ? item.projectName : '-' }}</view>
|
||||
</view>
|
||||
<view class="inf-row">
|
||||
<view class="icon">
|
||||
<image src="../../../../images/icon_platenumber.png" mode=""/>
|
||||
</view>
|
||||
<view class="val">{{ item.plateNumber ? item.plateNumber : '-' }}</view>
|
||||
</view>
|
||||
<view class="inf-row">
|
||||
<view class="icon">
|
||||
<image src="../../../../images/icon_address.png" mode=""/>
|
||||
</view>
|
||||
<view class="val">{{ item.signInAddress ? item.signInAddress : '-' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="no-data" wx:if="{{recordList.length == 0}}">
|
||||
<image src="../../../../images/nodata_signin.png" mode=""/>
|
||||
<view class="tips">该日期无打卡记录</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user