微信小程序
之前做了一个酒庄的小程序签到,微信小程序和公众号一起的。
wxml:
<!--pages/Calendar/Calendar.wxml-->
<!-- 打卡日历页面 -->
<view class='all'>
<view class="bar">
<!-- 上一个月 -->
<view class="previous" bindtap="handleCalendar" data-handle="prev">
<image src='../../imgs/page_account/lt.png'></image>
</view>
<!-- 显示年月 -->
<view class="date">{
{cur_year || "--"}} 年 {
{cur_month || "--"}} 月</view>
<!-- 下一个月 -->
<view class="next" bindtap="handleCalendar" data-handle="next">
<image src='../../imgs/com_address/rt.png'></image>
</view>
</view>
<!-- 显示星期 -->
<view class="week">
<view wx:for="{
{weeks_ch}}" wx:key="{
{index}}" data-idx="{
{index}}">{
{item}}</view>
</view>
<view class='days'>
<!-- 列 -->
<view class="columns" wx:for="{
{days.length/7}}" wx:for-index="i" wx:key="i">
<view wx:for="{
{days}}" wx:for-index="j" wx:key="j">
<!-- 行 -->
<view class="rows" wx:if="{
{j/7 == i}}">
<view class="rows" wx:for="{
{7}}" wx:for-index="k" wx:key="k">
<!-- 每个月份的空的单元格 -->
<view class='cell' wx:if="{
{days[j+k].date == null}}">
<text decode="{
{true}}"> </text>
</view>
<!-- 每个月份的有数字的单元格 -->
<view class='cell' wx:else>
<!-- 当前日期已签到 -->
<view wx:if="{
{days[j+k].isSign == true}}" style='background-color:#83C75D' class='cell'>
<text>{
{days[j+k].date}}</text>
</view>
<!-- 当前日期未签到 -->
<view wx:else>
<text>{
{days[j+k].date}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 坚持打卡天数 -->
<view>
<view bindtap="getSignPoint" class="count1" style="{
{qdStatus}}">
<view class="">立即签到</view>
</view>
<view class="reward">
<view class="jsqd">在本月连续签到可获取:</view>
<view class="jddetail">
<view class="redetail">
<view class="lxday">连续签到{
{g_data.qd1.RES_NAME_SUB}}天</view>
<view class="point">可得{
{g_data.qd1.RES_CODE}}积分</view>
</view>
<view class="redetail">
<view class="lxday">连续签到{
{g_data.qd2.RES_NAME_SUB}}天</view>
<view class="point">可得{
{g_data.qd2.RES_CODE}}积分</view>
</view>
<view class="redetail">
<view class="lxday">连续签到{
{g_data.qd3.RES_NAME_SUB}}天</view>
<view class="point">可得{
{g_data.qd3.RES_CODE}}积分</view>
</view>
</view>
</view>
</view>
<view class='count' style="{
{tsStatus}}">
<text>截至目前,你已连续签到</text>
<view class='daynumber'>
<text class='number'>{
{count}}</text>
<text class='day'>天</text>
</view>
</view>
</view>
/* 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{