微信小程序二维码签到考勤系统

微信小程序实现二维码签到考勤系统-云海天教程

一。手动生成二维码的.js代码

这里要引入一个官方文档wxapp.qrcode.min.js

let drawQrcode = require("../utils/wxapp.qrcode.min.js");//引入wxapp.qrcode.min.js文件

createQRcode(canvasWidth, canvasHeight, canvasId, url) {

// 调用qrcode.js里的方法,传入对应参数

drawQrcode({

width: canvasWidth,

height: canvasHeight,

canvasId: canvasId,

text: url

})

console.log(drawQrcode.width)

},

setCanvasSize() {

let size = {};

// getSystemInfoSync 微信小程序提供getSystemInfoSync获取设备的信息

let res = wx.getSystemInfoSync();

// console.log(res);

// 获取比例

let scale = 686 / 750;

let width = res.windowWidth * scale;

let height = width;

size.w = width;

size.h = height;

return size;

},

formsubmit(e) {

let url = e.detail.value.url || this.data.placeholder;

// let url = e.detail.value.url ? e.detail.value.url : this.data.placeholder;

wx.showToast({

title: "生成中",

icon: "loading",

duration: 2000

})

let that_ = this;

let timer = setTimeout(() => {

let size = that_.setCanvasSize();

//调用createQRcode方法

that_.createQRcode(size.w, size.h, "mycanvars", url);

wx.hideToast();

clearTimeout(timer);

}, 2000)},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

//setCanvasSize 拿到画布区域的尺寸(微信小程序不支持dom的操作,所以单独定义方法去获取)

let size = this.setCanvasSize();

// console.log(size);

let url = this.data.placeholder;

//调用createQRcode方法

this.createQRcode(size.w, size.h, "mycanvars", url);

},

二。准备工作,导入数据库表,和unit.js。获取时间

const DB = wx.cloud.database().collection("cows")

const TB = wx.cloud.database().collection("log")

let i = 0

let id=""

var util = require("../utils/util.js");

三。写入签到签退按钮的.js代码

now(){

var that = this;

console.log(that.data.nows)

if (i == 0 && that.data.now =="签到"){

i=1;

var time1 = util.formatTime(new Date())

DB.add({

data: {

statctime:time1,

endtime: ""

},

success(res) {

id=res._id

console.log("签到成功", res._id)

},

fail(res) {

console.log("签到失败", res)

}

})

that.setData({

statc: time1,

now: "已签到",

color: "rgb(199, 194, 194)"

})

wx.showToast({

title: "签到成功"

})

var timeout= setTimeout(function(){

wx.switchTab({

url: "/pages/arrary/first/ones/ones",

})

},1000)

}

else{

wx.showToast({

title: "已签到,请勿重复签到",

icon: "none"

})

}

},

nows(){

var that = this;

if (i == 1 || that.data.now == "已签到" && that.data.nows == "签退"){

i=2;

var time2 = util.formatTime(new Date())

DB.doc(id).update({

data: {

endtime: time2

},

success(res) {

console.log("签退成功", res)

},

fail(res) {

console.log("签退失败", res)

}

})

that.setData({

ends: time2,

nows: "已签退",

colors: "rgb(199, 194, 194)"

})

wx.showToast({

title: "签退成功"

})

}

else

{

if(i==2){

wx.showToast({

title: "已签退,请勿重复签退",

icon: "none"

})

}

else{

wx.showToast({

title: "请先签到,签到之后方可签退!",

icon: "none"

})

}

}

},

第四。页面监听签退后会跳出签退页面。重新进入需要监听。

var that = this

wx.cloud.callFunction({

name: "getopenid",

success(res) {

var openid = res.result.openid

DB.get({

success(e) {

console.log(e)

var lenths = e.data.length;

console.log(lenths);

var time1 = util.formatTime(new Date())

for (var i = 0; i < lenths; i++) {

if (e.data[i]._openid == openid && e.data[i].statctime.substring(0, 10) == time1.substring(0, 10)) {

var st = e.data[i].statctime

var en = e.data[i].endtime

that.setData({

statc: st,

now: "已签到",

color: "rgb(199, 194, 194)",

})

}

}

},

fail(e) {

console.log("查询失败", e)

}

})

console.log("获取成功", res.result.openid)

},

fail(res) {

console.log("获取成功", res)

}

})

到这,一个简单的签到页面就完成了。如有不对的地方,小菜鸟期盼大神的指导。

希望对你们有用处。

总结

以上所述是小编给大家介绍的微信小程序实现二维码签到考勤系统,希望对大家有所帮助

以上是 微信小程序二维码签到考勤系统 的全部内容, 来源链接: utcz.com/a/124592.html

回到顶部