lionwebsite-frontend-mobile/src/components/OnlineReader.vue

<script setup>
import {computed, ref, watch} from "vue";
import store from "../store/index.js";
let props = defineProps(['currentGallery', 'isOnlineReading'])
let emit = defineEmits(['close'])
let isShowUp = ref()
let onlineReadingScrollbar = ref()
let links = ref()
let index = ref(0)
let temp_index = ref(0)   //用于跳转
let max = ref(0)
let current_page = 0
let lengthPerPage = computed(() => {
  return store.state.lengthPerPage
})

watch(props, (props)=>{
  isShowUp.value = props.isOnlineReading
  alterPage()
})

//切换本子
function alterPage(){
  if(props.currentGallery.images.length > lengthPerPage.value){
    links.value = props.currentGallery.images.slice(0, lengthPerPage.value)
    max.value = Math.ceil(props.currentGallery.images.length / lengthPerPage.value)
  }else{
    links.value = props.currentGallery.images
    max.value = 0
  }
  index.value = 0
  temp_index.value = 1
}

//跳转到对应页数
function jump(targetIndex){
  links.value = props.currentGallery.images.slice(targetIndex * lengthPerPage.value, (targetIndex + 1) * lengthPerPage.value)
  index.value = targetIndex
  temp_index.value = targetIndex + 1
  onlineReadingScrollbar.value.setScrollTop(0)
}

function closeDialog(){
  onlineReadingScrollbar.value.setScrollTop(0)
  emit('close')
}

function switch_page(target_page){
  console.log(current_page, target_page)
  //上一页
  if(target_page > (current_page + 1) && current_page === 0 && index.value > 0) {
    console.log("上一页")
    document.querySelector("span.el-image-viewer__btn.el-image-viewer__close").click()
    jump(index.value - 1)
    onlineReadingScrollbar.value.setScrollTop(onlineReadingScrollbar.value.wrapRef.scrollHeight)
    let top = 0
    let timer = setInterval(() => {
      if(onlineReadingScrollbar.value.scrollTop === top){
        clearInterval(timer)
        document.querySelector("div.el-scrollbar__wrap.el-scrollbar__wrap--hidden-default > div > div:last-child > img").click()
      }
      top = onlineReadingScrollbar.value.scrollTop
      onlineReadingScrollbar.value.setScrollTop(onlineReadingScrollbar.value.wrapRef.scrollHeight)
    }, 100)


    //下一页
  }else if(target_page === 0 && current_page === lengthPerPage.value - 1 && index.value < max.value){
    console.log("下一页")
    jump(index.value + 1)
    current_page = 0
    document.querySelector("div.el-scrollbar__wrap.el-scrollbar__wrap--hidden-default > div > div:nth-child(1) > img").click()
  }
  else{
    current_page = target_page
  }
}

function set_current_page(page){
  current_page = page
}
</script>

<template>
  <el-dialog v-model="isShowUp" @close="closeDialog" width="100%" top="0" fullscreen >
    <template #header style="padding-bottom: 0">
      在线预览:  {{currentGallery.name}} 页数：{{currentGallery.pages}}<br>
      <div style="font-size: 3vh; display: inline" v-if="max > 0">
        {{ index + 1 }} - {{ (index) * lengthPerPage + 1 }} ~
        {{ (index + 1) * lengthPerPage + 1 > currentGallery.images.length ? currentGallery.images.length : (index + 1) * lengthPerPage }}
      </div>
    </template>
    <el-scrollbar height="75vh" ref="onlineReadingScrollbar">
      <el-image v-for="(link, i) in links" :src="link" :style="{'width': 'auto', 'text-align': 'center', 'background-color': 'ghostwhite'}"
                :preview-src-list="links" :initial-index="i" @switch="switch_page" @show="set_current_page(i)"/>
    </el-scrollbar>

    <!--五页以下-->
    <div v-if="max > 1 && max < 4">
      <el-button @click="jump(index - 1)" :disabled="index === 0" size="small">上一页</el-button>
      <el-button v-for="i in max" @click="jump(i - 1)" size="small">
      {{i}}
      </el-button>
      <el-button @click="jump(index + 1)" :disabled="index === max - 1" size="small">下一页</el-button>
    </div>

    <!--五页及以上-->
    <div v-if="max >= 4" style="text-align: center">
      <el-button @click="jump(index - 1)" :disabled="index === 0" size="small">上一页</el-button>
      1 &lt;
      <el-input-number v-model="temp_index" :min="1" :max="max"/>
      &lt; {{max}}
      <el-button @click="jump(index + 1)" :disabled="index === max - 1" size="small">下一页</el-button>
      <el-button @click="jump(temp_index - 1)" size="large">跳转</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>

</style>