|
|
|
@ -5,14 +5,24 @@ |
|
|
|
<span class="icon iconfont icon-l"></span> |
|
|
|
</router-link> --> |
|
|
|
<span class="icon iconfont icon-l" @click="goBack()"></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 // 数据加载完成，允许定时器重启 |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
