书架页面更新

.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

src/views/bookRackList-dxh.vue

@@ -5,6 +5,7 @@
         <span class="icon iconfont icon-l">&#xe631;</span>
       </router-link> -->
       <span class="icon iconfont icon-l" @click="goBack()">&#xe631;</span>
+      <img style="display: block; width: 46px; height: 46px; position: absolute; left: 100px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);" src="~@/assets/images/refresh.png" alt="" @click="handleRefresh" />
       <h2>本架图书</h2>
       <div class="rack-direct">
         <span :class="classnameL" @click="handleDirect(-1)">左</span>
@@ -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) {

src/views/bookRackList.vue

@@ -5,14 +5,24 @@
         <span class="icon iconfont icon-l">&#xe631;</span>
       </router-link> -->
       <span class="icon iconfont icon-l" @click="goBack()">&#xe631;</span>
+      <img style="display: block; width: 46px; height: 46px; position: absolute; left: 100px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);" src="~@/assets/images/refresh.png" alt="" @click="handleRefresh" />
       <h2>本架图书</h2>
       <div class="rack-direct">
         <span :class="classnameL" @click="handleDirect(-1)">左</span>
         <span :class="classnameR" @click="handleDirect(1)">右</span>
       </div>
     </div>
-    <div v-loading="loading" class="rack-box">
-      <div v-for="(item, index) in listData" :key="index" class="rack-item">
+    <!-- v-loading="loading" -->
+    <div class="rack-box">
+      <div
+        v-for="(item, index) in listData"
+        :key="index"
+        class="rack-item"
+        @mouseenter="handleSwiperEnter"
+        @mouseleave="handleSwiperLeave"
+        @touchstart="handleSwiperTouchStart"
+        @touchend="handleSwiperTouchEnd"
+      >
         <div :class="['swiper'+index,'rack-box-list']">
           <div class="swiper-wrapper">
             <div v-for="eitem in bookList[item]" :key="eitem.id" class="list-item swiper-slide" @click="handleDetails(eitem)">
@@ -30,7 +40,7 @@
         </div>
       </div>
     </div>
-    <BookDetails ref="detailDom" />
+    <BookDetails ref="detailDom" @close="handleDetailClose" />
   </div>
 </template>
 
@@ -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 // 数据加载完成，允许定时器重启
       })
     }
   }

src/views/module/bookDetails.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <el-dialog title="图书详情" :visible.sync="dialogVisible" width="80%">
+    <el-dialog
+      title="图书详情"
+      :visible.sync="dialogVisible"
+      width="80%"
+      @close="closeDialog"
+    >
       <!-- :before-close="handleClose" -->
       <div class="dialog-setting">
         <div v-if="bookData" class="book-details-box">
@@ -60,6 +65,11 @@ export default {
     toBookNav(index) {
       const linkSrc = process.env.VUE_APP_BASE_API
       window.location.href = linkSrc + '/anchoring/goNavigation.do?libcode=' + this.libcode + '&barcode=' + this.bookData.places[index].barcode
+    },
+    // 关闭弹窗时触发事件（包括点击关闭按钮和遮罩层）
+    closeDialog() {
+      this.dialogVisible = false
+      this.$emit('close') // 通知父组件弹窗关闭
     }
   }
 }