370 lines
7.7 KiB
Vue
370 lines
7.7 KiB
Vue
|
<template>
|
||
|
|
<div class="AppResidentFile">
|
||
|
|
<div class="currentTabBar1">
|
||
|
|
<AiTopFixed>
|
||
|
|
<u-search placeholder="请输入昵称、姓名" :show-action="false" search-icon-color="#ccc" v-model="search.name" @search=";(page1.current = 1), getList()" />
|
||
|
|
<AiCell>
|
||
|
|
<b slot="label" class="title">共<i v-html="page1.total || 0" />个居民</b>
|
||
|
|
</AiCell>
|
||
|
|
</AiTopFixed>
|
||
|
|
<div class="mainPane">
|
||
|
|
<AiCell v-for="item in data" :key="item.id" @click.native="showResident(item)">
|
||
|
|
<template #label>
|
||
|
|
<AiImage :src="item.avatar" preview />
|
||
|
|
</template>
|
||
|
|
<div class="card wrap start" flex>
|
||
|
|
<b>{{ item.name }}</b>
|
||
|
|
<div flex class="tag" v-for="(tag, j) in item.tags" :key="j">{{ tag.tagName }}</div>
|
||
|
|
<div class="realName" shrink v-html="`真实姓名：${item.realName || '-'}`" />
|
||
|
|
</div>
|
||
|
|
</AiCell>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapState } from 'vuex'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'AppResidentFile',
|
||
|
|
appName: '居民信息管理',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
areaId: '',
|
||
|
|
current: 1,
|
||
|
|
data: [],
|
||
|
|
search: { name: '' },
|
||
|
|
page1: { current: 1, size: 10, total: 0 },
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState(['user', 'global']),
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
document.title = '居民信息管理'
|
||
|
|
this.getList()
|
||
|
|
this.areaId = this.user.areaId
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 居民列表
|
||
|
|
getList() {
|
||
|
|
this.$http.post('/app/wxcp/wxcustomer/list', null, {
|
||
|
|
params: { ...this.page1, ...this.search, type: 1 },
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
if (res?.data) {
|
||
|
|
if (this.page1.current > 1) {
|
||
|
|
this.data = [...this.data, ...res.data.records]
|
||
|
|
} else this.data = res.data.records
|
||
|
|
this.page1.total = res.data.total
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
showResident({ id }) {
|
||
|
|
id &&
|
||
|
|
uni.navigateTo({
|
||
|
|
url: './resident?id=' + id,
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
this.page1.current++
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
uni-page-body {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.AppResidentFile {
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.currentTabBar0 {
|
||
|
|
padding-bottom: 98px;
|
||
|
|
.peopleGroup,
|
||
|
|
.people {
|
||
|
|
.topcard {
|
||
|
|
position: relative;
|
||
|
|
background: url(http://respub.sinoecare.net/20211221/4-20211221095551.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
height: 320px;
|
||
|
|
.cards {
|
||
|
|
box-sizing: border-box;
|
||
|
|
position: absolute;
|
||
|
|
bottom: -35px;
|
||
|
|
width: 92%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0 32px;
|
||
|
|
height: 232px;
|
||
|
|
background: #ffffff;
|
||
|
|
border-radius: 8px;
|
||
|
|
z-index: 999;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
.items {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
span {
|
||
|
|
font-size: 30px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
.items1 {
|
||
|
|
font-size: 40px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #354fc7;
|
||
|
|
}
|
||
|
|
.items2 {
|
||
|
|
font-size: 40px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #868686;
|
||
|
|
}
|
||
|
|
.items3 {
|
||
|
|
font-size: 40px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #5fba95;
|
||
|
|
}
|
||
|
|
.items4 {
|
||
|
|
font-size: 40px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #f09535;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.echartes {
|
||
|
|
margin-top: 64px;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
height: 616px;
|
||
|
|
background: #fff;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
.echartss {
|
||
|
|
margin: 0 32px;
|
||
|
|
height: 100%;
|
||
|
|
padding-top: 16px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.currentTabBar1 {
|
||
|
|
height: 100%;
|
||
|
|
padding-bottom: 98px;
|
||
|
|
background: #fff;
|
||
|
|
::v-deep .AiTopFixed {
|
||
|
|
b.title {
|
||
|
|
color: #333;
|
||
|
|
font-size: 32px;
|
||
|
|
|
||
|
|
& > i {
|
||
|
|
color: #267fce;
|
||
|
|
font-style: normal;
|
||
|
|
margin: 0 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .mainPane {
|
||
|
|
background: #fff;
|
||
|
|
padding: 0 32px 88px;
|
||
|
|
|
||
|
|
.AiCell {
|
||
|
|
flex-shrink: 0;
|
||
|
|
justify-content: flex-start;
|
||
|
|
|
||
|
|
.content {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 0;
|
||
|
|
max-width: unset;
|
||
|
|
border-bottom: 1px solid rgba(221, 221, 221, 1);
|
||
|
|
min-height: 160px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
text-align: left;
|
||
|
|
|
||
|
|
b {
|
||
|
|
max-width: 100%;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
font-size: 36px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag {
|
||
|
|
justify-content: center;
|
||
|
|
background: #f3f4f7;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 0 16px;
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #333;
|
||
|
|
margin-left: 16px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
height: 56px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.realName {
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 8px;
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.AiImage {
|
||
|
|
margin-right: 24px;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 112px;
|
||
|
|
height: 112px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.currentTabBar2 {
|
||
|
|
padding-bottom: 98px;
|
||
|
|
::v-deep .AiTopFixed {
|
||
|
|
b.title {
|
||
|
|
color: #333;
|
||
|
|
font-size: 32px;
|
||
|
|
|
||
|
|
& > i {
|
||
|
|
color: #267fce;
|
||
|
|
font-style: normal;
|
||
|
|
margin: 0 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .mainPane {
|
||
|
|
background: #fff;
|
||
|
|
padding: 0 32px;
|
||
|
|
|
||
|
|
.AiCell {
|
||
|
|
align-items: center;
|
||
|
|
height: 230px;
|
||
|
|
justify-content: flex-start;
|
||
|
|
|
||
|
|
.content {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 0;
|
||
|
|
height: 100%;
|
||
|
|
max-width: unset;
|
||
|
|
border-bottom: 1px solid rgba(221, 221, 221, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
height: 100%;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
b {
|
||
|
|
font-size: 36px;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag {
|
||
|
|
justify-content: center;
|
||
|
|
background: #f3f4f7;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 0 16px;
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #333;
|
||
|
|
margin-left: 16px;
|
||
|
|
height: 56px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.groupName {
|
||
|
|
width: 100%;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.owner,
|
||
|
|
.trends {
|
||
|
|
margin-top: 8px;
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.personCount {
|
||
|
|
flex-shrink: 0;
|
||
|
|
font-size: 30px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.trends {
|
||
|
|
* + * {
|
||
|
|
margin-left: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
em {
|
||
|
|
font-style: normal;
|
||
|
|
color: #5fba95;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
color: #f09535;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.AiImage {
|
||
|
|
margin-right: 24px;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 112px;
|
||
|
|
height: 112px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabs {
|
||
|
|
width: 100%;
|
||
|
|
height: 98px;
|
||
|
|
background: #fff;
|
||
|
|
border-top: 1px solid #ddd;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
display: flex;
|
||
|
|
.item {
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
img {
|
||
|
|
width: 56px;
|
||
|
|
height: 56px;
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
font-size: 22px;
|
||
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #c4cad4;
|
||
|
|
line-height: 8px;
|
||
|
|
}
|
||
|
|
.color-3267F0 {
|
||
|
|
color: #3267f0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|