微信小程序日历微信小程序签到积分

时间:2019-11-27 16:40:00    来源:易博网络    作者:易博网络定制开发    浏览:115

0.png


微信小程序开发该示例为纯手写代码,暂无插件,不多说直接上代码

我们的实现思路:

JS部分

1、获取当前年月

const date = new Date();
cur_year = date.getFullYear();
cur_month = date.getMonth() + 1;
const weeks_ch = [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’];
this.setData({
cur_year,
cur_month,
weeks_ch,
})


2、获取当月共多少天

getThisMonthDays: function (year, month) {
return new Date(year, month, 0).getDate()
},


3、获取当月第一天星期几

getFirstDayOfWeek: function (year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
},


4、计算当月1号前空了几个格子,把它填充在days数组的前面

calculateEmptyGrids: function (year, month) {
var that = this;
//计算每个月时要清零
that.setData({ days: [] });
const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
if (firstDayOfWeek > 0) {
for (let i = 0; i < firstDayOfWeek; i++) {
var obj = {
date: null,
isSign: false
}
that.data.days.push(obj);
}
this.setData({
days: that.data.days
});
//清空
} else {
this.setData({
days: []
});
}
},


5、绘制当月天数占的格子,并把它放到days数组中

calculateDays: function (year, month, sign) {
var that = this;
var isSign;
const thisMonthDays = this.getThisMonthDays(year, month);
for (var i = 1; i <= thisMonthDays; i++) {
var obj = {
date: i,
isSign: ‘’
}
for (var j = 0; j < sign.length; j++) {
if (i == parseInt(sign[j].create_time.substr(8, 2))) {
obj.isSign = true;
break;
}
}
that.data.days.push(obj);
}
this.setData({
days: that.data.days
});
},


6、切换控制年月,上一个月,下一个月

handleCalendar: function (e) {
const handle = e.currentTarget.dataset.handle;
const cur_year = this.data.cur_year;
const cur_month = this.data.cur_month;
if (handle === ‘prev’) {
let newMonth = cur_month - 1;
let newYear = cur_year;
if (newMonth < 1) {
newYear = cur_year - 1;
newMonth = 12;
}
this.signRecord(newYear, newMonth);
this.setData({
cur_year: newYear,
cur_month: newMonth,
imgType: ‘cnext.png’
})
} else {
if (cur_month + 1 > month) {
this.setData({
imgType: ‘next.png’
})
} else {
let newMonth = cur_month + 1;
let newYear = cur_year;
if (newMonth > 12) {
newYear = cur_year + 1;
newMonth = 1;
}
this.signRecord(newYear, newMonth);
if (cur_month + 1 == month) {
this.setData({
cur_year: newYear,
cur_month: newMonth,
imgType: ‘next.png’
})
} else {
this.setData({
cur_year: newYear,
cur_month: newMonth,
imgType: ‘cnext.png’
})
}
}
}
},



wxml部分:

