处理里站搜索时没有搜索结果的情况。里站搜索时增加加载图标(同步更新)

This commit is contained in:
chuzhongzai 2023-03-31 22:09:35 +08:00
parent bb9b247aba
commit b9608487a1

View File

@ -60,7 +60,7 @@
<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>
<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%; background-color: #f5f5f5; border-radius: 5px" v-for="gallery in galleries">
@ -233,19 +233,25 @@ function queryGalleries(link){
tempParam = keyword.value
}
tempParam = tempParam.replace(" ", "+")
document.getElementById("loading").style.display = "inline-block";
axios.get("http://downloader.lionwebsite.xyz/query?keyword=" + tempParam)
.then((res) => {
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
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)
})
galleries.value.splice(0)
tempGalleries.forEach((gallery) => {
galleries.value.push(gallery)
})
}else {
ElMessage({message: res.data.data, type: "error"})
}
})
}
@ -329,4 +335,17 @@ onMounted(() => {
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>