155 lines
3.0 KiB
Vue
155 lines
3.0 KiB
Vue
<template>
|
|
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" style="height: 100%;">
|
|
<slot></slot>
|
|
|
|
<!-- 加载更多 -->
|
|
<u-loadmore v-if="showLoadMore" icon-size="28" font-size="28" margin-top="20" margin-bottom="20"
|
|
status="loading" />
|
|
|
|
<!-- 没有更多了 -->
|
|
<u-loadmore v-if="showLoadedAll && loadedAll && resObject.list.length !== 0" icon-size="28" font-size="28" margin-top="20" margin-bottom="20"
|
|
status="nomore" />
|
|
|
|
<!-- 空数据页 -->
|
|
<view v-if="resObject.list.length == 0" :style="`padding: ${kongSizeMap[size].pdTB}rpx 0;`">
|
|
<u-empty text="无数据" :icon="getCdnUrl('kong.png')" textSize="28" :width="kongSizeMap[size].width" :height="kongSizeMap[size].height">
|
|
</u-empty>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
import { debounce } from "@/common/util"
|
|
const kongSizeMap = {
|
|
dfl: {
|
|
width: 86,
|
|
height: 97,
|
|
pdTB: 100,
|
|
},
|
|
sm: {
|
|
width: 42,
|
|
height: 48,
|
|
pdTB: 30,
|
|
}
|
|
}
|
|
export default {
|
|
watch: {
|
|
searchParam: {
|
|
handler: debounce(function(cval, oval) {
|
|
this.getDataList(true)
|
|
}),
|
|
deep: true
|
|
}
|
|
},
|
|
props: {
|
|
searchParam: {
|
|
default () {
|
|
return {}
|
|
}
|
|
},
|
|
showLoadedAll: {
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
getListFun: {
|
|
default () {
|
|
return null
|
|
}
|
|
},
|
|
getListFun: {
|
|
default () {
|
|
return null
|
|
}
|
|
},
|
|
resObject: {
|
|
default () {
|
|
return {
|
|
list: []
|
|
}
|
|
}
|
|
},
|
|
size: {
|
|
default () {
|
|
return 'dfl'
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
kongSizeMap,
|
|
reqLoading: false,
|
|
page: { // 分页参数
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
},
|
|
showLoadMore: false, // 是否显示加载更多的loading
|
|
loadedAll: false, // 是否加载了所有数据
|
|
}
|
|
},
|
|
created() {
|
|
this.getDataList(true)
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
unmounted() {},
|
|
|
|
methods: {
|
|
async onScrollBottom() {
|
|
this.$emit('onScrollBottom')
|
|
if (this.loadedAll || this.showLoadMore) {
|
|
return
|
|
}
|
|
this.showLoadMore = true
|
|
this.page.pageNum++
|
|
await this.getDataList()
|
|
this.showLoadMore = false
|
|
},
|
|
async getDataList(reload) {
|
|
if(!this.getListFun) {
|
|
return
|
|
}
|
|
if (reload) {
|
|
this.page.pageNum = 1
|
|
this.showLoading()
|
|
}
|
|
this.reqLoading = true
|
|
const res = await this.getListFun({
|
|
...this.page,
|
|
...this.searchParam
|
|
})
|
|
this.reqLoading = false
|
|
let list = res.rows || []
|
|
if (reload) {
|
|
this.hideLoading()
|
|
} else {
|
|
list = this.resObject.list.concat(list)
|
|
}
|
|
this.loadedAll = res.total <= list.length
|
|
this.updateRes({
|
|
list,
|
|
total: res.total
|
|
})
|
|
},
|
|
updateRes(obj) {
|
|
const res = {
|
|
...this.resObject,
|
|
page: this.page,
|
|
showLoadMore: this.showLoadMore,
|
|
loadedAll: this.loadedAll,
|
|
reqLoading: this.reqLoading,
|
|
...obj,
|
|
}
|
|
this.$emit('update:resObject', res)
|
|
this.$emit('onListChange', res)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.sch-cont {
|
|
position: relative;
|
|
}
|
|
</style> |