小程序签到完整云开发实例

云开发数据集合中增加以下字段

{
    calendarSignData: [],//当月签到的每天
    signcount: '',//总计签到加1
    signdata: '',//当天日期 
    calendarSignDay: '',//当月签到次数
    signmonth: ''//当月签到次数
  }

完整实例

qiandao.wxss

.gs_banner{
  margin-top:2rpx;
}
.gs_banner image{
    width:750rpx;
    height:256rpx;
    vertical-align: top;
}
/**index.wxss**/
.t_red{
    color: red;
  }
  .t_blue{
    color: royalblue;
  }
  .calendar{
  
    margin: 0 1vw;
  }
  .time{
    padding: 16rpx 20rpx;
    background-color: wheat;
    display: flex;
  }
  .time view{
    flex: 1;
    font-size: 30rpx;
  
  }
  .time view text{
    font-size: 38rpx;
  }
  .weekName{
     background-color: gainsboro;
    width: 100%;
    display: flex;
    padding: 16rpx 0;
  }
  .weekName view{
    flex: 1;
    text-align: center;
  }
  .sunday,.saturday{
    color: red;
  }
  .week{
    width: 100%;
  }
  .week view{
    width: 14.2%;
    height: 80rpx;
    line-height: 80rpx;
    display: inline-block;
    margin: 20rpx 0;
    text-align: center;
  }
  .week view text{
    width: 100%;
    height: 100%;
  
    display: inline-block;
  }
  .calendarSign{
    margin: 20rpx;
  }

wxml

<!--pages/pictruesign/pictrue.wxml-->
<view class='gs_banner'>
	<image src='https://7465-testone-one-1301708883.tcb.qcloud.la/cover/20.jpg?sign=52cff0827c6fcaee682ff90597e76184&t=1595302842'></image> 
</view>
<view class="calendar">
  <view class="time">
    <view>
      <text class="t_blue">{{year}}</text>年
      <text class="t_blue">{{month}}</text>月
    </view>
    <view style="text-align: right;">
      累计签到
      <text class="t_red">{{signcount}}</text>天
    </view>
    <view style="text-align: right;">
      本月已签到
      <text class="t_red">{{calendarSignDay}}</text>天
    </view>
  </view>
  <view class="weekName">
    <view class="sunday">日</view>
    <view class="monday">一</view>
    <view class="tuesday">二</view>
    <view class="wednesday">三</view>
    <view class="thursday">四</view>
    <view class="friday">五</view>
    <view class="saturday">六</view>
  </view>
  <view class="week">

    <!--填补空格-->
    <view wx:for="{{nbsp}}" wx:key="index">\n</view>

    <!--开心循环日期-->
    <view wx:for="{{date-1}}" wx:key="index" style="color:gainsboro;">
      <text wx:if="{{item+1==calendarSignData[item+1]}}" style="color:red;font-size:22rpx;">已签到</text>
      <text wx:else="">{{item+1}}</text>
    </view>
    <view style="border-bottom: 1px solid blue; padding-bottom:8rpx;">
      <text wx:if="{{date==calendarSignData[date]}}" style="color:red;font-size:22rpx;  border-radius: 50%;background-color: ghostwhite">已签到</text>
      <text wx:else="" style="color:blue;">{{date}}</text>
    </view>
    <view wx:for="{{monthDaySize-date}}"  wx:key="index">{{item+date+1}}</view>
  </view>
  <view class="calendarSign">
    <button wx:if="{{date!=calendarSignData[date]}}" style="color:white;background-color:blue;" bindtap="calendarSign">签到</button>
    <button wx:else="">今日已签到</button>
  </view>
</view>