<view class=‘all’>
<view class=“bar”>
<!-- 上一个月 -->
<view class=“previous” bindtap=“handleCalendar” data-handle=“prev”>
<image src=‘https://www.***.com/weChatImg/pre.png’></image>
</view>
<!-- 显示年月 -->
<view class=“date”>{{cur_year || “–”}} / {{filter.fill(cur_month) || “–”}}</view>
<!-- 下一个月 -->
<view class=“next” bindtap=“handleCalendar” data-handle=“next”>
<image src=‘https://www.***.com/weChatImg/{{imgType}}’></image>
</view>
</view>
<view class=‘xxian’>
<image src=‘weChatImg/huan.png’></image>
<image src=‘weChatImg/huan.png’></image>
</view>
<!-- 显示星期 -->
<view class=“week”>
<view wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
</view>
<view class=‘days’>
<!-- 列 -->
<view class=“columns” wx:for="{{days.length/7}}" wx:for-index=“i” wx:key=“i”>
<view wx:for="{{days}}" wx:for-index=“j” wx:key=“j”>
<!-- 行 -->
<view class=“rows” wx:if="{{j/7 == i}}">
<view class=“rows” wx:for="{{7}}" wx:for-index=“k” wx:key=“k”>
<!-- 每个月份的空的单元格 -->
<view class=‘cell’ wx:if="{{days[j+k].date == null}}">
<text decode="{{true}}">  </text>
</view>
<!-- 每个月份的有数字的单元格 -->
<view class=‘cell’ wx:else>
<!-- 当前日期已签到 -->
<view wx:if="{{days[j+k].isSign == true}}" style=‘color:#acacac’ class=‘cell’>
{{days[j+k].date}}
<image src=‘https://www.***.com/weChatImg/sgin.png’></image>
</view>
<!-- 当前日期未签到 -->
<view wx:else>
<text>{{days[j+k].date}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>


wxss部分

@import "../../utils/font.wxss";

.head {
height: 320rpx;
background: linear-gradient(#fb5050, #fe7258);
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-direction: row;
color: #fff;
}

.head view {
width: 160rpx;
margin: 60rpx 0;
font-size: 60rpx;
text-align: center;
}

.head view span {
display: block;
font-size: 28rpx;
margin-top: 10rpx;
}

/* 打卡日历 */

.all {
width: 690rpx;
background: #fff;
z-index: 999;
margin: -50rpx auto 0;
border-radius: 30rpx;
padding-bottom: 20rpx;
}

.all .bar {
display: flex;
flex-direction: row;
justify-content: center;
height: 88rpx;
background: #fdf8f7;
border-radius: 30rpx 30rpx 0 0;
}

.all .bar view {
display: flex;
align-items: center;
flex-direction: row;
}

.all .bar image {
width: 16rpx;
height: 18rpx;
}

.all .bar .date {
margin: 0 47rpx;
color: 36rpx;
}

.xxian {
border-bottom: 1rpx solid #f0f1f6;
width: 632rpx;
margin: -35rpx auto 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 76rpx;
}

.xxian image {
width: 17rpx;
height: 32rpx;
}

.xxian image:first-child {
margin-left: 95rpx;
}

.xxian image:last-child {
margin-right: 95rpx;
}

.all .week {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 632rpx;
margin: 30rpx auto 0;
font-size: 26rpx;
}

.all .week view {
width: 84rpx;
text-align: center;
}

.all .days {
width: 632rpx;
margin: 20rpx auto 0;
}

.all .columns {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.all .columns .rows {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.all .columns .rows .cell {
width: 84rpx;
height: 75rpx;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}

.all .columns .rows .cell image {
width: 56rpx;
height: 51rpx;
position: absolute;
left: 10rpx;
}

.count .daynumber {
display: flex;
flex-direction: row;
justify-content: center;
}

.count .daynumber .day {
margin-top: 50rpx;
}

.count {
margin: 20rpx;
padding: 30rpx;
display: flex;
text-align: center;
border-radius: 10px;
flex-direction: column;
justify-content: center;
background-color: #acd;
align-items: center;
}

.count .number {
color: red;
font-size: 60rpx;
background-color: #fff;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 20rpx;
}

.count text {
margin: 10rpx;
}

.btn {
position: fixed;
width: 100%;
background: #f0f1f6;
}

.btn button {
background: linear-gradient(#fe7258, #fb5050);
color: white;
font-size: 32rpx;
}

.btn .active {
background: #afafaf;
}

.rules {
width: 690rpx;
margin: 30rpx auto 0;
color: #666;
font-size: 24rpx;
padding-bottom: 150rpx;
}

.rules .title {
color: #ff3a3a;
}

.rules .content {
line-height: 48rpx;
}

.sginSuccess {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.35);
position: fixed;
top: 0;
display: flex;
justify-content: center;
}

.sginSuccess .content {
width: 618rpx;
height: 507rpx;
background: url(https://www.ls-mx.com/weChatImg/sginSuccess.png) center center;
background-size: cover;
position: relative;
}

.close {
width: 54rpx;
height: 54rpx;
position: absolute;
top: 0;
right: 0;
z-index: 999;
}

.sginSuccess .content .texts {
color: #ff3a3a;
font-size: 28rpx;
text-align: center;
margin-top: 300rpx;
}

.sginSuccess .content .texts span {
display: block;
margin-top: 15rpx;
}

.sginSuccess .content .reward {
color: #8d8c8c;
font-size: 24rpx;
text-align: center;
margin-top: 40rpx;
}

相信大家通过以上思路,再结合自己的需求应该可以自己做出符合自己心目中的日历插件或者签到

本文Tags:
 

Copyright © 2011-2019.ebo168 易博网络 All rights reserved. 蜀ICP备20010023号-1