106 lines
2.6 KiB
Vue
106 lines
2.6 KiB
Vue
<template>
|
|
<section class="wardList">
|
|
<AiTopFixed>
|
|
<u-search v-model="search" placeholder="请输入姓名" :show-action="false"
|
|
search-icon-color="#ccc" placeholder-color="#999"
|
|
@change="page.current=1,getUser()"/>
|
|
<area-selector :areaId="areaId" @select="handleSelectArea"/>
|
|
</AiTopFixed>
|
|
<div class="userList">
|
|
<div v-for="row in list" :key="row.id" flex class="row" @tap="handleShowDetail(row)">
|
|
<img :src="top.cdn(row.onlineStatus==1?'zxtx':'lxtx')"/>
|
|
<b class="fill" v-text="row.name"/>
|
|
<div class="status" :style="{color:$dict.getColor('intelligentGuardianshipAbnormalStatus',row.abnormalStatus)}"
|
|
v-text="$dict.getLabel('intelligentGuardianshipAbnormalStatus',row.abnormalStatus)"/>
|
|
<u-icon name="arrow-right" color="#ddd"/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
import AreaSelector from "./component/areaSelector";
|
|
|
|
export default {
|
|
name: "wardList",
|
|
components: {AreaSelector},
|
|
computed: {
|
|
...mapState(['user']),
|
|
},
|
|
inject: ['top'],
|
|
data() {
|
|
return {
|
|
search: "",
|
|
areaId: "",
|
|
page: {current: 1, size: 20, total: 0},
|
|
list: []
|
|
}
|
|
},
|
|
methods: {
|
|
getUser() {
|
|
let {areaId, search: name} = this
|
|
this.$http.post("/app/appintelligentguardianshipdevice/list", null, {
|
|
params: {areaId, name, ...this.page}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
let data = res.data.records.reverse()
|
|
if (this.page.current > 1) {
|
|
this.list = [...this.list, ...data]
|
|
} else this.list = data
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
handleSelectArea({id}) {
|
|
this.areaId = id
|
|
this.getUser()
|
|
},
|
|
reachBottom() {
|
|
if (this.page.total > this.list.length) {
|
|
this.page.current++
|
|
this.getUser()
|
|
}
|
|
},
|
|
handleShowDetail(user) {
|
|
uni.navigateTo({url: `./userDetail?id=${user.id}`})
|
|
}
|
|
},
|
|
created() {
|
|
this.areaId = JSON.parse(JSON.stringify(this.user.areaId))
|
|
this.getUser()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wardList {
|
|
background: #f5f5f5;
|
|
padding-bottom: 130px;
|
|
font-size: 30px;
|
|
|
|
::v-deep .userList {
|
|
margin-top: 16px;
|
|
background: #fff;
|
|
|
|
.row {
|
|
font-size: 36px;
|
|
margin-left: 32px;
|
|
padding-right: 32px;
|
|
height: 104px;
|
|
border-bottom: 1px solid #ddd;
|
|
|
|
img {
|
|
width: 72px;
|
|
height: 72px;
|
|
margin-right: 38px;
|
|
}
|
|
|
|
.status {
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|