迁移居民列表
This commit is contained in:
花有清香月有阴
@@ -62,7 +62,27 @@
|
||||
</div>
|
||||
|
||||
<div class="currentTabBar1" v-if="currentTabBar == 1">
|
||||
<AiAreaPicker v-model="areaId" all :areaId="areaId" @select="areaSelect"></AiAreaPicker>
|
||||
<AiTopFixed>
|
||||
<u-search placeholder="请输入昵称、姓名" :show-action="false" search-icon-color="#ccc" v-model="search.name" @search=";(page.current = 1), getList()" />
|
||||
<AiCell>
|
||||
<b slot="label" class="title">共<i v-html="page.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>
|
||||
|
||||
<!-- <AiAreaPicker v-model="areaId" all :areaId="areaId" @select="areaSelect"></AiAreaPicker>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
@@ -88,31 +108,17 @@
|
||||
<div class="rightBottom">
|
||||
<span>
|
||||
<span>{{ item.name }}</span>
|
||||
<!-- {{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }} -->
|
||||
{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}
|
||||
</span>
|
||||
|
||||
<!-- <span>{{ item.phone }}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="left">
|
||||
<img :src="item.photo" alt="" v-if="item.photo" />
|
||||
<img src="./components/img/4.png" alt="" v-else />
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="rightTop">{{ item.name }}</div>
|
||||
<div class="rightBottom">
|
||||
<span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}</span>
|
||||
|
||||
<span>{{ item.phone }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AiEmpty v-else></AiEmpty>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="currentTabBar2" v-if="currentTabBar == 2">
|
||||
@@ -192,14 +198,14 @@ export default {
|
||||
Echarts2: null,
|
||||
areaId: '',
|
||||
currentPeople: 0,
|
||||
tabPeopleList: [
|
||||
{
|
||||
name: '本地居民',
|
||||
},
|
||||
{
|
||||
name: '流动人员',
|
||||
},
|
||||
],
|
||||
// tabPeopleList: [
|
||||
// {
|
||||
// name: '本地居民',
|
||||
// },
|
||||
// {
|
||||
// name: '流动人员',
|
||||
// },
|
||||
// ],
|
||||
current: 1,
|
||||
keyword: '',
|
||||
data: [],
|
||||
@@ -212,6 +218,10 @@ export default {
|
||||
todayList2: [],
|
||||
counts1: '',
|
||||
counts2: '',
|
||||
page2: { current: 1, size: 10, total: 0 },
|
||||
search2: { name: '' },
|
||||
page1: { current: 1, size: 10, total: 0 },
|
||||
search1: { name: '' },
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -226,10 +236,37 @@ export default {
|
||||
this.Echarts1 = echarts.init(document.getElementById('echarts1'))
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$http
|
||||
.post('/app/wxcp/wxcustomer/list', null, {
|
||||
params: { ...this.page1, ...this.search, type: 1 },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
if (this.page.current > 1) {
|
||||
this.data = [...this.data, ...res.data.records]
|
||||
} else this.data = res.data.records
|
||||
this.page.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
reachBottom() {
|
||||
if (this.page.total > this.list.length) {
|
||||
this.page.current++
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
showResident({ id }) {
|
||||
id &&
|
||||
uni.navigateTo({
|
||||
url: './resident?id=' + id,
|
||||
})
|
||||
},
|
||||
|
||||
getList2() {
|
||||
this.$http
|
||||
.post('/app/wxcp/wxgroup/list', null, {
|
||||
params: { ...this.page, ...this.search },
|
||||
params: { ...this.page2, ...this.search },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
@@ -247,7 +284,7 @@ export default {
|
||||
|
||||
reachBottom() {
|
||||
if (this.page.total > this.list.length) {
|
||||
this.page.current++
|
||||
this.page.current = this.page.current + 1
|
||||
this.getList2()
|
||||
}
|
||||
},
|
||||
@@ -258,26 +295,28 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.$http
|
||||
.post('/app/wxcp/wxcustomer/list', null, {
|
||||
params: {
|
||||
size: 10,
|
||||
current: this.current,
|
||||
areaId: this.areaId,
|
||||
name: this.keyword,
|
||||
residentType: this.currentPeople == 0 ? '0' : '1',
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
|
||||
this.pages = res.data.pages
|
||||
}
|
||||
})
|
||||
},
|
||||
// getList() {
|
||||
// this.$http
|
||||
// .post('/app/wxcp/wxcustomer/list', null, {
|
||||
// params: {
|
||||
// size: 10,
|
||||
// current: this.current,
|
||||
// areaId: this.areaId,
|
||||
// name: this.keyword,
|
||||
// residentType: this.currentPeople == 0 ? '0' : '1',
|
||||
// },
|
||||
// })
|
||||
// .then((res) => {
|
||||
// if (res.code == 0) {
|
||||
// this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
|
||||
// this.pages = res.data.pages
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
|
||||
//
|
||||
// 居民群统计
|
||||
|
||||
getEchart1() {
|
||||
this.$http.post(`/app/wxcp/wxgroup/groupStatistic`).then((res) => {
|
||||
if (res.code === 0) {
|
||||
@@ -501,26 +540,26 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
toDetailCard(item) {
|
||||
uni.navigateTo({ url: `./DetailCard?id=${item.id}` })
|
||||
},
|
||||
// toDetailCard(item) {
|
||||
// uni.navigateTo({ url: `./DetailCard?id=${item.id}` })
|
||||
// },
|
||||
|
||||
areaSelect(e) {
|
||||
this.areaId = e.id
|
||||
this.getList()
|
||||
},
|
||||
// areaSelect(e) {
|
||||
// this.areaId = e.id
|
||||
// this.getList()
|
||||
// },
|
||||
|
||||
handerSearch(e) {
|
||||
this.keyword = e
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
// handerSearch(e) {
|
||||
// this.keyword = e
|
||||
// this.current = 1
|
||||
// this.getList()
|
||||
// },
|
||||
|
||||
handerClear() {
|
||||
this.keyword = ''
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
// handerClear() {
|
||||
// this.keyword = ''
|
||||
// this.current = 1
|
||||
// this.getList()
|
||||
// },
|
||||
|
||||
changeTab(e) {
|
||||
this.currentTabBar = e
|
||||
@@ -651,52 +690,124 @@ uni-page-body {
|
||||
.currentTabBar1 {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
.AiAreaPicker {
|
||||
padding: 16px 0 14px 12px;
|
||||
}
|
||||
::v-deep .AiTopFixed {
|
||||
b.title {
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
|
||||
.line {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.peopleCard {
|
||||
background: #fff;
|
||||
.seachObj {
|
||||
border-bottom: 2px solid #f5f5f5;
|
||||
border-top: 2px solid #f5f5f5;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
.datas {
|
||||
.datass {
|
||||
display: flex;
|
||||
padding: 24px 32px;
|
||||
.left {
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 32px;
|
||||
width: 100%;
|
||||
.rightTop {
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.rightBottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
& > i {
|
||||
color: #267fce;
|
||||
font-style: normal;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .mainPane {
|
||||
background: #fff;
|
||||
padding: 0 32px;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .AiAreaPicker {
|
||||
// padding: 16px 0 14px 12px;
|
||||
// }
|
||||
|
||||
// .line {
|
||||
// height: 16px;
|
||||
// background: #f5f5f5;
|
||||
// }
|
||||
|
||||
// .peopleCard {
|
||||
// background: #fff;
|
||||
// .seachObj {
|
||||
// border-bottom: 2px solid #f5f5f5;
|
||||
// border-top: 2px solid #f5f5f5;
|
||||
// padding: 20px 32px;
|
||||
// }
|
||||
// .datas {
|
||||
// .datass {
|
||||
// display: flex;
|
||||
// padding: 24px 32px;
|
||||
// .left {
|
||||
// img {
|
||||
// width: 80px;
|
||||
// height: 80px;
|
||||
// border-radius: 50%;
|
||||
// }
|
||||
// }
|
||||
// .right {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// margin-left: 32px;
|
||||
// width: 100%;
|
||||
// .rightTop {
|
||||
// font-size: 32px;
|
||||
// font-weight: 500;
|
||||
// color: #333333;
|
||||
// }
|
||||
// .rightBottom {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// margin-top: 8px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.currentTabBar2 {
|
||||
|
||||
129
src/apps/AppResidentFile/components/document.vue
Normal file
129
src/apps/AppResidentFile/components/document.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<section class="document">
|
||||
<div class="card">
|
||||
<div class="info">
|
||||
<u-image border-radius="4" :src="top.detail.avatar" width="118" height="118"/>
|
||||
<div class="fill">
|
||||
<b>{{ top.detail.realName || top.detail.name }}</b>
|
||||
<u-row>
|
||||
<span class="idNumber" v-html="IDObj.id"/>
|
||||
<a @tap="showID=!showID">{{ IDObj.btn }}</a>
|
||||
</u-row>
|
||||
</div>
|
||||
</div>
|
||||
<AiCell label="性别">{{ $dict.getLabel("sex", resident.sex) || "-" }}</AiCell>
|
||||
<AiCell label="出生日期">{{ resident.birthDate }}</AiCell>
|
||||
<AiCell label="年龄">{{ resident.age }}</AiCell>
|
||||
<AiCell label="籍贯">{{ resident.birthplaceAreaName }}</AiCell>
|
||||
<AiCell label="民族">{{ $dict.getLabel("nation", resident.nation) || "-" }}</AiCell>
|
||||
<AiCell label="文化程度">{{ $dict.getLabel("education", resident.education) || "-" }}</AiCell>
|
||||
<AiCell label="兵役状况">{{ $dict.getLabel("militaryStatus", resident.militaryStatus) || "-" }}</AiCell>
|
||||
<AiCell label="政治面貌">{{ $dict.getLabel("politicsStatus", resident.politicsStatus) || "-" }}</AiCell>
|
||||
<AiCell label="职业">{{ $dict.getLabel("job", resident.job) || "-" }}</AiCell>
|
||||
<AiCell label="宗教信仰">{{ $dict.getLabel("faithType", resident.faithType) || "-" }}</AiCell>
|
||||
</div>
|
||||
<div class="card">
|
||||
<AiCell title label="联络信息"/>
|
||||
<AiCell label="联系方式">{{ resident.phone }}</AiCell>
|
||||
<AiCell label="现住址">{{ resident.currentAreaName + resident.currentAddress }}</AiCell>
|
||||
</div>
|
||||
<div class="card">
|
||||
<AiCell title label="家庭信息"/>
|
||||
<AiCell label="是否户主">{{ $dict.getLabel("householdName", resident.householdName) || "-" }}</AiCell>
|
||||
<AiCell label="与户主关系">{{ $dict.getLabel("householdRelation", resident.householdRelation) || "-" }}</AiCell>
|
||||
<AiCell label="现住址">{{ resident.householdAreaName + resident.householdAddress }}</AiCell>
|
||||
</div>
|
||||
<div class="card">
|
||||
<AiCell title label="家庭成员"/>
|
||||
<AiTable :data="family" :colConfigs="colConfigs"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "document",
|
||||
inject: ['top'],
|
||||
computed: {
|
||||
IDObj() {
|
||||
return this.showID ? {
|
||||
id: this.resident?.idNumber,
|
||||
btn: '隐藏'
|
||||
} : {
|
||||
id: this.resident?.idNumber?.replace(/(\d{10}).+/g, '$1******'),
|
||||
btn: '显示'
|
||||
}
|
||||
},
|
||||
colConfigs() {
|
||||
return [
|
||||
{label: "与户主关系", prop: "householdRelation", width: '160rpx', dict: "householdRelation"},
|
||||
{label: "姓名", prop: "name", width: '120rpx'},
|
||||
{label: "性别", prop: "sex", dict: "sex"},
|
||||
{label: "年龄", prop: "age"},
|
||||
{label: "身份证号", prop: "idNumber", width: '320rpx'},
|
||||
]
|
||||
},
|
||||
resident() {
|
||||
let obj = {}
|
||||
Object.keys(this.top.detail?.residentInfo?.resident || {}).map(e => {
|
||||
obj[e] = this.top.detail?.residentInfo?.resident[e] || ""
|
||||
})
|
||||
return obj
|
||||
},
|
||||
family() {
|
||||
return this.top.detail?.residentInfo?.family?.map(e => ({...e, householdRelation: e.householdRelation || "户主"}))
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showID: false,
|
||||
familyList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$dict.load("sex", "nation", "education", "job",
|
||||
"faithType", "politicsStatus", "militaryStatus", "householdRelation",
|
||||
"householdName")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.document {
|
||||
overflow-y: auto;
|
||||
background: #F5F5F5;
|
||||
|
||||
.info {
|
||||
height: 186px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fill {
|
||||
color: #3C7FC8;
|
||||
margin-left: 24px;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
b {
|
||||
font-size: 36px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.idNumber {
|
||||
margin-right: 16px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
353
src/apps/AppResidentFile/components/info.vue
Normal file
353
src/apps/AppResidentFile/components/info.vue
Normal file
@@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<section class="info">
|
||||
<div class="card">
|
||||
<div class="baseInfo">
|
||||
<u-image border-radius="4" :src="top.detail.avatar" width="118" height="118"/>
|
||||
<div class="fill">
|
||||
<b>{{ top.detail.name }}</b>
|
||||
<div v-if="top.detail.type==1" class="wx">@微信</div>
|
||||
<div v-if="top.detail.type==2">@企业微信</div>
|
||||
</div>
|
||||
<div class="certBtn" @tap="handleCert">{{ !isCert ? "实名认证" : "解绑" }}</div>
|
||||
</div>
|
||||
<u-row>
|
||||
<AiCell class="half" top-label label="来源">{{ $dict.getLabel("wxCustomerAddWay", top.detail.addWay) }}</AiCell>
|
||||
<AiCell class="half" top-label label="添加时间">{{ top.detail.createTime }}</AiCell>
|
||||
<AiCell class="half" top-label label="真实姓名">{{ top.detail.realName }}</AiCell>
|
||||
<AiCell class="half" top-label label="手机号码">{{ resident.phone || "-" }}</AiCell>
|
||||
<AiCell class="half" top-label label="家庭积分">{{ resident.familyIntegral }}</AiCell>
|
||||
<AiCell class="half" top-label label="个人积分">{{ resident.personalIntegral }}</AiCell>
|
||||
</u-row>
|
||||
</div>
|
||||
<div class="card">
|
||||
<AiCell title label="公共标签">
|
||||
<u-icon label="添加" size="38" name="iconAdd" custom-prefix="iconfont" color="#1365DD"
|
||||
label-color="#1365DD" @tap="top.showTagManage=true"/>
|
||||
</AiCell>
|
||||
<AiCell top-label v-for="(op,name) in tagsList" :label="name" :key="name">
|
||||
<u-row>
|
||||
<div class="tag" v-for="(tag,j) in op" :key="j">{{ tag }}</div>
|
||||
</u-row>
|
||||
</AiCell>
|
||||
</div>
|
||||
<div class="card">
|
||||
<AiCell title label="动态"/>
|
||||
<AiCell top-label>
|
||||
<div class="logItem" v-for="item in customLogs" :key="item.id">
|
||||
<div flex class="column" shrink>
|
||||
<div class="dot"/>
|
||||
<div class="line fill"/>
|
||||
</div>
|
||||
<div flex class="start column">
|
||||
<b>{{ $dict.getLabel('wxCustomerLogType', item.type) }}</b>
|
||||
<span>{{ item.createTime }}</span>
|
||||
<div v-html="item.content"/>
|
||||
</div>
|
||||
</div>
|
||||
</AiCell>
|
||||
</div>
|
||||
<u-mask :show="dialog" @tap="dialog=false">
|
||||
<div class="bindCert" @tap.stop>
|
||||
<b class="title">实名认证</b>
|
||||
<u-input class="searchInput" v-model="search" clearable placeholder="请输入姓名或身份证号" @input="handleSearch"/>
|
||||
<div class="residents">
|
||||
<div flex class="spb" v-for="(op,i) in result" :key="i" @tap="bindCert(op.id)">
|
||||
<div v-html="op.name"/>
|
||||
<div v-html="op.idNumber"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</u-mask>
|
||||
<div bottom>
|
||||
<u-button type="primary" @tap="handleWechat">微信联系</u-button>
|
||||
<u-button v-if="isMobile" :disabled="!resident.phone" @tap="handleTel">电话联系</u-button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "info",
|
||||
inject: ['top'],
|
||||
computed: {
|
||||
resident() {
|
||||
return this.top.detail?.residentInfo?.resident || {}
|
||||
},
|
||||
tagsList() {
|
||||
let obj = {}
|
||||
this.top.detail?.tags?.map(e => {
|
||||
if (e.type == 1 && e?.groupName) {
|
||||
if (obj?.[e.groupName]) {
|
||||
obj[e.groupName].push(e.tagName)
|
||||
} else {
|
||||
obj[e.groupName] = [e.tagName]
|
||||
}
|
||||
}
|
||||
})
|
||||
return obj
|
||||
},
|
||||
isCert() {
|
||||
return !!this.top?.detail?.residentInfo
|
||||
},
|
||||
isMobile() {
|
||||
return ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]
|
||||
.some(e => navigator.userAgent.indexOf(e) > -1)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
search: "",
|
||||
result: [],
|
||||
customLogs: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin', 'wxInvoke']),
|
||||
searchResident() {
|
||||
this.$http.post("/app/appresident/check-name", null, {
|
||||
params: {name: this.search}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
let reg = new RegExp(this.search, 'g')
|
||||
this.result = res.data?.map(e => ({
|
||||
...e,
|
||||
name: e.name.replace(reg, `<b>${this.search}</b>`),
|
||||
idNumber: e.idNumber.replace(reg, `<b>${this.search}</b>`),
|
||||
}))
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSearch() {
|
||||
if (this.search?.length >= 2) {
|
||||
this.searchResident()
|
||||
} else {
|
||||
this.result = []
|
||||
}
|
||||
},
|
||||
handleCert() {
|
||||
if (this.isCert) {
|
||||
this.$confirm("是否要解绑当前实名认证?").then(() => {
|
||||
this.$http.post("/app/wxcp/wxcustomer/unBindCustomer2Resident", null, {
|
||||
params: {residentId: this.resident.id, customerId: this.top.custom}
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast("解除绑定成功!")
|
||||
this.top.getContact()
|
||||
}
|
||||
})
|
||||
})
|
||||
} else this.dialog = true
|
||||
},
|
||||
bindCert(residentId) {
|
||||
this.dialog = false
|
||||
this.$confirm("是否要绑定该居民?").then(() => {
|
||||
this.$http.post("/app/wxcp/wxcustomer/bindCustomer2Resident", null, {
|
||||
params: {residentId, customerId: this.top.custom}
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast("绑定成功!")
|
||||
this.top.getContact()
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$u.toast(err)
|
||||
setTimeout(() => this.dialog = true, 1000)
|
||||
})
|
||||
}).catch(() => this.dialog = true)
|
||||
},
|
||||
getCustomLog(customerId) {
|
||||
customerId && this.$http.post("/app/wxcp/wxcustomerlog/listAll", null, {
|
||||
params: {customerId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.customLogs = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleTel() {
|
||||
location.href = "tel:" + this.resident.phone
|
||||
},
|
||||
handleWechat() {
|
||||
this.wxInvoke(['openUserProfile', {
|
||||
type: 2,
|
||||
userid: this.top.custom
|
||||
}, () => 0])
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$dict.load("wxCustomerAddWay", 'wxCustomerLogType')
|
||||
this.getCustomLog(this.top.custom)
|
||||
this.injectJWeixin('openUserProfile')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.info {
|
||||
padding-bottom: 130px;
|
||||
|
||||
.certBtn {
|
||||
cursor: pointer;
|
||||
background: $uni-color-primary;
|
||||
color: #fff;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.baseInfo {
|
||||
height: 186px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fill {
|
||||
color: #3C7FC8;
|
||||
margin-left: 24px;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
|
||||
b {
|
||||
font-size: 36px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.wx {
|
||||
color: #2EA222;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .AiCell {
|
||||
&.half {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-form-item {
|
||||
width: 50%;
|
||||
min-height: 124px;
|
||||
|
||||
.u-form-item--left {
|
||||
color: #999;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.u-form-item--right {
|
||||
min-height: 0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-mask {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.bindCert {
|
||||
width: 600px;
|
||||
padding: 32px;
|
||||
min-height: 400px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.residents {
|
||||
max-height: 780px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
margin: 16px 0;
|
||||
border: 1px solid #D0D4DC;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px !important;
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.spb {
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
padding: 0 16px;
|
||||
|
||||
b {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .logItem {
|
||||
display: flex;
|
||||
min-height: 220px;
|
||||
|
||||
&:last-of-type {
|
||||
.line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > .column + .column {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: $uni-color-primary;
|
||||
border: 8px solid #FFFFFF;
|
||||
border-radius: 50%;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 4px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.start {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
|
||||
b {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $uni-color-primary;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
& > b {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
153
src/apps/AppResidentFile/resident.vue
Normal file
153
src/apps/AppResidentFile/resident.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<section class="resident">
|
||||
<AiLoading v-if="!custom && !error" tips="获取居民信息中..." />
|
||||
<AiResult v-else-if="error" status="error" :tips="error" />
|
||||
<template v-else>
|
||||
<tag-manage v-if="showTagManage" />
|
||||
<template v-else>
|
||||
<AiTopFixed>
|
||||
<u-tabs :list="tabs" :is-scroll="false" :current="currentType" font-size="32" bar-width="192" height="96" @change="handleTabClick" />
|
||||
</AiTopFixed>
|
||||
<component :is="currentTab.comp" />
|
||||
</template>
|
||||
</template>
|
||||
<AiBack v-if="isNormal && !showTagManage" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
import Info from './components/info'
|
||||
import Document from './components/document'
|
||||
import TagManage from './tagManage.vue'
|
||||
|
||||
export default {
|
||||
name: 'resident',
|
||||
components: { TagManage, Document, Info },
|
||||
provide() {
|
||||
return {
|
||||
top: this,
|
||||
id: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return [
|
||||
{ name: '居民信息', value: 0, comp: Info },
|
||||
{ name: '居民档案', value: 1, comp: Document, hide: !this.detail.residentInfo },
|
||||
].filter((e) => !e.hide)
|
||||
},
|
||||
currentTab() {
|
||||
return this.tabs.find((e) => e.value == this.currentType)
|
||||
},
|
||||
isNormal() {
|
||||
return !!this.id
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentType: 0,
|
||||
detail: {},
|
||||
showTagManage: false,
|
||||
custom: '',
|
||||
error: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin', 'wxInvoke']),
|
||||
handleTabClick(i) {
|
||||
this.currentType = i
|
||||
},
|
||||
getContact() {
|
||||
if (this.isNormal) {
|
||||
this.getCustom(this.id)
|
||||
} else {
|
||||
this.injectJWeixin('getCurExternalContact')
|
||||
.then(() => {
|
||||
this.wxInvoke([
|
||||
'getCurExternalContact',
|
||||
{},
|
||||
(res) => {
|
||||
if (res?.err_msg == 'getCurExternalContact:ok') {
|
||||
this.getCustom(res.userId)
|
||||
}
|
||||
},
|
||||
])
|
||||
})
|
||||
.catch(({ errMsg }) => {
|
||||
this.error = errMsg
|
||||
})
|
||||
}
|
||||
},
|
||||
getCustom(id) {
|
||||
this.$http
|
||||
.post('/app/wxcp/wxcustomer/queryCustomerById', null, {
|
||||
params: { id },
|
||||
})
|
||||
.then((ret) => {
|
||||
if (ret?.data) {
|
||||
this.custom = id
|
||||
this.detail = ret.data
|
||||
if (this.detail.type == 2) {
|
||||
this.error = '只能查看个人微信绑定的居民信息'
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
onLoad(o) {
|
||||
this.id = o.id
|
||||
this.getContact()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.resident {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #f5f5f5;
|
||||
|
||||
.error {
|
||||
font-size: 32px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
::v-deep .u-scroll-box {
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
|
||||
.u-tab-bar {
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .card {
|
||||
background: #fff;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px 32px;
|
||||
}
|
||||
|
||||
.half {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
::v-deep .tag {
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
background: #f3f4f7;
|
||||
border-radius: 6px;
|
||||
padding: 8px 16px;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user