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',
+const props = defineProps({
-  props: {
   //弹出式pop，固定fixed
   mode: {
     type: String,
@@ -101,12 +100,12 @@ export default {
       }
     }
   }
-  },
+})
-  setup(props) {
+
-    const { t } = useI18n()
+const { t } = useI18n()
-    const { mode, captchaType } = toRefs(props)
+const { mode, captchaType } = toRefs(props)
-    const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance()
-    let secretKey = ref(''), //后端返回的ase加密秘钥
+let secretKey = ref(''), //后端返回的ase加密秘钥
   checkNum = ref(3), //默认需要点击的字数
   fontPos = reactive([]), //选中的坐标信息
   checkPosArr = reactive([]), //用户点击的坐标
@@ -127,7 +126,7 @@ export default {
   showRefresh = ref(true),
   bindingClick = ref(true)
 
-    const init = () => {
+const init = () => {
   //加载页面
   fontPos.splice(0, fontPos.length)
   checkPosArr.splice(0, checkPosArr.length)
@@ -141,16 +140,16 @@ export default {
     setSize.barWidth = barWidth
     proxy.$parent.$emit('ready', proxy)
   })
-    }
+}
-    onMounted(() => {
+onMounted(() => {
   // 禁止拖拽
   init()
   proxy.$el.onselectstart = function () {
     return false
   }
-    })
+})
-    const canvas = ref(null)
+const canvas = ref(null)
-    const canvasClick = (e) => {
+const canvasClick = (e) => {
   checkPosArr.push(getMousePos(canvas, e))
   if (num.value == checkNum.value) {
     num.value = createPoint(getMousePos(canvas, e))
@@ -200,19 +199,19 @@ export default {
   if (num.value < checkNum.value) {
     num.value = createPoint(getMousePos(canvas, e))
   }
-    }
+}
-    //获取坐标
+//获取坐标
-    const getMousePos = function (obj, e) {
+const getMousePos = function (obj, e) {
   var x = e.offsetX
   var y = e.offsetY
   return { x, y }
-    }
+}
-    //创建坐标点
+//创建坐标点
-    const createPoint = function (pos) {
+const createPoint = function (pos) {
   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()
+  await getPictrue()
-      text.value = t('captcha.fail')
   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,42 +238,14 @@ export default {
   } else {
     text.value = res.repMsg
   }
-      })
+}
-    }
+//坐标转换函数
-    //坐标转换函数
+const pointTransfrom = function (pointArr, imgSize) {
-    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
-    }
-  }
 }
 </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 {
+const props = defineProps({
-  name: 'VerifySlide',
-  props: {
   captchaType: {
     type: String
   },
@@ -141,19 +139,18 @@ export default {
       }
     }
   }
-  },
+})
-  setup(props) {
+
-    const { t } = useI18n()
+const { t } = useI18n()
-    const { mode, captchaType, type, blockSize, explain } = toRefs(props)
+const { mode, captchaType, type, blockSize, explain } = toRefs(props)
-    const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance()
-    let secretKey = ref(''), //后端返回的ase加密秘钥
+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(''),
@@ -163,8 +160,6 @@ export default {
     barHeight: 0,
     barWidth: 0
   }),
-      top = ref(0),
-      left = ref(0),
   moveBlockLeft = ref(undefined),
   leftBarWidth = ref(undefined),
   // 移动中样式
@@ -179,10 +174,10 @@ export default {
   transitionWidth = ref(''),
   startLeft = ref(0)
 
-    const barArea = computed(() => {
+const barArea = computed(() => {
   return proxy.$el.querySelector('.verify-bar-area')
-    })
+})
-    function init() {
+const init = () => {
   if (explain.value === '') {
     text.value = t('captcha.slide')
   } else {
@@ -227,19 +222,19 @@ export default {
   window.addEventListener('mouseup', function () {
     end()
   })
-    }
+}
-    watch(type, () => {
+watch(type, () => {
   init()
-    })
+})
-    onMounted(() => {
+onMounted(() => {
   // 禁止拖拽
   init()
   proxy.$el.onselectstart = function () {
     return false
   }
-    })
+})
-    //鼠标按下
+//鼠标按下
-    function start(e) {
+const start = (e) => {
   e = e || window.event
   if (!e.touches) {
     //兼容PC端
@@ -258,9 +253,9 @@ export default {
     e.stopPropagation()
     status.value = true
   }
-    }
+}
-    //鼠标移动
+//鼠标移动
-    function move(e) {
+const move = (e) => {
   e = e || window.event
   if (status.value && isEnd.value == false) {
     if (!e.touches) {
@@ -286,10 +281,10 @@ export default {
     moveBlockLeft.value = move_block_left - startLeft.value + 'px'
     leftBarWidth.value = move_block_left - startLeft.value + 'px'
   }
-    }
+}
 
-    //鼠标松开
+//鼠标松开
-    function end() {
+const end = () => {
   endMovetime.value = +new Date()
   //判断是否重合
   if (status.value && isEnd.value == false) {
@@ -348,9 +343,9 @@ export default {
     })
     status.value = false
   }
-    }
+}
 
-    const refresh = () => {
+const refresh = async () => {
   showRefresh.value = true
   finishText.value = ''
 
@@ -366,20 +361,20 @@ export default {
   iconClass.value = 'icon-right'
   isEnd.value = false
 
-      getPictrue()
+  await getPictrue()
   setTimeout(() => {
     transitionWidth.value = ''
     transitionLeft.value = ''
     text.value = explain.value
   }, 300)
-    }
+}
 
-    // 请求背景图片和验证图片
+// 请求背景图片和验证图片
-    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>