//index.js
//获取应用实例
var app = getApp();
var calendarSignData;
var date;
var calendarSignDay;
const db = wx.cloud.database();
const _ = db.command;
const com = require("../../../com.js");
Page({
  data: {
    calendarSignData: [],//当月签到的每天
    signcount: '',//总计签到加1
    signdata: '',//当天日期 
    calendarSignDay: '',//当月签到次数
    signmonth: ''//当月签到次数
  },
  //事件处理函数
  calendarSign: function () { 
    var that=this;
    console.log(calendarSignData); 
    var _id = app.globalData._id;
    db.collection('userinfo').doc(_id).update({
      data: {
        signdata: _.push([date]),//每月签到日期
        signcount: _.inc(1),//总计签到加1
        signmonth: _.inc(1)//当月签到次数
      },
      success: res => {
        console.log("testCmdInc success", res);
        wx.showToast({
          title: '签到成功',
          icon: 'success',
          duration: 2000
        })
        this.setData({
          ["calendarSignData[" + date + "]"]: date,
          signcount: this.data.signcount + 1,
          calendarSignDay: this.data.signmonth + 1
        })
        db.collection('userinfo').doc(_id).get({
          success: function (res) {
            var userInfo = res.data
            wx.setStorageSync('user', userInfo);
          }
        })
        that.pointsadd("qiandao", '10');
      },
    });

  },
  onLoad: function () {
    const that = this;
    var mydate = new Date();
    var year = mydate.getFullYear();
    var month = mydate.getMonth() + 1;
    date = mydate.getDate();
    console.log("date" + date)
    var day = mydate.getDay();
    console.log(day)
    var nbsp;
    if (date <= 7) {
      nbsp = day;
    } else {
      nbsp = 7 - ((date - day) % 7)
    }
    console.log("nbsp" + nbsp);
    var monthDaySize;
    if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
      monthDaySize = 31;
    } else if (month == 4 || month == 6 || month == 9 || month == 11) {
      monthDaySize = 30;
    } else if (month == 2) {
      // 计算是否是闰年,如果是二月份则是29天
      if ((year - 2000) % 4 == 0) {
        monthDaySize = 29;
      } else {
        monthDaySize = 28;
      }
    };
    var userInfo = app.globalData.userInfo; 
    if (date == 1&&userInfo.signmonth==0) {
      var updatadata = {
        signdata: [],//每月签到日期 
        signmonth: 0//当月签到次数
      };
      var _id = app.globalData._id;
      db.collection('userinfo').doc(_id).update({
        data: updatadata,
        success: function (res) {
          //更新成功重置缓存数据
          db.collection('userinfo').doc(_id).get({
            success: function (res) {
              var userInfo = res.data
              wx.setStorageSync('user', userInfo);
              app.globalData.userInfo = userInfo;
              if (!userInfo.signdata) {
                calendarSignData = new Array(monthDaySize);
              } else {
                calendarSignData = new Array(monthDaySize);
                for (var y = 0; y < userInfo.signdata.length; y++) {
                  calendarSignData[userInfo.signdata[y]] = userInfo.signdata[y];
                }
              }
              var _id = app.globalData._id;
              that.setData({
                _id: _id, 
                calendarSignData: calendarSignData,//当月签到的每天
                signcount: userInfo.signcount,//总计签到加1
                signdata: userInfo.signdata,//当天日期
                calendarSignDay: userInfo.signmonth,//当月签到次数
                signmonth: userInfo.signmonth//当月签到次数 
              })
             
            }
          })
        },
      })
    } else {
      // 不是1号直接取缓存数据
      if (app.globalData.userInfo) {
        var userInfo = app.globalData.userInfo;
        if (!userInfo.signdata) {
          calendarSignData = new Array(monthDaySize);
        } else {
          calendarSignData = new Array(monthDaySize);
          for (var y = 0; y < userInfo.signdata.length; y++) {
            calendarSignData[userInfo.signdata[y]] = userInfo.signdata[y];
          }
        }
        var _id = app.globalData._id;
        this.setData({
          _id: _id,
          calendarSignData: calendarSignData,//当月签到的每天
          signcount: userInfo.signcount == null ? 0 : userInfo.signcount,//总计签到加1
          signdata: userInfo.signdata == null ? 0 : userInfo.signdata,//当天日期
          calendarSignDay: userInfo.signmonth == null ? 0 : userInfo.signmonth,//当月签到次数
          signmonth: userInfo.signmonth == null ? 0 : userInfo.signmonth//当月签到次数 
        })
      }
    }
    this.setData({
      year: year,
      month: month,
      nbsp: nbsp,
      monthDaySize: monthDaySize,
      date: date,
      calendarSignData: calendarSignData,
      calendarSignDay: calendarSignDay
    })
  },
  pointsadd: function (Type, qty) {
    var openid = app.globalData._id;
    var date = com.nowTime();
    console.log("增加积分" + openid + "--" + app.globalData._id);
    wx.cloud.callFunction({
      name: 'points',
      data: {
        $url: 'points/manage/add',
        Type: Type,
        UserId: openid,
        createTime: date,//创建时间
        updateTime: date//修改时间
      },
      success(res) {
        console.log("success", res);
        wx.showToast({
          title: '积分+' + qty,
        });
      },
      fail(res) {
        console.log("fail", res)
      },
      complete(res) {
        console.log("complete", res)
      }
    })
  }
})



