diff --git a/.env.development b/.env.development index a5806b2..878b634 100644 --- a/.env.development +++ b/.env.development @@ -7,8 +7,8 @@ ENV = 'development' #VUE_APP_WS_API = 'ws://120.76.47.59:8080' # 许镇-本地服地址 -VUE_APP_BASE_API = 'http://192.168.99.67:8080' -VUE_APP_WS_API = 'ws://192.168.99.67:8081' +VUE_APP_BASE_API = 'http://192.168.99.72:8080' +VUE_APP_WS_API = 'ws://192.168.99.72:8081' # 是否启用 babel-plugin-dynamic-import-node插件 VUE_CLI_BABEL_TRANSPILE_MODULES = true diff --git a/src/assets/images/refresh.png b/src/assets/images/refresh.png new file mode 100644 index 0000000..177e91e Binary files /dev/null and b/src/assets/images/refresh.png differ diff --git a/src/assets/images/refresh2.png b/src/assets/images/refresh2.png new file mode 100644 index 0000000..6c61d23 Binary files /dev/null and b/src/assets/images/refresh2.png differ diff --git a/src/views/bookRackList-dxh.vue b/src/views/bookRackList-dxh.vue index 6162f7e..af573f3 100644 --- a/src/views/bookRackList-dxh.vue +++ b/src/views/bookRackList-dxh.vue @@ -5,6 +5,7 @@ --> +

本架图书

左 @@ -51,15 +52,38 @@ export default { listData: [], bookList: {}, classnameL: 'rack-direct-active', - classnameR: null + classnameR: null, + timer: null, + refreshtime: 30000 } }, created() { this.initBookshelfDetails(-1) }, mounted() { + const _this = this + this.timer = setInterval(() => { + if (_this.classnameL !== null) { + _this.initBookshelfDetails(-1) + } else { + _this.initBookshelfDetails(1) + } + }, this.refreshtime) + }, + beforeDestroy() { + if (this.timer) { + clearInterval(this.timer) + this.timer = null + } }, methods: { + handleRefresh() { + if (this.classnameL !== null) { + this.initBookshelfDetails(-1) + } else { + this.initBookshelfDetails(1) + } + }, initSwiper() { this.$nextTick(() => { for (const key in this.bookList) { diff --git a/src/views/bookRackList.vue b/src/views/bookRackList.vue index a809302..ffe18c6 100644 --- a/src/views/bookRackList.vue +++ b/src/views/bookRackList.vue @@ -5,14 +5,24 @@ --> +

本架图书

左 右
-
-
+ +
+
@@ -30,7 +40,7 @@
- +
@@ -51,15 +61,114 @@ export default { listData: [], bookList: {}, classnameL: 'rack-direct-active', - classnameR: null + classnameR: null, + timer: null, + refreshtime: 10000, + isDetailOpen: false, // 新增：标记图书详情弹窗是否打开 + isOperating: false, // 操作锁（避免重复触发） + timerResetDelay: 3000, // 操作结束后延迟重启定时器的时间（5秒） + isMouseOverSwiper: false + } + }, + computed: { + isMouseOverAnySwiper() { + return this.isMouseOverSwiper // 或通过DOM查询判断是否在任意Swiper元素内 } }, created() { this.initBookshelfDetails(-1) }, mounted() { + this.startTimer() + // const _this = this + // this.timer = setInterval(() => { + // if (_this.classnameL !== null) { + // _this.initBookshelfDetails(-1) + // } else { + // _this.initBookshelfDetails(1) + // } + // }, this.refreshtime) + }, + beforeDestroy() { + this.stopTimer() // 销毁时彻底停止定时器 }, methods: { + // 鼠标进入Swiper区域 + handleSwiperEnter() { + this.isMouseOverSwiper = true + this.stopTimer() // 暂停自动刷新 + }, + + // 鼠标离开Swiper区域 + handleSwiperLeave() { + this.isMouseOverSwiper = false + this.restartTimer() // 恢复自动刷新 + }, + + // 触摸开始（移动端） + handleSwiperTouchStart() { + this.isMouseOverSwiper = true + this.stopTimer() // 暂停自动刷新 + }, + + // 触摸结束（移动端） + handleSwiperTouchEnd() { + // 延迟200ms判断是否离开（避免短时间触摸误判） + setTimeout(() => { + this.isMouseOverSwiper = false + this.restartTimer() // 恢复自动刷新 + }, 200) + }, + // 所有用户操作统一调用此方法 + handleUserAction() { + if (this.isOperating) return // 操作锁防止重复触发 + this.isOperating = true // 标记开始操作 + + // 清除现有定时器 + if (this.timer) { + clearInterval(this.timer) + this.timer = null + } + + // 延迟重置操作状态和重启定时器 + setTimeout(() => { + this.isOperating = false // 操作结束 + this.restartTimer() // 重启定时器 + }, this.timerResetDelay) + }, + // 启动定时器（仅在非操作状态下运行） + startTimer() { + if (this.isDetailOpen || this.isOperating || this.isMouseOverAnySwiper) return // 详情打开或操作中不启动定时器 + this.timer = setInterval(() => { + if (!this.isMouseOverSwiper) { // 确保鼠标不在Swiper区域内时刷新 + this.initBookshelfDetails(this.classnameL ? -1 : 1) + } + }, this.refreshtime) + }, + + // 重启定时器（操作结束后调用） + restartTimer() { + if (!this.isDetailOpen) { + this.stopTimer() + this.startTimer() + } + }, + + // 停止定时器 + stopTimer() { + if (this.timer) { + clearInterval(this.timer) + this.timer = null + } + }, + handleRefresh() { + this.handleUserAction() + if (this.classnameL !== null) { + this.initBookshelfDetails(-1) + } else { + this.initBookshelfDetails(1) + } + }, initSwiper() { this.$nextTick(() => { for (const key in this.bookList) { @@ -85,13 +194,21 @@ export default { }) }, 50) }, + // 详情弹窗关闭时触发 + handleDetailClose() { + this.isDetailOpen = false + this.restartTimer() // 关闭弹窗后重启定时器 + }, handleDetails(itemData) { + this.handleUserAction() // const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API const params = { isbn: itemData.isbn.replace(/\-/g, '') } getBookDetailsByISBN(params).then(res => { this.$refs.detailDom.dialogVisible = true + this.isDetailOpen = true + this.stopTimer() // 打开弹窗时停止定时器 if (res) { this.$refs.detailDom.bookData = res // console.log('res', res) @@ -118,6 +235,7 @@ export default { }, // 翻页 handlePage(page) { + this.handleUserAction() if (page === 1) { // 下一页 } else { @@ -126,6 +244,7 @@ export default { }, // 控制左右 handleDirect(n) { + this.handleUserAction() if (n === -1) { // 左 this.classnameR = null this.classnameL = 'rack-direct-active' @@ -139,6 +258,7 @@ export default { this.$router.go(-1) }, initBookshelfDetails(n) { + if (this.isDetailOpen) return this.loading = true const params = {} if (n === -1) { // 左 @@ -169,6 +289,7 @@ export default { setTimeout(() => { this.loading = false }, 1000) + this.isOperating = false // 数据加载完成，允许定时器重启 }) } } diff --git a/src/views/module/bookDetails.vue b/src/views/module/bookDetails.vue index 30d8435..280e20e 100644 --- a/src/views/module/bookDetails.vue +++ b/src/views/module/bookDetails.vue @@ -1,6 +1,11 @@