<template>
<view class="content" :style="{height:windowHeight+'px'}">
<text @click="yzm">获取验证码</text>
<xlg-slideCode :session_id="session_id" v-if="slideCode_show" @close="slideCode_show = false" @success="slideCode_success"></xlg-slideCode>
</view>
</template>
<script>
//组件模板再下载资源里
import xlgSlideCode from '../../components/xlg-slideCode/xlg-slideCode.vue'
import {
getMyInfo
} from '@/api/student_manage.js'
export default {
components:{
xlgSlideCode
},
data() {
return {
windowHeight:0,
slideCode_show: false,//图形验证码是否显示
slideCode_yanzheng: false,//图形验证码是否验证通过
// slideCode_x: 10,//图形验证码的水平偏移值
session_id:123456//这里有人可能会好奇,为什么会自己定义一个session的Id,php的session不是会自己生成id,然后通过cookie的方式进行传递吗? 答案就是:很多小程序在网络访问时是不支持传递cookie的。所以这里就实现通过get方式进行传递
}
},
onShow() {
uni.getSystemInfo({
success:(res)=>{
this.windowHeight=res.windowHeight
}
});
},
methods: {
slideCode_success(x){//验证通过了
this.slideCode_yanzheng = true//验证通过 后就可以执行下面的业务了
// getMyInfo({name:this.name,id_number:this.id_number}).then(res=>{
// if(res.code==1){
// let dorm_room=JSON.stringify(res.data.dorm_room) //宿舍信息
// let student=JSON.stringify(res.data.student) //学生信息
// uni.navigateTo({
// url: './look_data?dorm_room='+dorm_room+'&student='+student,
// })
// }else{
// uni.showToast({
// title: res.msg,
// icon:'none'
// });
// }
// })
},
yzm(){
if(this.slideCode_yanzheng === true){//图形滑块是否验证通过
}else{//到这里说明没有验证或者没有验证通过。调起“图片滑块验证码”
this.slideCode_show = true
this.session_id= Math.floor(Math.random()*9999999999)
}
}
}
}
</script>
<style scoped lang="scss">
.content{
background: url(../../static/bj1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
position: relative;
.logo{
width:514rpx;
height: 90rpx;
position: absolute;
left: 50%;
top: 33%;
transform: translateX(-50%);
}
.inpu{
width:514rpx;
position: absolute;
left: 50%;
top: 42%;
transform: translateX(-50%);
.min{
icon{
margin: 0 10rpx;
}
input{
flex: 1;
height: 70rpx;
text-indent: 15rpx;
background:rgba(255,255,255,1);
border-radius:6px;
margin: 0 0 20rpx 0;
}
.ok_but{
display: flex;
align-items: center;
justify-content: center;
margin-top: 50rpx;
.but{
width: 240rpx;
font-size: 30rpx;
background: #FFFFFF;
height: 70rpx;
border-radius: 10rpx;
color:#03b1fa;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}
</style>
滑动验证码 配合验证码组件使用
最新推荐文章于 2024-05-15 01:22:10 发布