<template> <view class="image-txt-wrap"> <image :src="captchaBase" class="image" @click="getCode"></image> <text class="tip-txt">* 点击图片即可切换验证码</text> <input v-model="captcha" @input="inpChange" class="item-inp" name="captcha" type="text" maxlength="4" placeholder="请输入上方的图形验证码" /> <button :type="btnType" size="mini" class="popup-button-yz" @click="verify">验证</button> </view> </template> <script> import { getCaptcha, memberCaptcha } from '@/api/user.js' export default{ name: 'ImageTxtPopup', props: { changeImg: { type: Boolean, default: false }, // applyImageTxt申请试用 forgetImageTxt忘记密码 type: { type: String, default: '' }, }, watch: { changeImg(newV, oldV){ if(newV === true){ this.getCode() } } }, data(){ return{ captchaBase: '', // 图片验证码base64 captcha: '', // 图文验证码 nowRandomCode: '', // 当前随机码 btnType: 'default', // 验证按钮type } }, created() { this.getCode() }, methods: { // 获取验证码 getCode(){ const _this = this // 6位随机数 this.nowRandomCode = Math.random().toString().slice(-6) let portAddress = '' if(_this.type == 'applyImageTxt'){ // 申请试用 获取图片验证码 portAddress = getCaptcha }else if(_this.type == 'forgetImageTxt'){ // 忘记密码 获取图片验证码 portAddress = memberCaptcha } portAddress(this.nowRandomCode).then(res => { // 获取图片路径 _this.captchaBase = 'data:image/png;base64,' + res.data // 显示图文验证码弹框 _this.captcha = '' // 清空图文输入内容 }) }, // 验证码输入监听 inpChange(){ if(this.captcha.length == 4){ this.btnType = 'primary' }else{ this.btnType = 'default' } }, // 验证 verify(){ if(!this.captcha){ uni.showToast({icon: 'none',title: '请输入上方的图形验证码'}) return }else{ if(this.captcha.length != 4){ uni.showToast({icon: 'none',title: '请输入4位图形验证码'}) return } this.$emit('captchaImg', this.captcha, this.nowRandomCode) } }, } } </script> <style lang="scss" scoped> .image-txt-wrap{ line-height: 1.8; .tip-txt{ display: block; font-size: 24upx; color: #999; margin-bottom: 40upx; text-align: center; } .item-inp{ background-color: #fff; border: 2upx solid #dcdee2; border-radius: 8upx; color: #666; display: inline-block; font-size: 24upx; height: 64upx; line-height: 1.5; padding: 8upx 14upx; width: 100%; box-sizing: border-box; } .image{ max-width: 100%; width: 400upx; height: 160upx; margin: 30upx auto 20upx; display: block; img{ max-width: 100%; } } .popup-button-yz{ display: block; margin: 40upx auto 50upx; width: 30%; line-height: 2.8; } } </style>