caimei-distribution-www/src/components/field-image-code.vue

<template>
  <div class="filed">
    <van-field
      placeholder="请输入短信验证码"
      :rules="[{ validator: validatorVerification, message: '请输入6位数验证码' }]"
      type="digit"
      :left-icon="!leftIcon ? 'https://static.caimei365.com/app/mini-distribution/email.png' : ''"
      maxlength="6"
      v-model="code"
      @input="$emit('handlerCode', code)"
    >
      <template #button>
        <van-button
          size="small"
          type="primary"
          color="#FF5B00"
          @click.stop="fetchVerification"
          :disabled="showTime"
          >{{ showTime ? `${count} S` : '获取验证码' }}</van-button
        >
      </template>
    </van-field>
    <van-dialog v-model="showImageCode" title="获取验证码">
      <van-form @submit="submitCode">
        <van-field
          v-model="imgCode"
          class="img-code"
          placeholder="请输入图片验证码"
          :rules="[{ validator: validatorImgCode }]"
          maxlength="4"
        />
        <div class="img-refresh">
          <van-image :src="dataImage.baseImage"></van-image>
          <div class="refresh" @click="fetchVerification">刷新</div>
        </div>
        <van-button
          class="get-code"
          color="#ff5b00"
          native-type="submit"
          >获取验证码</van-button
        >
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from 'vant'
import {
  getCode,
  getImageCode,
  getSmsCode
} from '@/api/userApi/login.js'
export default {
  props: {
    mobile: {
      type: String,
      default: () => ''
    },
    leftIcon: {
      type: Boolean,
      default: () => true
    },
    type: {
      type: Number,
      default: () => 14
    }
  },
  data () {
    return {
      code: '',
      showImageCode: false,
      imgCode: '',
      dataImage: {},
      showTime: false,
      time: null,
      count: 60
    }
  },
  methods: {
    validatorVerification (val) {
      if (this.mobile && this.code) {
        return /\d{6}/.test(val)
      }
    },
    fetchVerification () {
      getCode({ mobile: this.mobile }).then(() => {
        this.showImageCode = true
        getImageCode({ platformType: 1 }).then((data) => {
          this.dataImage = data
          setTimeout(() => {
            Toast.clear()
          }, 1000)
        }).catch(e => {
          console.log(e)
        })
      })
    },
    validatorImgCode (val) {
      if (!val) return false
      else if (this.errMsg) return this.errMsg
    },
    handlerCodeTime () {
      this.showTime = true
      this.time = setInterval(() => {
        this.count--
        if (this.count <= 0) {
          clearInterval(this.time)
          this.showTime = false
          this.count = 60
          this.imgCode = ''
        }
      }, 1000)
    },
    submitCode () {
      getSmsCode({
        mobile: this.mobile,
        token: this.dataImage.token,
        imgCode: this.imgCode,
        platformType: 1,
        isCheckCaptcha: 0,
        activateCodeType: this.type
      }).then(() => {
        this.errMsg = ''
        this.showImageCode = false
        this.handlerCodeTime()
      }).catch(() => {
        this.errMsg = '验证码输入错误'
        getImageCode({ platformType: 1 }).then((data) => {
          this.dataImage = data
          setTimeout(() => {
            Toast.fail('验证码输入错误')
          }, 1000)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-dialog__footer {
  display: none;
}
::v-deep .van-dialog__content {
  padding: 3.5vw 4vw;
  box-sizing: border-box;
}
.filed {
  position: relative;
  &::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 16px;
    bottom: 0;
    left: 16px;
    border-bottom: 1px solid #ebedf0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
}
.img-refresh {
  width: 100%;
  margin: 2.7vw 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .van-image {
    height: 12vw;
    width: 50vw;
    object-fit: cover;
  }
  .refresh {
    width: 20vw;
    line-height: 12vw;
    text-align: center;
    font-size: 3.4vw;
    color: #ccc;
  }
}
.get-code {
  width: 100% !important;
  height: 10vw !important;
}
.img-code {
  border: 1px solid #ccc;
}
</style>