您现在的位置是:网站首页>前端技术>uniappuniapp

uniapp 发送验证码前弹窗显示滑动图形验证码

神夜2020-08-05 14:16:29uniapp1714人已围观文章来源:神夜个人博客

简介发送验证码前弹窗显示滑动图形验证码

效果图


实现代码:

一、插件 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="trueclass="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 {
 displayflex;
 align-itemscenter;
 justify-contentcenter;
}

.cont {
 z-index:3333;
 background#fff;
 width:280px;
 border-radius8px;
 .shuaxin {
  positionabsolute;
  right20rpx;
  top20px;
  width40rpx;
  height40rpx;
  backgroundurl(data:image/png;base64,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-repeat;
  background-sizecover;
  transitionall 0.3s;
 }
 .title {
  width100%;
  height60px;
  font-size18px;
  color#333;
  @include flexC;
 }

 .imgWrap {
  positionrelative;
  width260px;
  height150px;
  border-radius8px;
  margin0 auto;
  overflowhidden;
  background#ddd;
  .img {
   displayblock;
   width100%;
   height100%;
  }

  .over {
   positionabsolute;
   left0;
   top0;
   width50px;
   height50px;
   background#ddd;
   box-shadowinset 0 0 5px rgba(0000.3);
  }

  .smartImg {
   positionabsolute;
   z-index2;
   left0;
   top0;
   width55px;
   height45px;
   overflowhidden;
   .simg {    
    displayblock;
    width100%;
    height100%;
   }
  }
 }
}

.sliderBox {
 width260px;
 margin10px auto 0;
 height36px;
 positionrelative;

 .sliderF {
  width100%;
  height100%;
  z-index3;

  .sliderS {
   height36px;
   width36px;
   background#007cff;
   border-radius36px;
   displayflex;
   justify-contentcenter;
   align-itemscenter;

   .icon {
    width20px;
    height20px;
   }
  }
 }

 .bgC {
  positionabsolute;
  z-index1;
  left0;
  top50%;
  transformtranslateY(-50%);
  width100%;
  height30px;
  border-radius30px;
  line-height30px;
  font-size14px;
  color#999999;
  box-shadowinset 0 0 4px #ccc;
  text-aligncenter;
  overflowhidden;
 }

 .bgC_left {
  positionabsolute;
  left0;
  top50%;
  transformtranslateY(-50%);
  width0;
  height28px;
  border-top-left-radius28px;
  border-bottom-left-radius28px;
  line-height28px;
  font-size14px;
  background-color#eee;
  box-shadowinset 0 0 4px #ccc;
  text-aligncenter;
 }
}
.showMessage {
 text-aligncenter;
 font-size14px;
 height30px;
 line-height30px;
}
.closewidth:30pxheight:30pxposition:absoluteleft:0right:0margin:autobottom:-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 一起提交给后台验证



站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:288条
  • 微信公众号:扫描二维码,关注我们
分享按钮