var nowTime = function () {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  if(month<10){
    month='0'+month;
  }
  var day = now.getDate();
  if(day<10){
    day='0'+day;
  }
  var hour = now.getHours()
  if(hour<10){
    hour='0'+hour;
  }
  var minute = now.getMinutes()
  if(minute<10){
    minute='0'+minute;
  }
  var second = now.getSeconds()
  if(second<10){
    second='0'+second;
  }
  var date = year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second;
  return date;
}
var Time = function () {
  var timestamp = Date.parse(new Date());
  return timestamp;
}
var get = function (url) {
  var promise = new Promise((resolve, reject) => {
    var that = this;
    wx.request({
      url: url,
      success: function (res) {
        resolve(res);
      },
      error: function (e) {
        reject('网络出错');
      }
    })
  });
  return promise;
}
/*点赞，防刷校验*/
var checkDate = function (value) {
  //var promise = new Promise((resolve, reject) => {
  var flag = false;
  var rmk = true;
  var rmk=true;//默认用户是存在的。
  var that = this;
  var timestamp = Date.parse(new Date());
  var userId = value.userid;//当前用户
  var key = value.key;//文章ID 
  var type = value.type;//操作类型，点赞或者评论，浏览
  var operateType = wx.getStorageSync('operateType');
  var chaTime = 12 * 60 * 60 * 1000;//间隔时间为24小时
  //var chaTime = 1 * 60 * 1000;//调试间隔时间为1分钟
 
  var checkKey = type + key;
  if ("" == operateType) { 
    const checkMsg = [];
    checkMsg.push( { 'key': checkKey, 'timestamp': timestamp });
    wx.setStorageSync('operateType', checkMsg);
    var operateType = wx.getStorageSync('operateType');
    return { 'flag': true, 'msg': '有效' };
  }
  var newoperateType=JSON.stringify(operateType);
  var caid=JSON.parse(newoperateType);
  for (let inde in caid) { 
    var obj = caid[inde];
    if (obj.key == checkKey) {
      rmk=false;
      var oldTime = obj.timestamp;
      var userTime = oldTime + chaTime;//旧时间+间隔时间，现在时间大于这个时间，说明可以继续操作
      if (userTime < timestamp) { 
         caid.splice(inde,1);
         flag = true; 
      }
    }
  } 
  if (flag||rmk) {//已经过了有效期限制或者缓存中的用户不存在就重新写缓存时间
    var msyyy = { 'key': checkKey, 'timestamp': timestamp };
    caid.push(msyyy);
    wx.setStorageSync('operateType', caid);
    var operateType = wx.getStorageSync('operateType');
    return { 'flag': true, 'msg': '有效' };
  }else{ 
      return { 'flag': false, 'msg': '请勿频繁操作。' }; 
  } 
}

module.exports = {
  nowTime: nowTime,
  Time: Time,
  get: get,
  checkDate: checkDate
}

效果图

在这里插入图片描述

原文链接：https://blog.csdn.net/ljj481322/article/details/109574597

你可能也喜欢