微信小程序签到 日历 每日签到积分加1

最新推荐文章于 2024-03-05 14:09:42 发布
最新推荐文章于 2024-03-05 14:09:42 发布
阅读量2.1k 收藏 23
点赞数 5
分类专栏： 微信小程序开发 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43968374/article/details/106757473
版权

signIn.json

{
  "navigationBarTitleText": "签到",
  "usingComponents": {
  }
}

signIn.wxss

/* 签到顶部背景信息 */
.signBkImg{
  width: 100%;
  height: 241rpx;
  position: relative;
}
.signBkImg>image{
  width: 100%;
  height: 100%;
}

.sign-con{
  width: 92%;
  height: 213rpx;
  padding:  0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
}

.sign-con>navigator{
  width: 167rpx;
  height: 67rpx;
  line-height: 67rpx;
  text-align: center;
  border-radius: 34rpx;
  color: #33998C;
  background-color: #fff;
  font-size: 30rpx;
}
.headNews-left{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.headNews-left>image{
  width: 133rpx;
  height: 133rpx;
  border: 6rpx solid rgb(255,255,255);
  border-radius: 50%;
}
.nikeNme{
    color: rgb(254,254,254);
    margin-left: 26rpx;
}
.nikeNme>view:nth-child(1){
  font-size: 40rpx;
  font-weight: bold;
}
.nikeNme>view:nth-child(2){
  font-size: 26rpx;
  margin-top: 12rpx;
}

/* 积分，积分明细 */
.points-con{
  margin: 50rpx 0;
  display: flex;
}
.points-con>view,.points-con>navigator{
  width: 50%;
  height: 61rpx;
  line-height: 61rpx;
  text-align: center;
  color: rgb(119,119,119);
  font-size: 30rpx;
}
.points-con>view{
  border-right: 2rpx solid rgb(235,235,235);
}
.points-num{
  font-size: 38rpx;
  color: #33998C;
}


/* 日历签到 */
/**index.wxss**/
.t_red{
  color: red;
}
.t_blue{
  color: royalblue;
}
.calendar{
  background-color: white;
  box-shadow: 2px 2px 5px 2px #e6e6e6;
  padding:30rpx;
  width: 85%;
  margin-left: 4%;
  border-radius: 50rpx;
  display: block
}
.time{
  padding: 16rpx 20rpx;
  background-color: wheat;
  display: flex;
}
.time{
  font-family: '黑体';
  font-size: 40rpx;
  color: white;
  text-align: center;
  padding: 16rpx 20rpx;
  height:80rpx;
  line-height:80rpx;
  border-radius:12rpx;
  background-color: #f9634b;
  display: flex;
  margin-bottom: 29rpx;

}
.time view{
  flex: 1;
  font-size: 30rpx;

}
.time view text{
  font-size: 38rpx;
}
.weekName{
  font-size: 36rpx;
  color: #333;
  width: 100%;
  display: flex;
  padding: 16rpx 0;
}
.weekName view{
  flex: 1;
  text-align: center;
}
.sunday,.saturday{
  color: #33998C;
}
.week{
  width: 100%;
}
.week view{
  width: 14.2%;
  height: 90rpx;
  line-height: 80rpx;
  display: inline-block;
  margin: 10rpx 0;
  font-size: 34rpx;
  text-align: center;
  
}
.week view text{
  width: 100%;
  height: 100%;
  display: inline-block;
}
.calendarSign{
  margin: 40rpx auto;
}

.selDate{
  font-size: 28rpx;
   border-bottom: 1px solid #33998C; 
}
.selDateItem{
   color:#33998C;
   font-weight: bold;
   font-size:22rpx; 
   border-radius: 50%;
}

/* 前后时间 */
.preNext-path{
  margin: 28rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;

}
.preNext-path>image{
    width: 11rpx;
    height: 21rpx;
}
.preNext-path>text{
   color: #33998C;
   font-size: 28rpx;
   margin: 0 54rpx;
}

/* 签到按钮 */
.signInBtn{
  width: 235rpx;
  height: 77rpx;
  line-height: 77rpx;
  text-align: center;
  border-radius: 10rpx;
  font-size: 34rpx;
  color: #fff;
  background:#33998C;
}

signIn.wxml

<!-- 签到顶部背景信息-->
<view class='signBkImg'>
  <image src='/images/mine/bg.png'></image>
  <view class='sign-con'>
    <view class='headNews-left'>
      <image src='{{userInfo.wechatHead}}'></image>

      <view class='nikeNme'>
        <view>{{userInfo.nickname}}</view>
        <view>本月已签到 {{calendarSignDay}} 天</view>
      </view>
    </view>
    <navigator url='/pages/mine/integral/integral'>兑换商品</navigator>
  </view>
</view>

<!-- 积分，积分明细 -->
<view class='points-con'>
  <view>
    <text>我的积分：</text>
    <text class='points-num'>{{userInfo.integral}}</text>
  </view>
  <navigator url='/pages/mine/calendar/pointsList/pointsList'>
    积分明细 >
  </navigator>
</view>


<!-- 日历 -->
<view class="calendar">
  <view class='preNext-path'>
    <!-- <image src='/img/mine/preIcon.png' bindtap='sign_prev'></image> -->
    <text>{{year}}年{{month}}月</text>
    <!-- <image src='/img/mine/nextIcon.png' bindtap='sign_next'></image> -->
  </view>


  <view class="weekName">
    <view class="sunday">日</view>
    <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>
  <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:#33998C;font-size:22rpx;">已签到</text>
      <text wx:else="">{{item+1}}</text>
    </view>
    <view class='selDate'>
      <text wx:if="{{date==calendarSignData[date]}}" class='selDateItem'>已签到</text>
      <text wx:else="" style="color:#33998C;">{{date}}</text>
    </view>
    <view wx:for="{{monthDaySize-date}}">{{item+date+1}}</view>
  </view>
  <view class="calendarSign">
    <button class='signInBtn' wx:if="{{date!=calendarSignData[date]}}" bindtap="calendarSign">签到</button>
    <button wx:else="" class='signInBtn'>今日已签到</button>
  </view>
</view>

signIn.js

js中导入了requestUtil 为请求工具类，改为自己的就行

import requestUtil from '../../../utils/requestUtil';
//获取应用实例
var calendarSignData = [];
var date;
Page({
  data: {
    calendarSignData: [],
    calendarSignDay:'',
    month: "",
    year: "",
    userInfo: '',
    show: false
  },
  onShow: function () {
    this.a();
    this.getUserByOpenid();
  },
  //获取用户
  getUserByOpenid: function () {
    var that = this;
    var openId = wx.getStorageSync("openId");
    if (openId) {
      var url = "integral/getUserByOpenid";
      requestUtil._get_param(url, {
        openid: openId
      }, function (res) {
        console.log(res);
        if (res.data.status == 200) {
          var d = res.data.data;
          var currentDate = new Date();
          if (d.calendarSignDay > 0) {
            var a = new Date(d.calendarSignTime);
            var day = a.getDate();
            if (currentDate.getDate() == day) {
              calendarSignData[day] = day;
            }
          }
          that.setData({
            userInfo: d
            // calendarSignData: calendarSignData
          })
        }
      })
    } else {
      this.setData({
        show: true
      })
    }
  },
  a(){
    var openId = wx.getStorageSync("openId");
     //过去签到过的天数
     var that = this;
     var url = "integral/queryUserMonthSign";
     requestUtil._get_param(url, {
       openid:openId
     }, function (res) {
       console.log(res);
       if (res.data.status == 200) {
         that.setData({
           calendarSignData: res.data.data.calendarSignData,
           calendarSignDay:res.data.data.calendarSignDay,
         })
       }else{
         wx.showToast({
           title: '查询本月签到的数据失败',
           icon: 'none',
         })
       }
     })
  },
  //事件处理函数
  calendarSign: function () {
    var openId = wx.getStorageSync("openId");
    console.log(openId)
    if (openId) {
      var that = this;
      var id = this.data.userInfo.id
      var url = "integral/sign";
      requestUtil._get_param(url, {
        openid:openId
      }, function (res) {
        console.log(res);
        if (res.data.status == 200) {
          wx.showToast({
            title: '签到成功',
            icon: 'success',
            duration: 2000
          })
          that.onShow();
        }else{
          wx.showToast({
            title: '今日已签到,请勿重复签到',
            icon: 'none',
          })
        }
      })
    } else {
      this.setData({
        show: true
      })
    }

  },
  sign_prev: function () {
    var year = this.data.year;
    var month = this.data.month;
    if (month == "1") {
      var month = "12";
      var year = parseInt(this.data.year) - 1;
    } else {
      var month = parseInt(this.data.month) - 1;
      var showYear = this.data.year;
    }
    this.setData({
      month: month,
      year: year
    })
  },
  sign_next: function () {
    var year = this.data.year;
    var month = this.data.month;
    if (month == "12") {
      var month = "1";
      var year = parseInt(this.data.year) + 1;
    } else {
      var month = parseInt(this.data.month) + 1;
      var showYear = this.data.year;
    }
    this.setData({
      month: month,
      year: year
    })
  },
  onLoad: function () {
    var mydate = new Date();
    var year = mydate.getFullYear();
    var month = mydate.getMonth() + 1;
    date = mydate.getDate();
    console.log("date", date)
    var day = mydate.getDay();
    var nbsp;
    if ((date - day) <= 0) {
      nbsp = day - date + 1;
    } else {
      nbsp = 7 - ((date - day) % 7) + 1;
    }
    console.log("nbsp" + nbsp);
    console.log(day)
    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;
      }
    };
    this.setData({
      year: year,
      month: month,
      nbsp: nbsp,
      monthDaySize: monthDaySize,
      date: date,
      calendarSignData: calendarSignData
    })
  }
})

