今天是16號(hào)，所以顯示已簽到，渲染頁(yè)面時(shí)請(qǐng)求后臺(tái)傳的參數(shù)為這月簽到的日期
如：["16", "14"]
點(diǎn)擊簽到執(zhí)行
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">
<!--填補(bǔ)空格-->
<view wx:for="{{nbsp}}">\n</view>
<!--循環(huán)日期-->
<!-- 當(dāng)天以前 -->
<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>
<!-- 當(dāng)天 -->
<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="http://www.fluoresville.cn/'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)簽過(guò)了~</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({
/**
* 頁(yè)面的初始數(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 + '后臺(tái)的接口',
method: "POST",
data: {
"user_id": wx.getStorageSync('user_id'),
"sign_num": today
},
header: {
'content-type': 'application/x-www-form-urlencoded' //通過(guò)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)聽(tīng)頁(yè)面加載
*/
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) {
// 計(jì)算是否是閏年,如果是二月份則是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) {
// 判斷是否簽到過(guò)
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)聽(tīng)頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
*/
onUnload: function () {
wx.removeStorageSync("calendarSignData")
wx.removeStorageSync("calendarSignDay")
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶(hù)點(diǎn)擊右上角分享
*/
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;
}
小程序工具提供多類(lèi)型商城/門(mén)店小程序制作，可視化編輯 1秒生成5步上線(xiàn)。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面，所看即所得，只需要美工就能做出精美商城。
更多微信小程序相關(guān)資訊，請(qǐng)前往：http://www.fluoresville.cn/miniprogramschool/
【本站聲明】
1、本站文章中所選用的圖片及文字來(lái)源于網(wǎng)絡(luò)以及用戶(hù)投稿，由于未聯(lián)系到知識(shí)產(chǎn)權(quán)人或未發(fā)現(xiàn)有關(guān)知識(shí)產(chǎn)權(quán)的登記，如有知識(shí)產(chǎn)權(quán)人并不愿意我們使用，如果有侵權(quán)請(qǐng)立即聯(lián)系。
2、本網(wǎng)站不對(duì)文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé)，僅系客觀(guān)性描述，如您需要了解該類(lèi)商品/服務(wù)詳細(xì)的資訊，請(qǐng)您直接與該類(lèi)商品/服務(wù)的提供者聯(lián)系。
KESION 科汛軟件
KESION 科汛軟件是國(guó)內(nèi)領(lǐng)先的在線(xiàn)教育軟件及私域社交電商軟件服務(wù)提供商，長(zhǎng)期專(zhuān)注于為企業(yè)提供在線(xiàn)教育軟件及社交電商SaaS平臺(tái)解決方案。
公司核心產(chǎn)品云開(kāi)店SaaS社交電商服務(wù)平臺(tái)、在線(xiàn)教育SaaS服務(wù)平臺(tái)、教育企業(yè)數(shù)字化SaaS云平臺(tái)、企微營(yíng)銷(xiāo)助手、私有化獨(dú)立部署品牌網(wǎng)校和在線(xiàn)教育咨詢(xún)等。KESION 不斷通過(guò)技術(shù)創(chuàng)新，提供產(chǎn)品和服務(wù)，助力企業(yè)向數(shù)字化轉(zhuǎn)型，通過(guò)科技驅(qū)動(dòng)商業(yè)革新，讓商業(yè)變得更智慧！
科汛網(wǎng)校系列（源碼部署）
培訓(xùn)考核系列（源碼部署）
科汛云開(kāi)店SaaS平臺(tái)
閩公網(wǎng)安備 35020302001540號(hào) 統(tǒng)一社會(huì)信用代碼：91350206MA2XN2XQ4A
國(guó)家高新技術(shù)企業(yè)編號(hào)：GR201735100465 軟件企業(yè)證書(shū)號(hào)：廈RQ-2017-0034
軟件產(chǎn)品證書(shū)號(hào)：廈RC-2017-0005
認(rèn)證聯(lián)盟企業(yè)編號(hào)：928180109031687687593 國(guó)際權(quán)威認(rèn)證：信息技術(shù)服務(wù)管理體系標(biāo)準(zhǔn)（ISO 20000） 信息安全管理體系國(guó)際認(rèn)證（ISO/IEC 27001）
科汛其他產(chǎn)品
