微信小程序和公众号实现签到页面_javascript技巧_

                   {{cur_year || "--"}} 年 {{cur_month || "--"}} 月                     {{item}}                                                                                                {{days[j+k].date}}                                 {{days[j+k].date}}                                         立即签到   在本月连续签到可获取：           连续签到{{g_data.qd1.RES_NAME_SUB}}天     可得{{g_data.qd1.RES_CODE}}积分           连续签到{{g_data.qd2.RES_NAME_SUB}}天     可得{{g_data.qd2.RES_CODE}}积分           连续签到{{g_data.qd3.RES_NAME_SUB}}天     可得{{g_data.qd3.RES_CODE}}积分           截至目前，你已连续签到      {{count}}   天       

/* pages/Calendar/Calendar.wxss */ /* 打卡日历 */ .all{  margin-top: 20rpx; }   .all .bar{  display: flex;  flex-direction: row;  justify-content: space-between;  margin: 30rpx 20rpx;  padding: 10rpx; }   .all .bar image{  width: 50rpx;  height: 50rpx; }   .all .week{  display: flex;  flex-direction: row;  justify-content: space-between;  padding: 20px;  padding-left: 16px;  padding-right: 29rpx;  margin: 20rpx;  border-radius: 10px;  background-color: #F4A460; }   .all .days{  margin: 20rpx;  padding: 10rpx;  border-radius: 10px;  background-color: #F4A460;   }   .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: 88rpx;  margin: 3rpx;  text-align: center;  border-radius: 50%;  display: flex;  flex-direction: column;  justify-content: center; }   .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: #F4A460;  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; } .count1{  margin: 20rpx;  padding: 30rpx;  display: flex;  text-align: center;  border-radius: 10px;  flex-direction: column;  justify-content: center;  background-color: #F4A460;  align-items: center;  color:#fff; } .reward{   display:flex;   flex-direction: column;   margin-top:60rpx;   height:200rpx;   width:95%;   border:4rpx solid #F4A460;   margin:auto; } .redetail{   background-color:#FFE4B5;   width:29%;   margin-left:20rpx;   height:100rpx; } .lxday{   font-size:30rpx;   color:#D2691E; } .point{   margin-top:23rpx;   font-size:20rpx;   color:#D2691E; } .jsqd{   font-size:25rpx;   margin:25rpx;   color:#D2691E; } .jddetail{   display:flex;   flex-direction: row; }

import { IndexModel } from '../../routemodels/index.js' import { DialogModel } from '../../routemodels/dialog.js' const indexModel = new IndexModel() const dialogModel = new DialogModel() Page({   /**    * 页面的初始数据    */   data: {     objectId: '',     days: [],     year: [],     month:[],     day:[],     cur_year: 0,     cur_month: 0,     count: 0,     g_data:Object,     qdStatus:"",     tsStatus:"",   },   /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {     //获取当前积分签到信息     indexModel.getSignInfo().then(res=>{       if(res!=null){         this.setData({           g_data:res         })       }     })     //this.setData({ objectId: options.objectId });          //获取当前年月      const date = new Date();     const cur_year = date.getFullYear();     const cur_month = date.getMonth() + 1;     const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];     this.calculateEmptyGrids(cur_year, cur_month);     this.calculateDays(cur_year, cur_month);     //获取当前用户当前任务的签到状态     //this.onGetSignUp();     this.setData({       cur_year,       cur_month,       weeks_ch     })     this.getSignUp();   },   /**    * 生命周期函数--监听页面初次渲染完成    */   onReady: function () {   },   /**    * 生命周期函数--监听页面显示    */   onShow: function () {     indexModel.getSignToday().then(res => {       if (res.EXEC == "1") {         this.setData({           qdStatus: "display:none",           tsStatus: "display:block",           count: res.checkday,         })       } else {         this.setData({           qdStatus: "display:block",           tsStatus: "display:none",         })       }     })   },   /**    * 生命周期函数--监听页面隐藏    */   onHide: function () {   },   /**    * 生命周期函数--监听页面卸载    */   onUnload: function () {   },   /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh: function () {   },   /**    * 页面上拉触底事件的处理函数    */   onReachBottom: function () {   },   /**    * 用户点击右上角分享    */   onShareAppMessage: function () {   },   // 获取当月共多少天   getThisMonthDays: function (year, month) {     return new Date(year, month, 0).getDate()   },   // 获取当月第一天星期几   getFirstDayOfWeek: function (year, month) {     return new Date(Date.UTC(year, month - 1, 1)).getDay();   },   // 计算当月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: []       });     }   },   // 绘制当月天数占的格子，并把它放到days数组中   calculateDays: function (year, month) {     var that = this;     const thisMonthDays = this.getThisMonthDays(year, month);     for (let i = 1; i <= thisMonthDays; i++) {       var obj = {         date: i,         isSign: false       }       that.data.days.push(obj);     }     this.setData({       days: that.data.days     });   },   //匹配判断当月与当月哪些日子签到打卡   onJudgeSign: function () {     var that = this;     var signs = that.data.signUp;     var daysArr = that.data.days;     for (var i = 0; i < that.data.day.length; i++) {       var year = that.data.year[i];       var month = that.data.month[i];       var day = that.data.day[i];       day = parseInt(day);       for (var j = 0; j < daysArr.length; j++) {         //年月日相同并且已打卡         if (year == that.data.cur_year && month == that.data.cur_month && daysArr[j].date == day) {           daysArr[j].isSign = true;         }       }     }     that.setData({ days: daysArr });   },   // 切换控制年月，上一个月，下一个月   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.calculateEmptyGrids(newYear, newMonth);       this.calculateDays(newYear, newMonth);       //this.onGetSignUp();              this.setData({         cur_year: newYear,         cur_month: newMonth       })       this.getSignUp();     } else {       let newMonth = cur_month + 1;       let newYear = cur_year;       if (newMonth > 12) {         newYear = cur_year + 1;         newMonth = 1;       }       this.calculateEmptyGrids(newYear, newMonth);       this.calculateDays(newYear, newMonth);       //this.onGetSignUp();              this.setData({         cur_year: newYear,         cur_month: newMonth       })       this.getSignUp();     }   },   //获取当前用户该任务的签到数组   onGetSignUp: function () {     var that = this;     var Task_User = Bmob.Object.extend("task_user");     var q = new Bmob.Query(Task_User);     q.get(that.data.objectId, {       success: function (result) {         that.setData({           signUp: result.get("signUp"),         });         //获取后就判断签到情况         that.onJudgeSign();       },       error: function (object, error) {       }     });   },   getSignUp:function(){     indexModel.getSignUp(this.data.cur_year,this.data.cur_month).then(res=>{       if(res!=null){         var arr1 = [];         var arr2 = [];         var arr3 = [];         for(var i=0;i提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：Vue组件层级关系详细分析_vue.js_
                                                                
下一篇：Vue组件之间的通信方式详细讲解_vue.js_