368 lines
8.8 KiB
Vue
368 lines
8.8 KiB
Vue
<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,
|
|
])
|
|
},
|
|
},
|
|
onLoad() {
|
|
uni.setNavigationBarTitle({ title: '居民详情' })
|
|
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>
|