手机扫码进入h5页面填写信息

页面的二维码

html上的二维码
```javascript
<template><view class="page"><view class="display_center align_center height100"><view class="text-center"><view class="fff f47 fweight letter10">电子价格牌</view><div class="box" v-if="!maskLayer"><div><div><divid="qrcode"ref="qrcode"></div></div></div><p class="hint">请用微信扫一扫，配置参数</p></div><div v-else><p class="beBeing">已经扫码，正在填写配置信息！</p></div></view></view><initView ref="initView"></initView> </view>
</template>

下载插件并引入

import QRCode from 'qrcodejs2';// 生成二维码clientPreCreate(){let params = {url: "https://eshotel.quancheng.vip/pay/information.html",//写好h5静态页给后端，后端返回的地址}generateQrCode(params).then(res =>{if(res.code === 200){console.log('二维码-----》',res.data)this.qrCode(res.data);this.scanCode=res.datalet index = this.scanCode.indexOf("=")this.scanCode=this.scanCode.substring(index+1,this.scanCode.length)// console.log('str====>',this.scanCode)// 定时器轮询调用查询接口，直到填写完成this.timer = setInterval(()=>{let data = {code:this.scanCode}hasScanCode(data).then((res)=>{console.log('检测二维码是否扫码',res)if(res.code === 200){if(res.data == 2){console.log('没扫码')}else if(res.data == 1){console.log('扫码了')this.maskLayer=truethis.getSettingParam()clearInterval(this.timer);}}else{clearInterval(this.timer);}})},2000);}})},// 获取配置信息getSettingParam(){this.gainTime = setInterval(()=>{let param = {code:this.scanCode}getSettingParam(param).then((res)=>{if(res.data !==""){console.log('获取配置信息',res)clearInterval(this.gainTime);this.formInfo=res.datathis.confirm()}})},2000)},// 将url地址转换成二维码qrCode(url) {document.getElementById('qrcode').innerHTML = '';let qrcode = new QRCode('qrcode', {width: 300, //图像宽度height: 300, //图像高度colorDark: '#000000', //前景色colorLight: '#ffffff', //背景色typeNumber: 4,correctLevel: QRCode.CorrectLevel.H, //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H});qrcode.clear(); //清除二维码qrcode.makeCode(url); //生成另一个新的二维码},```javascript

h5页面 information.html

电子价格牌

</head>
<body><div id="app"><div class="electronic">电子价格</div><form action="" method="post" enctype="text/plain"><input placeholder="请输入门店ID" type="text" v-model="branchId"></input><br/><div class="box"><input placeholder="请输入数字类型" type="text"  v-model="type"></input><p style="font-size:12px;">数字类型说明：1代表电子房价牌;2代表上网价目表;3代表饮品价目表;4代表电子轮播图</p></div><!-- <button type="submit" @click="submit">确定</button> --><el-button  @click="submit">确定</el-button></form></div>
</body>
<style>body{overflow: hidden;margin: 0px;padding: 0px;}.electronic{text-align: center;margin-top: 20px;}form{text-align: center; font-size: 18px;}input{height: 30px;width: 80%;margin-top: 20px;}button{width: 100px;height: 30px;font-size: 18px;}
</style>
<script type="text/javascript">var vm = new Vue({el:'#app',data:{code:'',url:'',branchId:'',type:'',},created(){this.code=window.location.hreflet index=this.code.indexOf('=')this.code=this.code.substring(index+1,this.code.length)// this.code=565772console.log(this.code)let url="https://eshotel.quancheng.vip/guns-cloud-branch/eleNet/scanCode";url += `?code=${this.code}`axios.get(url).then((res=>{console.log(res)}))},methods:{submit(){console.log(112212,this.branchId,this.type)if(!this.branchId || !this.type){alert('门店ID或数字类型有一个没填写')}else{let params={branchId:this.branchId,type:this.type,code:this.code}let url = 'https://eshotel.quancheng.vip/guns-cloud-branch/eleNet/settingParam'axios.post(url,params).then((res=>{// if(res.code === 200){alert('提交成功')window.close()// }}))}}},})
</script>

手机扫码进入h5页面填写信息相关推荐

微信/支付宝/网页--扫码进入H5页面，完成业务后关闭页面
1:html <span class="date">{{countdown}} 秒后自动退出</span><div class="btn_o ...
Spring学习笔记（二十三）——实现网站微信扫码登录获取微信用户信息Demo
目录微信扫码登录介绍开发步骤微信扫码登录示例微信开放文档遇到的问题使用第三方工具实现网站微信扫码登录开发前介绍开发步骤微信扫码登录获取微信用户信息Demo实现流程实现效果实现过程 ...
手机扫码登陆网页的原理实现
微信,淘宝等许多应用通过手机扫码登陆,是如何实现的? 这里以微信页面为例: 浏览器请求微信服务端,微信的server端返回给浏览器一个唯一的UID,前端将其封装到一个二维码中,并且发一个长链接请求携带 ...
java实现手机扫码登录客户端
为什么手机登录记住密码后不用再次登录在了解扫码登录之前我们先了解一下其他内容, 首先为了安全,手机端它是不会存储你的登录密码的.但是在日常使用过程中,我们应该会注意到,只有在你的应用下 ...
手机扫码登录实现原理
最近接到一个需求,要求用手机扫码实现用户登录,这是近几年比较流行的登录方式.这样确实是实现用户体验至上,操作简单,方便实用.拿到需求之后,我与后端大哥商量后,敲定了具体的实施方案.其实重要的还是要弄懂 ...
IM要做手机扫码登录？先看看微信的扫码登录功能技术原理
本文原文由作者Amazing10原创发布于公众号业余码农,收录时有改动,感谢原作者的技术分享. 1.引言某天中午,吃完午饭,摊在自己的躺椅上,想趁吃饱喝足的午后时间静静享受独自的静谧. 干点什么好呢 ...
vue3 微信扫码登录及获取个人信息实现的三种方法
一.流程: 微信提供的扫码方式有两种,分别是: 跳转二维码扫描页面内嵌式二维码根据文档我们可以知道关于扫码授权的模式整体流程为: 1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微 ...
一码多付-------支付宝/微信扫码支付(H5支付) 静态码
为了实现一码多付生成一个通用二维码通过支付宝或者微信都可以支付 1 使用支付宝扫码支付支付宝提供了扫码枪,用户扫商户动态生成的码这样会根据用户不同或者金额不同需要动态的码,这样显然是不可以 ...
手机扫码传文件免安装免流工具教程
手机免安装0流量传输文件必备神器扫二维码即可传送文件,只要有一个手机有这软件就能传,软件可以传送视频软件文档音乐还有其他文件如压缩包等等,非常方便实用! 视频教程: 手机免安装0流量扫码传文件神器实际 ...

手机扫码进入h5页面填写信息

手机扫码进入h5页面填写信息相关推荐

最新文章

热门文章