feat: 新增行为验证码

src/apis/common/captcha.ts

@@ -17,3 +17,13 @@ export function getSmsCaptcha(query: { phone: string }) {
 export function getEmailCaptcha(query: { email: string }) {
   return http.get<boolean>(`${BASE_URL}/mail`, query)
 }
+
+/** @desc 获取行为验证码 */
+export function getBehaviorCaptcha(params: any) {
+  return http.get<Common.BehaviorCaptchaRes>(`${BASE_URL}/behavior`, {params});
+}
+
+/** @desc 校验行为验证码 */
+export function checkBehaviorCaptcha(params: any) {
+  return http.post<Common.CheckBehaviorCaptchaRes>(`${BASE_URL}/behavior`, params);
+}

src/apis/common/type.ts

@@ -18,3 +18,27 @@ export interface DashboardNoticeResp {
   title: string
   type: number
 }
+
+/* 行为验证码类型 */
+export interface BehaviorCaptchaReq {
+  captchaType?: string
+  captchaVerification?: string
+  clientUid?: string
+}
+
+export interface BehaviorCaptchaRes {
+  originalImageBase64: string
+  point: {
+    x: number
+    y: number
+  }
+  jigsawImageBase64: string
+  token: string
+  secretKey: string
+  wordList: string[]
+}
+
+export interface CheckBehaviorCaptchaRes {
+  repCode: string
+  repMsg: string
+}

src/components/Verify/Verify/VerifyPoints.vue

@@ -0,0 +1,296 @@
+<template>
+  <div style="position: relative">
+    <div class="verify-img-out">
+      <div
+          class="verify-img-panel"
+          :style="{
+          'width': setSize.imgWidth,
+          'height': setSize.imgHeight,
+          'background-size': `${setSize.imgWidth} ${setSize.imgHeight}`,
+          'margin-bottom': `${vSpace}px`,
+        }"
+      >
+        <div
+            v-show="showRefresh"
+            class="verify-refresh"
+            style="z-index: 3"
+            @click="refresh"
+        >
+          <i class="iconfont icon-refresh"></i>
+        </div>
+        <img
+            ref="canvas"
+            :src="`data:image/png;base64,${pointBackImgBase}`"
+            alt=""
+            style="width: 100%; height: 100%; display: block"
+            @click="bindingClick ? canvasClick($event) : undefined"
+        />
+
+        <div
+            v-for="(tempPoint, index) in tempPoints"
+            :key="index"
+            class="point-area"
+            :style="{
+            'background-color': '#1abd6c',
+            'color': '#fff',
+            'z-index': 9999,
+            'width': '20px',
+            'height': '20px',
+            'text-align': 'center',
+            'line-height': '20px',
+            'border-radius': '50%',
+            'position': 'absolute',
+            'top': `${parseInt(`${tempPoint.y - 10}`)}px`,
+            'left': `${parseInt(`${tempPoint.x - 10}`)}px`,
+          }"
+        >
+          {{ index + 1 }}
+        </div>
+      </div>
+    </div>
+
+    <div
+        class="verify-bar-area"
+        :style="{
+        'width': setSize.imgWidth,
+        'color': barAreaColor,
+        'border-color': barAreaBorderColor,
+        'line-height': barSize.height,
+      }"
+    >
+      <span class="verify-msg">{{ text }}</span>
+    </div>
+  </div>
+</template>
+
+<script type="text/babel">
+import {
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  toRefs
+} from 'vue'
+import {
+  checkBehaviorCaptcha,
+  getBehaviorCaptcha
+} from '@/apis/common/captcha'
+import { resetSize } from '@/utils/verify'
+import { aesEncrypt } from '@/utils/encrypt'
+
+export default {
+  name: 'VerifyPoints',
+  props: {
+    // 弹出式pop，固定fixed
+    mode: {
+      type: String,
+      default: ''
+    },
+    captchaType: {
+      type: String
+    },
+    // 间隔
+    vSpace: {
+      type: Number,
+      default: 5
+    },
+    imgSize: {
+      type: Object,
+      default() {
+        return {
+          width: '310px',
+          height: '155px'
+        }
+      }
+    },
+    barSize: {
+      type: Object,
+      default() {
+        return {
+          width: '310px',
+          height: '40px'
+        }
+      }
+    }
+  },
+  setup(props) {
+    const { mode, captchaType } = toRefs(props)
+    const { proxy } = getCurrentInstance()
+    const secretKey = ref('') // 后端返回的ase加密秘钥
+    const checkNum = ref(3) // 默认需要点击的字数
+    const fontPos = reactive([]) // 选中的坐标信息
+    const checkPosArr = reactive([]) // 用户点击的坐标
+    const num = ref(1) // 点击的记数
+    const pointBackImgBase = ref('') // 后端获取到的背景图片
+    const poinTextList = reactive([]) // 后端返回的点击字体顺序
+    const backToken = ref('') // 后端返回的token值
+    const setSize = reactive({
+      imgHeight: 0,
+      imgWidth: 0,
+      barHeight: 0,
+      barWidth: 0
+    })
+    const tempPoints = reactive([])
+    const text = ref('')
+    const barAreaColor = ref()
+    const barAreaBorderColor = ref()
+    const showRefresh = ref(true)
+    const bindingClick = ref(true)
+
+    // 请求背景图片和验证图片
+    function getPicture() {
+      const data = {
+        captchaType: captchaType.value
+      }
+      getBehaviorCaptcha(data).then((res) => {
+        pointBackImgBase.value = res.data.originalImageBase64
+        backToken.value = res.data.token
+        secretKey.value = res.data.secretKey
+        poinTextList.push(res.data.wordList)
+        text.value = `请依次点击【${poinTextList.join(',')}】`
+        poinTextList.length = 0
+      })
+    }
+
+    // 获取坐标
+    const getMousePos = function (e) {
+      const x = e.offsetX
+      const y = e.offsetY
+      return { x, y }
+    }
+
+    // 创建坐标点
+    const createPoint = function (pos) {
+      tempPoints.push({ ...pos })
+      return num.value + 1
+    }
+
+    // 坐标转换函数
+    const pointTransform = function (pointArr, imgSize) {
+      return pointArr.map((p) => {
+        const x = Math.round((310 * p.x) / Number.parseInt(imgSize.imgWidth, 10))
+        const y = Math.round((155 * p.y) / Number.parseInt(imgSize.imgHeight, 10))
+        return { x, y }
+      })
+    }
+
+    const init = () => {
+      // 加载页面
+      fontPos.splice(0, fontPos.length)
+      checkPosArr.splice(0, checkPosArr.length)
+      num.value = 1
+      getPicture()
+      nextTick(() => {
+        const { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
+        setSize.imgHeight = imgHeight
+        setSize.imgWidth = imgWidth
+        setSize.barHeight = barHeight
+        setSize.barWidth = barWidth
+        proxy.$parent.$emit('ready', proxy)
+      })
+    }
+    onMounted(() => {
+      // 禁止拖拽
+      init()
+      proxy.$el.onselectstart = function () {
+        return false
+      }
+    })
+
+    const refresh = function () {
+      tempPoints.splice(0, tempPoints.length)
+      barAreaColor.value = '#000'
+      barAreaBorderColor.value = '#ddd'
+      bindingClick.value = true
+      fontPos.splice(0, fontPos.length)
+      checkPosArr.splice(0, checkPosArr.length)
+      num.value = 1
+      getPicture()
+      text.value = '验证失败'
+      showRefresh.value = true
+    }
+
+    const canvas = ref(null)
+    const canvasClick = (e) => {
+      checkPosArr.push(getMousePos(e))
+      if (num.value === checkNum.value) {
+        num.value = createPoint(getMousePos(e))
+        // 按比例转换坐标值
+        const arr = pointTransform(checkPosArr, setSize)
+        checkPosArr.length = 0
+        checkPosArr.push(...arr)
+        // 等创建坐标执行完
+        setTimeout(() => {
+          // 发送后端请求
+          const captchaVerification = secretKey.value
+            ? aesEncrypt(
+                  `${backToken.value}---${JSON.stringify(checkPosArr)}`,
+                  secretKey.value
+            )
+            : `${backToken.value}---${JSON.stringify(checkPosArr)}`
+          const data = {
+            captchaType: captchaType.value,
+            pointJson: secretKey.value
+              ? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value)
+              : JSON.stringify(checkPosArr),
+            token: backToken.value
+          }
+          checkBehaviorCaptcha(data).then((res) => {
+            if (res.success && res.data.repCode === '0000') {
+              barAreaColor.value = '#4cae4c'
+              barAreaBorderColor.value = '#5cb85c'
+              text.value = '验证成功'
+              bindingClick.value = false
+              if (mode.value === 'pop') {
+                setTimeout(() => {
+                  proxy.$parent.clickShow = false
+                  refresh()
+                }, 1500)
+              }
+              proxy.$parent.$emit('success', { captchaVerification })
+            } else {
+              proxy.$parent.$emit('error', proxy)
+              barAreaColor.value = '#d9534f'
+              barAreaBorderColor.value = '#d9534f'
+              text.value = res.data.repMsg
+              setTimeout(() => {
+                refresh()
+              }, 700)
+            }
+          })
+        }, 400)
+      }
+      if (num.value < checkNum.value) {
+        num.value = createPoint(getMousePos(e))
+      }
+    }
+
+    return {
+      secretKey,
+      checkNum,
+      fontPos,
+      checkPosArr,
+      num,
+      pointBackImgBase,
+      poinTextList,
+      backToken,
+      setSize,
+      tempPoints,
+      text,
+      barAreaColor,
+      barAreaBorderColor,
+      showRefresh,
+      bindingClick,
+      init,
+      canvas,
+      canvasClick,
+      getMousePos,
+      createPoint,
+      refresh,
+      getPicture,
+      pointTransform
+    }
+  }
+}
+</script>