后台 Java代码

  /**
     * 根据用户openid获取用户签到信息(月签到信息)
     * @param openid
     * @return
     */
    @RequestMapping("queryUserMonthSign")
    public ShopResult queryUserMonthSign(String openid,String data) {
        Map<String, Object> retMap = new ConcurrentHashMap<>();
        
        List<ShopIntegralDetail> integralDetails = shopIntegralDetailService.queryUserMonthSign(openid,data);
        
        //获取本月的天数
        int monthDay = DateUtils.getCurrentMonthDay();
        int[] i = new int[monthDay+1];
        int calendarSignDay = 0;
        for (int j = 0; j < monthDay; j++) {
            for (ShopIntegralDetail shopIntegralDetail:
                    integralDetails) {
             int  day =  Integer.valueOf(DateUtils.formatDate(shopIntegralDetail.getCreateDate(),"dd"));
             if(j==day){
                 i[j] = day;
                 calendarSignDay += 1 ;
             }
            }
        }
        retMap.put("calendarSignData", i);//本月签到天数
        retMap.put("calendarSignDay", calendarSignDay);//本月签到数据  为数组【0，1，2，3】
        
        System.out.println(i);
        return ShopResult.ok(retMap);
    }

我这边是每次积分签到成功之后在积分记录表中添加一条信息，所以在积分详情表中查用户签到信息

