使用公开页实现扫码签到功能

本文介绍了如何利用白码低代码平台的公开页,实现扫码签到功能。首先在系统设置中启用公共用户,创建签到人和签到登记表。接着创建录入签到人和签到信息的功能,并设计签到页面。通过添加文本框和二维码组件,设置页面属性和触发按钮的代码。最后,设置公共用户权限,完成签到功能的全部步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

功能描述:

使用白码低代码开发平台的公开页,实现系统里的客户或学生扫描二维码跳转到签到页面,输入手机号码进行签到。

前期准备:

  1. 在工作台,系统设置–用户管理中,启用公共用户。
    在这里插入图片描述

  2. 数据表创建:创建一张签到人表、签到登记表。
    在这里插入图片描述
    在这里插入图片描述

功能实现:

  1. 创建一个“新增签到人”功能,用于录入签到人信息。设置姓名、手机号等为必填。
    在这里插入图片描述

功能效果:
在这里插入图片描述

  1. 创建一个“录入签到信息”的功能,把要参加的人,添加进签到登进表里。
    在这里插入图片描述
    在这里插入图片描述

功能效果:
在这里插入图片描述

录入后签到表效果:
在这里插入图片描述

  1. 创建一个“签到登记”功能,用于签到页面判断签到情况,以及签到状态、时间信息更新。
    在这里插入图片描述

返回“不存在”步骤代码示例,其他返回步骤类似只是返回状态不一样:

async function runProcess($model = model,$plugin = plugin,$params){
   
await $model.result("不存在");
await $model.command("tips",{
   });
}

更新签到步骤:
在这里插入图片描述
在这里插入图片描述

  1. 在自定义页面,添加一个签到页面,类型为“公开”,用于签到人签到。由于扫码签到,本次只需设置移动端的签到页面。页面简单设置。
    在这里插入图片描述

在右边的组件库里,添加三个组件,组件的样式可自己手动调整:
在这里插入图片描述
在这里插入图片描述

把文本框组件与添加的页面属性”phone”进行绑定:
在这里插入图片描述

按钮组件触发,代码示例:
在这里插入图片描述

function runViewAction(key, value, $ctx = ctx) {
   
    let
Vue.js项目实现移动端签到功能,通常需要以下几个步骤: 1. **安装依赖**: - 首先,确保你已经安装了Vue CLI并创建了一个新的Vue项目。然后安装`vue-qrcode-reader`库,用于读取二维,命令通常是:`npm install vue-qrcode-reader`. 2. **引入并配置qrcode reader组件**: 在`main.js`或单个组件中导入QrcodeReader插件,并在需要的地方注册它: ```javascript import QrcodeReader from 'vue-qrcode-reader'; Vue.use(QrcodeReader); ``` 3. **创建签到表单**: 设计一个包含描按钮的表单,当点击按钮时,启用QrcodeReader组件开始描二维。 ```html <template> <div> <button @click="startScan">签到</button> <qrcode-reader ref="qrReader" :result="scanResult" /> </div> </template> <script> export default { data() { return { scanResult: '', }; }, methods: { startScan() { this.$refs.qrReader.start(); } }, }; </script> ``` 4. **处理描结果**: 当二维描时,`scanResult`属性会被填充。你可以在此处将描值与后台API交互,验证二维内容并完成签到过程。 ```javascript methods: { handleScanResult(result) { if (result) { // 发送请求到服务器验证二维信息并完成签到 this.signIn(result); } else { alert('未描到二维'); } }, signIn(code) { // 使用axios、fetch或其他HTTP客户端发送POST请求 fetch('/api/sign-in', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code }), }) .then(response => response.json()) .then(data => { if (data.success) { alert('签到成功!'); } else { alert('签到失败,请检查二维内容'); } }); }, }, ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值