居民列表
This commit is contained in:
花有清香月有阴
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="AppResidentFile">
|
||||
<u-tabbar v-model="currentTabBar" :list="list" @change="changeTab" style="height: 0"></u-tabbar>
|
||||
<u-tabbar v-model="currentTabBar" :list="lists" @change="changeTab" style="height: 0"></u-tabbar>
|
||||
|
||||
<div class="currentTabBar0" v-if="currentTabBar == 0">
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
|
||||
@@ -79,7 +79,7 @@
|
||||
</div>
|
||||
|
||||
<div class="datas" v-if="data.length > 0">
|
||||
<div class="datass" v-for="(item, i) in data" :key="i" @click="toDetailCard(item)">
|
||||
<div class="datass" v-for="(item, iindex) in data" :key="iindex" @click="toDetailCard(item)">
|
||||
<div class="left">
|
||||
<img :src="item.photo" alt="" v-if="item.photo" />
|
||||
<img src="./components/img/4.png" alt="" v-else />
|
||||
@@ -100,7 +100,33 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="currentTabBar2" v-if="currentTabBar == 2">2</div>
|
||||
<div class="currentTabBar2" v-if="currentTabBar == 2">
|
||||
<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, i) in list" :key="i" @click.native="toGroupList(item)">
|
||||
<template #label>
|
||||
<AiImage :src="item.avatar" preview />
|
||||
</template>
|
||||
<div class="card column start" flex>
|
||||
<div flex class="groupName">
|
||||
<b>{{ item.name || '群聊' }}</b>
|
||||
<div class="personCount" v-if="item.personCount">({{ item.personCount }})</div>
|
||||
</div>
|
||||
<div class="owner" v-html="`群主：${item.ownerName}`" />
|
||||
<div flex class="trends">
|
||||
<div flex v-html="`今日入群：<em>${item.increase || 0}</em>`" />
|
||||
<div flex v-html="`今日退群：<p>${item.decrease || 0}</p>`" />
|
||||
</div>
|
||||
</div>
|
||||
</AiCell>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -115,7 +141,7 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
lists: [
|
||||
{
|
||||
iconPath: 'home',
|
||||
selectedIconPath: 'home-fill',
|
||||
@@ -162,6 +188,10 @@ export default {
|
||||
current: 1,
|
||||
keyword: '',
|
||||
data: [],
|
||||
|
||||
page: { current: 1, size: 10, total: 0 },
|
||||
search: { name: '' },
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -176,6 +206,39 @@ export default {
|
||||
this.Echarts1 = echarts.init(document.getElementById('echarts1'))
|
||||
},
|
||||
methods: {
|
||||
getList2() {
|
||||
this.$http
|
||||
.post('/app/wxcp/wxgroup/list', null, {
|
||||
params: { ...this.page, ...this.search },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
let meta = res.data.records?.map((e) => ({
|
||||
...e,
|
||||
avatar: e?.avatar || this.$cdn + 'groupAvatar.png',
|
||||
}))
|
||||
if (this.page.current > 1) {
|
||||
this.list = [...this.list, ...meta]
|
||||
} else this.list = meta
|
||||
this.page.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
reachBottom() {
|
||||
if (this.page.total > this.list.length) {
|
||||
this.page.current++
|
||||
this.getList2()
|
||||
}
|
||||
},
|
||||
|
||||
toGroupList(item) {
|
||||
console.log(1, item.id)
|
||||
uni.navigateTo({
|
||||
url: `./GroupList?id=${item.id}`,
|
||||
})
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.$http
|
||||
.post('/app/appresident/list', null, {
|
||||
@@ -325,6 +388,9 @@ export default {
|
||||
if (this.currentTabBar == 1) {
|
||||
this.getList()
|
||||
}
|
||||
if (this.currentTabBar == 2) {
|
||||
this.getList2()
|
||||
}
|
||||
},
|
||||
|
||||
change(index) {
|
||||
@@ -479,5 +545,107 @@ uni-page-body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.currentTabBar2 {
|
||||
::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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,111 @@
|
||||
<template>
|
||||
<div class="DetailPeople">DetailPeople</div>
|
||||
<div class="DetailPeople">
|
||||
<div class="top">
|
||||
<div class="photos">
|
||||
<img :src="data.resident.photo" alt="" v-if="data.resident.photo" />
|
||||
<img src="./components/img/2.png" alt="" v-else />
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="rightTop">
|
||||
<span class="names">{{ data.resident.name }}</span>
|
||||
|
||||
<span class="householdNames" v-if="data.resident.name == 1">户主</span>
|
||||
<span class="householdNames" v-else>
|
||||
{{ $dict.getLabel('householdRelation', data.resident.householdName) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="rightBottom">{{ data.resident.phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="middle">
|
||||
<div class="hint">个人基本信息</div>
|
||||
|
||||
<div class="contents">
|
||||
<div class="item">
|
||||
<span>家庭地址</span>
|
||||
<span>{{ data.resident.birthplaceAreaName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span>身份证号</span>
|
||||
<span>{{ data.resident.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span>民族</span>
|
||||
<span> {{ $dict.getLabel('nation', data.resident.householdName) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span>文化程度</span>
|
||||
<span>{{ $dict.getLabel('education', data.resident.education) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span>婚姻状况</span>
|
||||
<span>{{ $dict.getLabel('maritalStatus', data.resident.maritalStatus) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span>政治面貌</span>
|
||||
<span>{{ $dict.getLabel('politicsStatus', data.resident.politicsStatus) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span>兵役状况</span>
|
||||
<span>{{ $dict.getLabel('militaryStatus', data.resident.militaryStatus) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span>宗教信仰</span>
|
||||
<span>{{ $dict.getLabel('faithType', data.resident.faithType) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span>职业</span>
|
||||
<span>{{ $dict.getLabel('job', data.resident.job) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lines"></div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="hint">联络信息</div>
|
||||
|
||||
<div class="contents">
|
||||
<div class="item">
|
||||
<span>联系方式</span>
|
||||
<span class="phones">{{ data.resident.phone }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span>现住址</span>
|
||||
<span>{{ data.resident.currentAreaName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span>现住详细地址</span>
|
||||
<span>{{ data.resident.currentAddress }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span>户籍地址</span>
|
||||
<span>{{ data.resident.householdAreaName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span>户籍详细地址</span>
|
||||
<span>{{ data.resident.householdAddress }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -17,7 +123,7 @@ export default {
|
||||
watch: {},
|
||||
onLoad(o) {
|
||||
this.id = o.id
|
||||
this.$dict.load('householdRelation').then(() => {
|
||||
this.$dict.load('householdRelation', 'nation', 'education', 'maritalStatus', 'politicsStatus', 'militaryStatus', 'faithType', 'job').then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
@@ -40,5 +146,70 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.DetailPeople {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
.top {
|
||||
display: flex;
|
||||
padding: 48px 32px 32px 32px;
|
||||
.photos {
|
||||
img {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-left: 24px;
|
||||
.rightTop {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.names {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.householdNames {
|
||||
margin-left: 30px;
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
color: #5aad6a;
|
||||
}
|
||||
}
|
||||
.rightBottom {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 8px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.middle,
|
||||
.bottom {
|
||||
padding: 0 32px;
|
||||
|
||||
.hint {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.contents {
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 14px 0;
|
||||
.phones {
|
||||
color: #3d94fb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lines {
|
||||
height: 4px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
317
src/apps/AppResidentFile/GroupList.vue
Normal file
317
src/apps/AppResidentFile/GroupList.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div class="group-resident">
|
||||
<template v-if="!showTagManage">
|
||||
<AiTopFixed>
|
||||
<div class="card">
|
||||
<header>
|
||||
<u-avatar mode="square" :src="$cdn + 'groupAvatar.png'" :size="112"></u-avatar>
|
||||
{{ detail.name }}
|
||||
</header>
|
||||
<u-grid :col="2" :border="false">
|
||||
<u-grid-item>
|
||||
<label>建群日期</label>
|
||||
<label v-if="detail.createTime">{{ detail.createTime.split(' ')[0] }}</label>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<label>成员总数</label>
|
||||
<label v-if="isToday">{{ detail.statistic.today.total }}</label>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<label>今日入群</label>
|
||||
<label v-if="isToday">{{ detail.statistic.today.increase }}</label>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<label>今日退群</label>
|
||||
<label v-if="isToday">{{ detail.statistic.today.decrease }}</label>
|
||||
</u-grid-item>
|
||||
<!-- <u-grid-item>-->
|
||||
<!-- <label>今日活跃人数</label>-->
|
||||
<!-- <label>{{item.value}}</label>-->
|
||||
<!-- </u-grid-item>-->
|
||||
</u-grid>
|
||||
<p class="statistics">
|
||||
<span>成员性别：</span>
|
||||
<label>男性</label>
|
||||
<b>{{ detail.man }}</b>
|
||||
<label>女性</label>
|
||||
<b>{{ detail.woman }}</b>
|
||||
<label>未知</label>
|
||||
<b>{{ detail.unknown }}</b>
|
||||
</p>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
<div class="card">
|
||||
<AiCell title label="群标签">
|
||||
<u-icon label="添加" size="38" name="iconAdd" custom-prefix="iconfont" color="#1365DD" label-color="#1365DD" @tap="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>
|
||||
<div class="wrap">
|
||||
<div class="item" v-for="(item, index) in detail.groupUserList" :key="index" @click="handleWechat(item)">
|
||||
<u-avatar mode="square" :src="item.avatar"></u-avatar>
|
||||
<div class="info">
|
||||
<div class="left">
|
||||
<p>
|
||||
{{ item.memberName }}
|
||||
<b v-if="item.customerType == 2" style="color: #3c7fc8">@{{ item.corpName }}</b>
|
||||
<b v-if="item.customerType == 1" style="color: #2ea222">@微信</b>
|
||||
</p>
|
||||
<p>真实姓名：{{ item.realName }}</p>
|
||||
</div>
|
||||
<span v-if="item.userId == detail.owner">群主</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<TagManage v-if="showTagManage" />
|
||||
<AiBack v-if="isNormal && !showTagManage" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'GroupList',
|
||||
components: {},
|
||||
props: {},
|
||||
provide() {
|
||||
return {
|
||||
top: this,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
detail: {},
|
||||
groupId: null,
|
||||
showTagManage: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tagsList() {
|
||||
let obj = {}
|
||||
this.detail?.tagList?.map((e) => {
|
||||
if (e?.groupName) {
|
||||
if (obj?.[e.groupName]) {
|
||||
obj[e.groupName].push(e.tagName)
|
||||
} else {
|
||||
obj[e.groupName] = [e.tagName]
|
||||
}
|
||||
}
|
||||
})
|
||||
return obj
|
||||
},
|
||||
isToday() {
|
||||
return !!this.detail?.statistic?.today
|
||||
},
|
||||
isNormal() {
|
||||
return !!this.id
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
onLoad(o) {
|
||||
this.id = o.id
|
||||
this.getContact()
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin', 'wxInvoke']),
|
||||
getContact() {
|
||||
if (this.isNormal) {
|
||||
this.groupId = this.id
|
||||
this.getGroup(this.id)
|
||||
} else
|
||||
this.injectJWeixin('getCurExternalChat').then(() => {
|
||||
this.wxInvoke([
|
||||
'getCurExternalChat',
|
||||
{},
|
||||
(res) => {
|
||||
if (res?.err_msg == 'getCurExternalChat:ok') {
|
||||
this.groupId = res.chatId
|
||||
this.getGroup(res.chatId)
|
||||
}
|
||||
},
|
||||
])
|
||||
})
|
||||
},
|
||||
getGroup(id) {
|
||||
this.$http
|
||||
.post('/app/wxcp/wxgroup/getDetail', null, {
|
||||
params: { id },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
this.detail = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleWechat({ userId, type }) {
|
||||
this.injectJWeixin('openUserProfile').then(() => {
|
||||
this.wxInvoke([
|
||||
'openUserProfile',
|
||||
{
|
||||
type,
|
||||
userid: userId,
|
||||
},
|
||||
() => 0,
|
||||
])
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.group-resident {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
::v-deep .AiTopFixed {
|
||||
& > .card {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .card {
|
||||
background-color: #ffffff;
|
||||
padding: 16px 32px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 16px;
|
||||
|
||||
header {
|
||||
height: 192px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
|
||||
.u-avatar {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-grid-item-box {
|
||||
box-sizing: border-box;
|
||||
padding: 16px !important;
|
||||
|
||||
.uni-label-pointer {
|
||||
width: 100%;
|
||||
line-height: 40px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
uni-label:last-child {
|
||||
margin-top: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.statistics {
|
||||
height: 96px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid #eee;
|
||||
margin-top: 16px;
|
||||
|
||||
span {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
label + b {
|
||||
font-size: 28px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
b {
|
||||
color: #1365dd !important;
|
||||
margin: 0 32px 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
& > section:first-child {
|
||||
height: 90px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.item {
|
||||
height: 176px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-left: 24px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.left {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
|
||||
b {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #3c7fc8;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
width: 88px;
|
||||
height: 56px;
|
||||
text-align: center;
|
||||
background: rgba(19, 101, 221, 0.1);
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
|
||||
border-radius: 4px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #1365dd;
|
||||
line-height: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::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>
|
||||
92
src/apps/AppResidentFile/tagManage.vue
Normal file
92
src/apps/AppResidentFile/tagManage.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<section class="tagManage">
|
||||
<div class="card" v-for="(group, i) in tags" :key="i">
|
||||
<AiCell title :label="group.name" />
|
||||
<u-row>
|
||||
<div class="tag" v-for="(op, j) in group.tagList" :key="j" :class="{ selected: selected.includes(op.id) }" @tap="$u.debounce(handleToggle(op.id))">
|
||||
{{ op.name }}
|
||||
</div>
|
||||
</u-row>
|
||||
</div>
|
||||
<AiBack custom @back="top.showTagManage = false" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tagManage',
|
||||
inject: ['top'],
|
||||
data() {
|
||||
return {
|
||||
tags: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selected() {
|
||||
return this.top.groupId ? this.top.detail?.tagList.map((e) => e.tagId) : this.top.detail?.tags.map((e) => e.tagId)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getTags() {
|
||||
this.$http
|
||||
.post(this.top.groupId ? '/app/wxcp/wxgroupchattag/listAll' : '/app/wxcp/wxcorptag/listAll', null, {
|
||||
params: { size: 9999 },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
this.tags = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
handleToggle(tagId) {
|
||||
uni.showLoading({
|
||||
title: '提交中',
|
||||
})
|
||||
|
||||
this.$http
|
||||
.post(this.top.groupId ? '/app/wxcp/wxgroupchattag/markTagForCP' : '/app/wxcp/wxcorptag/markTagForCP', null, {
|
||||
params: this.top.groupId ? { tagId, groupId: this.top.groupId } : { tagId, customerId: this.top.custom },
|
||||
})
|
||||
.then((res) => {
|
||||
uni.hideLoading()
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast('操作成功!')
|
||||
this.getTags()
|
||||
this.top.getContact()
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
uni.hideLoading()
|
||||
this.$u.toast(err)
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getTags()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tagManage {
|
||||
padding-top: 16px;
|
||||
|
||||
.tag {
|
||||
cursor: pointer !important;
|
||||
|
||||
&.selected {
|
||||
background-color: $uni-color-primary !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
& + .tag {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user