image-txt-popup.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <view class="image-txt-wrap">
  3. <image :src="captchaBase" class="image" @click="getCode"></image>
  4. <text class="tip-txt">* 点击图片即可切换验证码</text>
  5. <input v-model="captcha" @input="inpChange" class="item-inp" name="captcha" type="number" maxlength="4" placeholder="请输入上方的图形验证码" />
  6. <button :type="btnType" size="mini" class="popup-button-yz" @click="verify">验证</button>
  7. </view>
  8. </template>
  9. <script>
  10. import { getCaptcha } from '@/api/login.js'
  11. export default{
  12. name: 'ImageTxtPopup',
  13. props: {
  14. changeImg: {
  15. type: Boolean,
  16. default: false
  17. },
  18. // applyImageTxt申请试用 forgetImageTxt忘记密码
  19. type: {
  20. type: String,
  21. default: ''
  22. },
  23. },
  24. watch: {
  25. changeImg(newV, oldV){
  26. if(newV === true){
  27. this.getCode()
  28. }
  29. }
  30. },
  31. data(){
  32. return{
  33. captchaBase: '', // 图片验证码base64
  34. captcha: '', // 图文验证码
  35. nowRandomCode: '', // 当前随机码
  36. btnType: 'default', // 验证按钮type
  37. }
  38. },
  39. created() {
  40. // this.getCode()
  41. },
  42. methods: {
  43. // 获取验证码
  44. getCode(){
  45. const _this = this
  46. // 6位随机数
  47. this.nowRandomCode = Math.random().toString().slice(-6)
  48. getCaptcha(this.nowRandomCode).then(res => {
  49. // 获取图片路径
  50. _this.captchaBase = 'data:image/png;base64,' + res.data
  51. // 显示图文验证码弹框
  52. _this.captcha = '' // 清空图文输入内容
  53. })
  54. },
  55. // 验证码输入监听
  56. inpChange(){
  57. if(this.captcha.length == 4){
  58. this.btnType = 'primary'
  59. }else{
  60. this.btnType = 'default'
  61. }
  62. },
  63. // 验证
  64. verify(){
  65. if(!this.captcha){
  66. uni.showToast({icon: 'none',title: '请输入上方的图形验证码'})
  67. return
  68. }else{
  69. if(this.captcha.length != 4){
  70. uni.showToast({icon: 'none',title: '请输入4位图形验证码'})
  71. return
  72. }
  73. this.$emit('captchaImg', this.captcha, this.nowRandomCode)
  74. }
  75. },
  76. }
  77. }
  78. </script>
  79. <style lang="scss" scoped>
  80. .image-txt-wrap{
  81. line-height: 1.8;
  82. .tip-txt{
  83. display: block;
  84. font-size: 24upx;
  85. color: #999;
  86. margin-bottom: 40upx;
  87. text-align: center;
  88. }
  89. .item-inp{
  90. background-color: #fff;
  91. border: 2upx solid #dcdee2;
  92. border-radius: 8upx;
  93. color: #666;
  94. display: inline-block;
  95. font-size: 24upx;
  96. height: 64upx;
  97. line-height: 1.5;
  98. padding: 8upx 14upx;
  99. width: 100%;
  100. box-sizing: border-box;
  101. }
  102. .image{
  103. max-width: 100%;
  104. width: 400upx;
  105. height: 160upx;
  106. margin: 30upx auto 20upx;
  107. display: block;
  108. img{
  109. max-width: 100%;
  110. }
  111. }
  112. .popup-button-yz{
  113. display: block;
  114. margin: 40upx auto 50upx;
  115. width: 30%;
  116. line-height: 2.8;
  117. border-radius: 1rem;
  118. &::after{
  119. border:0;
  120. }
  121. }
  122. }
  123. </style>