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

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.idvar 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 awherea.openid = #{openid}ANDDATE_FORMAT(a.create_date,'%Y-%m') = DATE_FORMAT(NOW(),'%Y-%m')ANDa.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    时间

微信小程序签到日历每日签到积分加1相关推荐

基于安卓/android/微信小程序的学生考勤签到APP-#计算机毕业设计
X项目介绍目前高校大学生上课考勤管理都是任课老师上课点名,然后用纸质版考勤表来记录学生上课出勤情况,学期末再根据所有上课出勤表及作业登记表对学生平时成绩打分,最后把出勤数据整理上交到各院系,而学生请 ...
如何做一个基于微信小程序的打卡签到
要做一个基于微信小程序的打卡签到系统,可以按照以下步骤进行: 创建小程序:在微信公众平台上注册小程序账号,创建一个新的小程序. 设计打卡签到功能:根据需求,设计打卡签到的功能模块,包括签到按钮.签到时 ...
微信小程序开发实录——每日速递
微信小程序开发实录--每日速递选题简介工具使用心得选题简介新闻版块创建项目数据来源(知乎日报) 基本页编写详情页编写数据获取 WxParse 样式表转换转换方法样式文件的引用天气 ...
android日历小程序,微信小程序实现日历功能
本文实例为大家分享了微信小程序实现日历功能的具体代码,供大家参考,具体内容如下效果图: 代码: {{year}}年{{month}}月 {{item}} {{item}} data: { year: ...
微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
微信小程序引入日历组件
GitHub - treadpit/wx_calendar: 微信小程序-日历组件
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
[Web] [微信小程序-云开发] 商城无服务器加后台管理
[Web] [微信小程序-云开发] 商城无服务器加后台管理说明: 目前云开发仅针对认证后的公众号使用(每年300的费用那个) wxapp-mall-clouddb 前言如何使用更多说明功能 ...
微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)
文章目录导航路线小程序的启动过程小程序页面渲染的过程小程序中组件的分类有九大类常用的视图容器类组件小程序宿主环境-API 导航路线关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有 ...

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

signIn.json

signIn.wxss

signIn.wxml

signIn.js

后台 Java代码

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

shop_integral_detail表字段

微信小程序签到日历每日签到积分加1相关推荐

最新文章

热门文章

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

signIn.json

signIn.wxss

signIn.wxml

signIn.js

后台 Java代码

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

shop_integral_detail表 字段

微信小程序签到 日历 每日签到积分加1相关推荐

最新文章

热门文章

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

shop_integral_detail表字段

微信小程序签到日历每日签到积分加1相关推荐