tianai-capthcha-cfmoto-vue

天爱友情滑动验证码Vue版 For CFMOTO

一、快速开始

安装

npm install -S tianai-capthcha-cfmoto-vue

使用说明

• 滑块验证码

<template>
  <div class="section-slider">
    <TianaiCaptchaSlider v-model="showCaptcha" theme="cfmoto" :request-config="getGenData" :request-check="requestCheck"></TianaiCaptchaSlider>
  </div>
</template>
<script>
import { TianaiCaptchaSlider } from 'tianai-capthcha-cfmoto-vue';
import { commonCodeGenrateApi, commonCodeSendCodeV2Api } from '@/api/common';

export default {
  props: {},
  components: { TianaiCaptchaSlider },
  data() {
    return {
      showCaptcha: false,
    };
  },
  computed: {},
  methods: {
    async getGenData() {
      const params = {};
      const resData = await commonCodeGenrateApi(params);
      const data = resData.data || {};
      const id = data.imageCaptchaId;
      const captcha = {
        backgroundImage: data.backgroundImage,
        backgroundImageHeight: 360,
        backgroundImageTag: 'default',
        backgroundImageWidth: 600,
        data: null,
        templateImage: data.sliderImage,
        templateImageHeight: 360,
        templateImageTag: 'default',
        templateImageWidth: 110,
        type: 'SLIDER',
      };
      return { id, captcha };
    },
    async requestCheck(id, data, vm) {
      try {
        console.log(vm);
        const idcard = '19521592154';
        const idcardType = 'phone';
        const startSlidingTime = this.$dayjs(data.startSlidingTime).valueOf();
        const endSlidingTime = this.$dayjs(data.endSlidingTime).valueOf();
        const imageCaptchaTrackBO = { ...data, startSlidingTime, endSlidingTime };
        const areaCode = '86';
        const params = { areaCode, idcardType, idcard, imageCaptchaId: id, imageCaptchaTrackBO };
        const resData = await commonCodeSendCodeV2Api(params);

        if (resData.code * 1) {
          vm.showTips(resData.msg || '验证失败，请重新尝试!', 0);
          setTimeout(() => {
            vm.reload();
          }, 1000);
          return;
        }
        const useTimes = (data.endSlidingTime - data.startSlidingTime) / 1000;
        vm.showTips(`验证成功,耗时${useTimes}秒`, 1);
        setTimeout(() => {
          vm.destroy();
        }, 1000);
      } catch (error) {
        vm.showTips('验证码被黑洞吸走了！', 0);
        setTimeout(() => {
          vm.reload();
        }, 1000);
        throw new Error(error);
      }
    },
    async getAll() {
      this.showCaptcha = true;
    },
    emitChange(type, e) {
      console.log(type, e);
    },
  },
  created() {},
  mounted() {
    this.getAll();
  },
  beforeUnmount() {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.section-slider {
  margin: 20px auto;
  box-sizing: border-box;
  // box-shadow: 0 0 11px 0 #999;
  width: 335px;
  // height: 318px;
  // padding: 20px;
  // overflow: hidden;
  position: relative;
  // z-index: 997;
  // box-sizing: border-box;
  // border-radius: 5px;
}
</style>

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request