微信小程序结合laravel完成签到功能
前端样式未做处理，可将后端数据传至前端进行处理
1.wxml页面
<!--pages/signIn/signIn.wxml-->
<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'>连续签到7日后每日得3分</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=''>切换周期的倍数：{{be}}</view>
</view>
2wxss
.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;}
3:wxjs:
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
//img_url: config.imgUrl, //图片地址
//签到模块
signNum: 0, //签到数
signState: false, //签到状态
min: 1, //默认值日期第一天1
max: 7, //默认值日期最后一天7
be: 0, //默认倍数
integral: ''
},
//签到
bindSignIn(e) {
// 获取token
var token = wx.getStorageSync('token')
// 用户id
var userid = wx.getStorageSync('userid')
wx.request({
url: 'http://www.yan.com/api/task16/sign', //仅为示例，并非真实的接口地址
data: {
userid: userid
},
header: { token },
method: 'POST',
success(res) {
if (res.data.code == 200) {
wx.showToast({
title: '签到成功',
})
}
if (res.data.code == 500) {
wx.showToast({
title: '网络异常',
})
}
if (res.data.code == 501) {
wx.showToast({
title: '签到失败',
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
laravel 路由：
Route::group(['namespace' => 'Task', 'middleware' => 'jwt'], function () {
// 签到
Route::post('task16/sign','task16\TaskController@sign');
//积分明细表
Route::post('task16/details','task16\TaskController@details');
});
laravel控制器：
/*
*
* 签到*/
public function sign(Request $request)
{
$userId = $request->input('userid');
$user = WxUserInfo::where('id',$userId)->first();
$day = $user->days;
//获取当前的时间
$yearMonthDay = date('Y-m-d',time());
//开启事务
DB::beginTransaction();
try {
//将用户id 和 当前签到天数添加到表里面
$sign = \App\Models\week3\Sign::create(['userid'=>$userId,'ymd'=>$yearMonthDay]); $signId = $sign->id;
//获取用户上次签到时间
$lastSignDayObj = \App\Models\week3\Sign::select('ymd')->where('userid',$userId)->where('id','<',$signId)->orderBy('id','desc')->limit(1)->first(); //根据上次的签到时间来判断是 断签 ，还是连续签到 ，还是第一次签到
if (empty($lastSignDayObj)){
//不存在 表示第一次签到
$days = 1;
$number = BonusPoints::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 = BonusPoints::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 = BonusPoints::select('number')->where('day',$days)->first();
if ($number){
$score = $number->number;
//存在
}else{
//不存在
$score = 7;
}
$status = '断签后第一次签到，获得积分'.$score;
}else{
return ['code'=>500,'msg'=>'网路错误'];
}
}
//记录用户的积分明细
SignUser::create(['userid'=>$userId,'score'=>$score,'type'=>1,'fid'=>$signId.'订单号']);
//求用户的积分余额
$scores = SignUser::where('userid',$userId)->sum('score');
//更改用户的连续签到天数 和 积分
WxUserInfo::where('id',$userId)->update(['days'=>$days,'scores'=>$scores]);
//事务提交
DB::commit();
return ['code'=>200,'msg'=>'签到成功','data'=>['score'=>$score,'status'=>$status]];
}catch (\Exception $e){
//事务回滚
DB::rollBack();
return ['code'=>501,'msg'=>'签到失败'];
}
}
相关的模型：用户表
CREATE TABLE `wxuserinfos` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`openid` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`session_key` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`avatarUrl` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '头像',
`nickName` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '昵称',
`days` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '签到天数',
`scores` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '积分',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
<?php namespace App\Models\Task\task15; use Illuminate\Database\Eloquent\Model; class WxUserInfo extends Model
{
//
protected $guarded=[];
public $timestamps=false;
protected $table='WxUserInfos';
}
签到记录表
<?php namespace App\Models\week3; use Illuminate\Database\Eloquent\Model; class Sign extends Model
{
//
protected $guarded=[];
public $timestamps=false;
protected $table='sign_records';
}
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=47 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
签到积分规则表：
<?php namespace App\Models\week3; use Illuminate\Database\Eloquent\Model; class BonusPoints extends Model
{
//
protected $table='sign_rule';
protected $guarded=[];
public $timestamps=false;
}
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 AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
积分明细表：
<?php namespace App\Models\week3; use Illuminate\Database\Eloquent\Model; class SignUser extends Model
{
//
public $timestamps=false;
protected $table='sign_detailed';
protected $guarded=[];
}
EATE 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 '时间',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=17 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
微信小程序结合laravel完成签到功能的更多相关文章
- 记录使用微信小程序的NFC和蓝牙功能读取15693芯片的开发历程
开发目标: (1) 对于Android手机,直接通过微信小程序调用手机的NFC功能,对15693协议的芯片进行读写操作: (2)对于苹果手机(及没有NFC模块的手机),通过微信小程序的蓝牙功能连接到蓝 ...
- 基于微信小程序的用户列表点赞功能
代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...
- 微信小程序之换肤的功能
pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...
- 微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
- 微信小程序背景音频播放分享功能
如果正常背景音频播放的话,只能跳转到自己对应的微信小程序,无法分享朋友圈,我们需要设置分享朋友圈,需要调用一个API 音频背景播放 注意:背景播放在锁屏后播放只支持IOS端,安卓端虽然可以播放,但是锁 ...
- 微信小程序实现连续扫码功能（uniapp）
注:本文使用的是 uniapp 语法. 微信小程序提供了扫码API:wx.scanCode,但它只能扫一次码,想要实现连续扫码,需要借用 camera 组件.camera 组件不仅能拍照,还具有扫码功 ...
- [转]微信小程序实现图片上传功能
本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...
- 微信小程序实现即时通信聊天功能的实例代码
项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-ne ...
- 微信小程序实现图片上传功能
前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...
随机推荐
- JVM学习十五 - （复习）类加载的时机、类加载过程、类加载器
一.类加载的时机 类的生命周期 类从被加载到虚拟机内存开始,到卸载出内存为止,它的整个生命周期包括以下 7 个阶段: 加载 验证 准备 解析 初始化 使用 卸载 验证.准备.解析 3 个阶段统称为连接 ...
- js图片预览代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 晋升挂了！leader说不是我技术不行
大家好,我是对白. 今天给大家分享一位朋友在互联网大厂晋升失败的故事,不是每一位校招生第一年都可以稳稳晋升的,这不仅取决于你的业务收益,还取决于你是否会包装自己的项目,以下为原文. 晋升 去年秋季,我 ...
- Kubernetes家族容器小管家Pod在线答疑?
Kubernetes家族容器小管家Pod在线答疑 不知道学习k8s的小伙伴们有没有跟我一样的疑问? k8s为什么不是直接运行容器,而是让Pod介入? Pod又是什么?为什么在应用容器化如此普遍的情况下 ...
- Solution -「多校联训」假人
\(\mathcal{Description}\) Link. 一种物品有 长度 和 权值 两种属性,现给定 \(n\) 组物品,第 \(i\) 组有 \(k_i\) 个,分别为 \((1,a ...
- Diary -「CSP 2019 J/S」 游记
\(\text{Day 0}\) 试机, 总体感觉不错, 至少不像初一时候的紧张, 毕竟是中青年选手了 ( ? ) 当晚睡得挺好, 虽然是冲着一等奖去的, 但还是没有给自己过多的思想包 ...
- Solution -「APIO 2016」「洛谷 P3643」划艇
\(\mathcal{Description}\) Link & 双倍经验. 给定 \(n\) 个区间 \([a_i,b_i)\)(注意原题是闭区间,这里只为方便后文描述),求 \(\ ...
- 图解python | 面向对象编程
作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/56 本文地址:http://www.showmeai.tech/article-det ...
- Python中模块调用说明
1 import test # 导入test模块 2 3 print(test.a) # 使用"模块.变量"调用模块中的变量 4 5 test.hi() # 使用"模块. ...
- CobaltStrike逆向学习系列(6)：Beacon sleep_mask 分析
这是[信安成长计划]的第 6 篇文章 关注微信公众号[信安成长计划] 0x00 目录 0x01 C2Profile 分析 0x02 set userwx "true" 0x03 s ...