移动端释放滑块

peng

1 天以前 b56fcbe8d410c18b3a6ff7e4eb0e24815bbb5e09

移动端释放滑块

 buyer/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()
      });
    },

 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()
      });
    },

 manager/src/libs/util.js

@@ -106,13 +106,13 @@
  let userInfo = Cookies.get("userInfoManager");
  if (!userInfo) {
    // 未登录
    return;
    return Promise.resolve(false);
  }
  if (!vm.$store.state.app.added) {
    // 第一次加载 读取数据
    // 加载菜单
    getCurrentPermissionList().then(res => {
      if (!res.success) return false;
    return getCurrentPermissionList().then(res => {
      if (!res.success) return Promise.reject(false);
      let menuData = res.result;

      // 格式化数据，设置 空children 为 null
@@ -129,7 +129,7 @@
      }

      if (!menuData) {
        return;
        return Promise.reject(false);
      }
      util.initAllMenuData(constRoutes, menuData);
      util.initRouterNode(otherRoutes, otherRouter);
@@ -145,17 +145,22 @@
      // 缓存数据 修改加载标识
      window.localStorage.setItem("menuData", JSON.stringify(menuData));
      vm.$store.commit("setAdded", true);
      return Promise.resolve(true);
    }).catch(err => {
      console.error("路由初始化失败:", err);
      return Promise.reject(false);
    });
  } else {
    // 读取缓存数据
    let data = window.localStorage.getItem("menuData");
    if (!data) {
      vm.$store.commit("setAdded", false);
      return;
      return Promise.resolve(false);
    }
    let menuData = JSON.parse(data);
    // 添加菜单路由
    util.initMenuData(vm, menuData);
    return Promise.resolve(true);
  }
};


 manager/src/views/login.vue

@@ -119,13 +119,30 @@
          // 加载菜单
          Cookies.set("userInfoManager", JSON.stringify(res.result));
          this.$store.commit("setAvatarPath", res.result.avatar);
          util.initRouter(this);
          this.$router.push({
            name: "home_index",
          // 确保路由初始化完成后再进行跳转
          return util.initRouter(this).then(() => {
            this.$router.push({
              name: "home_index",
            }).catch(err => {
              console.error("路由跳转错误:", err);
              // 如果直接跳转失败，尝试使用replace
              this.$router.replace({
                name: "home_index",
              });
            });
          }).catch(err => {
            console.error("路由初始化失败:", err);
            // 路由初始化失败时也跳转到首页
            this.$router.push({
              name: "home_index",
            });
          });
        } else {
          this.loading = false;
        }
      }).catch(err => {
        console.error("获取用户信息失败:", err);
        this.loading = false;
      });
    },
    submitLogin() {
@@ -156,7 +173,7 @@
        .catch(() => {
          this.loading = false;
        });
      this.$refs.verify.show = false;
      // this.$refs.verify.show = false;
    },
  },
};

 seller/src/views/my-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()
      });
    },