移动端释放滑块

peng

昨天 b56fcbe8d410c18b3a6ff7e4eb0e24815bbb5e09

 manager/src/components/verify/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @click.stop>
  <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @touchmove="touchMove" @touchend="touchEnd" @click.stop>
    <div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
      <img :src="data.backImage" style="width:100%;height:100%" alt="">
      <img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
@@ -7,7 +7,7 @@
    </div>
    <div class="handle" :style="{width:data.originalWidth+'px'}">
      <span class="bgcolor" :style="{width:distance + 'px',background:bgColor}"></span>
      <span class="swiper" :style="{left:distance + 'px'}" @mousedown="mouseDown">
      <span class="swiper" :style="{left:distance + 'px'}" @mousedown="mouseDown" @touchstart="touchStart">
        <Icon type="md-arrow-round-forward" />
      </span>
      <span class="text">{{verifyText}}</span>
@@ -49,6 +49,13 @@
      this.downX = e.clientX;
      this.flag = true;
    },
    // 触摸开始事件，开始拖动滑块
    touchStart (e) {
      // 阻止默认滚动行为
      e.preventDefault();
      this.downX = e.touches[0].clientX;
      this.flag = true;
    },
    // 鼠标移动事件，计算距离
    mouseMove (e) {
      if (this.flag) {
@@ -63,20 +70,54 @@
        }
      }
    },
    // 触摸移动事件，计算距离
    touchMove (e) {
      // 阻止默认滚动行为
      e.preventDefault();
      if (this.flag) {
        let offset = e.touches[0].clientX - this.downX;

        if (offset > this.data.originalWidth - 43) {
          this.distance = this.data.originalWidth - 43;
        } else if (offset < 0) {
          this.distance = 0;
        } else {
          this.distance = offset;
        }
      }
    },
    // 鼠标抬起事件，验证是否正确
    mouseUp () {
      if (!this.flag) return false;
      this.flag = false;
      this.verifySlide();
    },
    // 触摸结束事件，验证是否正确
    touchEnd () {
      if (!this.flag) return false;
      this.flag = false;
      this.verifySlide();
    },
    // 验证滑块位置
    verifySlide() {
      // 四舍五入确保位置是整数，提高验证准确性
      let xPos = Math.round(this.distance);
      
      // 添加调试信息
      console.log('滑块位置:', xPos, '容器宽度:', this.data.originalWidth, '设备像素比:', window.devicePixelRatio);
      
      let params = {
        verificationEnums: this.type,
        xPos: this.distance
        xPos: xPos
      };
      
      postVerifyImg(params).then(res => {
        console.log('验证响应:', res);
        if (res.success) {
          if (res.result) {
            this.bgColor = 'green';
            this.verifyText = '解锁成功';
            this.$emit('change', { status: true, distance: this.distance });
            this.$emit('change', { status: true, distance: xPos });
          } else {
            this.bgColor = 'red';
            this.verifyText = '解锁失败';
@@ -84,13 +125,14 @@
            setTimeout(() => {
              that.init();
            }, 1000);
            this.$emit('change', { status: false, distance: this.distance });
            this.$emit('change', { status: false, distance: xPos });
          }
        } else {
          this.init()
        }
        
      }).catch(()=>{

      }).catch((err)=>{
        console.error('验证请求失败:', err);
        this.init()
      });
    },
@@ -133,6 +175,7 @@
  height: 150px;
  position: relative;
  overflow: hidden;
  user-select: none;

  .slider {
    position: absolute;