128 lines
3.9 KiB
Vue
128 lines
3.9 KiB
Vue
<template>
|
|
<div class="body">
|
|
<div class="list" v-loading="selecting">
|
|
<div style="display: flex">
|
|
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
|
<el-button type="primary" style="margin-left: 10px" @click="sel"
|
|
>搜索</el-button
|
|
>
|
|
</div>
|
|
<div>
|
|
<el-button v-for="(item,index) in list" :key="index" style="width: 100%; margin: 0; margin-top: 10px" @click="xuanze(index)">{{item.name}}</el-button>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="zhangjie" v-loading="zhangjieing">
|
|
<el-tabs type="border-card" style="height: 100%;overflow:auto;height:100%" v-if="mhxz != -1" @tab-click="selzj" >
|
|
<el-tab-pane v-for="(item,index) in list[mhxz].list" :key="index" :label="item.name">
|
|
<!-- <el-button>{{item.url}}</el-button> -->
|
|
<div v-for="(items,index) in zhangjielist[item.name]" :key="index">
|
|
<div><el-tag>{{items.title}}</el-tag></div>
|
|
<el-button v-for="(i,j) in items.list" :key="j" @click="getimg(i.url,item.name)">{{i.title}}</el-button>
|
|
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
<el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="50%" v-loading="imging">
|
|
<div style="overflow:auto;height: 100vh">
|
|
<img v-for="(item,index) in imglist.chapterImages" :key="index" :src="imglist.imghost + (imglist.chapterPath ?'/' + imglist.chapterPath : '/' ) + item" alt="" style="width:100%">
|
|
|
|
</div>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "App",
|
|
components: {},
|
|
data() {
|
|
return {
|
|
drawer: false,
|
|
list:[],
|
|
input: "",
|
|
selecting:false,
|
|
mhxz: -1,
|
|
zhangjielist:{},
|
|
zhangjieing: false,
|
|
name:"",
|
|
imglist:[],
|
|
imging:false
|
|
|
|
};
|
|
},
|
|
methods:{
|
|
sel(){
|
|
this.selecting = true
|
|
this.zhangjielist = {}
|
|
this.mhxz = -1;
|
|
this.axios.get("https://manhua.theluyuan.com/find?name=" + this.input).then((res)=>{
|
|
this.list = res.data
|
|
this.selecting = false
|
|
}).catch(()=>{
|
|
this.selecting = false
|
|
})
|
|
},
|
|
xuanze(index){
|
|
this.mhxz = index
|
|
this.zhangjie(this.list[index].list[0].name,this.list[index].list[0].url)
|
|
},
|
|
zhangjie(name, url){
|
|
this.zhangjieing = true
|
|
this.axios.get("https://manhua.theluyuan.com/section?name=" + name + "&url=" + url).then((res)=>{
|
|
this.zhangjielist[name] = res.data
|
|
this.zhangjieing = false
|
|
}).catch(()=>{
|
|
this.zhangjieing = false
|
|
})
|
|
},
|
|
selzj(e){
|
|
console.log(e)
|
|
this.name = e.label
|
|
if(this.zhangjielist[e.label] == undefined){
|
|
this.zhangjie(e.label, this.list[this.mhxz].list[e.index].url)
|
|
}
|
|
},
|
|
getimg(url, name){
|
|
this.drawer = true
|
|
this.imging = true
|
|
this.imglist = []
|
|
this.axios.get("https://manhua.theluyuan.com/picture?name=" + name + "&url=" + url).then((res)=>{
|
|
this.imglist = res.data
|
|
this.imging = false
|
|
}).catch(()=>{
|
|
this.imging = false
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.body {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background-color: #ececec;
|
|
align-items: center;
|
|
}
|
|
.body .list {
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
width: 19%;
|
|
box-sizing: border-box;
|
|
height: 95%;
|
|
}
|
|
.body .zhangjie {
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
height: 95%;
|
|
width: 79%;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|