您现在的位置是：网站首页>前端技术>uniappuniapp
uniapp 发送验证码前弹窗显示滑动图形验证码
神夜2020-08-05 14:16:29【uniapp】4803人已围观文章来源：神夜个人博客
简介发送验证码前弹窗显示滑动图形验证码
效果图
实现代码：
一、插件 compntents/verfiy.vue
<template>
<view class="cont">
<view class="shuaxin" :style="{ transform: 'rotate(' + rotate + 'deg)' }" @click="refresh">view>
<view class="title">图形验证view>
<view class="imgWrap">
<image class="img" :src="src" mode="aspectFill">image>
<view class="smartImg" :style="'top:'+top+'px;left:'+sleft+'px'"><image class="simg" :src="smartSrc">image>view>
view>
<view class="sliderBox" @touchend="sliderEnd">
<movable-area class="sliderF">
<movable-view :animation="true" class="sliderS" :x="sliderx" direction="horizontal" @change="startMove">
<image class="icon" src="/static/images/rr.png" mode="">image>
movable-view>
movable-area>
<view class="bgC">
拖动左边滑块完成上方拼图
<view class="bgC_left" :style="{ width: backLeft + 'px' }">view>
view>
view>
<view class="showMessage" :style="{ color: acColor }">{{ message }}view>
<image src="/static/images/close3.png" @tap="closeVerify" class="close" />
view>
template>
<script>
export default {
name: 'verfiy',
props: {
show: {
type: Boolean,
default: false
}
},
watch: {
show(v) {
if(v==true){
console.log(11);
this.initVerfiy();
}
}
},
data() {
return {
left: 0, //小图块初始左位置
top: 0, //返回距离顶位置
sleft: 0, //当前小块滑动距离
sliderx: 0,
backLeft: 0, //滑块当前宽
bgC_color: '',
message: '', //错误消息
acColor: '#333',
src: '', //图片
smartSrc:'' ,//小块图
capCode:'',
rotate:0,
};
},
mounted() {
if(this.show==true){
this.initVerfiy();
}
},
methods: {
//初始化验证码图
async initVerfiy() {
const json = await this.api.apiArray.getVerfiyPic({noLoading:true});
if(json.data.returnCode==0){
this.src = json.data.result.bigImage;
this.smartSrc = json.data.result.smallImage;
this.top = json.data.result.yHeight;
this.left = Math.floor(10 * Math.random());
this.capCode = json.data.result.capCode;
this.sliderx = 1;
setTimeout(() => { this.sliderx = 0;}, 300);
}
},
//滑动开始
startMove(e) {
this.backLeft = e.detail.x + 18;
this.sleft = this.left + e.detail.x;
},
//滑动结束验证
async sliderEnd() {
let that = this;
const json = await this.api.apiArray.checkCapCode({method:'post',query:{xPos:parseInt(this.sleft),capCode:this.capCode},noLoading:true});
if(json.data.returnCode==0){
this.message = '验证成功!';
this.acColor = 'green';
setTimeout(() => {
that.message = '';
that.sliderx = 1;
this.backLeft = 0;
setTimeout(() => { that.sliderx = 0; }, 300);
this.$emit('success',this.capCode);
}, 1000);
} else {
this.message = '验证失败，请重试';
this.acColor = 'red';
setTimeout(() => {
that.message = '';
that.sliderx = 1;
setTimeout(() => { that.sliderx = 0; }, 300);
that.initVerfiy();
}, 1000);
}
},
closeVerify(){
this.$emit('close')
},
refresh(){
this.rotate = this.rotate + 180;
this.initVerfiy();
}
}
};
script>
<style lang="scss" scoped>
@mixin flexC {
display: flex;
align-items: center;
justify-content: center;
}
.cont {
z-index:3333;
background: #fff;
width:280px;
border-radius: 8px;
.shuaxin {
position: absolute;
right: 20rpx;
top: 20px;
width: 40rpx;
height: 40rpx;
background: url(data:image/png;base64,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) no-repeat;
background-size: cover;
transition: all 0.3s;
}
.title {
width: 100%;
height: 60px;
font-size: 18px;
color: #333;
@include flexC;
}
.imgWrap {
position: relative;
width: 260px;
height: 150px;
border-radius: 8px;
margin: 0 auto;
overflow: hidden;
background: #ddd;
.img {
display: block;
width: 100%;
height: 100%;
}
.over {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
background: #ddd;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.smartImg {
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 55px;
height: 45px;
overflow: hidden;
.simg {
display: block;
width: 100%;
height: 100%;
}
}
}
}
.sliderBox {
width: 260px;
margin: 10px auto 0;
height: 36px;
position: relative;
.sliderF {
width: 100%;
height: 100%;
z-index: 3;
.sliderS {
height: 36px;
width: 36px;
background: #007cff;
border-radius: 36px;
display: flex;
justify-content: center;
align-items: center;
.icon {
width: 20px;
height: 20px;
}
}
}
.bgC {
position: absolute;
z-index: 1;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 30px;
border-radius: 30px;
line-height: 30px;
font-size: 14px;
color: #999999;
box-shadow: inset 0 0 4px #ccc;
text-align: center;
overflow: hidden;
}
.bgC_left {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 28px;
border-top-left-radius: 28px;
border-bottom-left-radius: 28px;
line-height: 28px;
font-size: 14px;
background-color: #eee;
box-shadow: inset 0 0 4px #ccc;
text-align: center;
}
}
.showMessage {
text-align: center;
font-size: 14px;
height: 30px;
line-height: 30px;
}
.close{ width:30px; height:30px; position:absolute; left:0; right:0; margin:auto; bottom:-40px;}
style>
二、使用
<template>
<view>
<view @tap="openVerfiy">显示图形验证码view>
<uni-popup ref="popup" type="center">
<Verify :show="showVerfiy" v-on:close="closeVerify" v-on:success="verfiySuceess" />
uni-popup>
view>
template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import Verify from '@/components/verify.vue'
export default {
components:{uniPopup,Verify},
data() {
return {
showVerfiy:false,
};
},
mounted() {
},
methods: {
openVerfiy(){
this.showVerfiy = true;
this.$refs.popup.open();
}
//图形验证通过
verfiySuceess(e){
this.capCode = e;
this.closeVerify();
//通过后进行其它操作
},
//关闭图形验证
closeVerify(){
this.showVerfiy = false;
this.$refs.popup.close();
},
}
};
script>
注：后台接口返回背景图和小方块图以及小方块图距离顶部的高。然后检测的时候把当前小方块移动距离左的距离和后台返回的code 一起提交给后台验证
本栏推荐
完美后台框架syadmin
猜你喜欢
站点信息
- 建站时间：2017-10-24
- 网站程序：Hsycms 3.0
- 文章统计：511条
- 微信公众号：扫描二维码，关注我们
