kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

居民档案

Browse Source
This commit is contained in:
liuye
2024-07-16 13:48:07 +08:00
parent 8e389a2afc
commit 9167b4f1f1
4 changed files with 432 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/project/weiyang/AppPeopleList/AddTag.vue Normal file
View File

@@ -0,0 +1,112 @@
<template>
<div class="AddTag">
<u-navbar back-icon-color="#000" title="居民标签管理" title-color="#000" title-width="300" title-size="32"
:title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44" z-index="999"></u-navbar>
<div class="header-content-bg">
<img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
</div>
<!-- <AiEmpty class="emptyWrap" v-else></AiEmpty> -->
<div class="footer">
<div class="btn">保存</div>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'AddTag',
appName: '居民标签管理',
customNavigation: true,
data() {
return {
backgroundNavbar: {
background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
backgroundSize: 'cover',
},
current: 1,
pages: 2
}
},
computed: {
...mapState(['user']),
},
onLoad() {
},
onShow() {
uni.setNavigationBarColor({
frontColor: 'black',
backgroundColor: '#ffffff'
})
},
methods: {
getList() {
if(this.current > this.pages) return
this.$instance.post('/app/appresident/list', null, {
params: {
size: 20,
current: this.current,
},
})
.then((res) => {
if (res.code == 0) {
res.data.records.map((item) => {
item.isCheck = false
})
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
this.pages = res.data.pages
}
})
}
},
onReachBottom() {
// this.current = this.current + 1
// this.getList()
},
}
</script>
<style scoped lang="scss">
.AddTag {
height: 100%;
.header-content-bg {
width: 100%;
position: relative;
img {
width: 100%;
height: 592px;
position: absolute;
z-index: -1;
}
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: #F4F5FA;
padding: 64px 64px 68px 64px;
z-index: 9;
.btn {
width: calc(100% - 128px);
line-height: 88px;
background: #026AF2;
border-radius: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #FFF;
text-align: center;
}
}
}
</style>

6
src/project/weiyang/AppPeopleList/AppPeopleList.vue
View File

