<template>
<uni-popup ref="popup" type="center">
<div class="popup-content">
<image style="width: 130px; height: 50px; background-color: #eeeeee;" :src="captchaBase64" />
<div style="text-align: right;font-size: 12px;">
<a href="javascript:void(0);" title="点我换一个" @click="queryList()" class="tar cup c43a3c1">看不清?</a>
</div>
<div style="margin-top: 10px;">
<uni-easyinput v-model="formData.captcha" placeholder="请输入图形码" @keyup.enter.native="submit()" autocomplete="off" clear focus />
</div>
</div>
<div class="popup-footer">
<button type="primary" class="btn-submit" @click="submit" :disabled="formData.captcha?false:true">{{btnTitle || '验证'}}</button>
</div>
<div class="popup-close" @click="close">
<uni-icons type="close" size="25" color="#bbb"></uni-icons>
</div>
</uni-popup>
</template>
<script>
export default {
name: "captcha",
props: {
title: {
type: String,
default: '请输入图片验证码'
},
btnTitle: {
type: String,
default: '验证'
},
type: {
type: String,
require: true,
},
reqData: {
type: Object,
default () {
return {};
},
},
},
data() {
return {
captchaKey: '',
captchaBase64: '',
formData: {
captcha: '',
},
};
},
mounted() {},
methods: {
open() {
this.initCreated();
this.$refs.popup.open('center');
},
close() {
this.$refs.popup.close();
},
submit() {
var that = this;
let captcha = this.formData.captcha;
if (!captcha || captcha.length < 4) return this.$errToast({ message: '请输入图形码!' });
//1.用户登录:
if (this.type == 'getLoginSms') {
let params = this.reqData || {};
params.imageKey = this.captchaKey;
params.imageVerifyCode = captcha;
this.$request.post('xxx/xxxx/get_verify_code', params).then((j) => {
if (!j.code || j.code != 1) {
that.captcha = '';
that.queryList();
return that.$errToast(j, '发送短信验证码');
}
that.$succToast({ message: '验证码发送成功!' });
that.onCallback(j);
}).catch((res) => {
return that.$errToast(j, '发送短信验证码');
});
return;
}
//其它情况:直接返回图形码
this.onCallback({ captchaKey: captchaKey, captcha: captcha });
},
onCallback(res) {
this.$emit('success', res);
this.close();
},
queryList(callback) {
this.captchaBase64 = '';
if (!this.type) return this.$errToast({ message: '业务类型为空!' });
let params = {};
// params.type = this.type;
params.hasLoadding = this.hasLoadding;
this.$ddnrequest.post('xxx/xxxx/get_image_verify_code', params).then((j) => {
if (j.code != 1) return this.$errToast(j, '获取图片验证码');
let jdata = j.data || {};
this.captchaKey = jdata.imageKey;
this.captchaBase64 = jdata.imageBase64 || '';
return callback && callback();
}).catch((res) => {
this.$errToast(res, "获取图片验证码");
});
},
//----------------[初始化]-----------------
initCreated() {
if (!this.captchaBase64) return this.queryList();
},
},
}
</script>
<style lang="scss" scoped>
/deep/ .uni-popup__wrapper.center {
width: 80%;
margin: auto;
background: white !important;
border-radius: 4px;
}
.popup-content {
padding: 20px;
padding-bottom: 0;
}
.popup-footer {
padding: 20px;
background: white;
text-align: center;
}
.popup-close {
position: absolute;
right: 8px;
top: 8px;
}
.btn-submit[disabled] {
background: #7facec;
cursor: no-drop;
}
.btn-submit {
background: #3A75C6;
color: #fff;
font-size: 14px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 5px;
cursor: pointer;
}
</style>
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
vue+uniapp实现图形验证码功能-插件(附源码).zip (2个子文件)
vue+uniapp实现图形验证码功能-插件(附源码)
captcha.vue 4KB
login.vue 3KB
共 2 条
- 1
资源评论
liu_bees
- 粉丝: 2870
- 资源: 23
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功