src/components/Verify/Verify/VerifySlide.vue

@@ -0,0 +1,459 @@
+<template>
+  <div style="position: relative">
+    <div
+        v-if="type === '2'"
+        class="verify-img-out"
+        :style="{ height: `${parseInt(setSize.imgHeight) + vSpace}px` }"
+    >
+      <div
+          class="verify-img-panel"
+          :style="{ width: setSize.imgWidth, height: setSize.imgHeight }"
+      >
+        <img
+            :src="`data:image/png;base64,${backImgBase}`"
+            alt=""
+            style="width: 100%; height: 100%; display: block"
+        />
+        <div v-show="showRefresh" class="verify-refresh" @click="refresh"
+        >
+<i class="iconfont icon-refresh"></i
+        >
+</div>
+        <transition name="tips">
+          <span
+              v-if="tipWords"
+              class="verify-tips"
+              :class="passFlag ? 'suc-bg' : 'err-bg'"
+          >{{ tipWords }}</span
+          >
+        </transition>
+      </div>
+    </div>
+    <!-- 公共部分 -->
+    <div
+        class="verify-bar-area"
+        :style="{
+        'width': setSize.imgWidth,
+        'height': barSize.height,
+        'line-height': barSize.height,
+      }"
+    >
+      <span class="verify-msg" v-text="text"></span>
+      <div
+          class="verify-left-bar"
+          :style="{
+          'width': leftBarWidth !== undefined ? leftBarWidth : barSize.height,
+          'height': barSize.height,
+          'border-color': leftBarBorderColor,
+          'transaction': transitionWidth,
+        }"
+      >
+        <span class="verify-msg" v-text="finishText"></span>
+        <div
+            class="verify-move-block"
+            :style="{
+            'width': barSize.height,
+            'height': barSize.height,
+            'background-color': moveBlockBackgroundColor,
+            'left': moveBlockLeft,
+            'transition': transitionLeft,
+          }"
+            @touchstart="start"
+            @mousedown="start"
+        >
+          <i
+              class="verify-icon iconfont" :class="[iconClass]"
+              :style="{ color: iconColor }"
+          ></i>
+          <div
+              v-if="type === '2'"
+              class="verify-sub-block"
+              :style="{
+              'width':
+                `${Math.floor((parseInt(setSize.imgWidth) * 47) / 310)}px`,
+              'height': setSize.imgHeight,
+              'top': `-${parseInt(setSize.imgHeight) + vSpace}px`,
+              'background-size': `${setSize.imgWidth} ${setSize.imgHeight}`,
+            }"
+          >
+            <img
+                :src="`data:image/png;base64,${blockBackImgBase}`"
+                alt=""
+                style="
+                width: 100%;
+                height: 100%;
+                display: block;
+                -webkit-user-drag: none;
+              "
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/babel">
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  toRefs,
+  watch
+} from 'vue'
+import {
+  checkBehaviorCaptcha,
+  getBehaviorCaptcha
+} from '@/apis/common/captcha'
+import { aesEncrypt } from '@/utils/encrypt'
+import { resetSize } from '@/utils/verify'
+
+export default {
+  name: 'VerifySlide',
+  props: {
+    captchaType: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: '1'
+    },
+    // 弹出式pop，固定fixed
+    mode: {
+      type: String,
+      default: 'fixed'
+    },
+    vSpace: {
+      type: Number,
+      default: 5
+    },
+    explain: {
+      type: String,
+      default: '向右滑动完成验证'
+    },
+    imgSize: {
+      type: Object,
+      default() {
+        return {
+          width: '310px',
+          height: '155px'
+        }
+      }
+    },
+    blockSize: {
+      type: Object,
+      default() {
+        return {
+          width: '50px',
+          height: '50px'
+        }
+      }
+    },
+    barSize: {
+      type: Object,
+      default() {
+        return {
+          width: '310px',
+          height: '40px'
+        }
+      }
+    }
+  },
+  setup(props) {
+    const { mode, captchaType, type, blockSize, explain } = toRefs(props)
+    const { proxy } = getCurrentInstance()
+    const secretKey = ref() // 后端返回的ase加密秘钥
+    const passFlag = ref() // 是否通过的标识
+    const backImgBase = ref() // 验证码背景图片
+    const blockBackImgBase = ref() // 验证滑块的背景图片
+    const backToken = ref() // 后端返回的唯一token值
+    const startMoveTime = ref() // 移动开始的时间
+    const endMovetime = ref() // 移动结束的时间
+    const tipsBackColor = ref() // 提示词的背景颜色
+    const tipWords = ref()
+    const text = ref()
+    const finishText = ref()
+    const setSize = reactive({
+      imgHeight: 0,
+      imgWidth: 0,
+      barHeight: 0,
+      barWidth: 0
+    })
+    const top = ref(0)
+    const left = ref(0)
+    const moveBlockLeft = ref()
+    const leftBarWidth = ref()
+    // 移动中样式
+    const moveBlockBackgroundColor = ref()
+    const leftBarBorderColor = ref('#ddd')
+    const iconColor = ref()
+    const iconClass = ref('icon-right')
+    const status = ref(false) // 鼠标状态
+    const isEnd = ref(false) // 是够验证完成
+    const showRefresh = ref(true)
+    const transitionLeft = ref('')
+    const transitionWidth = ref('')
+    const startLeft = ref(0)
+
+    // 请求背景图片和验证图片
+    function getPicture() {
+      const data = {
+        captchaType: captchaType.value
+      }
+      getBehaviorCaptcha(data).then((res) => {
+        backImgBase.value = res.data.originalImageBase64
+        blockBackImgBase.value = res.data.jigsawImageBase64
+        backToken.value = res.data.token
+        secretKey.value = res.data.secretKey
+      })
+    }
+    const barArea = computed(() => {
+      return proxy.$el.querySelector('.verify-bar-area')
+    })
+    // 鼠标移动
+    function move(e) {
+      e = e || window.event
+      if (status.value && isEnd.value === false) {
+        let x
+        if (!e.touches) {
+          // 兼容PC端
+          x = e.clientX
+        } else {
+          // 兼容移动端
+          x = e.touches[0].pageX
+        }
+        const bar_area_left = barArea.value.getBoundingClientRect().left
+        let move_block_left = x - bar_area_left // 小方块相对于父元素的left值
+        if (
+          move_block_left
+          >= barArea.value.offsetWidth
+          - Number.parseInt(blockSize.value.width, 10) / 2 - 2
+        ) {
+          move_block_left
+              = barArea.value.offsetWidth
+              - Number.parseInt(blockSize.value.width, 10) / 2 - 2
+        }
+        if (move_block_left <= 0) {
+          move_block_left = Number.parseInt(blockSize.value.width, 10) / 2
+        }
+        // 拖动后小方块的left值
+        moveBlockLeft.value = `${move_block_left - startLeft.value}px`
+        leftBarWidth.value = `${move_block_left - startLeft.value}px`
+      }
+    }
+
+    const refresh = () => {
+      showRefresh.value = true
+      finishText.value = ''
+
+      transitionLeft.value = 'left .3s'
+      moveBlockLeft.value = 0
+
+      leftBarWidth.value = undefined
+      transitionWidth.value = 'width .3s'
+
+      leftBarBorderColor.value = '#ddd'
+      moveBlockBackgroundColor.value = '#fff'
+      iconColor.value = '#000'
+      iconClass.value = 'icon-right'
+      isEnd.value = false
+
+      getPicture()
+      setTimeout(() => {
+        transitionWidth.value = ''
+        transitionLeft.value = ''
+        text.value = explain.value
+      }, 300)
+    }
+
+    // 鼠标松开
+    function end() {
+      endMovetime.value = +new Date()
+      // 判断是否重合
+      if (status.value && isEnd.value === false) {
+        let moveLeftDistance = Number.parseInt(
+          (moveBlockLeft.value || '').replace('px', ''),
+          10
+        )
+        moveLeftDistance
+            = (moveLeftDistance * 310) / Number.parseInt(`${setSize.imgWidth}`, 10)
+        const data = {
+          captchaType: captchaType.value,
+          pointJson: secretKey.value
+            ? aesEncrypt(
+              JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
+              secretKey.value
+            )
+            : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
+          token: backToken.value
+        }
+        checkBehaviorCaptcha(data).then((res) => {
+          if (res.success && res.data.repCode === '0000') {
+            moveBlockBackgroundColor.value = '#5cb85c'
+            leftBarBorderColor.value = '#5cb85c'
+            iconColor.value = '#fff'
+            iconClass.value = 'icon-check'
+            showRefresh.value = false
+            isEnd.value = true
+            if (mode.value === 'pop') {
+              setTimeout(() => {
+                proxy.$parent.clickShow = false
+                refresh()
+              }, 1500)
+            }
+            passFlag.value = true
+            tipWords.value = `${(
+                (endMovetime.value - startMoveTime.value)
+                / 1000
+            ).toFixed(2)}s验证成功`
+            const captchaVerification = secretKey.value
+              ? aesEncrypt(
+                    `${backToken.value}---${JSON.stringify({
+                      x: moveLeftDistance,
+                      y: 5.0
+                    })}`,
+                    secretKey.value
+              )
+              : `${backToken.value}---${JSON.stringify({
+                  x: moveLeftDistance,
+                  y: 5.0
+                })}`
+            setTimeout(() => {
+              tipWords.value = ''
+              proxy.$parent.closeBox()
+              proxy.$parent.$emit('success', { captchaVerification })
+            }, 1000)
+          } else {
+            moveBlockBackgroundColor.value = '#d9534f'
+            leftBarBorderColor.value = '#d9534f'
+            iconColor.value = '#fff'
+            iconClass.value = 'icon-close'
+            passFlag.value = false
+            setTimeout(() => {
+              refresh()
+            }, 1000)
+            proxy.$parent.$emit('error', proxy)
+            tipWords.value = res.data.repMsg
+            setTimeout(() => {
+              tipWords.value = ''
+            }, 1000)
+          }
+        })
+        status.value = false
+      }
+    }
+
+    function init() {
+      text.value = explain.value
+      getPicture()
+      nextTick(() => {
+        const { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
+        setSize.imgHeight = imgHeight
+        setSize.imgWidth = imgWidth
+        setSize.barHeight = barHeight
+        setSize.barWidth = barWidth
+        proxy.$parent.$emit('ready', proxy)
+      })
+
+      window.removeEventListener('touchmove', (e) => {
+        move(e)
+      })
+      window.removeEventListener('mousemove', (e) => {
+        move(e)
+      })
+
+      // 鼠标松开
+      window.removeEventListener('touchend', () => {
+        end()
+      })
+      window.removeEventListener('mouseup', () => {
+        end()
+      })
+
+      window.addEventListener('touchmove', (e) => {
+        move(e)
+      })
+      window.addEventListener('mousemove', (e) => {
+        move(e)
+      })
+
+      // 鼠标松开
+      window.addEventListener('touchend', () => {
+        end()
+      })
+      window.addEventListener('mouseup', () => {
+        end()
+      })
+    }
+    watch(type, () => {
+      init()
+    })
+    onMounted(() => {
+      // 禁止拖拽
+      init()
+      proxy.$el.onselectstart = function () {
+        return false
+      }
+    })
+    // 鼠标按下
+    function start(e) {
+      e = e || window.event
+      let x
+      if (!e.touches) {
+        // 兼容PC端
+        x = e.clientX
+      } else {
+        // 兼容移动端
+        x = e.touches[0].pageX
+      }
+      startLeft.value = Math.floor(
+        x - barArea.value.getBoundingClientRect().left
+      )
+      startMoveTime.value = +new Date() // 开始滑动的时间
+      if (isEnd.value === false) {
+        text.value = ''
+        moveBlockBackgroundColor.value = '#337ab7'
+        leftBarBorderColor.value = '#337AB7'
+        iconColor.value = '#fff'
+        e.stopPropagation()
+        status.value = true
+      }
+    }
+
+    return {
+      secretKey, // 后端返回的ase加密秘钥
+      passFlag, // 是否通过的标识
+      backImgBase, // 验证码背景图片
+      blockBackImgBase, // 验证滑块的背景图片
+      backToken, // 后端返回的唯一token值
+      startMoveTime, // 移动开始的时间
+      endMovetime, // 移动结束的时间
+      tipsBackColor, // 提示词的背景颜色
+      tipWords,
+      text,
+      finishText,
+      setSize,
+      top,
+      left,
+      moveBlockLeft,
+      leftBarWidth,
+      // 移动中样式
+      moveBlockBackgroundColor,
+      leftBarBorderColor,
+      iconColor,
+      iconClass,
+      status, // 鼠标状态
+      isEnd, // 是够验证完成
+      showRefresh,
+      transitionLeft,
+      transitionWidth,
+      barArea,
+      refresh,
+      start
+    }
+  }
+}
+</script>

src/types/components.d.ts

@@ -39,5 +39,8 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
+    Verify: typeof import('./../components/Verify/index.vue')['default']
+    VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
+    VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
   }
 }

src/utils/encrypt.ts

@@ -2,6 +2,7 @@ import Base64 from 'crypto-js/enc-base64'
 import UTF8 from 'crypto-js/enc-utf8'
 import { JSEncrypt } from 'jsencrypt'
 import md5 from 'crypto-js/md5'
+import CryptoJS from 'crypto-js'
 
 export function encodeByBase64(txt: string) {
   return UTF8.parse(txt).toString(Base64)
@@ -24,3 +25,15 @@ export function encryptByRsa(txt: string) {
   encryptor.setPublicKey(publicKey) // 设置公钥
   return encryptor.encrypt(txt) // 对数据进行加密
 }
+
+const defaultKeyWork = 'XwKsGlMcdPMEhR1B'
+
+export function aesEncrypt(word, keyWord = defaultKeyWork) {
+  const key = CryptoJS.enc.Utf8.parse(keyWord)
+  const arcs = CryptoJS.enc.Utf8.parse(word)
+  const encrypted = CryptoJS.AES.encrypt(arcs, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  })
+  return encrypted.toString()
+}

src/utils/verify.ts

@@ -0,0 +1,39 @@
+export function resetSize(vm) {
+  let img_width
+  let img_height
+  let bar_width
+  let bar_height // 图片的宽度、高度，移动条的宽度、高度
+
+  const parentWidth = vm.$el.parentNode.offsetWidth || window.innerWidth
+  const parentHeight = vm.$el.parentNode.offsetHeight || window.innerHeight
+  if (vm.imgSize.width.includes('%')) {
+    img_width = `${(Number.parseInt(vm.imgSize.width, 10) / 100) * parentWidth}px`
+  } else {
+    img_width = vm.imgSize.width
+  }
+
+  if (vm.imgSize.height.includes('%')) {
+    img_height = `${(Number.parseInt(vm.imgSize.height, 10) / 100) * parentHeight}px`
+  } else {
+    img_height = vm.imgSize.height
+  }
+
+  if (vm.barSize.width.includes('%')) {
+    bar_width = `${(Number.parseInt(vm.barSize.width, 10) / 100) * parentWidth}px`
+  } else {
+    bar_width = vm.barSize.width
+  }
+
+  if (vm.barSize.height.includes('%')) {
+    bar_height = `${(Number.parseInt(vm.barSize.height, 10) / 100) * parentHeight}px`
+  } else {
+    bar_height = vm.barSize.height
+  }
+
+  return {
+    imgWidth: img_width,
+    imgHeight: img_height,
+    barWidth: bar_width,
+    barHeight: bar_height
+  }
+}

src/views/login/components/phone/index.vue

@@ -18,7 +18,7 @@
         :loading="captchaLoading"
         :disabled="captchaDisable"
         size="large"
-        @click="onCaptcha"
+        @click="handleOpenBehaviorCaptcha"
       >
         {{ captchaBtnName }}
       </a-button>
@@ -30,6 +30,13 @@
       </a-space>
     </a-form-item>
   </a-form>
+  <Verify
+      ref="VerifyRef"
+      :mode="captchaMode"
+      :captcha-type="captchaType"
+      :img-size="{ width: '330px', height: '155px' }"
+      @success="onCaptcha"
+  ></Verify>
 </template>
 
 <script setup lang="ts">
@@ -77,10 +84,25 @@ const handleLogin = async () => {
   }
 }
 
+const VerifyRef = ref<InstanceType<any>>()
+const captchaType = ref('blockPuzzle')
+const captchaMode = ref('pop')
 const captchaTimer = ref()
 const captchaTime = ref(60)
 const captchaBtnName = ref('获取验证码')
 const captchaDisable = ref(false)
+const captchaLoading = ref(false)
+
+// 弹出行为验证码
+const handleOpenBehaviorCaptcha = () => {
+  if (captchaLoading.value) return
+  formRef.value?.validateField('phone', (valid: any) => {
+    if (!valid) {
+      VerifyRef.value.show()
+    }
+  })
+}
+
 // 重置验证码
 const resetCaptcha = () => {
   window.clearInterval(captchaTimer.value)
@@ -89,7 +111,6 @@ const resetCaptcha = () => {
   captchaDisable.value = false
 }
 
-const captchaLoading = ref(false)
 // 获取验证码
 const onCaptcha = async () => {
   if (captchaLoading.value) return

src/views/setting/components/VerifyModel.vue

@@ -16,12 +16,19 @@
           :loading="captchaLoading"
           :disabled="captchaDisable"
           size="large"
-          @click="onCaptcha"
+          @click="handleOpenBehaviorCaptcha"
         >
           {{ captchaBtnName }}
         </a-button>
       </template>
     </GiForm>
+    <Verify
+        ref="VerifyRef"
+        :mode="captchaMode"
+        :captcha-type="captchaType"
+        :img-size="{ width: '330px', height: '155px' }"
+        @success="onCaptcha"
+    ></Verify>
   </a-modal>
 </template>
 
@@ -127,10 +134,22 @@ const { form, resetForm } = useForm({
   rePassword: ''
 })
 
+const VerifyRef = ref<InstanceType<any>>()
+const captchaType = ref('blockPuzzle')
+const captchaMode = ref('pop')
 const captchaTimer = ref()
 const captchaTime = ref(60)
 const captchaBtnName = ref('获取验证码')
 const captchaDisable = ref(false)
+const captchaLoading = ref(false)
+
+// 弹出行为验证码
+const handleOpenBehaviorCaptcha = async () => {
+  const isInvalid = await formRef.value?.formRef?.validateField(verifyType.value === 'phone' ? 'phone' : 'email')
+  if (isInvalid) return
+  VerifyRef.value.show()
+}
+
 // 重置验证码
 const resetCaptcha = () => {
   window.clearInterval(captchaTimer.value)
@@ -146,11 +165,8 @@ const reset = () => {
   resetCaptcha()
 }
 
-const captchaLoading = ref(false)
 // 获取验证码
 const onCaptcha = async () => {
-  const isInvalid = await formRef.value?.formRef?.validateField(verifyType.value === 'phone' ? 'newPhone' : 'email')
-  if (isInvalid) return false
   // 发送验证码
   try {
     captchaLoading.value = true