108 lines
2.9 KiB
Vue
108 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<ul class="patrol-missions" v-if="showModel" infinite-scroll-distance="1" v-infinite-scroll="loadList" v-loading="loading">
|
||
|
|
<li class="test-item" v-for="(item, index) in list" :key="`info${index}`">
|
||
|
|
<div class="person-img"><img src="@/assets/images/person.png" /></div>
|
||
|
|
<div class="info">
|
||
|
|
<div class="text one_text_detail f16">{{ item.qwmc }}</div>
|
||
|
|
<div class="text lh30">负责人:{{ item.xm }}</div>
|
||
|
|
<div class="lh30">电话:{{ item.lxdh }}</div>
|
||
|
|
<div class="one_text_detail">巡逻路线:{{ item.bxxmc }}</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<p class="tc" v-if="list.length > 0 && noMore && !loading ">没有数据了</p>
|
||
|
|
<MOSTY.Empty :show="true" :imgSize="100" v-if="list.length == 0 && !loading"></MOSTY.Empty>
|
||
|
|
</ul>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import * as MOSTY from "@/components/MyComponents/index";
|
||
|
|
import { qcckGet } from "@/api/qcckApi.js";
|
||
|
|
import { onMounted, ref } from 'vue';
|
||
|
|
const list = ref([])
|
||
|
|
const loading = ref(false);
|
||
|
|
const page = ref(1);
|
||
|
|
const total = ref(0)
|
||
|
|
const noMore = ref(false)
|
||
|
|
const showModel = ref(false)
|
||
|
|
onMounted(()=>{
|
||
|
|
showModel.value = true;
|
||
|
|
getDateMeta()
|
||
|
|
})
|
||
|
|
// 更新数据
|
||
|
|
const getDateMeta = () =>{
|
||
|
|
loading.value = true;
|
||
|
|
let params = {
|
||
|
|
pageSize:10,
|
||
|
|
pageCurrent:page.value,
|
||
|
|
}
|
||
|
|
qcckGet(params,'/mosty-jbld/dptj/getJbxlrw').then(res=>{
|
||
|
|
loading.value = false;
|
||
|
|
let arr = res.records || []
|
||
|
|
list.value = page.value == 1 ? arr : list.value.concat(arr);
|
||
|
|
total.value = res.total
|
||
|
|
}).catch(()=>{
|
||
|
|
loading.value = false;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 滚动加载
|
||
|
|
const loadList = () =>{
|
||
|
|
console.log('鸡杂');
|
||
|
|
|
||
|
|
if(list.value.length == total.value) return noMore.value = true;
|
||
|
|
noMore.value = false;
|
||
|
|
page.value++;
|
||
|
|
getDateMeta();
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.patrol-missions {
|
||
|
|
margin-top: 10px;
|
||
|
|
height: calc(100% - 10px);
|
||
|
|
padding: 10px 10px 0 10px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
overflow: hidden;
|
||
|
|
overflow-y: auto;
|
||
|
|
.test-item {
|
||
|
|
background: url("~@/assets/images/bi/xlrw.png") no-repeat center center;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 14px 10px 14px 20px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
&:nth-last-child(1){
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.person-img {
|
||
|
|
width: 116px;
|
||
|
|
height: 90px;
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.info {
|
||
|
|
width: calc(100% - 145px);
|
||
|
|
.text{
|
||
|
|
color: rgb(1, 252, 254);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
background-color: #263b70 !important;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background-color: #146bbe !important;;
|
||
|
|
border-radius: 50px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background-color: #263b70 !important;;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-corner {
|
||
|
|
background-color: #142141 !important;;
|
||
|
|
}
|
||
|
|
</style>
|