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,9 +67,8 @@ 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: {
+
+const props = defineProps({
   //弹出式pop，固定fixed
   mode: {
     type: String,
@@ -101,8 +100,8 @@ export default {
       }
     }
   }
-  },
-  setup(props) {
+})
+
 const { t } = useI18n()
 const { mode, captchaType } = toRefs(props)
 const { proxy } = getCurrentInstance()
@@ -212,7 +211,7 @@ export default {
   tempPoints.push(Object.assign({}, pos))
   return num.value + 1
 }
-    const refresh = function () {
+const refresh = async function () {
   tempPoints.splice(0, tempPoints.length)
   barAreaColor.value = '#000'
   barAreaBorderColor.value = '#ddd'
@@ -220,17 +219,16 @@ export default {
   fontPos.splice(0, fontPos.length)
   checkPosArr.splice(0, checkPosArr.length)
   num.value = 1
-      getPictrue()
-      text.value = t('captcha.fail')
+  await getPictrue()
   showRefresh.value = true
 }
 
 // 请求背景图片和验证图片
-    function getPictrue() {
+const getPictrue = async () => {
   let data = {
     captchaType: captchaType.value
   }
-      getCodeApi(data).then((res) => {
+  const res = await getCodeApi(data)
   if (res.repCode == '0000') {
     pointBackImgBase.value = res.repData.originalImageBase64
     backToken.value = res.repData.token
@@ -240,7 +238,6 @@ export default {
   } else {
     text.value = res.repMsg
   }
-      })
 }
 //坐标转换函数
 const pointTransfrom = function (pointArr, imgSize) {
@@ -251,31 +248,4 @@ export default {
   })
   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
-    }
-  }
-}
 </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,10 +90,8 @@ import {
   toRefs,
   getCurrentInstance
 } from 'vue'
-//  "captchaType":"blockPuzzle",
-export default {
-  name: 'VerifySlide',
-  props: {
+
+const props = defineProps({
   captchaType: {
     type: String
   },
@@ -141,8 +139,8 @@ export default {
       }
     }
   }
-  },
-  setup(props) {
+})
+
 const { t } = useI18n()
 const { mode, captchaType, type, blockSize, explain } = toRefs(props)
 const { proxy } = getCurrentInstance()
@@ -153,7 +151,6 @@ export default {
   backToken = ref(''), //后端返回的唯一token值
   startMoveTime = ref(''), //移动开始的时间
   endMovetime = ref(''), //移动结束的时间
-      tipsBackColor = ref(''), //提示词的背景颜色
   tipWords = ref(''),
   text = ref(''),
   finishText = ref(''),
@@ -163,8 +160,6 @@ export default {
     barHeight: 0,
     barWidth: 0
   }),
-      top = ref(0),
-      left = ref(0),
   moveBlockLeft = ref(undefined),
   leftBarWidth = ref(undefined),
   // 移动中样式
@@ -182,7 +177,7 @@ export default {
 const barArea = computed(() => {
   return proxy.$el.querySelector('.verify-bar-area')
 })
-    function init() {
+const init = () => {
   if (explain.value === '') {
     text.value = t('captcha.slide')
   } else {
@@ -239,7 +234,7 @@ export default {
   }
 })
 //鼠标按下
-    function start(e) {
+const start = (e) => {
   e = e || window.event
   if (!e.touches) {
     //兼容PC端
@@ -260,7 +255,7 @@ export default {
   }
 }
 //鼠标移动
-    function move(e) {
+const move = (e) => {
   e = e || window.event
   if (status.value && isEnd.value == false) {
     if (!e.touches) {
@@ -289,7 +284,7 @@ export default {
 }
 
 //鼠标松开
-    function end() {
+const end = () => {
   endMovetime.value = +new Date()
   //判断是否重合
   if (status.value && isEnd.value == false) {
@@ -350,7 +345,7 @@ export default {
   }
 }
 
-    const refresh = () => {
+const refresh = async () => {
   showRefresh.value = true
   finishText.value = ''
 
@@ -366,7 +361,7 @@ export default {
   iconClass.value = 'icon-right'
   isEnd.value = false
 
-      getPictrue()
+  await getPictrue()
   setTimeout(() => {
     transitionWidth.value = ''
     transitionLeft.value = ''
@@ -375,11 +370,11 @@ export default {
 }
 
 // 请求背景图片和验证图片
-    function getPictrue() {
+const getPictrue = async () => {
   let data = {
     captchaType: captchaType.value
   }
-      getCodeApi(data).then((res) => {
+  const res = await getCodeApi(data)
   if (res.repCode == '0000') {
     backImgBase.value = res.repData.originalImageBase64
     blockBackImgBase.value = res.repData.jigsawImageBase64
@@ -388,39 +383,5 @@ export default {
   } 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
-    }
-  }
 }
 </script>