居民列表
This commit is contained in:
花有清香月有阴
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="AppResidentFile">
|
<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">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="datas" v-if="data.length > 0">
|
<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">
|
<div class="left">
|
||||||
<img :src="item.photo" alt="" v-if="item.photo" />
|
<img :src="item.photo" alt="" v-if="item.photo" />
|
||||||
<img src="./components/img/4.png" alt="" v-else />
|
<img src="./components/img/4.png" alt="" v-else />
|
||||||
@@ -100,7 +100,33 @@
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -115,7 +141,7 @@ export default {
|
|||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
list: [
|
lists: [
|
||||||
{
|
{
|
||||||
iconPath: 'home',
|
iconPath: 'home',
|
||||||
selectedIconPath: 'home-fill',
|
selectedIconPath: 'home-fill',
|
||||||
@@ -162,6 +188,10 @@ export default {
|
|||||||
current: 1,
|
current: 1,
|
||||||
keyword: '',
|
keyword: '',
|
||||||
data: [],
|
data: [],
|
||||||
|
|
||||||
|
page: { current: 1, size: 10, total: 0 },
|
||||||
|
search: { name: '' },
|
||||||
|
list: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -176,6 +206,39 @@ export default {
|
|||||||
this.Echarts1 = echarts.init(document.getElementById('echarts1'))
|
this.Echarts1 = echarts.init(document.getElementById('echarts1'))
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
getList() {
|
||||||
this.$http
|
this.$http
|
||||||
.post('/app/appresident/list', null, {
|
.post('/app/appresident/list', null, {
|
||||||
@@ -325,6 +388,9 @@ export default {
|
|||||||
if (this.currentTabBar == 1) {
|
if (this.currentTabBar == 1) {
|
||||||
this.getList()
|
this.getList()
|
||||||
}
|
}
|
||||||
|
if (this.currentTabBar == 2) {
|
||||||
|
this.getList2()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
change(index) {
|
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>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,111 @@
|
|||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -17,7 +123,7 @@ export default {
|
|||||||
watch: {},
|
watch: {},
|
||||||
onLoad(o) {
|
onLoad(o) {
|
||||||
this.id = o.id
|
this.id = o.id
|
||||||
this.$dict.load('householdRelation').then(() => {
|
this.$dict.load('householdRelation', 'nation', 'education', 'maritalStatus', 'politicsStatus', 'militaryStatus', 'faithType', 'job').then(() => {
|
||||||
this.getDetail()
|
this.getDetail()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -40,5 +146,70 @@ export default {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.DetailPeople {
|
.DetailPeople {
|
||||||
height: 100%;
|
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>
|
</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