增加设备绑定
This commit is contained in:
@@ -1,2 +1,2 @@
|
|||||||
# VITE_APP_BASE_URL = "http://192.168.20.191:3000"
|
VITE_APP_BASE_URL = "http://192.168.20.191:3000"
|
||||||
VITE_APP_BASE_URL = "http://123.57.20.168:3000"
|
# VITE_APP_BASE_URL = "http://123.57.20.168:3000"
|
||||||
15619
package-lock.json
generated
Normal file
15619
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -59,6 +59,7 @@
|
|||||||
"@dcloudio/uni-ui": "^1.5.7",
|
"@dcloudio/uni-ui": "^1.5.7",
|
||||||
"mescroll-uni": "^1.3.7",
|
"mescroll-uni": "^1.3.7",
|
||||||
"pinia": "2.0.20",
|
"pinia": "2.0.20",
|
||||||
|
"uuid": "^11.1.0",
|
||||||
"vue": "^3.4.21"
|
"vue": "^3.4.21"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@@ -478,6 +478,15 @@ app.post('/api/mattersList', (req,res) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 查询设备绑定状态 绑定状态(1=已提交、2=等待审核、3=审核通过、4=绑定成功、5=审核拒绝)
|
||||||
|
app.post('/api/getBindStatus', (req,res) => {
|
||||||
|
res.json(Mock.mock({
|
||||||
|
code: 0,
|
||||||
|
data: {
|
||||||
|
bindStatus:4
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
//2.创建server
|
//2.创建server
|
||||||
|
|||||||
@@ -1,5 +1,11 @@
|
|||||||
import request from "@/utils/request"
|
import request from "@/utils/request"
|
||||||
|
|
||||||
|
// 获取设备绑定状态
|
||||||
|
export function getBindStatus() {
|
||||||
|
return request.post({
|
||||||
|
url: '/api/getBindStatus',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// 获取图片
|
// 获取图片
|
||||||
export function getCaptchaImage() {
|
export function getCaptchaImage() {
|
||||||
|
|||||||
228
src/components/sliderCode.vue
Normal file
228
src/components/sliderCode.vue
Normal file
@@ -0,0 +1,228 @@
|
|||||||
|
<template><view>
|
||||||
|
<view v-if="modelValue.show" class="yzm_body" @mousemove="touchmove" @mouseup="touchend">
|
||||||
|
<view class="zhuti">
|
||||||
|
<view :class="['msg', msgText==='验证成功' ? 'green' : (['安全验证', '验证中...'].indexOf(msgText)>-1 ? '' : 'red')]">{{msgText}}</view>
|
||||||
|
<view class="title">拖动下方滑块完成拼图</view>
|
||||||
|
<view class="movable-area">
|
||||||
|
<view id="msg" v-if="zhutuPic === ''">{{msgLoadMsg}}</view>
|
||||||
|
<view id="pic" v-else :style="{background: 'url(' + zhutuPic + ') no-repeat 100%/100%'}"></view>
|
||||||
|
<view id="line"></view>
|
||||||
|
<view :class="['movable-view', {doudong: futu_doudongClass}]" :style="{background: 'url(' + futuPic + ') no-repeat top left/100% 338rpx', left: futu_x+'px', transitionDuration: futu_x===10 ? '300ms' : '0ms'}"
|
||||||
|
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @mousedown="touchstart"></view>
|
||||||
|
</view>
|
||||||
|
<view class="close iconfont iconguanbi" @click="modelValue.show = false"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view></template>
|
||||||
|
<script>
|
||||||
|
export default{
|
||||||
|
emits: ['success'],
|
||||||
|
props:{
|
||||||
|
modelValue: {type: Object, default: {}}
|
||||||
|
},
|
||||||
|
data(){return{
|
||||||
|
zhutuPic: '',//主图
|
||||||
|
//缺口图
|
||||||
|
futuPic: '',
|
||||||
|
futu_x: 10, //默认的位置
|
||||||
|
futu_anxiaX: undefined, //按下时,手指的位置
|
||||||
|
futu_doudongClass: false,
|
||||||
|
//提示信息
|
||||||
|
msgText: '安全验证',
|
||||||
|
msgLoadMsg: '加载中',
|
||||||
|
}},
|
||||||
|
mounted(){},//该组件被挂载到实例上去之后调用
|
||||||
|
methods: {
|
||||||
|
shuaxin(){
|
||||||
|
uni.request({url: this.$yuming+'/xlg_slideCode/yzm_pic.php',
|
||||||
|
data: {
|
||||||
|
type: 'shengcheng',
|
||||||
|
session_id: this.$session_id,
|
||||||
|
class: this.modelValue.className
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
if(res.data.code === 1){//生成验证码成功
|
||||||
|
var url = this.$yuming + '/xlg_slideCode/yzm_pic.php?class='+this.modelValue.className+'&session_id='+this.$session_id+'&time='+(new Date()*1)//time参数作用是 避免触发缓存
|
||||||
|
this.futuPic = url+'&type=futu'
|
||||||
|
this.zhutuPic = url+'&type=zhutu'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
complete: (res) => {
|
||||||
|
//错误处理
|
||||||
|
setTimeout(() => {
|
||||||
|
var errMsg = this.$requestError(res);
|
||||||
|
if(typeof(errMsg.msg) === 'string'){
|
||||||
|
this.msgLoadMsg = errMsg.msg;
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
touchstart(event){//手指按下
|
||||||
|
if(this.futu_anxiaX === undefined && this.futu_x === this.$options.data().futu_x){
|
||||||
|
this.futu_anxiaX = this.$isPc ? event.clientX : event.touches[0].clientX;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
touchmove(event){//手指移动
|
||||||
|
if(this.futu_anxiaX !== undefined){
|
||||||
|
var x = this.$options.data().futu_x + ((this.$isPc ? event.clientX : event.touches[0].clientX) - this.futu_anxiaX),
|
||||||
|
[min, max] = [0, this.$upx2px(600 - 79)]//确保不会超出边界【600是父元素的宽度、79是自身元素的宽度】
|
||||||
|
this.futu_x = x < min ? min : (x > max ? max : x)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
touchend(event){//手指离开
|
||||||
|
if(this.futu_anxiaX !== undefined){
|
||||||
|
this.futu_anxiaX = undefined
|
||||||
|
if(this.zhutuPic === ''){
|
||||||
|
this.futu_x = this.$options.data().futu_x
|
||||||
|
}else{
|
||||||
|
this.msgText = '验证中...'
|
||||||
|
uni.request({url: this.$yuming+'/xlg_slideCode/yzm_pic.php',
|
||||||
|
data: {
|
||||||
|
type: 'yanzheng',
|
||||||
|
session_id: this.$session_id,
|
||||||
|
class: this.modelValue.className,
|
||||||
|
x: parseInt(this.futu_x * (679 / this.$upx2px(600)))//因为x是相对于movable-area容器宽度的,所以需要算出图片实际宽度相 对于 容器宽度的比例
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
if(res.data.code === 1){
|
||||||
|
this.$emit('success')
|
||||||
|
this.msgText = '验证成功'
|
||||||
|
setTimeout(() => {
|
||||||
|
this.modelValue.show = false
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
complete: (res) => {
|
||||||
|
var errMsg = this.$requestError(res);
|
||||||
|
if(typeof(errMsg.msg) === 'string'){
|
||||||
|
this.msgText = errMsg.msg
|
||||||
|
//启动抖动动画
|
||||||
|
this.futu_doudongClass = true//执行抖动的css动画
|
||||||
|
//等待抖动结束
|
||||||
|
setTimeout(() => {
|
||||||
|
//停止抖动
|
||||||
|
this.futu_doudongClass = false
|
||||||
|
//回到默认的位置
|
||||||
|
this.futu_x = this.$options.data().futu_x
|
||||||
|
//重载
|
||||||
|
if(errMsg.code === 2){
|
||||||
|
if(typeof(res.data.error_cishu) === 'undefined' || res.data.error_cishu === 0){//等于空意味着滑块验证码不存在,也是需要刷新的
|
||||||
|
this.shuaxin()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 700);
|
||||||
|
//恢复原状
|
||||||
|
setTimeout(() => {
|
||||||
|
this.msgText = '安全验证'
|
||||||
|
}, 3500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'modelValue.show'(newValue){
|
||||||
|
if(newValue === true){
|
||||||
|
//设置为初始值
|
||||||
|
Object.assign(this, this.$options.data());
|
||||||
|
this.shuaxin()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.yzm_body{
|
||||||
|
display: flex;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1001;
|
||||||
|
width: 750rpx;
|
||||||
|
height: 100vh;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.zhuti{
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #FFF;
|
||||||
|
width: 600rpx;
|
||||||
|
padding: 20rpx 25rpx 30rpx 25rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
.msg{
|
||||||
|
color: #999;
|
||||||
|
font-size: 24rpx;
|
||||||
|
&.red{color: red;}
|
||||||
|
&.green{color: green;}
|
||||||
|
}
|
||||||
|
.close{
|
||||||
|
position: absolute;
|
||||||
|
top: 20rpx;
|
||||||
|
right: 20rpx;
|
||||||
|
color: #A6A6A6;
|
||||||
|
font-size: 36rpx;
|
||||||
|
padding: 10rpx;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 38rpx;
|
||||||
|
color: #333;
|
||||||
|
margin: 0 0 7rpx 0;
|
||||||
|
}
|
||||||
|
.movable-area{
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 415rpx;
|
||||||
|
flex-direction: column;
|
||||||
|
#msg{
|
||||||
|
width: 100%;
|
||||||
|
line-height: 338rpx;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #999;
|
||||||
|
background: #F8F8F8;
|
||||||
|
}
|
||||||
|
#pic{
|
||||||
|
width: 600rpx;
|
||||||
|
height: 338rpx;
|
||||||
|
}
|
||||||
|
#line{
|
||||||
|
background: #e4e4e4;
|
||||||
|
height: 20rpx;
|
||||||
|
margin: 42rpx 0 15rpx 0;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
|
.movable-view{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;left: 0;
|
||||||
|
width: 79.63rpx;
|
||||||
|
height: 100%;
|
||||||
|
&:after{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;left: 0;
|
||||||
|
content: '';
|
||||||
|
box-shadow: rgba(26, 101, 255, 0.52) 0 0 10rpx 1rpx;
|
||||||
|
width: 100rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
background: rgb(26, 101, 255) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcAgMAAABuexVFAAAACVBMVEUAAADCwsL9/f1P0DqbAAAAAXRSTlMAQObYZgAAAB1JREFUGNNjCGVgYGANABKhyMwoEHMBkIgaZWIwAdyJJQnaJRg5AAAAAElFTkSuQmCC) no-repeat 50% 50%/auto 20rpx;
|
||||||
|
margin-left: -10rpx;
|
||||||
|
}
|
||||||
|
@keyframes doudong{
|
||||||
|
20%{transform: translateX(-15px);}
|
||||||
|
40%{transform: translateX(15px);}
|
||||||
|
60%{transform: translateX(-15px);}
|
||||||
|
80%{transform: translateX(15px);}
|
||||||
|
100%{transform:translateX(0);}
|
||||||
|
}
|
||||||
|
&.doudong{
|
||||||
|
animation: doudong 500ms linear 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -13,6 +13,12 @@
|
|||||||
"navigationBarTitleText": ""
|
"navigationBarTitleText": ""
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/deviceAuth/deviceAuth",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/login/login",
|
"path": "pages/login/login",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
477
src/pages/deviceAuth/deviceAuth.vue
Normal file
477
src/pages/deviceAuth/deviceAuth.vue
Normal file
@@ -0,0 +1,477 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="container" :style="{ height: `100vh` }">
|
||||||
|
<view class="bg"></view>
|
||||||
|
<view class="bg-con">
|
||||||
|
<view :style="{height: navBarPaddingTop + 'px'}"></view>
|
||||||
|
<view class="auth-title">
|
||||||
|
<image src="@/static/images/icon-lock@2x.png"/>
|
||||||
|
<text>设备授权</text>
|
||||||
|
</view>
|
||||||
|
<view class="login-con">
|
||||||
|
<!-- 登录 -->
|
||||||
|
<block v-if="!bindStatus">
|
||||||
|
<view class="login-form">
|
||||||
|
<uni-forms ref="form2" :model="formData2" :rules="rules2" label-position="top">
|
||||||
|
<uni-forms-item label="用户名" required name="username">
|
||||||
|
<view class="code-con">
|
||||||
|
<uni-easyinput prefixIcon="person" :inputBorder="false"
|
||||||
|
v-model="formData2.username" placeholder="请输入用户名"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="密码" required name="password" class="password">
|
||||||
|
<view class="code-con">
|
||||||
|
<uni-easyinput prefixIcon="locked" type="password" :inputBorder="false"
|
||||||
|
v-model="formData2.password" placeholder="请输入登录密码"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</uni-forms-item>
|
||||||
|
</uni-forms>
|
||||||
|
</view>
|
||||||
|
<button type="primary" class="btn-submit" @click="submitForm" :loading="btnLoading" :disabled="btnLoading">设备授权申请</button>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<!-- 等待页面(定时任务查询 10秒查询一次) -->
|
||||||
|
<view v-if="bindStatus==2" class="login-form approval">
|
||||||
|
<view class="approval-title">审核中,请等待...</view>
|
||||||
|
<button type="primary" class="btn-refresh" @click="handleRefresh">刷新</button>
|
||||||
|
</view>
|
||||||
|
<!-- bindStatus=5-----显示授权失败,联系管理员 -->
|
||||||
|
<view v-if="bindStatus==5" class="login-form approval-red-con">
|
||||||
|
<view class="approval-red">显示授权失败,联系管理员</view>
|
||||||
|
</view>
|
||||||
|
<!-- bindStatus=3-----输入授权码页面 -->
|
||||||
|
<block v-if="bindStatus==3">
|
||||||
|
<view class="login-form approval" style="padding:110rpx 55rpx 150rpx;">
|
||||||
|
<view class="approval-title">审核通过,请输入授权码</view>
|
||||||
|
<view class="auth-code">
|
||||||
|
<input password type="number" v-model="num1" auto-complete="off" :focus="pass1"
|
||||||
|
maxlength="1" @blur="handleBlur(1)" @input="handleInput($event,1)"
|
||||||
|
/>
|
||||||
|
<input password type="number" v-model="num2" auto-complete="off" :focus="pass2"
|
||||||
|
maxlength="1" @blur="handleBlur(2)" @input="handleInput($event,2)"
|
||||||
|
>
|
||||||
|
<input password type="number" v-model="num3" auto-complete="off" :focus="pass3"
|
||||||
|
maxlength="1" @blur="handleBlur(3)" @input="handleInput($event,3)"
|
||||||
|
>
|
||||||
|
<input password type="number" v-model="num4" auto-complete="off" :focus="pass4"
|
||||||
|
maxlength="1" @blur="handleBlur(4)" @input="handleInput($event,4)"
|
||||||
|
>
|
||||||
|
<input password type="number" v-model="num5" auto-complete="off" :focus="pass5"
|
||||||
|
maxlength="1" @blur="handleBlur(5)" @input="handleInput($event,5)"
|
||||||
|
>
|
||||||
|
<input password type="number" v-model="num6" auto-complete="off" :focus="pass6"
|
||||||
|
maxlength="1" @blur="handleBlur(6)" @input="handleInput($event,6)"
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<button type="primary" class="btn-submit" @click="handleSubmit" :loading="subLoading" :disabled="subLoading">提交</button>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="bottom-pic">
|
||||||
|
<image src="@/static/images/PicLogo@2x.png" class="pic-logo" />
|
||||||
|
<view class="bottom-bg"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref,nextTick,onMounted,onUnmounted,getCurrentInstance } from 'vue';
|
||||||
|
import { v4 as uuidv4 } from 'uuid'
|
||||||
|
import { getNavBarPaddingTop} from '@/utils/system.js';
|
||||||
|
import { getBindStatus } from '@/api/auth.js';
|
||||||
|
import {showToast} from '@/utils/message.js'
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
|
||||||
|
import { useUserStore } from '@/stores/user';
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
// 绑定状态(1=已提交、2=等待审核、3=审核通过、4=绑定成功、5=审核拒绝)
|
||||||
|
let bindStatus = ref(undefined);
|
||||||
|
let deviceId = ref(undefined);
|
||||||
|
let timer = null;
|
||||||
|
// 获取导航栏高度用于内容区域padding
|
||||||
|
const navBarPaddingTop = ref(0);
|
||||||
|
onMounted(async () => {
|
||||||
|
navBarPaddingTop.value = getNavBarPaddingTop();
|
||||||
|
deviceId.value = uni.getStorageSync('app_device');// 本地设备ID
|
||||||
|
await selectBindStatus();
|
||||||
|
console.log("333bindStatus=>",bindStatus.value)
|
||||||
|
if(bindStatus.value==2){
|
||||||
|
// bindStatus=2-----到等待页面(定时任务查询 10秒查询一次)
|
||||||
|
timer = setInterval(()=>{ refreshBindStatus() },1000*10)//10秒刷新一次
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件卸载时清除定时器
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (timer) clearInterval(timer)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 根据设备ID查询设备状态
|
||||||
|
let selectBindStatus = async ()=>{
|
||||||
|
if(deviceId.value){
|
||||||
|
let res = await getBindStatus({deviceId:deviceId.value})
|
||||||
|
bindStatus.value = res.bindStatus;
|
||||||
|
console.log("111bindStatus=>",bindStatus.value)
|
||||||
|
|
||||||
|
//bindStatus=4-----已绑定成功,跳转用户登录页面
|
||||||
|
if(bindStatus.value==4){
|
||||||
|
if (userStore.isLogin) {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/home/home',
|
||||||
|
});
|
||||||
|
}else{
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/login/login',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新定时任务
|
||||||
|
let refreshBindStatus = async ()=>{
|
||||||
|
let res = await getBindStatus({deviceId:deviceId.value})
|
||||||
|
bindStatus.value = res.bindStatus;
|
||||||
|
console.log("222bindStatus=>",bindStatus.value)
|
||||||
|
if(bindStatus.value==2){}else{
|
||||||
|
clearInterval(timer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 账号登录
|
||||||
|
const form2 = ref(null);
|
||||||
|
const formData2 = ref({
|
||||||
|
username: 'admin',
|
||||||
|
password: '123456'
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules2 = {
|
||||||
|
username: {
|
||||||
|
rules: [
|
||||||
|
{ required: true, errorMessage: '请输入用户名' },
|
||||||
|
{ minLength: 3, maxLength: 10, errorMessage: '用户名长度在3到10个字符之间' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
password: {
|
||||||
|
rules: [
|
||||||
|
{ required: true, errorMessage: '请输入密码' },
|
||||||
|
{ pattern: /^[a-zA-Z0-9]{6,12}$/, errorMessage: '密码必须是6-12位字母或数字' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const btnLoading=ref(false)
|
||||||
|
// 登录提交
|
||||||
|
const submitForm = () => {
|
||||||
|
// 用户名和密码登录
|
||||||
|
form2.value.validate().then(async param => {
|
||||||
|
btnLoading.value = true;
|
||||||
|
setTimeout(()=>{
|
||||||
|
console.log('表单数据11:', formData2.value);
|
||||||
|
// let res = await login(param);
|
||||||
|
|
||||||
|
btnLoading.value = false;
|
||||||
|
|
||||||
|
deviceId.value = uuidv4();console.log("新生成=>",deviceId.value);
|
||||||
|
uni.setStorageSync('app_device', deviceId.value)
|
||||||
|
|
||||||
|
bindStatus.value = 2;//默认为 等待审核
|
||||||
|
|
||||||
|
timer = setInterval(()=>{ refreshBindStatus() },1000*10)//10秒刷新一次
|
||||||
|
},500)
|
||||||
|
|
||||||
|
}).catch(err => {
|
||||||
|
console.log('表单错误11:', err);
|
||||||
|
btnLoading.value = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 刷新
|
||||||
|
const handleRefresh = ()=>{
|
||||||
|
selectBindStatus();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 输入授权码内容
|
||||||
|
let num1=ref(''),num2=ref(''),num3=ref(''),num4=ref(''),num5=ref(''),num6=ref('');
|
||||||
|
let pass1=ref(false),pass2=ref(false),pass3=ref(false),pass4=ref(false),pass5=ref(false),pass6=ref(false);
|
||||||
|
// 获取值
|
||||||
|
const getValue=(num,value)=>{
|
||||||
|
let flag = false;
|
||||||
|
num = value.replace(/[^\d]/g, '');
|
||||||
|
if(num!=''){
|
||||||
|
flag=true
|
||||||
|
}
|
||||||
|
return {num,flag}
|
||||||
|
}
|
||||||
|
// input事件
|
||||||
|
const handleInput=(e,type)=>{
|
||||||
|
let value = e.detail.value;
|
||||||
|
if(type==6){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case 1:
|
||||||
|
let obj = getValue(num1.value,value);
|
||||||
|
num1.value = obj.num;
|
||||||
|
nextTick(() => {
|
||||||
|
pass2.value = true;
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
let obj2 = getValue(num2.value,value);
|
||||||
|
num2.value = obj2.num;
|
||||||
|
nextTick(() => {
|
||||||
|
pass3.value = true;
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
let obj3 = getValue(num3.value,value);
|
||||||
|
num3.value = obj3.num;
|
||||||
|
nextTick(() => {
|
||||||
|
pass4.value = true;
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
let obj4 = getValue(num4.value,value);
|
||||||
|
num4.value = obj4.num;
|
||||||
|
nextTick(() => {
|
||||||
|
pass5.value = true;
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case 5:
|
||||||
|
let obj5 = getValue(num5.value,value);
|
||||||
|
num5.value = obj5.num;
|
||||||
|
nextTick(() => {
|
||||||
|
pass6.value = true;
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case 6:
|
||||||
|
let obj6 = getValue(num6.value,value);
|
||||||
|
num6.value = obj6.num;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
let authCode = ref('')
|
||||||
|
const handleBlur = ()=>{
|
||||||
|
let pass1 = num1.value?num1.value:'';
|
||||||
|
let pass2 = num2.value?num2.value:'';
|
||||||
|
let pass3 = num3.value?num3.value:'';
|
||||||
|
let pass4 = num4.value?num4.value:'';
|
||||||
|
let pass5 = num5.value?num5.value:'';
|
||||||
|
let pass6 = num6.value?num6.value:'';
|
||||||
|
authCode.value = pass1+pass2+pass3+pass4+pass5+pass6;
|
||||||
|
}
|
||||||
|
|
||||||
|
let subLoading = ref(false)
|
||||||
|
const handleSubmit=()=>{
|
||||||
|
console.log("authCode=>",authCode.value)
|
||||||
|
if(!authCode.value){
|
||||||
|
showToast("请输入验证码")
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
subLoading.value=true;
|
||||||
|
|
||||||
|
uni.reLaunch({ url: '/pages/login/login' })
|
||||||
|
subLoading.value = false;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
background:#307AF5 !important;
|
||||||
|
height:100vh !important;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.container .bg{
|
||||||
|
background:url('@/static/images/bg@2x.png') no-repeat;
|
||||||
|
background-size:750rpx 663rpx;
|
||||||
|
width: 750rpx;
|
||||||
|
height: 663rpx;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .bg-con{
|
||||||
|
position: absolute;
|
||||||
|
top:200rpx;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .bg-con .auth-title{
|
||||||
|
color:#fff;
|
||||||
|
margin:0 auto;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.container .bg-con .auth-title image{
|
||||||
|
width:52rpx;
|
||||||
|
height:64rpx;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
.container .bg-con .auth-title text{
|
||||||
|
color:#fff;
|
||||||
|
font-size:56rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .login-con{
|
||||||
|
width:610rpx;
|
||||||
|
margin:70rpx auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
:deep(uni-button:after){
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .login-form{
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
padding:30rpx 55rpx 15rpx;
|
||||||
|
/* width:610rpx; */
|
||||||
|
width:500rpx;
|
||||||
|
margin:70rpx auto;
|
||||||
|
}
|
||||||
|
.container .login-form .code-con{
|
||||||
|
padding:0 0 10rpx;
|
||||||
|
margin:0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color:#919191;
|
||||||
|
border-bottom: 1px solid #E7E7E7;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.uni-forms-item__label){
|
||||||
|
color:#239FDF;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size:28rpx;
|
||||||
|
padding:0 !important;
|
||||||
|
}
|
||||||
|
:deep(.uni-easyinput__content){
|
||||||
|
color:#333;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size:32rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
:deep(.uni-easyinput__content) .uni-icons{
|
||||||
|
font-weight: normal;
|
||||||
|
font-size:40rpx !important;
|
||||||
|
color:#239FDF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.uni-input-placeholder){
|
||||||
|
background:none;
|
||||||
|
font-weight:normal;
|
||||||
|
color:#BFBFBF;
|
||||||
|
font-size:28rpx;
|
||||||
|
}
|
||||||
|
:deep(.uni-forms-item__error){
|
||||||
|
padding-left:60rpx;
|
||||||
|
}
|
||||||
|
:deep(.uni-forms-item .is-required){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 使用深度选择器 */
|
||||||
|
:deep(.uni-easyinput__content .uni-icons.uniui-clear) {
|
||||||
|
color: #BFBFBF !important;
|
||||||
|
font-weight: normal !important;
|
||||||
|
font-size:40rpx !important;
|
||||||
|
}
|
||||||
|
:deep(.uni-easyinput__content .uni-icons.uniui-clear::before){
|
||||||
|
content: "\e66c" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-submit{
|
||||||
|
width:496rpx;
|
||||||
|
height:88rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
background-color:#09BC48 !important;
|
||||||
|
margin:90rpx auto 0;
|
||||||
|
font-size:36rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
}
|
||||||
|
.btn-submit::after{
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .bottom-pic{
|
||||||
|
position: absolute;
|
||||||
|
bottom:48rpx;
|
||||||
|
width: 488rpx;
|
||||||
|
left:50%;
|
||||||
|
margin-left:-244rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .bottom-pic .pic-logo{
|
||||||
|
width:156rpx;
|
||||||
|
height:130rpx;
|
||||||
|
margin:0 auto 40rpx;
|
||||||
|
}
|
||||||
|
.container .bottom-pic .bottom-bg{
|
||||||
|
background:url('@/static/images/PicLogoTxt@2x.png') no-repeat;
|
||||||
|
background-size:488rpx 64rpx;
|
||||||
|
width: 488rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .login-con .approval{
|
||||||
|
padding:120rpx 55rpx;
|
||||||
|
}
|
||||||
|
.container .login-con .approval-red-con{
|
||||||
|
width:510rpx;
|
||||||
|
padding:120rpx 50rpx;
|
||||||
|
}
|
||||||
|
.container .login-con .approval-red{
|
||||||
|
color:#FF2B44;
|
||||||
|
font-size: 42rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.container .login-con .approval-title{
|
||||||
|
color:#0395E0;
|
||||||
|
font-size: 42rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.container .login-con .btn-refresh{
|
||||||
|
width:300rpx;
|
||||||
|
height:80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
background-color:#05A3F4 !important;
|
||||||
|
margin:90rpx auto 0;
|
||||||
|
font-size:36rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
}
|
||||||
|
.container .login-con .auth-code{
|
||||||
|
display: flex;
|
||||||
|
margin-top:50rpx;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.container .login-con .auth-code uni-input{
|
||||||
|
background:#E6E6E6;
|
||||||
|
margin-right:20rpx;
|
||||||
|
width:70rpx;
|
||||||
|
height:80rpx;
|
||||||
|
min-height: 80rpx;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 70rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.container .login-con .auth-code uni-input:last-child{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -9,11 +9,19 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
import { onLoad } from '@dcloudio/uni-app';
|
import { onLoad } from '@dcloudio/uni-app';
|
||||||
import { useUserStore } from '@/stores/user';
|
import { useUserStore } from '@/stores/user';
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore();
|
||||||
|
|
||||||
const version="1.0.0"
|
let version = ref("1.0.0");
|
||||||
|
const systemInfo = uni.getSystemInfoSync();
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
version = systemInfo.appWgtVersion,//当前版本号
|
||||||
|
// #endif
|
||||||
|
// #ifdef H5
|
||||||
|
version = systemInfo.appVersion,
|
||||||
|
// #endif
|
||||||
|
|
||||||
onLoad((opt) => {
|
onLoad((opt) => {
|
||||||
console.log("onLoad");
|
console.log("onLoad");
|
||||||
@@ -21,33 +29,13 @@ onLoad((opt) => {
|
|||||||
if (userStore.isLogin) {
|
if (userStore.isLogin) {
|
||||||
// userStore.getUser()
|
// userStore.getUser()
|
||||||
// TODO 未登录会在拦截器中处理跳转登录页, 请在 xxx 配置登录页路径
|
// TODO 未登录会在拦截器中处理跳转登录页, 请在 xxx 配置登录页路径
|
||||||
// #ifdef H5
|
|
||||||
window.setTimeout(()=>{
|
|
||||||
uni.reLaunch({
|
|
||||||
url: '/pages/home/home',
|
|
||||||
});
|
|
||||||
},1000)
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef APP-PLUS
|
|
||||||
uni.reLaunch({
|
uni.reLaunch({
|
||||||
url: '/pages/home/home',
|
url: '/pages/deviceAuth/deviceAuth',
|
||||||
});
|
});
|
||||||
// #endif
|
|
||||||
}else{
|
}else{
|
||||||
// #ifdef H5
|
uni.reLaunch({
|
||||||
window.setTimeout(()=>{
|
url: '/pages/login/login',
|
||||||
uni.reLaunch({
|
});
|
||||||
url: '/pages/login/login',
|
|
||||||
});
|
|
||||||
},1000)
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef APP-PLUS
|
|
||||||
uni.reLaunch({
|
|
||||||
url: '/pages/login/login',
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
BIN
src/static/images/PicLogo@2x.png
Normal file
BIN
src/static/images/PicLogo@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/static/images/PicLogoTxt@2x.png
Normal file
BIN
src/static/images/PicLogoTxt@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/static/images/bg@2x.png
Normal file
BIN
src/static/images/bg@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
BIN
src/static/images/icon-lock@2x.png
Normal file
BIN
src/static/images/icon-lock@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 374 KiB After Width: | Height: | Size: 355 KiB |
Reference in New Issue
Block a user