image-txt-popup.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  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="text" 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, memberCaptcha } from '@/api/user.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. let portAddress = ''
  49. if(_this.type == 'applyImageTxt'){ // 申请试用 获取图片验证码
  50. portAddress = getCaptcha
  51. }else if(_this.type == 'forgetImageTxt'){ // 忘记密码 获取图片验证码
  52. portAddress = memberCaptcha
  53. }
  54. portAddress(this.nowRandomCode).then(res => {
  55. // 获取图片路径
  56. _this.captchaBase = 'data:image/png;base64,' + res.data
  57. // 显示图文验证码弹框
  58. _this.captcha = '' // 清空图文输入内容
  59. })
  60. },
  61. // 验证码输入监听
  62. inpChange(){
  63. if(this.captcha.length == 4){
  64. this.btnType = 'primary'
  65. }else{
  66. this.btnType = 'default'
  67. }
  68. },
  69. // 验证
  70. verify(){
  71. if(!this.captcha){
  72. uni.showToast({icon: 'none',title: '请输入上方的图形验证码'})
  73. return
  74. }else{
  75. if(this.captcha.length != 4){
  76. uni.showToast({icon: 'none',title: '请输入4位图形验证码'})
  77. return
  78. }
  79. this.$emit('captchaImg', this.captcha, this.nowRandomCode)
  80. }
  81. },
  82. }
  83. }
  84. </script>
  85. <style lang="scss" scoped>
  86. .image-txt-wrap{
  87. line-height: 1.8;
  88. .tip-txt{
  89. display: block;
  90. font-size: 24rpx;
  91. color: #999;
  92. margin-bottom: 40rpx;
  93. text-align: center;
  94. }
  95. .item-inp{
  96. background-color: #fff;
  97. border: 2rpx solid #dcdee2;
  98. border-radius: 8rpx;
  99. color: #666;
  100. display: inline-block;
  101. font-size: 24rpx;
  102. height: 64rpx;
  103. line-height: 1.5;
  104. padding: 8rpx 14rpx;
  105. width: 100%;
  106. box-sizing: border-box;
  107. }
  108. .image{
  109. max-width: 100%;
  110. width: 400rpx;
  111. height: 160rpx;
  112. margin: 30rpx auto 20rpx;
  113. display: block;
  114. img{
  115. max-width: 100%;
  116. }
  117. }
  118. .popup-button-yz{
  119. display: block;
  120. margin: 40rpx auto 50rpx;
  121. width: 30%;
  122. line-height: 2.8;
  123. }
  124. }
  125. </style>