抽取里站搜索为单独组件，翻页时回到顶部（同步更新）调整里站搜索使其界面更大

2023-06-29 18:12:23 +08:00
parent 07eb3567b4
commit de77d812d0
4 changed files with 147 additions and 89 deletions
@@ -0,0 +1,131 @@
+<script setup>
+
+import {ref, watch} from "vue";
+import axios from "axios";
+import {ElMessage} from "element-plus";
+import store from "../store/index.js";
+
+let props = defineProps(['isQuerying'])
+let emit = defineEmits(['close'])
+let scrollBar = ref()
+let keyword = ref("")
+let queryPage = ref({})
+let galleries = ref([])
+let param = ref()
+let isShowUp = ref()
+
+watch(props, () => {
+  isShowUp.value = props.isQuerying
+})
+
+function queryGalleries(link) {
+  let tempParam
+  if (link !== null) {
+    let url = new URL(link)
+    tempParam = url.search.replace("?f_search=", "")
+  } else {
+    tempParam = keyword.value
+  }
+  tempParam = tempParam.replace(" ", "+")
+  document.getElementById("loading").style.display = "inline-block";
+
+  axios.get("http://downloader.lionwebsite.xyz/query?keyword=" + tempParam)
+      .then((res) => {
+        document.getElementById("loading").style.display = "none";
+        if (res.data.result === "success") {
+          let tempGalleries = JSON.parse(res.data.data)
+          queryPage.value.first = 'first' in res.data ? res.data.first : undefined
+          queryPage.value.previous = 'previous' in res.data ? res.data.previous : undefined
+          queryPage.value.next = 'next' in res.data ? res.data.next : undefined
+          queryPage.value.last = 'last' in res.data ? res.data.last : undefined
+
+          galleries.value.splice(0)
+          tempGalleries.forEach((gallery) => {
+            galleries.value.push(gallery)
+          })
+
+          scrollBar.value.setScrollTop(0)
+        } else {
+          ElMessage({message: res.data.data, type: "error"})
+        }
+      })
+}
+
+function queryRemoteTask(){
+  if(!validateLink(param.value)){
+    ElMessage("链接错误")
+    return
+  }
+  let tempLink = coverLink(param.value)
+  store.dispatch("queryGalleryTask", tempLink)
+}
+
+function validateLink(rawLink){
+  if(rawLink.trim() === "")
+    return false
+  if(rawLink.includes("hentai"))
+    return rawLink.includes("/g/")
+  else
+    return false
+}
+
+function coverLink(rawLink){
+  return rawLink.replace("exhentai.org", "element-plus.org").replace("e-hentai.org", "element.org");
+}
+
+function close(){
+  emit("close")
+}
+</script>
+
+<template>
+  <el-dialog title="里站搜索" v-model="isShowUp" top="0" style="margin-bottom: 0" @close="close">
+    <div style="text-align: center">
+      <el-input v-model="keyword"></el-input> <el-button @click="queryGalleries(null)">查询</el-button> <div id="loading"/>
+    </div>
+    <el-scrollbar height="75vh" ref="scrollBar">
+      <div style="height: 251px; width: 100%; " v-for="gallery in galleries">
+        <el-image alt="picture" :preview-src-list="['http://downloader.lionwebsite.xyz/query/image?path=' + gallery.thumbnailUrl,]"
+                  :src="'http://downloader.lionwebsite.xyz/query/image?path=' + gallery.thumbnailUrl"
+                  style="height:250px;width:250px;float: left;"
+                  fit="contain"
+                  loading="lazy"
+        />
+        <div style="font: bold 16px semi-condensed; margin-top: 10px; padding-top: 15px; padding-left: 275px">
+          <span>{{gallery.name}}</span><br><br>
+          <span>上传时间：{{gallery.uploadTime}}</span><br>
+          <span>页数：{{gallery.page}}</span><br>
+          <span class="ct6">类型：{{gallery.type}}</span><br>
+          <a :href="gallery.link">链接</a><br>
+          <el-button style=" margin-left: 80%; margin-top: -5vh" @click="param=gallery.link; queryRemoteTask()">下载</el-button>
+        </div>
+      </div>
+    </el-scrollbar>
+    <div style="padding-top: 1vh; text-align: center">
+      <el-button @click="queryGalleries(queryPage.first)" :disabled="queryPage.first === undefined">首页</el-button>
+      <el-button @click="queryGalleries(queryPage.previous)" :disabled="queryPage.previous === undefined">上一页</el-button>
+      <el-button @click="queryGalleries(queryPage.next)" :disabled="queryPage.next === undefined">下一页</el-button>
+      <el-button @click="queryGalleries(queryPage.last)" :disabled="queryPage.last === undefined">尾页</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.el-input{
+  width: 200px;
+}
+
+#loading {
+  width: 25px;
+  height: 25px;
+  border: 2px solid #ccc;
+  border-top-color: #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  display: none;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>