微信小程序和公众号签到页面

微信小程序和H5的日历页面

微信小程序

之前做了一个酒庄的小程序签到,微信小程序和公众号一起的。
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{
 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值