<select id="queryUserMonthSign" resultType="com.angke.modules.shop.entity.ShopIntegralDetail">
		SELECT
		<include refid="shopIntegralDetailColumns"/>
		FROM shop_integral_detail a
		where
		a.openid = #{openid}
		AND
		DATE_FORMAT(a.create_date,'%Y-%m') = DATE_FORMAT(NOW(),'%Y-%m')
		AND
		a.integral_type=4
	</select>

shop_integral_detail表 字段

id	varchar	32
integral	varchar	20	积分
integral_type	char  类型0：系统赠送，1：购物送，2：邀请好友送，3：消费 4签到		
openid	varchar	64  微信openid	
create_date	datetime	时间
A杜欢腾
关注
  • 5
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
31.签到积分
xinglun88的专栏
06-11 21
上海市计算机学会竞赛平台 | YACSYACS 是由上海市计算机学会于2019年发起的活动，旨在激发青少年对学习人工智能与算法设计的热情与兴趣，提升青少年科学素养，引导青少年投身创新发现和科研实践活动。
微信小程序demo：日历签到
03-17
【微信小程序日历签到详解】 微信小程序是腾讯公司推出的一种轻量级的应用开发平台，它使得开发者无需安装即可在微信内使用各种功能丰富的应用。本篇将详细讲解如何利用微信小程序开发一个日历签到功能。 首先，...
微信小程序签到功能实现
热门推荐
阵雨的博客
12-16 6万+
sign.wxml 一 二 三 四 五 六 日 \n {{item+1}} {{item+1}} {{date}
微信小程序如何实现九宫格手势签到功能
最新发布
weixin_43420127的博客
03-05 303
微信小程序如何实现九宫格手势签到功能
微信小程序实现连续签到七天
m0_71349739的博客
09-15 340
微信小程序实现连续签到七天
自己做的微信小程序、微信公众号、H5版日历签到积分源码包
hanzhuhuaa的博客
07-09 642
微信小程序版 自己写的微信小程序日历签到模块;只需修改接口地址和对应返回参数就能动态生成整个模块； 小程序版源码包 微信公众号、H5版 背景图点击签到； 本日已签到、未签到文字提示； 已签到积分文字提示； 本月日历每日展示，表格头部展示每周的星期几； 本月日历每天签到背景色提示； 可根据自己的页面风格选择是否启用上一月、下一月翻页 jquery移动端源码包 ...
微信小程序连续签到获得积分
qq_45645051的博客
08-26 4266
微信小程序连续签到获得积分demo 话不多说！！(伸手党的福利) 直接上代码，先看一下实际图 叮叮叮！！！ wxml代码 <view> <view class='signIn'> <view class='sign-com'> <view class='thead'> <view class='tt'>已连续签到</view> <view class='mm'><label class='n'>
小程序实现签到打卡功能--用户端
Ylomyfam的博客
02-09 4188
实现用户在规定区域内完成打卡操作并以日历的形式记录
微信小程序日历组件（可滑动，可展开收缩，可标点）
aaa123aaasqw的博客
12-08 2034
6.在需要的页面中引入：index.wxss。7.在需要的页面中引入：index.json。8.在需要的页面中引入：index.js。
微信小程序日历积分签到源码包.zip
07-09
自己写的微信小程序日历签到模块;只需修改接口地址和对应返回参数就能动态生成整个模块； 1、签到功能 2、本日已签到、未签到文字提示； 3、已签到积分文字提示； 4、本月日历每日展示，表格头部展示每周的星期几； ...
微信小程序实现日历签到
10-14
在微信小程序开发中，实现日历签到功能是一项常见的需求，它能够帮助用户记录他们的日常习惯，比如健康打卡、学习签到等。下面我们将深入探讨如何在微信小程序中构建一个日历签到功能。 首先，我们需要了解微信小...
微信小程序日历签到小程序
10-10
微信小程序，日历签到，带前端，循环打卡签到，活跃小程序运营，活跃小程序运营，活跃小程序运营，活跃小程序运营，活跃小程序运营
微信小程序实用组件：日历签到
03-29
(此图片来源于网络，如有侵权，请联系删除! ) //index.js //获取应用实例 var app = getApp(); var calendarSignData; var date; var calendarSignDay; Page({ //事件处理函数 calendarSign: function() { calendarSignData[date]=date; console.log(calendarSignData); calendarSignDay=calendarSignDay+1; wx.setStorageSync("calendarSignData",calendar
微信小程序日历签到功能demo
08-13
要实现一个简单的日历，需要先知道几个值： 每月有多少天 每月第一天、最后一天各星期几 每月1号之前应有多少天属于上一个月 每月最后一天之后应有多少天属于下一个月
小程序日历签到
04-18
微信小程序demo：日历签到，已经测试过微信小程序可以使用的
微信小程序-签到插件
06-29
自己写的基于微信小程序语言开发的签到插件，仅供参考学习使用.................................................................................................................................................................................................................
微信小程序写的签到日历（只显示当前月）
04-24
综上所述，构建这样一个微信小程序签到日历涉及的技术和流程包括：获取和处理日期信息、数据结构设计、日历组件渲染、签到逻辑实现、用户体验优化以及数据同步。对于开发者来说，理解并掌握这些知识点是构建此类功能...
微信小程序签到页面的日历实现
rookie_toy的博客
03-06 2285
当前月份签到日历
小程序自定义日历实现签到功能
m0_66408078的博客
09-23 1956
使用uniapp自带的uni-calendar可以实现简单的数据展示以及打卡
微信小程序拍照签到csdn
01-05
微信小程序是一种方便快捷的应用程序，通过它可以实现拍照签到功能。对于CSND来说，这是非常有用的功能。首先，用户可以通过微信小程序打开相机进行拍照，然后进行签到操作。这样用户无需额外下载其他应用，可以直接在微信中完成签到的操作，提高了用户的便利性和使用体验。其次，微信小程序可以与CSND的系统进行无缝连接，签到信息可以直接传输到CSND的后台系统，节省了用户手动输入签到信息的时间，提高了签到的准确性和效率。另外，微信小程序还可以与用户微信账号进行绑定，保障了用户信息的安全性。总的来说，微信小程序拍照签到对CSND来说是一种能很好满足用户需求的功能，可以提高用户体验和CSND的服务质量。通过这种方式，用户可以更加便捷地使用CSND的服务，提高了用户对CSND的满意度，并且通过签到数据可以更好地了解用户的行为和需求，为CSND的优化和改进提供了有效的信息支持。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值