parent
ceccb873b4
commit
0773da7143
@ -1,187 +1,206 @@ |
||||
<template> |
||||
<view class="detail-container"> |
||||
<view class="g-body"> |
||||
<view class="content-box"> |
||||
<movable-refresh ref="movableRefresh" :scrollHeight="scrollHeight" :noMore="noMore" @refresh="refresh" @loadMore="loadMore"> |
||||
<view> |
||||
<view class="card" v-for="(item, index) in list" v-if="list.length > 0" :key="index" @click.stop="goDetail(item)"> |
||||
<view class="card-content"> |
||||
<view class="images" v-if="item.imageUrl"> |
||||
<image style="width: 200px; height: 200px; background-color: #eeeeee" :mode="'center'" :src="baseUrls + item.imageUrl.split(',')[0]"></image> |
||||
</view> |
||||
<view class="images" v-else>暂无图片</view> |
||||
<view class="introduce"> |
||||
<view class="">{{ item.name || '/' }}</view> |
||||
<view class="small-font">电话：{{ item.phone || '/' }}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</movable-refresh> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="detail-container"> |
||||
<view class="g-body"> |
||||
<view class="content-box"> |
||||
<template v-if="list&&list.length"> |
||||
<movable-refresh ref="movableRefresh" :noMore="noMore" :scrollHeight="scrollHeight" @loadMore="loadMore" |
||||
@refresh="refresh"> |
||||
<view> |
||||
<view v-for="(item, index) in list" v-if="list.length > 0" :key="index" class="card" |
||||
@click.stop="goDetail(item)"> |
||||
<view class="card-content"> |
||||
<view v-if="item.imageUrl" class="images"> |
||||
<image :mode="'center'" :src="baseUrls + item.imageUrl.split(',')[0]" |
||||
style="width: 200px; height: 200px; background-color: #eeeeee"></image> |
||||
</view> |
||||
<view v-else class="images">暂无图片</view> |
||||
<view class="introduce"> |
||||
<view class="">{{ item.name || '/' }}</view> |
||||
<view class="small-font">电话：{{ item.phone || '/' }}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</movable-refresh> |
||||
|
||||
</template> |
||||
<view v-else class="no-data"> |
||||
|
||||
<view class="no-data-name">暂无数据</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import movableRefresh from '@/components/zyq-movableRefresh/zyq-movableRefresh.vue'; |
||||
import {getPersonnelDispatchData} from '@/api/word/commandDispatch.js' |
||||
|
||||
export default { |
||||
components: { |
||||
movableRefresh |
||||
}, |
||||
data() { |
||||
return { |
||||
list: [], |
||||
|
||||
page: 1, |
||||
scrollHeight: 300, |
||||
noMore: false, |
||||
id: 0 |
||||
}; |
||||
}, |
||||
onLoad(option) { |
||||
let system = uni.getSystemInfoSync(); |
||||
this.scrollHeight = system.windowHeight - system.statusBarHeight; |
||||
console.log(this.scrollHeight); |
||||
//this.refresh(); |
||||
this.id = option.id |
||||
}, |
||||
mounted() { |
||||
this.getPersonnelDispatchData() |
||||
}, |
||||
methods: { |
||||
refresh() { |
||||
this.page = 1; |
||||
this.noMore = false; |
||||
let list = []; |
||||
|
||||
// //测试数据 |
||||
// let obj = { |
||||
// name: '李晓明', |
||||
// id: '4', |
||||
// phone: '1521241234' |
||||
// }; |
||||
|
||||
// for (let i = 0; i < 15; i++) { |
||||
// list.push(obj); |
||||
// } |
||||
// this.list = list; |
||||
this.getPersonnelDispatchData(); |
||||
// this.page++ |
||||
components: { |
||||
movableRefresh |
||||
}, |
||||
data() { |
||||
return { |
||||
list: [], |
||||
|
||||
page: 1, |
||||
scrollHeight: 300, |
||||
noMore: false, |
||||
id: 0 |
||||
}; |
||||
}, |
||||
onLoad(option) { |
||||
let system = uni.getSystemInfoSync(); |
||||
this.scrollHeight = system.windowHeight - system.statusBarHeight; |
||||
console.log(this.scrollHeight); |
||||
//this.refresh(); |
||||
this.id = option.id |
||||
}, |
||||
mounted() { |
||||
this.getPersonnelDispatchData() |
||||
}, |
||||
methods: { |
||||
refresh() { |
||||
this.page = 1; |
||||
this.noMore = false; |
||||
let list = []; |
||||
|
||||
// //测试数据 |
||||
// let obj = { |
||||
// name: '李晓明', |
||||
// id: '4', |
||||
// phone: '1521241234' |
||||
// }; |
||||
|
||||
// for (let i = 0; i < 15; i++) { |
||||
// list.push(obj); |
||||
// } |
||||
// this.list = list; |
||||
this.getPersonnelDispatchData(); |
||||
// this.page++ |
||||
// |
||||
|
||||
console.log(this.list); |
||||
if (this.$refs.movableRefresh) { |
||||
let that = this; |
||||
setTimeout(function () { |
||||
that.$refs.movableRefresh.endLoad(); //刷新结束 |
||||
}, 1000); |
||||
} |
||||
}, |
||||
loadMore() { |
||||
if (this.noMore) { |
||||
return; |
||||
} |
||||
this.page++; |
||||
this.getPersonnelDispatchData(); |
||||
}, |
||||
// 查看详情 |
||||
goDetail(val) { |
||||
uni.navigateTo({ |
||||
url: '/subPackIndex/addressBook/datails' |
||||
}); |
||||
}, |
||||
getPersonnelDispatchData(){ |
||||
let data ={ |
||||
id: this.id, |
||||
pageNum: this.page |
||||
} |
||||
getPersonnelDispatchData(data).then(res =>{ |
||||
if(res.code === 200){ |
||||
res.rows.forEach(item =>{ |
||||
this.list.push(item) |
||||
}) |
||||
if(this.list.length === res.total){ |
||||
this.noMore = true |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
console.log(this.list); |
||||
if (this.$refs.movableRefresh) { |
||||
let that = this; |
||||
setTimeout(function () { |
||||
that.$refs.movableRefresh.endLoad(); //刷新结束 |
||||
}, 1000); |
||||
} |
||||
}, |
||||
loadMore() { |
||||
if (this.noMore) { |
||||
return; |
||||
} |
||||
this.page++; |
||||
this.getPersonnelDispatchData(); |
||||
}, |
||||
// 查看详情 |
||||
goDetail(val) { |
||||
uni.navigateTo({ |
||||
url: '/subPackIndex/addressBook/datails' |
||||
}); |
||||
}, |
||||
getPersonnelDispatchData() { |
||||
let data = { |
||||
id: this.id, |
||||
pageNum: this.page |
||||
} |
||||
getPersonnelDispatchData(data).then(res => { |
||||
if (res.code === 200) { |
||||
res.rows.forEach(item => { |
||||
this.list.push(item) |
||||
}) |
||||
if (this.list.length === res.total) { |
||||
this.noMore = true |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.card { |
||||
width: 100%; |
||||
height: 130rpx; |
||||
background-color: white; |
||||
margin: 0 auto 6rpx auto; |
||||
background: #ffffff; |
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); |
||||
border-radius: 5px; |
||||
position: relative; |
||||
|
||||
.card-content { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 20rpx 32rpx; |
||||
|
||||
.images { |
||||
width: 90rpx; |
||||
height: 90rpx; |
||||
border-radius: 50%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
overflow: hidden; |
||||
background-color: #eee; |
||||
} |
||||
|
||||
.introduce { |
||||
flex: 1; |
||||
color: #000; |
||||
margin-left: 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
overflow: hidden; |
||||
|
||||
.big-font { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.start { |
||||
display: inline-block; |
||||
border: solid 1px rgb(241, 150, 83); |
||||
border-radius: 20rpx; |
||||
color: rgb(241, 150, 83); |
||||
margin-left: 20rpx; |
||||
margin-top: 0; |
||||
padding: 2rpx 20rpx; |
||||
} |
||||
} |
||||
|
||||
.small-font { |
||||
color: #909090; |
||||
margin-top: 6rpx; |
||||
} |
||||
} |
||||
} |
||||
width: 100%; |
||||
height: 130 rpx; |
||||
background-color: white; |
||||
margin: 0 auto 6 rpx auto; |
||||
background: #ffffff; |
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); |
||||
border-radius: 5px; |
||||
position: relative; |
||||
|
||||
.card-content { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 20 rpx 32 rpx; |
||||
|
||||
.images { |
||||
width: 90 rpx; |
||||
height: 90 rpx; |
||||
border-radius: 50%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
overflow: hidden; |
||||
background-color: #eee; |
||||
} |
||||
|
||||
.introduce { |
||||
flex: 1; |
||||
color: #000; |
||||
margin-left: 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
overflow: hidden; |
||||
|
||||
.big-font { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.start { |
||||
display: inline-block; |
||||
border: solid 1px rgb(241, 150, 83); |
||||
border-radius: 20 rpx; |
||||
color: rgb(241, 150, 83); |
||||
margin-left: 20 rpx; |
||||
margin-top: 0; |
||||
padding: 2 rpx 20 rpx; |
||||
} |
||||
} |
||||
|
||||
.small-font { |
||||
color: #909090; |
||||
margin-top: 6 rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.noCard { |
||||
width: 100%; |
||||
height: 200rpx; |
||||
margin: auto; |
||||
background-color: white; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100%; |
||||
height: 200 rpx; |
||||
margin: auto; |
||||
background-color: white; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
color: #999999; |
||||
box-shadow: 0 0 10 rpx 0 rgba(0, 0, 0, 0.1); |
||||
border-radius: 10 rpx; |
||||
} |
||||
|
||||
.no-data-name{ |
||||
text-align: center; |
||||
margin: 500rpx 0; |
||||
font-size: 28rpx; |
||||
color: #999999; |
||||
box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1); |
||||
border-radius: 10rpx; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue