fix: verify

yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifyPoints.vue

@@ -57,7 +57,7 @@
     </div>
   </div>
 </template>
-<script type="text/babel">
+<script type="text/babel" setup>
 /**
  * VerifyPoints
  * @description 点选
@@ -67,215 +67,185 @@ import { aesEncrypt } from './../utils/ase'
 import { getCodeApi, reqCheckApi } from '@/api/login'
 import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
-export default {
-  name: 'VerifyPoints',
-  props: {
-    //弹出式pop，固定fixed
-    mode: {
-      type: String,
-      default: 'fixed'
-    },
-    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'
-        }
+
+const props = defineProps({
+  //弹出式pop，固定fixed
+  mode: {
+    type: String,
+    default: 'fixed'
+  },
+  captchaType: {
+    type: String
+  },
+  //间隔
+  vSpace: {
+    type: Number,
+    default: 5
+  },
+  imgSize: {
+    type: Object,
+    default() {
+      return {
+        width: '310px',
+        height: '155px'
       }
     }
   },
-  setup(props) {
-    const { t } = useI18n()
-    const { mode, captchaType } = toRefs(props)
-    const { proxy } = getCurrentInstance()
-    let secretKey = ref(''), //后端返回的ase加密秘钥
-      checkNum = ref(3), //默认需要点击的字数
-      fontPos = reactive([]), //选中的坐标信息
-      checkPosArr = reactive([]), //用户点击的坐标
-      num = ref(1), //点击的记数
-      pointBackImgBase = ref(''), //后端获取到的背景图片
-      poinTextList = reactive([]), //后端返回的点击字体顺序
-      backToken = ref(''), //后端返回的token值
-      setSize = reactive({
-        imgHeight: 0,
-        imgWidth: 0,
-        barHeight: 0,
-        barWidth: 0
-      }),
-      tempPoints = reactive([]),
-      text = ref(''),
-      barAreaColor = ref(undefined),
-      barAreaBorderColor = ref(undefined),
-      showRefresh = ref(true),
-      bindingClick = ref(true)
-
-    const init = () => {
-      //加载页面
-      fontPos.splice(0, fontPos.length)
-      checkPosArr.splice(0, checkPosArr.length)
-      num.value = 1
-      getPictrue()
-      nextTick(() => {
-        let { 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 canvas = ref(null)
-    const canvasClick = (e) => {
-      checkPosArr.push(getMousePos(canvas, e))
-      if (num.value == checkNum.value) {
-        num.value = createPoint(getMousePos(canvas, e))
-        //按比例转换坐标值
-        let arr = pointTransfrom(checkPosArr, setSize)
-        checkPosArr.length = 0
-        checkPosArr.push(...arr)
-        //等创建坐标执行完
-        setTimeout(() => {
-          // var flag = this.comparePos(this.fontPos, this.checkPosArr);
-          //发送后端请求
-          var captchaVerification = secretKey.value
-            ? aesEncrypt(backToken.value + '---' + JSON.stringify(checkPosArr), secretKey.value)
-            : backToken.value + '---' + JSON.stringify(checkPosArr)
-          let data = {
-            captchaType: captchaType.value,
-            pointJson: secretKey.value
-              ? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value)
-              : JSON.stringify(checkPosArr),
-            token: backToken.value
-          }
-          reqCheckApi(data).then((res) => {
-            if (res.repCode == '0000') {
-              barAreaColor.value = '#4cae4c'
-              barAreaBorderColor.value = '#5cb85c'
-              text.value = t('captcha.success')
-              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 = t('captcha.fail')
-              setTimeout(() => {
-                refresh()
-              }, 700)
-            }
-          })
-        }, 400)
-      }
-      if (num.value < checkNum.value) {
-        num.value = createPoint(getMousePos(canvas, e))
+  barSize: {
+    type: Object,
+    default() {
+      return {
+        width: '310px',
+        height: '40px'
       }
     }
-    //获取坐标
-    const getMousePos = function (obj, e) {
-      var x = e.offsetX
-      var y = e.offsetY
-      return { x, y }
-    }
-    //创建坐标点
-    const createPoint = function (pos) {
-      tempPoints.push(Object.assign({}, pos))
-      return num.value + 1
-    }
-    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
-      getPictrue()
-      text.value = t('captcha.fail')
-      showRefresh.value = true
-    }
+  }
+})
 
-    // 请求背景图片和验证图片
-    function getPictrue() {
+const { t } = useI18n()
+const { mode, captchaType } = toRefs(props)
+const { proxy } = getCurrentInstance()
+let secretKey = ref(''), //后端返回的ase加密秘钥
+  checkNum = ref(3), //默认需要点击的字数
+  fontPos = reactive([]), //选中的坐标信息
+  checkPosArr = reactive([]), //用户点击的坐标
+  num = ref(1), //点击的记数
+  pointBackImgBase = ref(''), //后端获取到的背景图片
+  poinTextList = reactive([]), //后端返回的点击字体顺序
+  backToken = ref(''), //后端返回的token值
+  setSize = reactive({
+    imgHeight: 0,
+    imgWidth: 0,
+    barHeight: 0,
+    barWidth: 0
+  }),
+  tempPoints = reactive([]),
+  text = ref(''),
+  barAreaColor = ref(undefined),
+  barAreaBorderColor = ref(undefined),
+  showRefresh = ref(true),
+  bindingClick = ref(true)
+
+const init = () => {
+  //加载页面
+  fontPos.splice(0, fontPos.length)
+  checkPosArr.splice(0, checkPosArr.length)
+  num.value = 1
+  getPictrue()
+  nextTick(() => {
+    let { 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 canvas = ref(null)
+const canvasClick = (e) => {
+  checkPosArr.push(getMousePos(canvas, e))
+  if (num.value == checkNum.value) {
+    num.value = createPoint(getMousePos(canvas, e))
+    //按比例转换坐标值
+    let arr = pointTransfrom(checkPosArr, setSize)
+    checkPosArr.length = 0
+    checkPosArr.push(...arr)
+    //等创建坐标执行完
+    setTimeout(() => {
+      // var flag = this.comparePos(this.fontPos, this.checkPosArr);
+      //发送后端请求
+      var captchaVerification = secretKey.value
+        ? aesEncrypt(backToken.value + '---' + JSON.stringify(checkPosArr), secretKey.value)
+        : backToken.value + '---' + JSON.stringify(checkPosArr)
       let data = {
-        captchaType: captchaType.value
+        captchaType: captchaType.value,
+        pointJson: secretKey.value
+          ? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value)
+          : JSON.stringify(checkPosArr),
+        token: backToken.value
       }
-      getCodeApi(data).then((res) => {
+      reqCheckApi(data).then((res) => {
         if (res.repCode == '0000') {
-          pointBackImgBase.value = res.repData.originalImageBase64
-          backToken.value = res.repData.token
-          secretKey.value = res.repData.secretKey
-          poinTextList.value = res.repData.wordList
-          text.value = t('captcha.point') + '【' + poinTextList.value.join(',') + '】'
+          barAreaColor.value = '#4cae4c'
+          barAreaBorderColor.value = '#5cb85c'
+          text.value = t('captcha.success')
+          bindingClick.value = false
+          if (mode.value == 'pop') {
+            setTimeout(() => {
+              proxy.$parent.clickShow = false
+              refresh()
+            }, 1500)
+          }
+          proxy.$parent.$emit('success', { captchaVerification })
         } else {
-          text.value = res.repMsg
+          proxy.$parent.$emit('error', proxy)
+          barAreaColor.value = '#d9534f'
+          barAreaBorderColor.value = '#d9534f'
+          text.value = t('captcha.fail')
+          setTimeout(() => {
+            refresh()
+          }, 700)
         }
       })
-    }
-    //坐标转换函数
-    const pointTransfrom = function (pointArr, imgSize) {
-      var newPointArr = pointArr.map((p) => {
-        let x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth))
-        let y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight))
-        return { x, y }
-      })
-      return newPointArr
-    }
-    return {
-      secretKey,
-      checkNum,
-      fontPos,
-      checkPosArr,
-      num,
-      pointBackImgBase,
-      poinTextList,
-      backToken,
-      setSize,
-      tempPoints,
-      text,
-      barAreaColor,
-      barAreaBorderColor,
-      showRefresh,
-      bindingClick,
-      init,
-      canvas,
-      canvasClick,
-      getMousePos,
-      createPoint,
-      refresh,
-      getPictrue,
-      pointTransfrom
-    }
+    }, 400)
+  }
+  if (num.value < checkNum.value) {
+    num.value = createPoint(getMousePos(canvas, e))
   }
 }
+//获取坐标
+const getMousePos = function (obj, e) {
+  var x = e.offsetX
+  var y = e.offsetY
+  return { x, y }
+}
+//创建坐标点
+const createPoint = function (pos) {
+  tempPoints.push(Object.assign({}, pos))
+  return num.value + 1
+}
+const refresh = async 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
+  await getPictrue()
+  showRefresh.value = true
+}
+
+// 请求背景图片和验证图片
+const getPictrue = async () => {
+  let data = {
+    captchaType: captchaType.value
+  }
+  const res = await getCodeApi(data)
+  if (res.repCode == '0000') {
+    pointBackImgBase.value = res.repData.originalImageBase64
+    backToken.value = res.repData.token
+    secretKey.value = res.repData.secretKey
+    poinTextList.value = res.repData.wordList
+    text.value = t('captcha.point') + '【' + poinTextList.value.join(',') + '】'
+  } else {
+    text.value = res.repMsg
+  }
+}
+//坐标转换函数
+const pointTransfrom = function (pointArr, imgSize) {
+  var newPointArr = pointArr.map((p) => {
+    let x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth))
+    let y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight))
+    return { x, y }
+  })
+  return newPointArr
+}
 </script>

yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifySlide.vue

@@ -71,7 +71,7 @@
     </div>
   </div>
 </template>
-<script type="text/babel">
+<script type="text/babel" setup>
 /**
  * VerifySlide
  * @description 滑块
@@ -90,337 +90,298 @@ import {
   toRefs,
   getCurrentInstance
 } from 'vue'
-//  "captchaType":"blockPuzzle",
-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'
-        }
+
+const props = defineProps({
+  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'
       }
-    },
-    barSize: {
-      type: Object,
-      default() {
-        return {
-          width: '310px',
-          height: '30px'
-        }
+    }
+  },
+  blockSize: {
+    type: Object,
+    default() {
+      return {
+        width: '50px',
+        height: '50px'
       }
     }
   },
-  setup(props) {
-    const { t } = useI18n()
-    const { mode, captchaType, type, blockSize, explain } = toRefs(props)
-    const { proxy } = getCurrentInstance()
-    let secretKey = ref(''), //后端返回的ase加密秘钥
-      passFlag = ref(''), //是否通过的标识
-      backImgBase = ref(''), //验证码背景图片
-      blockBackImgBase = ref(''), //验证滑块的背景图片
-      backToken = ref(''), //后端返回的唯一token值
-      startMoveTime = ref(''), //移动开始的时间
-      endMovetime = ref(''), //移动结束的时间
-      tipsBackColor = ref(''), //提示词的背景颜色
-      tipWords = ref(''),
-      text = ref(''),
-      finishText = ref(''),
-      setSize = reactive({
-        imgHeight: 0,
-        imgWidth: 0,
-        barHeight: 0,
-        barWidth: 0
-      }),
-      top = ref(0),
-      left = ref(0),
-      moveBlockLeft = ref(undefined),
-      leftBarWidth = ref(undefined),
-      // 移动中样式
-      moveBlockBackgroundColor = ref(undefined),
-      leftBarBorderColor = ref('#ddd'),
-      iconColor = ref(undefined),
-      iconClass = ref('icon-right'),
-      status = ref(false), //鼠标状态
-      isEnd = ref(false), //是够验证完成
-      showRefresh = ref(true),
-      transitionLeft = ref(''),
-      transitionWidth = ref(''),
-      startLeft = ref(0)
-
-    const barArea = computed(() => {
-      return proxy.$el.querySelector('.verify-bar-area')
-    })
-    function init() {
-      if (explain.value === '') {
-        text.value = t('captcha.slide')
-      } else {
-        text.value = explain.value
+  barSize: {
+    type: Object,
+    default() {
+      return {
+        width: '310px',
+        height: '30px'
       }
-      getPictrue()
-      nextTick(() => {
-        let { 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', function (e) {
-        move(e)
-      })
-      window.removeEventListener('mousemove', function (e) {
-        move(e)
-      })
+const { t } = useI18n()
+const { mode, captchaType, type, blockSize, explain } = toRefs(props)
+const { proxy } = getCurrentInstance()
+let secretKey = ref(''), //后端返回的ase加密秘钥
+  passFlag = ref(''), //是否通过的标识
+  backImgBase = ref(''), //验证码背景图片
+  blockBackImgBase = ref(''), //验证滑块的背景图片
+  backToken = ref(''), //后端返回的唯一token值
+  startMoveTime = ref(''), //移动开始的时间
+  endMovetime = ref(''), //移动结束的时间
+  tipWords = ref(''),
+  text = ref(''),
+  finishText = ref(''),
+  setSize = reactive({
+    imgHeight: 0,
+    imgWidth: 0,
+    barHeight: 0,
+    barWidth: 0
+  }),
+  moveBlockLeft = ref(undefined),
+  leftBarWidth = ref(undefined),
+  // 移动中样式
+  moveBlockBackgroundColor = ref(undefined),
+  leftBarBorderColor = ref('#ddd'),
+  iconColor = ref(undefined),
+  iconClass = ref('icon-right'),
+  status = ref(false), //鼠标状态
+  isEnd = ref(false), //是够验证完成
+  showRefresh = ref(true),
+  transitionLeft = ref(''),
+  transitionWidth = ref(''),
+  startLeft = ref(0)
 
-      //鼠标松开
-      window.removeEventListener('touchend', function () {
-        end()
-      })
-      window.removeEventListener('mouseup', function () {
-        end()
-      })
+const barArea = computed(() => {
+  return proxy.$el.querySelector('.verify-bar-area')
+})
+const init = () => {
+  if (explain.value === '') {
+    text.value = t('captcha.slide')
+  } else {
+    text.value = explain.value
+  }
+  getPictrue()
+  nextTick(() => {
+    let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
+    setSize.imgHeight = imgHeight
+    setSize.imgWidth = imgWidth
+    setSize.barHeight = barHeight
+    setSize.barWidth = barWidth
+    proxy.$parent.$emit('ready', proxy)
+  })
 
-      window.addEventListener('touchmove', function (e) {
-        move(e)
-      })
-      window.addEventListener('mousemove', function (e) {
-        move(e)
-      })
+  window.removeEventListener('touchmove', function (e) {
+    move(e)
+  })
+  window.removeEventListener('mousemove', function (e) {
+    move(e)
+  })
 
-      //鼠标松开
-      window.addEventListener('touchend', function () {
-        end()
-      })
-      window.addEventListener('mouseup', function () {
-        end()
-      })
+  //鼠标松开
+  window.removeEventListener('touchend', function () {
+    end()
+  })
+  window.removeEventListener('mouseup', function () {
+    end()
+  })
+
+  window.addEventListener('touchmove', function (e) {
+    move(e)
+  })
+  window.addEventListener('mousemove', function (e) {
+    move(e)
+  })
+
+  //鼠标松开
+  window.addEventListener('touchend', function () {
+    end()
+  })
+  window.addEventListener('mouseup', function () {
+    end()
+  })
+}
+watch(type, () => {
+  init()
+})
+onMounted(() => {
+  // 禁止拖拽
+  init()
+  proxy.$el.onselectstart = function () {
+    return false
+  }
+})
+//鼠标按下
+const start = (e) => {
+  e = e || window.event
+  if (!e.touches) {
+    //兼容PC端
+    var x = e.clientX
+  } else {
+    //兼容移动端
+    var 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
+  }
+}
+//鼠标移动
+const move = (e) => {
+  e = e || window.event
+  if (status.value && isEnd.value == false) {
+    if (!e.touches) {
+      //兼容PC端
+      var x = e.clientX
+    } else {
+      //兼容移动端
+      var x = e.touches[0].pageX
     }
-    watch(type, () => {
-      init()
-    })
-    onMounted(() => {
-      // 禁止拖拽
-      init()
-      proxy.$el.onselectstart = function () {
-        return false
-      }
-    })
-    //鼠标按下
-    function start(e) {
-      e = e || window.event
-      if (!e.touches) {
-        //兼容PC端
-        var x = e.clientX
-      } else {
-        //兼容移动端
-        var 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
-      }
+    var bar_area_left = barArea.value.getBoundingClientRect().left
+    var move_block_left = x - bar_area_left //小方块相对于父元素的left值
+    if (
+      move_block_left >=
+      barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
+    ) {
+      move_block_left =
+        barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
     }
-    //鼠标移动
-    function move(e) {
-      e = e || window.event
-      if (status.value && isEnd.value == false) {
-        if (!e.touches) {
-          //兼容PC端
-          var x = e.clientX
-        } else {
-          //兼容移动端
-          var x = e.touches[0].pageX
-        }
-        var bar_area_left = barArea.value.getBoundingClientRect().left
-        var move_block_left = x - bar_area_left //小方块相对于父元素的left值
-        if (
-          move_block_left >=
-          barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
-        ) {
-          move_block_left =
-            barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
-        }
-        if (move_block_left <= 0) {
-          move_block_left = parseInt(parseInt(blockSize.value.width) / 2)
-        }
-        //拖动后小方块的left值
-        moveBlockLeft.value = move_block_left - startLeft.value + 'px'
-        leftBarWidth.value = move_block_left - startLeft.value + 'px'
-      }
+    if (move_block_left <= 0) {
+      move_block_left = parseInt(parseInt(blockSize.value.width) / 2)
     }
+    //拖动后小方块的left值
+    moveBlockLeft.value = move_block_left - startLeft.value + 'px'
+    leftBarWidth.value = move_block_left - startLeft.value + 'px'
+  }
+}
 
-    //鼠标松开
-    function end() {
-      endMovetime.value = +new Date()
-      //判断是否重合
-      if (status.value && isEnd.value == false) {
-        var moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''))
-        moveLeftDistance = (moveLeftDistance * 310) / parseInt(setSize.imgWidth)
-        let 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
+//鼠标松开
+const end = () => {
+  endMovetime.value = +new Date()
+  //判断是否重合
+  if (status.value && isEnd.value == false) {
+    var moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''))
+    moveLeftDistance = (moveLeftDistance * 310) / parseInt(setSize.imgWidth)
+    let 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
+    }
+    reqCheckApi(data).then((res) => {
+      if (res.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)
         }
-        reqCheckApi(data).then((res) => {
-          if (res.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 
+        passFlag.value = true
+        tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s 
             ${t('captcha.success')}`
-            var 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(function () {
-              refresh()
-            }, 1000)
-            proxy.$parent.$emit('error', proxy)
-            tipWords.value = t('captcha.fail')
-            setTimeout(() => {
-              tipWords.value = ''
-            }, 1000)
-          }
-        })
-        status.value = false
+        var 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(function () {
+          refresh()
+        }, 1000)
+        proxy.$parent.$emit('error', proxy)
+        tipWords.value = t('captcha.fail')
+        setTimeout(() => {
+          tipWords.value = ''
+        }, 1000)
       }
-    }
+    })
+    status.value = false
+  }
+}
 
-    const refresh = () => {
-      showRefresh.value = true
-      finishText.value = ''
+const refresh = async () => {
+  showRefresh.value = true
+  finishText.value = ''
 
-      transitionLeft.value = 'left .3s'
-      moveBlockLeft.value = 0
+  transitionLeft.value = 'left .3s'
+  moveBlockLeft.value = 0
 
-      leftBarWidth.value = undefined
-      transitionWidth.value = 'width .3s'
+  leftBarWidth.value = undefined
+  transitionWidth.value = 'width .3s'
 
-      leftBarBorderColor.value = '#ddd'
-      moveBlockBackgroundColor.value = '#fff'
-      iconColor.value = '#000'
-      iconClass.value = 'icon-right'
-      isEnd.value = false
+  leftBarBorderColor.value = '#ddd'
+  moveBlockBackgroundColor.value = '#fff'
+  iconColor.value = '#000'
+  iconClass.value = 'icon-right'
+  isEnd.value = false
 
-      getPictrue()
-      setTimeout(() => {
-        transitionWidth.value = ''
-        transitionLeft.value = ''
-        text.value = explain.value
-      }, 300)
-    }
+  await getPictrue()
+  setTimeout(() => {
+    transitionWidth.value = ''
+    transitionLeft.value = ''
+    text.value = explain.value
+  }, 300)
+}
 
-    // 请求背景图片和验证图片
-    function getPictrue() {
-      let data = {
-        captchaType: captchaType.value
-      }
-      getCodeApi(data).then((res) => {
-        if (res.repCode == '0000') {
-          backImgBase.value = res.repData.originalImageBase64
-          blockBackImgBase.value = res.repData.jigsawImageBase64
-          backToken.value = res.repData.token
-          secretKey.value = res.repData.secretKey
-        } else {
-          tipWords.value = res.repMsg
-        }
-      })
-    }
-    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
-    }
+// 请求背景图片和验证图片
+const getPictrue = async () => {
+  let data = {
+    captchaType: captchaType.value
+  }
+  const res = await getCodeApi(data)
+  if (res.repCode == '0000') {
+    backImgBase.value = res.repData.originalImageBase64
+    blockBackImgBase.value = res.repData.jigsawImageBase64
+    backToken.value = res.repData.token
+    secretKey.value = res.repData.secretKey
+  } else {
+    tipWords.value = res.repMsg
   }
 }
 </script>