laravel8 微信小程序（实现简单签到功能）

//小程序页面<view class='signIn'><view class='sign-com'><view class='thead'><view class='tt'>已连续签到</view><view class='mm'><label class='n'>{{signNum}}</label>天</view><view class='pp'>你的积分为{{ score}}</view></view><view class='modle'><view class='mol'><view class='mol-line'></view><view class='mol-ites'><view class="ite {{signNum>=min?'hover':''}}" data-n='{{min}}'><label class='n'>+{{min<7?1:3}}</label></view><view class="ite {{signNum>=min+1?'hover':''}}" data-n='{{min+1}}'><label class='n'>+{{min+1<7?1:3}}</label></view><view class="ite {{signNum>=min+2?'hover':''}}" data-n='{{min+2}}'><label class='n'>+{{min+2<7?1:3}}</label></view><view class="ite {{signNum>=min+3?'hover':''}}" data-n='{{min+3}}'><label class='n'>+{{min+3<7?1:3}}</label></view><view class="ite {{signNum>=min+4?'hover':''}}" data-n='{{min+4}}'><label class='n'>+{{min+4<7?1:3}}</label></view><view class="ite {{signNum>=min+5?'hover':''}}" data-n='{{min+5}}'><label class='n'>+{{min+5<7?1:3}}</label></view><view class="ite {{signNum>=min+6?'hover':''}}" data-n='{{max}}'><label class='n'>+{{min+6<7?1:3}}</label></view></view></view><view class='moday'><label class='dd'>{{min}}天</label><label class='dd'>{{min+1}}天</label><label class='dd'>{{min+2}}天</label><label class='dd'>{{min+3}}天</label><label class='dd'>{{min+4}}天</label><label class='dd'>{{min+5}}天</label><label class='dd'>{{max}}天</label></view></view><view class='the-btn'><button type='button' class='btn' bindtap='bindSignIn' data-num="{{signNum}}" disabled='{{signState}}' data-min="{{min}}" data-max="{{max}}" data-be="{{be}}">签到</button></view></view>
</view>
<view class='explax'><view class=''>日期开始：{{min}} </view><view class=''>日期结束：{{max}} </view><view class=''>签到数：{{signNum}}天</view><view class=''>您的积分为：{{score}}</view>
</view>//小程序css样式.signIn {width: 100%;height: auto;
}.sign-com {width: 100%;height: auto;padding: 0 30rpx;box-sizing: border-box;overflow: hidden;
}.sign-com .thead {width: 100%;text-align: center;padding: 50rpx 0 35rpx;
}.sign-com .thead .tt {font-size: 24rpx;
}.sign-com .thead .mm {margin-top: 10rpx;font-size: 24rpx;
}.sign-com .thead .mm .n {font-size: 66rpx;margin-right: 25rpx;
}.sign-com .thead .pp {color: #999;font-size: 24rpx;margin-top: 10rpx;
}.sign-com .modle {width: 100%;height: 100rpx;margin-top: 10rpx;
}.sign-com .modle .mol {width: 100%;height: 52rpx;position: relative;
}.sign-com .mol-line {width: 100%;height: 4rpx;background-color: #e6e6e6;position: absolute;left: 0;top: 50%;transform: translateY(-50%);
}.sign-com .mol-ites {width: 100%;height: 100%;position: absolute;
}.mol-ites .ite {width: 52rpx;height: 52rpx;border-radius: 50%;border: 1px solid #f5f5f5;background-color: #fff;box-sizing: border-box;position: absolute;left: 0;top: 0;z-index: 2;
}.mol-ites .ite .n {width: 44rpx;height: 44rpx;line-height: 44rpx;text-align: center;border-radius: 50%;background-color: #f5f5f5;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-size: 22rpx;
}.mol-ites .ite::after {content: "";width: 80rpx;height: 4rpx;background-color: transparent;position: absolute;left: 52rpx;top: 50%;margin-top: -2rpx;z-index: 2;
}.mol-ites .ite:last-of-type::after {width: 0;
}.mol-ites .ite:nth-of-type(2) {left: 107rpx;
}.mol-ites .ite:nth-of-type(3) {left: 214rpx;
}.mol-ites .ite:nth-of-type(4) {left: 321rpx;
}.mol-ites .ite:nth-of-type(5) {left: 428rpx;
}.mol-ites .ite:nth-of-type(6) {left: 535rpx;
}.mol-ites .ite:nth-of-type(7) {left: 642rpx;
}.mol-ites .ite.hover {border-color: #ff614a;
}.mol-ites .ite.hover .n {background-color: #ff614a;color: #fff;
}.mol-ites .ite.hover::after {background-color: #ff614a;
}.moday {width: 100%;height: 40rpx;overflow: hidden;position: relative;margin-top: 20rpx;
}.moday .dd {width: 52rpx;height: 40rpx;line-height: 1;text-align: center;font-size: 22rpx;position: absolute;left: 0;bottom: 0;
}.moday .dd:nth-of-type(2) {left: 107rpx;
}.moday .dd:nth-of-type(3) {left: 214rpx;
}.moday .dd:nth-of-type(4) {left: 321rpx;
}.moday .dd:nth-of-type(5) {left: 428rpx;
}.moday .dd:nth-of-type(6) {left: 535rpx;
}.moday .dd:nth-of-type(7) {left: 642rpx;
}.the-btn {margin: 50rpx 0;
}.the-btn .btn {background-color: #ff614a;color: #fff;
}.the-btn.signed .btn {background-color: rgba(153, 153, 153, 0.61);
}.explax {padding: 0 30rpx;font-size: 28rpx;color: #666;
}//小程序js代码
const app = getApp();Page({/*** 页面的初始数据*/data: {//签到模块signNum: 0,  //签到数signState: false, //签到状态integral: '',min: 1,  //默认值日期第一天1max: 7,  //默认值日期最后一天7score:"0"},//签到bindSignIn(e) {//  获取tokenvar token = wx.getStorageSync('token');let that = this;//  用户idwx.request({url: '**************************//仅为示例，并非真实的接口地址data: {},header:{"Authorization":"Bearer "+token},success(res) {//   console.log(res.data.data);if (res.data.code == 200) {wx.showToast({title: res.data.msg,})that.setData({signNum:res.data.data.days,score:res.data.data.score,signState:true})}if (res.data.code == 500) {wx.showToast({title: '网络异常',})}if (res.data.code == 501) {wx.showToast({title: '签到失败',})}}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var token = wx.getStorageSync('token');let that = this;//  用户idwx.request({url: '**************************', //仅为示例，并非真实的接口地址data: {},header:{"Authorization":"Bearer "+token},success(res) {if (res.data.code == 200) {that.setData({signNum:res.data.data.days,score:res.data.data.score,})}}})},
})//php代码public function sign(Request $request){//测试用户id$userId =1;$user = User::where('id',$userId)->first();$day = $user->days;//获取当前的时间$yearMonthDay = date('Y-m-d',time());$has =  Sign::where('userid',$userId)->where('ymd',$yearMonthDay)->first();if($has){return ['code'=>200,'msg'=>'已签到','data'=>[]];}//开启事务DB::beginTransaction();try {//将用户id 和 当前签到天数添加到表里面$sign = Sign::create(['userid'=>$userId,'ymd'=>$yearMonthDay]);$signId = $sign->id;//获取用户上次签到时间$lastSignDayObj = Sign::select('ymd')->where('userid',$userId)->where('id','<',$signId)->orderBy('id','desc')->limit(1)->first();//根据上次的签到时间来判断是 断签 ，还是连续签到 ，还是第一次签到if (empty($lastSignDayObj)){//不存在 表示第一次签到$days = 1;$number = SginRule::select('number')->where('day',$days)->first();if ($number){$score = $number->number;//存在}else{//不存在$score = 7;}$status = '第一次签到,获得积分'.$score;}else{$lastSignDay = $lastSignDayObj->ymd;//存在  将当前天数的时间戳 和 上次签到的时间戳作比较$time = strtotime($yearMonthDay) - strtotime($lastSignDay);if ($time >= 24*3600 && $time < 48*3600){//表示连续签到 签到天数加一$days = $day +1;$number = SginRule::select('number')->where('day',$days)->first();if ($number){$score = $number->number;}else{//不存在$score = 7;}$status = '连续签到'.$days.'天，获得积分'.$score;}else if ($time >= 48*3600){//表示断签 和 第一次签到是一样的$days = 1;$number = SginRule::select('number')->where('day',$days)->first();if ($number){$score = $number->number;//存在}else{//不存在$score = 7;}$status = '断签后第一次签到，获得积分'.$score;}else{return ['code'=>500,'msg'=>'网路错误'];}}//记录用户的积分明细    SginDetail::create(['userid'=>$userId,'score'=>$score,'type'=>1,'fid'=>$signId.'订单号']);//求用户的积分余额$scores = SginDetail::where('userid',$userId)->sum('score');//更改用户的连续签到天数 和 积分User::where('id',$userId)->update(['days'=>$days,'scores'=>$scores]);//事务提交DB::commit();return ['code'=>200,'msg'=>'签到成功','data'=>                        ['score'=>$scores,'status'=>$status,'days'=>$days]];}catch (\Exception $e){//事务回滚DB::rollBack();return ['code'=>501,'msg'=>'签到失败'];}}
//页面初始化public function startSign(){//用户ID$uid =1;$data = User::where('id',$uid)->first();return ['code'=>200,'msg'=>'签到成功','data'=>$data];}//表说明//用户表
CREATE TABLE `users` (`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,`email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '123456@qq.com',`email_verified_at` timestamp NULL DEFAULT NULL,`password` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,`remember_token` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,`created_at` timestamp NULL DEFAULT NULL,`updated_at` timestamp NULL DEFAULT NULL,`days` int(11) DEFAULT NULL,`scores` int(11) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;//积分表
CREATE TABLE `sign_detailed` (`id` int(11) NOT NULL AUTO_INCREMENT,`userid` int(11) DEFAULT NULL COMMENT '用户id',`type` tinyint(4) DEFAULT NULL COMMENT '获取积分的类型',`fid` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '积分来源',`score` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '获取到的积分',`time` datetime DEFAULT NULL COMMENT '时间',`created_at` datetime DEFAULT NULL,`updated_at` datetime DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;//签到表
CREATE TABLE `sign_records` (`id` int(11) unsigned NOT NULL AUTO_INCREMENT,`userid` int(10) NOT NULL COMMENT '用户id',`ymd` date NOT NULL COMMENT '签到时间',`updated_at` datetime DEFAULT NULL,`created_at` datetime DEFAULT NULL COMMENT '签到具体时间',PRIMARY KEY (`id`,`userid`,`ymd`),UNIQUE KEY `唯一` (`userid`,`ymd`) USING BTREE
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;//积分
CREATE TABLE `sign_rule` (`id` int(11) NOT NULL AUTO_INCREMENT,`day` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '签到天数',`number` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '积分',PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;//注意模型要写上   protected $guarded = [];

//模型示例

laravel8 微信小程序（实现简单签到功能）相关推荐

微信小程序实现简单定位功能
微信小程序实现简单定位功能,简单易读,获取经纬度信息在pages下创建一个单页如local local.js如下 var app = getApp() Page({ data:{latitude:' ...
java计算机毕业设计基于安卓Android/微信小程序的大学生签到管理系统APP
项目介绍随着Internet的发展,人们的日常生活已经离不开网络.未来人们的生活与工作将变得越来越数字化,网络化和电子化.网上管理,它将是直接管理签到系统app的最新形式.本论文是以构建签到系统ap ...
如何实现消息功能_如何实现微信小程序的轮盘抽奖功能
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图: 上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是"不中奖" ...
借鉴华为HiLink实现微信小程序智能配网功能
借鉴华为HiLink实现微信小程序智能配网功能微信小程序介绍微信公众号智能配网 Smartconfig实现原理 Smartconfig技术的弊端 AP配网技术的出现微信小程序智能配网模块端设置 ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
微信小程序实现换肤功能
参考链接: (1)微信小程序实现换肤功能 https://www.jb51.net/article/136445.htm (2)微信小程序实现换肤功能 https://blog.csdn.net/qq ...
微信小程序拍照打卡功能实现
微信小程序拍照打卡功能实现附Java代码小程序端签到页面wxml 签到页面js 拍照页面wxml 拍照页面js Java后台保存照片保存打卡数据由于拍照组件是相当于一个块,用隐藏显示的方 ...
微信小程序的简单介绍
微信小程序的简单介绍 1.与HTML的区别 HTML 微信小程序 <div></div> <view></view> <h1></h1 ...
低成本免服务器微信小程序源码多功能集合搭建
现如今在线副业已经成为一种趋势,越来越多的人选择副业作为起步.小程序凭借不占内存.无论前期投入还是后期维护,成本都较低:如果你想副业来赚钱,选择小程序是非常不错的选择,有很多人可能会问,我不会做小程序 ...
微信小程序：好玩多功能实用工具箱
看标题你们猜得不错,这就是一款由多个功能组合的一款小程序源码功能可以说有好玩的,也有实用的,非常的不错 UI也是特别的简单,让人看起来很舒服,也是特别的赞! 功能列表有: 测量尺子随机抽取图片 ...

laravel8 微信小程序（实现简单签到功能）

laravel8 微信小程序（实现简单签到功能）相关推荐

最新文章

热门文章