抽取里站搜索为单独组件，翻页时回到顶部（同步更新）
This commit is contained in:
chuzhongzai
parent
7cfeaf618c
commit
6652c6574f
@ -80,36 +80,7 @@
|
||||
</tr>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
<el-dialog title="里站搜索" v-model="isQuerying" top="0" style="margin-bottom: 0" width="100%" class="el-dialogClass">
|
||||
<div style="text-align: center">
|
||||
<el-input v-model="keyword" style="width: 50vw"></el-input> <el-button @click="queryGalleries(null)">查询</el-button> <div id="loading"/>
|
||||
</div>
|
||||
<el-scrollbar height="65vh">
|
||||
<div style="height: 20vh; width: 100%; border-radius: 5px" 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:20vh;width:35vw;float: left;"
|
||||
fit="contain"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div style="font: bold 10px semi-condensed; margin-top: 1vh; padding-left: 40vw; padding-top: 2vw">
|
||||
<span>{{gallery.name}}</span><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="position: relative; margin-left: 65%;" @click="param=gallery.link; queryRemoteTask()" type="primary">下载</el-button>
|
||||
</div>
|
||||
</div><br>
|
||||
</el-scrollbar>
|
||||
<div style="padding-top: 10px; 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>
|
||||
<HentaiSearch :is-querying="isQuerying" @close="closeQueryPanel"></HentaiSearch>
|
||||
|
||||
<el-dialog title="修改授权码" v-model="isAlterAuthCode" width="100%">
|
||||
<el-form>
|
||||
@ -198,6 +169,7 @@ import store from "../store";
|
||||
import {computed, ref, onMounted} from "vue";
|
||||
import {ElMessage} from "element-plus"
|
||||
import axios from "axios";
|
||||
import HentaiSearch from "./HentaiSearch.vue";
|
||||
|
||||
//授权码相关
|
||||
let AuthCode = ref("")
|
||||
@ -211,8 +183,6 @@ let isViewingTag = ref(false)
|
||||
let isConfig = ref(false)
|
||||
let isDark = ref(false)
|
||||
let keyword = ref("furry yaoi")
|
||||
let galleries = ref([])
|
||||
let queryPage = ref({})
|
||||
let darkConfig = ref({})
|
||||
let lengthPerPage = ref(0)
|
||||
|
||||
@ -415,35 +385,8 @@ function resetLocalQuery(){
|
||||
store.commit("_searchLocalByTag", [''])
|
||||
param.value = ""
|
||||
}
|
||||
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)
|
||||
})
|
||||
}else {
|
||||
ElMessage({message: res.data.data, type: "error"})
|
||||
}
|
||||
})
|
||||
function closeQueryPanel(){
|
||||
isQuerying.value = false
|
||||
}
|
||||
|
||||
//删除任务
|
||||
@ -627,17 +570,4 @@ function saveConfig(){
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
#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>
|
||||
134
src/components/HentaiSearch.vue
Normal file
134
src/components/HentaiSearch.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<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)
|
||||
})
|
||||
}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" width="100%" class="el-dialogClass" @close="close">
|
||||
<div style="text-align: center">
|
||||
<el-input v-model="keyword" style="width: 50vw"></el-input> <el-button @click="queryGalleries(null)">查询</el-button> <div id="loading"/>
|
||||
</div>
|
||||
<el-scrollbar height="65vh" ref="scrollBar">
|
||||
<div style="height: 20vh; width: 100%; border-radius: 5px" 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:20vh;width:35vw;float: left;"
|
||||
fit="contain"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div style="font: bold 10px semi-condensed; margin-top: 1vh; padding-left: 40vw; padding-top: 2vw">
|
||||
<span>{{gallery.name}}</span><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="position: relative; margin-left: 65%;" @click="param=gallery.link; queryRemoteTask()" type="primary">下载</el-button>
|
||||
</div>
|
||||
</div><br>
|
||||
</el-scrollbar>
|
||||
<div style="padding-top: 10px; 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); }
|
||||
}
|
||||
|
||||
.el-dialogClass .el-dialog__body{
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
</style>
|
||||
@ -35,6 +35,7 @@ function jump(targetIndex){
|
||||
links.value = props.currentLinks.slice(targetIndex * lengthPerPage.value, (targetIndex + 1) * lengthPerPage.value)
|
||||
index.value = targetIndex
|
||||
temp_index.value = targetIndex + 1
|
||||
onlineReadingScrollbar.value.setScrollTop(0)
|
||||
}
|
||||
|
||||
function closeDialog(){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user