From b56fcbe8d410c18b3a6ff7e4eb0e24815bbb5e09 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期五, 19 九月 2025 13:41:59 +0800
Subject: [PATCH] 移动端释放滑块
---
manager/src/libs/util.js | 15 ++-
manager/src/components/verify/index.vue | 54 ++++++++++++-
manager/src/views/login.vue | 25 +++++-
seller/src/views/my-components/verify/index.vue | 54 ++++++++++++-
buyer/src/components/verify/index.vue | 54 ++++++++++++-
5 files changed, 175 insertions(+), 27 deletions(-)
diff --git a/buyer/src/components/verify/index.vue b/buyer/src/components/verify/index.vue
index 498cc92..73ece56 100644
--- a/buyer/src/components/verify/index.vue
+++ b/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()
});
},
diff --git a/manager/src/components/verify/index.vue b/manager/src/components/verify/index.vue
index 498cc92..73ece56 100644
--- a/manager/src/components/verify/index.vue
+++ b/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()
});
},
diff --git a/manager/src/libs/util.js b/manager/src/libs/util.js
index 142e9f1..a5090a9 100644
--- a/manager/src/libs/util.js
+++ b/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;
// 鏍煎紡鍖栨暟鎹紝璁剧疆 绌篶hildren 涓� 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);
}
};
diff --git a/manager/src/views/login.vue b/manager/src/views/login.vue
index c1b7819..2237626 100644
--- a/manager/src/views/login.vue
+++ b/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);
+ // 濡傛灉鐩存帴璺宠浆澶辫触锛屽皾璇曚娇鐢╮eplace
+ 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;
},
},
};
diff --git a/seller/src/views/my-components/verify/index.vue b/seller/src/views/my-components/verify/index.vue
index 498cc92..73ece56 100644
--- a/seller/src/views/my-components/verify/index.vue
+++ b/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()
});
},
--
Gitblit v1.8.0