|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
|
- <div class="home bg-white px-28">
|
|
|
- <div class=" text-3xl font-semibold pt-12 px-2 pb-6">
|
|
|
- 发现
|
|
|
- </div>
|
|
|
- <div class="min-h-screen">
|
|
|
+ <div class="home bg-white px-28 h-full flex flex-col">
|
|
|
+ <div class="top" ref="top">
|
|
|
+ <div class=" text-3xl font-semibold pt-12 px-2 pb-6">
|
|
|
+ 发现
|
|
|
+ </div>
|
|
|
<div class="flex">
|
|
|
<div class="flex flex-wrap w-9/12">
|
|
|
<div
|
|
@@ -36,6 +36,11 @@
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div class="lietRom flex-1 overflow-auto"
|
|
|
+ v-infinite-scroll="load"
|
|
|
+ infinite-scroll-disabled="disabled"
|
|
|
+ >
|
|
|
<div class="list mt-4">
|
|
|
<div
|
|
|
v-for="(item, index) in characterList"
|
|
@@ -51,7 +56,6 @@
|
|
|
<p class="prologue text-sm">
|
|
|
{{ item.prologue }}
|
|
|
</p>
|
|
|
-
|
|
|
<div class="labels flex my-1 flex-wrap">
|
|
|
<div v-for="(item2, index2) in item.labelArr" :key="index2" class="m-0.5 tag px-2 py-1 rounded flex items-center text-xs text-gray-500">
|
|
|
<!-- <i class="fas fa-smile text-yellow-400 mr-2"></i> -->
|
|
@@ -80,7 +84,21 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <p class="w-full py-4 text-gray-400 text-center" v-if="loading">加载中...</p>
|
|
|
+ <p class="w-full py-4 text-gray-400 text-center" v-if="noMore">没有更多了</p>
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <div class="my-4 flex justify-center">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page.sync="query.pageNum"
|
|
|
+ :page-size="10"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -100,6 +118,13 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ query: {
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ loading: false,
|
|
|
+ noMore: false,
|
|
|
historys: [],
|
|
|
labelLength: 8,
|
|
|
searchName: '',
|
|
@@ -115,6 +140,11 @@ export default {
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ disabled () {
|
|
|
+ return this.loading || this.noMore
|
|
|
+ }
|
|
|
+ },
|
|
|
mounted() {
|
|
|
// 获取标签
|
|
|
this.getLabelList()
|
|
@@ -122,6 +152,10 @@ export default {
|
|
|
this.getCharacterList()
|
|
|
},
|
|
|
methods: {
|
|
|
+ load() {
|
|
|
+ this.query.pageNum += 1
|
|
|
+ this.getCharacterList()
|
|
|
+ },
|
|
|
Enterkey(e) {
|
|
|
if (e.keyCode == 13) {
|
|
|
this.searchChange()
|
|
@@ -133,6 +167,8 @@ export default {
|
|
|
characterName: this.searchName,
|
|
|
labelId: this.selectLabel
|
|
|
}
|
|
|
+ this.query.pageNum = 1
|
|
|
+ this.characterList = []
|
|
|
this.getCharacterList(query)
|
|
|
},
|
|
|
searchChange() {
|
|
@@ -140,6 +176,8 @@ export default {
|
|
|
characterName: this.searchName,
|
|
|
labelId: this.selectLabel
|
|
|
}
|
|
|
+ this.query.pageNum = 1
|
|
|
+ this.characterList = []
|
|
|
this.getCharacterList(query)
|
|
|
},
|
|
|
getLabelList() {
|
|
@@ -153,10 +191,8 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
getCharacterList(query) {
|
|
|
- let params = {
|
|
|
- pageSize: 20,
|
|
|
- pageNum: 1
|
|
|
- }
|
|
|
+ this.loading = true
|
|
|
+ let params = this.query
|
|
|
if (query) {
|
|
|
params = {
|
|
|
...params,
|
|
@@ -164,10 +200,21 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
characterListApi(params).then(res => {
|
|
|
- // console.log(res, '角色列表');
|
|
|
- this.characterList = res.rows
|
|
|
+ // console.log(res, '角色列表');\
|
|
|
+ if (res.rows.length == 0) {
|
|
|
+ this.noMore = true
|
|
|
+ }
|
|
|
+ // this.characterList = res.rows
|
|
|
+ this.characterList = [...this.characterList, ...res.rows]
|
|
|
+ this.total = res.total
|
|
|
+ this.loading = false
|
|
|
})
|
|
|
},
|
|
|
+ handleCurrentChange() {
|
|
|
+ this.query.pageNum = 1
|
|
|
+ this.characterList = []
|
|
|
+ this.getCharacterList()
|
|
|
+ },
|
|
|
clickLabel(item) {
|
|
|
this.selectLabel = []
|
|
|
let index = this.selectLabel.indexOf(item.id)
|
|
@@ -182,6 +229,8 @@ export default {
|
|
|
characterName: this.searchName,
|
|
|
labelId: this.selectLabel
|
|
|
}
|
|
|
+ this.query.pageNum = 1
|
|
|
+ this.characterList = []
|
|
|
this.getCharacterList(query)
|
|
|
},
|
|
|
clearSelectLabel() {
|
|
@@ -191,6 +240,8 @@ export default {
|
|
|
characterName: this.searchName,
|
|
|
labelId: this.selectLabel
|
|
|
}
|
|
|
+ this.query.pageNum = 1
|
|
|
+ this.characterList = []
|
|
|
this.getCharacterList(query)
|
|
|
},
|
|
|
toDetail(item) {
|
|
@@ -295,8 +346,7 @@ export default {
|
|
|
background: #ffffff0f;
|
|
|
border: 1px solid #ffffff2e;
|
|
|
height: 35vw;
|
|
|
- min-height: 480px;
|
|
|
- max-height: 500px;
|
|
|
+ height: 480px;
|
|
|
}
|
|
|
.box2:hover {
|
|
|
border: solid 1px var(--bg-color1);
|
|
@@ -370,4 +420,10 @@ export default {
|
|
|
grid-auto-rows: minmax(480px, auto);
|
|
|
grid-gap: 20px;
|
|
|
}
|
|
|
+.lietRom {
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+.lietRom::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
</style>
|