微信小程序實現簽到功能

 更新時間:2018年10月31日 11:55:46   作者:陣雨丶   我要評論

這篇文章主要為大家詳細介紹了微信小程序實現簽到功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現簽到功能的具體代碼,供大家參考,具體內容如下

效果圖:

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

如:["16", "14"]

點擊簽到執行

calendarSign

sign.wxml

<!--index.wxml-->
<view class="calendar">
 <view class='bcfff'>
 <view class="weekName">
  <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>
 
  <!--循環日期-->
  <!-- 當天以前 -->
  <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}}">今天已經簽過了~</view>
 <view class='qdcontent' wx:else>簽到成功,獲得{{integral}}積分,您已連續簽到{{rule}}天!</view>
 <view class='queding' bindtap='quxiaoQd'>確定</view>
</view>

sign.js

var app = getApp();
var calendarSignData;
var date;
var calendarSignDay;
var is_qd;
Page({
 
 /**
 * 頁面的初始數據
 */
 data: {
 qdView: false,
 calendarSignData: "",
 calendarSignDay: "",
 is_qd: false,
 },
 quxiaoQd: function (e) {
 var that = this;
 that.setData({
  qdView: false,
  is_qd: true
 })
 },
 //事件處理函數
 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
 })
 },
 /**
 * 生命周期函數--監聽頁面加載
 */
 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
  })
  }
 })
 
 
 },
 
 /**
 * 生命周期函數--監聽頁面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函數--監聽頁面顯示
 */
 onShow: function () {
 
 },
 
 /**
 * 生命周期函數--監聽頁面隱藏
 */
 onHide: function () {
 
 },
 
 /**
 * 生命周期函數--監聽頁面卸載
 */
 onUnload: function () {
 wx.removeStorageSync("calendarSignData")
 wx.removeStorageSync("calendarSignDay")
 },
 
 /**
 * 頁面相關事件處理函數--監聽用戶下拉動作
 */
 onPullDownRefresh: function () {
 
 },
 
 /**
 * 頁面上拉觸底事件的處理函數
 */
 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;
}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關文章

最新評論

时时彩包赢公式0369