初始化产品库
This commit is contained in:
aixianling
305
src/pages/resident/groupResident.vue
Normal file
305
src/pages/resident/groupResident.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div class="group-resident">
|
||||
<template v-if="!showTagManage">
|
||||
<ai-top-fixed>
|
||||
<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>
|
||||
</ai-top-fixed>
|
||||
<div class="card">
|
||||
<ai-cell title label="群标签">
|
||||
<u-icon label="添加" size="38" name="iconAdd" custom-prefix="iconfont" color="#1365DD"
|
||||
label-color="#1365DD" @tap="showTagManage=true"/>
|
||||
</ai-cell>
|
||||
<ai-cell 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>
|
||||
</ai-cell>
|
||||
</div>
|
||||
<div class="card">
|
||||
<ai-cell title label="群成员"></ai-cell>
|
||||
<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>
|
||||
<tag-manage v-if="showTagManage"/>
|
||||
<ai-back v-if="isNormal&&!showTagManage"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiCell from "../../components/AiCell";
|
||||
import {mapActions} from "vuex";
|
||||
import TagManage from "./tagManage";
|
||||
import AiBack from "../../components/AiBack";
|
||||
import AiTopFixed from "../../components/AiTopFixed";
|
||||
|
||||
export default {
|
||||
name: "groupResident",
|
||||
components: {AiTopFixed, AiBack, AiCell, TagManage},
|
||||
provide() {
|
||||
return {
|
||||
top: this
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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.$route.query.id;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin', "wxInvoke"]),
|
||||
getContact() {
|
||||
if (this.isNormal) {
|
||||
this.groupId = this.$route.query.id
|
||||
this.getGroup(this.$route.query.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])
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getContact()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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>
|
||||
Reference in New Issue
Block a user