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-12 14:56:42 +08:00
parent b1002fca35
commit 41b36c7784
1 changed files with 85 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/project/weiyang/AppSpecialPeople/AppSpecialPeople.vue
View File

@@ -1,24 +1,35 @@
<template>
<div class="AppSpecialPeople">
<template v-if="hasGridPermit">
<div class="tab-select">
<div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index"
@click="tabClick(index)">{{ item }}<span></span></div>
<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>
<div class="header-content-bg">
<img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
</div>
<div class="area-select">
<div class="top-tabs">
<u-tabs :list="tabs" :is-scroll="false" :current="tabIndex" height="96" bg-color="#fff" inactive-color="#222"
active-color="#1D2229" :bar-style="barStyle" font-size="34" @change="tabClick"></u-tabs>
<div class="select-content">
<!-- <div class="search-input">
<img src="./img/search-icon.png" alt=""/>
<u-input type="text" placeholder="请输入姓名" placeholder-style="color:#999;font-size:13px;" height="18"
v-model="search.name" @confirm="getUserList" :clearable="false" maxlength="6"/>
</div> -->
<div class="search-input" v-if="tabIndex">
<u-search placeholder="请输入姓名" v-model="search.name" :show-action="false" bg-color="#F4F5FA" search-icon-color="#F4F5FA"
color="#666" height="72" @search="(page1.current = 1), getList()" ></u-search>
</div>
<div class="area-content fill">
<AiPagePicker type="gird" @select="handleGridSelect">
<AiMore v-model="gridName" placeholder="选择网格"/>
</AiPagePicker>
</div>
<div class="search-input" v-if="tabIndex">
<img src="./img/search-icon.png" alt=""/>
<u-input type="text" placeholder="请输入姓名" placeholder-style="color:#999;font-size:13px;" height="18"
v-model="search.name" @confirm="getUserList" :clearable="false" maxlength="6"/>
</div>
</div>
</div>
<!-- <div class="tab-select">
<div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index"
@click="tabClick(index)">{{ item }}<span></span></div>
</div> -->
<div v-if="!tabIndex">
<div class="info-content">
<div class="title">特殊人群</div>
@@ -83,17 +94,37 @@ import {mapState} from "vuex";
export default {
name: 'AppSpecialPeople',
appName: '特殊人群',
customNavigation: true,
data() {
return {
areaName: '',
tabs: ['统计信息', '人员信息'],
tabs: [
{
name: "统计信息",
},
{
name: "人员信息",
},
],
// tabs: ['统计信息', '人员信息'],
tabIndex: 0,
addressArea: '',
statisticsList: [],
statisticsListMon: [],
userList: [],
gridName: "",
search: {name: ''}
search: {name: ''},
backgroundNavbar: {
background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
backgroundSize: 'cover',
},
barStyle: {
'width': '20px',
'height': '4px',
'border-radius': '3px',
'bottom': '-4px',
'background': '#026AF2'
},
}
},
computed: {
@@ -105,18 +136,23 @@ export default {
return this.user.girdInfos2G && this.user.girdInfos2G.length
},
},
created() {
this.$dict.load('appSpecialTypeFive')
},
onShow() {
onLoad() {
if (this.hasGridPermit) {
if (!this.search.girdId) {
this.search.girdId = this.user.girdId
this.gridName = this.user.girdName
}
this.getDatas()
this.$dict.load('appSpecialTypeFive').then(() => {
this.getDatas()
})
}
},
onShow() {
uni.setNavigationBarColor({
frontColor: 'black',
backgroundColor: '#ffffff'
})
},
methods: {
getDatas() {
this.getStatistic()
@@ -222,95 +258,52 @@ export default {
<style lang="scss" scoped>
.AppSpecialPeople {
min-height: 100%;
.tab-select {
.header-content-bg {
width: 100%;
height: 96px;
line-height: 96px;
background: #3975c6;
display: flex;
.item {
flex: 1;
text-align: center;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #cddcf0;
}
.active {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
position: relative;
color: #fff;
span {
width: 48px;
height: 4px;
background: #fff;
position: absolute;
bottom: 14px;
left: 50%;
margin-left: -24px;
}
position: relative;
img {
width: 100%;
height: 592px;
position: absolute;
z-index: -1;
}
}
.area-select {
width: 100%;
background: #fff;
padding-left: 32px;
.top-tabs {
padding: 32px;
box-sizing: border-box;
::v-deep .u-tabs {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.select-content {
width: 100%;
padding: 24px 32px 24px 0;
border-bottom: 1px solid #d8dde6;
display: flex;
justify-content: space-between;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
line-height: 44px;
padding: 0 32px;
box-sizing: border-box;
.area-content {
line-height: 64px;
img {
width: 42px;
vertical-align: middle;
margin-right: 16px;
}
.u-icon {
margin-left: 6px;
}
}
background-color: #fff;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
.search-input {
width: 402px;
height: 64px;
background: #f5f5f5;
border-radius: 32px;
padding: 14px 32px 14px 64px;
width: 100%;
padding: 28px 0;
}
.area-content {
width: 100%;
padding: 26px 32px;
box-sizing: border-box;
position: relative;
img {
width: 32px;
height: 32px;
margin-right: 12px;
position: absolute;
top: 18px;
left: 24px;
font-family: PingFangSC-Regular;
font-size: 32px;
color: #222;
::v-deep u-icon,
::v-deep .u-icon {
width: 100%;
}
::v-deep .u-input {
::v-deep .u-icon__label {
display: inline-block;
width: 240px;
font-size: 26px;
width: calc(100% - 32px);
}
}
}
}