geekai/web/src/components/SlideCaptcha.vue

<template>
  <div class="slide-captcha">
    <div class="bg-img">
      <el-image :src="backgroundImg" />
      <div :class="verifyMsgClass" v-if="checked !== 0">
        <span v-if="checked ===1">{{time}}s</span>
        {{verifyMsg}}
      </div>
      <div class="refresh" @click="emits('refresh')">
        <el-icon><Refresh /></el-icon>
      </div>
      <span class="block">
        <el-image :src="blockImg" :style="{left: blockLeft+'px'}" />
      </span>
    </div>

    <div class="verify">
      <div class="verify-bar-area">
        <span class="verify-msg">{{verifyText}}</span>

        <div :class="leftBarClass" :style="{width: leftBarWidth+'px'}">
          <div :class="blockClass" id="dragBlock"
               :style="{left: blockLeft+'px'}">
            <el-icon v-if="checked === 0"><ArrowRightBold /></el-icon>
            <el-icon v-if="checked === 1"><CircleCheckFilled /></el-icon>
            <el-icon v-if="checked === 2"><CircleCloseFilled /></el-icon>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
// eslint-disable-next-line no-undef
import {onMounted, ref, watch} from "vue";
import {ArrowRightBold, CircleCheckFilled, CircleCloseFilled, Refresh} from "@element-plus/icons-vue";

// eslint-disable-next-line no-undef
const props = defineProps({
  bgImg: String,
  bkImg: String,
  result: Number,
})

const verifyText = ref('向右滑动完成验证')
const verifyMsg = ref('')
const verifyMsgClass = ref("verify-text success")
const blockClass = ref('verify-move-block')
const leftBarClass = ref('verify-left-bar')
const backgroundImg = ref('')
const blockImg = ref('')
const leftBarWidth = ref(0)
const blockLeft = ref(0)
const checked = ref(0)
const time = ref('')

watch(() => props.bgImg, (newVal) => {
  backgroundImg.value = newVal;
});
watch(() => props.bkImg, (newVal) => {
  blockImg.value = newVal;
});
watch(() => props.result, (newVal) => {
  checked.value = newVal;
  if (newVal === 1) {
    verifyMsgClass.value = "verify-text success"
    blockClass.value = 'verify-move-block success'
    leftBarClass.value = 'verify-left-bar success'
    verifyMsg.value = '验证成功'
    setTimeout(() => emits('hide'), 1000)
  } else if (newVal ===2) {
    verifyMsgClass.value = "verify-text error"
    blockClass.value = 'verify-move-block error'
    leftBarClass.value = 'verify-left-bar error'
    verifyMsg.value = '验证失败'
    setTimeout(() => {
      reset()
      emits('refresh')
    }, 1000)
  } else {
    reset()
  }
});


// eslint-disable-next-line no-undef
const emits = defineEmits(['confirm','refresh','hide']);

let offsetX = 0, isDragging  = false
let start = 0
onMounted(() => {
  const dragBlock = document.getElementById('dragBlock');
  dragBlock.addEventListener('mousedown', (evt) => {
    blockClass.value = 'verify-move-block active'
    leftBarClass.value = 'verify-left-bar active'
    leftBarWidth.value = 32
    isDragging  = true
    verifyText.value = ""
    offsetX = evt.clientX
    start = new Date().getTime()
    evt.preventDefault();
  })

  document.body.addEventListener('mousemove',(evt) => {
    if (!isDragging) {
      return
    }
    const x = Math.max(evt.clientX - offsetX, 0)
    blockLeft.value = x;
    leftBarWidth.value = x + 32
  })

  document.body.addEventListener('mouseup', () => {
    if (!isDragging) {
      return
    }
    time.value = ((new Date().getTime() - start)/1000).toFixed(2)
    isDragging  = false
    emits('confirm', Math.floor(blockLeft.value))
  })

  // 触摸事件
  dragBlock.addEventListener('touchstart', function (e) {
    isDragging = true;
    blockClass.value = 'verify-move-block active'
    leftBarClass.value = 'verify-left-bar active'
    leftBarWidth.value = 32
    isDragging  = true
    verifyText.value = ""
    offsetX = e.touches[0].clientX - dragBlock.getBoundingClientRect().left;
    start = new Date().getTime()
    e.preventDefault();
  });

  document.addEventListener('touchmove', function (e) {
    if (!isDragging) {
      return
    }
    e.preventDefault();
    const x = Math.max(e.touches[0].clientX - offsetX, 0)
    blockLeft.value = x;
    leftBarWidth.value = x + 32
  });

  document.addEventListener('touchend', function () {
    if (!isDragging) {
      return
    }
    time.value = ((new Date().getTime() - start)/1000).toFixed(2)
    isDragging  = false
    emits('confirm', Math.floor(blockLeft.value))
  });
})


// 重置验证码
const reset = () => {
  blockClass.value = 'verify-move-block'
  leftBarClass.value = 'verify-left-bar'
  leftBarWidth.value = 0
  blockLeft.value = 0
  checked.value = 0
  verifyText.value = "向右滑动完成验证"
}
</script>

<style scoped lang="stylus">
@keyframes expandUp {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

.slide-captcha {
  * {
    margin 0
    padding 0
  }

  .bg-img {
    position relative
    width 310px
    .verify-text {
      position absolute
      bottom 3px
      padding 5px 10px
      width 290px
      color #ffffff

      animation: expandUp 0.3s ease-in-out forwards;
      transform-origin: bottom center;
      transform: scaleY(0); /* 初始状态，元素高度为0 */
    }

    .verify-text.success {
      background-color rgba(92,184,92, 0.5)
    }

    .verify-text.error {
      background-color rgba(184,92,92, 0.5)
    }

    .refresh {
      position absolute
      right 5px
      top 5px
      font-size 20px
      cursor pointer
      color #ffffff
    }

    .block {
      position absolute
      top 0
      left 0
    }

  }

  .verify {
    .verify-bar-area {
      position relative
      border: 1px solid #dddddd
      overflow hidden
      height 34px

      .verify-msg {
        display flex
        line-height 32px
        width 100%
        justify-content center
      }

      .verify-left-bar {
        position absolute
        left 0
        top 0
        height 32px;

        .verify-move-block {
          position absolute
          width: 32px;
          height: 32px;
          background-color: rgb(255, 255, 255);
          border-top 1px solid #ffffff
          border-bottom 1px solid #ffffff
          border-right 1px solid #dddddd

          display flex
          justify-content center
          align-items center
          .el-icon {
            font-size 20px
            cursor pointer
          }
        }

        .verify-move-block.active {
          background #409eff
          color #ffffff
          border 1px solid #409eff
        }

        .verify-move-block.success {
          background #57AD57
          color #ffffff
          border 1px solid #57AD57
        }
        .verify-move-block.error {
          background #D9534F
          color #ffffff
          border 1px solid #D9534F
        }

      }

      .verify-left-bar.active {
        background-color #F0FFF0
        border 1px solid #409eff
      }
      .verify-left-bar.success {
        background-color #F0FFF0
        border 1px solid #57AD57
      }
      .verify-left-bar.error {
        background-color #F0FFF0
        border 1px solid #D9534F
      }
    }
  }
}
</style>