@@ -21,13 +21,13 @@ export default {
return {
bannerList: [
{
img: require('./components/img/blue-bg.png'),
img: 'https://cdn.sinoecare.com/i/2024/07/16/66960741d6338.png',
title: '查看居民档案',
linkUrl: './PeopleList'
},
{
img: require('./components/img/green-bg.png'),
title: '居民档案审核',
img: 'https://cdn.sinoecare.com/i/2024/07/16/66960746d79c9.png',
title: '居民标签管理',
linkUrl: './ExamineList'
}
],

244
src/project/weiyang/AppPeopleList/PeopleList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="PeopleList">
<u-navbar back-icon-color="#000" title="居民管理" title-color="#000" title-width="300" title-size="32"
:title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
:title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44" z-index="999"></u-navbar>
<div class="header-content-bg">
<img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
</div>
@@ -25,7 +25,7 @@
</div>
</AiTopFixed> -->
<div class="top-tabs">
<div class="top-tabs" :style="{'top': `${statusBarHeight+50}px`}">
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#fff" inactive-color="#222"
active-color="#1D2229" :bar-style="barStyle" font-size="34" @change="change"></u-tabs>
<div class="select-content">
@@ -50,11 +50,13 @@
</div>
<div class="dataes" v-if="datas.length > 0">
<div class="datass" v-for="(item, iindex) in datas" :key="iindex" @click="toDetailCard(item)">
<div class="dataes">
<div class="datass" v-for="(item, index) in datas" :key="index" @click="toDetailCard(item)">
<div class="left">
<img :src="item.photo" alt="" v-if="item.photo"/>
<img src="./components/img/4.png" alt="" v-else/>
<div class="select-img" @click.stop="clickCheck(index)">
<img :src="item.isCheck ? checkImg : circleImg" alt="" >
</div>
<img :src="item.photo ? item.photo : userImg " alt="" class="user-img"/>
</div>
<div class="right">
@@ -67,21 +69,41 @@
</div>
<div class="rightBottom">
<span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</span>
<span>{{ item.phone }}</span>
</div>
</div>
</div>
<div class="empty" v-if="!datas.length">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/no-data.png" alt="">
<p>暂无居民信息<br/>点击<span @click="edit('')">新增按钮</span>新增居民信息,也可在管理系统批量导入</p>
</div>
</div>
<div class="empty" v-else>
<img src="https://cdn.cunwuyun.cn/dvcp/h5/no-data.png" alt="">
<p>暂无居民信息<br/>点击<span @click="edit('')">新增按钮</span>新增居民信息,也可在管理系统批量导入</p>
</div>
<!-- <AiEmpty class="emptyWrap" v-else></AiEmpty> -->
<div style="height: 60px"></div>
<div class="footer" @click="edit('')">
<div class="btn">新增居民</div>
<div class="footer" v-if="showBtn" @click="showTag=true">
<div class="btn">打标签</div>
</div>
<u-popup v-model="showTag" mode="bottom">
<div class="popup-content">
<div class="title">111</div>
<div class="tag-list">
<div class="item active">2222</div>
<div class="item active">2222</div>
<div class="item">2222</div>
</div>
<div class="title">111</div>
<div class="tag-list">
<div class="item">333</div>
<div class="item">333</div>
</div>
<div class="poup-btn">
<div>取消</div>
<div class="confirm">确定</div>
</div>
</div>
</u-popup>
</div>
</template>
@@ -123,10 +145,24 @@ export default {
'bottom': '-4px',
'background': '#026AF2'
},
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
checkImg: 'https://cdn.sinoecare.com/i/2024/07/16/6695ddf91113c.png',
circleImg: 'https://cdn.sinoecare.com/i/2024/07/16/6695ddf890b1e.png',
userImg: 'https://cdn.sinoecare.com/i/2024/07/16/6695e2a0d95c9.png',
showTag: false
}
},
computed: {
...mapState(['user']),
showBtn() {
var btn = false
this.datas.map((item) => {
if(item.isCheck) {
btn = true
}
})
return btn
}
},
watch: {},
onLoad() {
@@ -160,6 +196,9 @@ export default {
})
.then((res) => {
if (res.code == 0) {
res.data.records.map((item) => {
item.isCheck = false
})
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
this.pages = res.data.pages
@@ -212,6 +251,9 @@ export default {
})
}).catch(() => {
})
},
clickCheck(index) {
this.datas[index].isCheck = !this.datas[index].isCheck
}
},
onReachBottom() {
@@ -224,6 +266,7 @@ export default {
<style scoped lang="scss">
.PeopleList {
height: 100%;
.header-content-bg {
width: 100%;
position: relative;
@@ -234,17 +277,14 @@ export default {
z-index: -1;
}
}
.top-tabs {
width: 100%;
padding: 0 32px;
width: calc(100% - 64px);
box-sizing: border-box;
position: fixed;
left: 32px;
z-index: 9;
::v-deep .u-tabs {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom: 1px solid #eee;
}
.select-content {
width: 100%;
padding: 0 32px;
@@ -274,6 +314,56 @@ export default {
}
}
::v-deep .u-tabs {
border-bottom: 1px solid #eee;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
// .top-tabs {
// width: 100%;
// padding: 0 32px;
// box-sizing: border-box;
// position: fixed;
// z-index: 9;
// ::v-deep .u-tabs {
// border-top-left-radius: 16px;
// border-top-right-radius: 16px;
// border-bottom: 1px solid #eee;
// }
// .select-content {
// width: 100%;
// padding: 0 32px;
// box-sizing: border-box;
// background-color: #fff;
// .search-input {
// width: 100%;
// padding: 28px 0;
// }
// .area-content {
// width: 100%;
// padding: 26px 32px;
// box-sizing: border-box;
// font-family: PingFangSC-Regular;
// font-size: 32px;
// color: #222;
// ::v-deep u-icon,
// ::v-deep .u-icon {
// width: 100%;
// }
// ::v-deep .u-icon__label {
// display: inline-block;
// width: calc(100% - 32px);
// }
// }
// }
// }
.areatop {
display: flex;
justify-content: space-between;
@@ -326,34 +416,49 @@ export default {
}
.dataes {
background: #fff;
width: calc(100% - 64px);
margin-left: 32px;
padding-top: 320px;
margin: 320px 0 0 32px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
.datass {
display: flex;
padding: 24px 32px;
padding: 24px 0;
width: 100%;
background: #fff;
.left {
img {
width: 208px;
.user-img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.select-img {
display: inline-block;
padding: 0 32px;
img {
width: 48px;
height: 48px;
vertical-align: super;
}
}
}
.right {
display: flex;
flex-direction: column;
margin-left: 32px;
width: 100%;
width: calc(100% - 208px);
padding: 0 32px 20px 0;
box-sizing: border-box;
border-bottom: 1px solid #eee;
.rightTop {
font-size: 32px;
font-weight: 500;
color: #333333;
display: flex;
justify-content: space-between;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 32px;
color: #333;
line-height: 44px;
.btn {
img {
@@ -368,17 +473,19 @@ export default {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 28px;
font-family: PingFangSC-Regular;
color: #999;
span:nth-of-type(1) {
display: inline-block;
margin-right: 16px;
font-size: 26px;
}
}
}
}
}
.emptyWrap {
background: #f5f5f5;
margin: 0;
}
.footer {
width: 100%;
position: fixed;
@@ -401,8 +508,7 @@ export default {
}
.empty {
height: 100%;
padding-bottom: 64px;
img {
width: 282px;
height: 306px;
@@ -421,5 +527,65 @@ export default {
}
}
}
.popup-content {
height: 800px;
width: 100%;
padding: 16px 32px 170px;
box-sizing: border-box;
overflow-y: scroll;
position: relative;
.title {
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 32px;
color: #333;
line-height: 44px;
margin-bottom: 16px;
}
.tag-list {
.item {
display: inline-block;
padding: 0 8px;
line-height: 44px;
border-radius: 8px;
margin: 0 16px 16px 0;
background: #F0F2F5;
color: #8891A1;
font-size: 24px;
}
.active {
background-color: #467DFE;
color: #fff;
}
}
.poup-btn {
padding: 0 32px 68px;
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
div {
display: inline-block;
width: calc(50% - 64px);
height: 88px;
line-height: 88px;
text-align: center;
border-radius: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #222;
border: 1px solid #eee;
}
.confirm {
margin-left: 64px;
color: #fff;
background-color: #026AF2;
border-color: #026AF2;
}
}
}
}
</style>

112
src/project/weiyang/AppPeopleList/TagList.vue Normal file
View File

@@ -0,0 +1,112 @@
<template>
<div class="TagList">
<u-navbar back-icon-color="#000" title="居民标签管理" title-color="#000" title-width="300" title-size="32"
:title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44" z-index="999"></u-navbar>
<div class="header-content-bg">
<img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
</div>
<!-- <AiEmpty class="emptyWrap" v-else></AiEmpty> -->
<div class="footer">
<div class="btn">新增标签组</div>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'TagList',
appName: '居民标签管理',
customNavigation: true,
data() {
return {
backgroundNavbar: {
background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
backgroundSize: 'cover',
},
current: 1,
pages: 2
}
},
computed: {
...mapState(['user']),
},
onLoad() {
},
onShow() {
uni.setNavigationBarColor({
frontColor: 'black',
backgroundColor: '#ffffff'
})
},
methods: {
getList() {
if(this.current > this.pages) return
this.$instance.post('/app/appresident/list', null, {
params: {
size: 20,
current: this.current,
},
})
.then((res) => {
if (res.code == 0) {
res.data.records.map((item) => {
item.isCheck = false
})
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
this.pages = res.data.pages
}
})
}
},
onReachBottom() {
// this.current = this.current + 1
// this.getList()
},
}
</script>
<style scoped lang="scss">
.TagList {
height: 100%;
.header-content-bg {
width: 100%;
position: relative;
img {
width: 100%;
height: 592px;
position: absolute;
z-index: -1;
}
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: #F4F5FA;
padding: 64px 64px 68px 64px;
z-index: 9;
.btn {
width: calc(100% - 128px);
line-height: 88px;
background: #026AF2;
border-radius: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #FFF;
text-align: center;
}
}
}
</style>