商城系統(tǒng) 注冊

微信小程序日歷簽到如何實現(xiàn)

2020-09-27|HiShop
導讀：日歷簽到是小程序中常用的技巧，下面為大家介紹如何實現(xiàn)小程序日歷簽到。...

　微信小程序日歷簽到如何實現(xiàn)


　今天是16號，所以顯示已簽到，渲染頁面時請求后臺傳的參數(shù)為這月簽到的日期

　　如：["16", "14"]

　　點擊簽到執(zhí)行

　　calendarSign

　　sign.wxml


<!--index.wxml-->
<view class="calendar">
  <view class='bcfff'>
    <view class="weekName">

微信小程序日歷簽到如何實現(xiàn)

      <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 class="sunday">日</view>
    </view>
    <view class="week">
 
      <!--填補空格-->
      <view wx:for="{{nbsp}}">\n</view>
 
      <!--循環(huán)日期-->
      <!-- 當天以前 -->
      <view wx:for="{{date-1}}" style="color:gainsboro;">
        <text wx:if="{{item+1==calendarSignData[item+1]}}" style="color: #2ccecb;">{{item+1}}</text>
        <text wx:else="">{{item+1}}</text>
      </view>
      <!-- 當天 -->
      <view style="">
        <text wx:if="{{is_qd}}" style="color: #2ccecb;">{{date}}</text>
        <text wx:else="" style="">{{date}}</text>
      </view>
      <!-- 以后 -->
      <view wx:for="{{monthDaySize-date}}">{{item+date+1}}</view>
    </view>
  </view>
  <view class="calendarSign">
    <image bindtap="calendarSign" class='btnimg' src='https://jpadmin.99dudesign.com/public/img/source/btn_icon_wodekaoqin1.png'></image>
     <!-- wx:if="{{date!=calendarSignData[date]}}" -->
  </view>
</view>
<!-- 簽到成功 -->
<view class='zhegai hide {{qdView?"block":""}}' bindtap='quxiaoQd'></view>
<view class='successqd hide {{qdView?"block":""}}'>
  <view class='qdtitle'>簽到成功</view>
   <view class='qdcontent' wx:if="{{is_qd}}">今天已經(jīng)簽過了~</view>
  <view class='qdcontent' wx:else>簽到成功，獲得{{integral}}積分，您已連續(xù)簽到{{rule}}天！</view>
  <view class='queding' bindtap='quxiaoQd'>確定</view>
</view>

sign.js

var app = getApp();
var calendarSignData;
var date;
var calendarSignDay;
var is_qd;
Page({
 
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    qdView: false,
    calendarSignData: "",
    calendarSignDay: "",
    is_qd: false,
  },
  quxiaoQd: function (e) {
    var that = this;
    that.setData({
      qdView: false,
      is_qd: true
    })
  },
  //事件處理函數(shù)
  calendarSign: function (e) {
    var that = this;
    that.setData({
      qdView: true
    })
    calendarSignData[date] = date;
    console.log(calendarSignData);
    calendarSignDay = calendarSignDay + 1;
    var today = new Date().getDate()
    wx.request({
      url: getApp().data.host + '后臺的接口',
      method: "POST",
      data: {
        "user_id": wx.getStorageSync('user_id'),
        "sign_num": today
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded' //通過post傳值，所以要加header
      },
      success: function (res) {
        that.setData({
          rule: res.data.rule,
          integral: res.data.integral,
        })
      }
    })
 
    wx.setStorageSync("calendarSignData", calendarSignData);
    wx.setStorageSync("calendarSignDay", calendarSignDay);
 
    this.setData({
      calendarSignData: calendarSignData,
      calendarSignDay: calendarSignDay
    })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function () {
    var 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 = 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;
      }
    };
    // 傳ajax
    wx.request({
      url: getApp().data.host + 'index.php?g=api&m=output&a=sign_list',
      method: "POST",
      data: {
        "user_id": wx.getStorageSync('user_id')
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        // 判斷是否簽到過   
        if (res.data == null) {
          calendarSignData = new Array(monthDaySize)
          wx.setStorageSync("calendarSignData", calendarSignData);
        } else {
          var is_qd;
          for (var i in res.data) {
            parseInt(res.data[i])
            calendarSignData = new Array(monthDaySize)
            calendarSignData[parseInt(res.data[i])] = parseInt(res.data[i])
            wx.setStorageSync("calendarSignData", calendarSignData);
            console.log(date)
            console.log(parseInt(res.data[i]))
 
            if (parseInt(res.data[i]) == date) {
              console.log(1)
              wx.setStorageSync("calendarSignDay", 1);
              is_qd = true
            } else {
              wx.setStorageSync("calendarSignDay", 0);
              
            }
          }
        }
        console.log(is_qd)
        calendarSignData = wx.getStorageSync("calendarSignData")
        calendarSignDay = wx.getStorageSync("calendarSignDay")
        console.log(calendarSignData);
        console.log(calendarSignDay)
        that.setData({
          is_qd: is_qd,
          year: year,
          month: month,
          nbsp: nbsp,
          monthDaySize: monthDaySize,
          date: date,
          calendarSignData: calendarSignData,
          calendarSignDay: calendarSignDay
        })
      }
    })
 
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
    wx.removeStorageSync("calendarSignData")
    wx.removeStorageSync("calendarSignDay")
  },
 
  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
 
  }
})
 
sign.wxss

page {
  background-color: #2ccecb;
}
 
.t_red {
  color: red;
}
 
.t_blue {
  color: royalblue;
}
 
.calendar {
  width: 500rpx;
  margin: 200rpx 125rpx;
  /* height: 600rpx; *//* background-color: #ffffff; */
  border-radius: 4rpx;
}
 
.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: #54ff9c;
  width: 100%;
  display: flex;
  padding: 30rpx 0;
  font-size: 40rpx;
  color: #fff;
}
 
.weekName view {
  flex: 1;
  text-align: center;
}
 
.week {
  width: 100%;
}
 
.week view {
  width: 14.2%;
  height: 50rpx;
  line-height: 50rpx;
  display: inline-block;
  margin: 10rpx 0;
  text-align: center;
  font-size: 30rpx;
  color: #747474;
}
 
.week view text {
  width: 100%;
  height: 100%;
  display: inline-block;
}
 
.calendarSign {
  margin-top: -75rpx;
  text-align: center;
}
 
.btnimg {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
 
.bcfff {
  background-color: white;
  padding-bottom: 100rpx;
}
 
.zhegai {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.4;
}
 
.successqd {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 550rpx;
  margin-left: -275rpx;
  margin-top: -200rpx;
  background-color:white;
   border-radius: 6rpx;
   border: 2rpx solid #54ff9c;
   text-align: center;
}
.qdtitle{
  font-size: 32rpx;
font-weight: bold;
color: #232323;
padding: 20rpx;
}
.qdcontent{
font-size: 30rpx;
color: #232323;
padding: 20rpx 10rpx;
}
.queding{
font-size: 30rpx;
color: #232323;
border-top: 1rpx solid #cccccc;
padding: 20rpx;
}

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。

更多小程序資訊，盡在：m.descansotropical.com/xiaocx/
電話咨詢 預約演示 0元開店