<template>
|
<view class="container">
|
<u-navbar style="position: relative;" :is-fixed="false" :border-bottom="true" :is-back="true"
|
:title="recName" back-icon-color="#fff"
|
:background="{ background: '#0BB9C8' }" title-color="#fff">
|
</u-navbar>
|
|
<view class="groupmain">
|
<scroll-view scroll-y="true">
|
|
<view class="memberbox">
|
<view class="member-item" v-for="item in getGroupInfo.user_list" :key="item.user._id" @tap="goInfo(item.user._id)">
|
<image :src="item.user.avatars" mode="aspectFill"></image>
|
<view class="manager" v-if="item.user._id == getGroupInfo.manager"><image src="../../static/images/group/manager.png" mode="widthFix"></image></view>
|
<view class="m_name">{{ item.nickName }}</view>
|
</view>
|
<view class="member-item">
|
<view class="m_imgbox" @tap="goAdd"><image src="../../static/images/group/Group.png" mode="widthFix"></image></view>
|
</view>
|
<view class="more" @tap="more">查看全部群成员</view>
|
</view>
|
<view class="info">
|
<view class="info_item">
|
<view class="info_title">群名称</view>
|
<view class="info_content">{{ getGroupInfo.name }}</view>
|
<view class="info_oprea"><view v-show="isManager">></view></view>
|
</view>
|
<view class="info_item">
|
<view class="info_title">群公告</view>
|
<view class="info_content">{{ getGroupInfo.notice }}</view>
|
<view class="info_oprea">></view>
|
</view>
|
<view class="info_item">
|
<view class="info_title">群内昵称</view>
|
<view class="info_content">{{ getG_nickName }}</view>
|
<view class="info_oprea">></view>
|
</view>
|
</view>
|
<view class="operation">
|
<view class="op_item">
|
<view class="op_type">消息免打扰</view>
|
<view class="op_opera"><switch class="switch" color="#FFE431" :checked="false" @change="switch1" /></view>
|
</view>
|
</view>
|
<view class="dissolve" v-if="isManager" @tap="dissolve">解散该群</view>
|
<view class="dissolve" v-if="isManager" @tap="management">移除群成员</view>
|
<view class="btn" @tap="exitGroup">退出群聊</view>
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
recName: '聊天信息',
|
id: null,
|
nickName: null,
|
isScroll: false,
|
isManager: false,
|
type: '',
|
getGroupInfo: {},
|
getG_nickName: ''
|
};
|
},
|
onLoad(option) {
|
this.id = option.id;
|
|
},
|
methods: {
|
// 消息免打扰按钮
|
switch1(e) {
|
console.log('switch1 发生 change 事件，携带值为', e.target.value);
|
},
|
|
// 查看群成员信息
|
goInfo(id) {
|
uni.navigateTo({
|
url: '../information/information?id=' + id
|
});
|
},
|
// 跳转到添加群成员界面
|
goAdd() {
|
uni.navigateTo({
|
url: 'add/add?id=' + this.id
|
});
|
},
|
//查看所有群成员
|
more(){
|
uni.navigateTo({
|
url: 'members/members'
|
});
|
},
|
// 移除群成员
|
management(){
|
uni.navigateTo({
|
url: 'members/members?id=' + this.id +"&&type=management"
|
});
|
},
|
// 退出群聊
|
exitGroup() {
|
console.log("退群提醒")
|
},
|
// 解散群聊
|
async dissolve(){
|
console.log("解散群聊")
|
},
|
// 群聊天页面
|
goGroupChat(){
|
uni.navigateTo({
|
url:"../chat/chat?id="+this.id+"&&type=group"
|
})
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../common/css/mycss.scss';
|
.groupinfo {
|
padding-top: var(--status-bar-height);
|
}
|
.comtarbar {
|
background: white;
|
.info{
|
margin-left: 30rpx;
|
}
|
}
|
.groupmain {
|
padding-bottom: 0rpx;
|
height: calc(100vh - 88rpx);
|
scroll-view {
|
height: 100%;
|
}
|
.g_avatar {
|
background: white;
|
height: 35vh;
|
position: relative;
|
overflow: hidden;
|
.g_imgbox {
|
position: absolute;
|
z-index: 3;
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%) translateY(-50%);
|
.g_box {
|
display: flex;
|
justify-content: center;
|
.g_img {
|
border-radius: 50%;
|
width: 200rpx;
|
height: 200rpx;
|
overflow: hidden;
|
margin: 10rpx;
|
border: 4rpx solid white;
|
position: relative;
|
image {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%) translateY(-50%);
|
}
|
}
|
}
|
|
.g_info {
|
color: white;
|
text-align: center;
|
margin-top: 20rpx;
|
}
|
}
|
|
.bg-img {
|
position: absolute;
|
z-index: 0;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
image {
|
width: 100%;
|
height: auto;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%) translateY(-50%);
|
}
|
}
|
.mask {
|
position: absolute;
|
z-index: 1;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
background: rgba(0, 0, 0, 0.3);
|
}
|
}
|
|
.memberbox {
|
padding-top: 20rpx;
|
margin: 20rpx;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
.member-item {
|
width: 20%;
|
display: flex;
|
justify-content: center;
|
flex-wrap: wrap;
|
margin-bottom: 20rpx;
|
position: relative;
|
.manager {
|
position: absolute;
|
top: -20rpx;
|
right: 4rpx;
|
image {
|
width: 40rpx;
|
height: auto;
|
}
|
}
|
image {
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: 10rpx;
|
}
|
.m_name {
|
margin-top: 10rpx;
|
width: 100rpx;
|
text-align: center;
|
font-size: 26rpx;
|
color: rgba(25, 29, 35, 0.5);
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
.m_imgbox {
|
width: 100rpx;
|
height: 100rpx;
|
background: #ffe431;
|
border-radius: 10%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
image {
|
height: 60rpx;
|
width: 60rpx;
|
}
|
}
|
}
|
.more {
|
margin: 30rpx 0rpx;
|
width: 100%;
|
font-size: 30rpx;
|
color: #ccc;
|
text-align: center;
|
}
|
}
|
.info {
|
border-top: 10rpx solid #dfdfdf;
|
border-bottom: 10rpx solid #dfdfdf;
|
.info_item {
|
margin: 0rpx 20rpx;
|
display: flex;
|
height: 100rpx;
|
view {
|
height: 100rpx;
|
line-height: 100rpx;
|
}
|
.info_title {
|
color: rgba(39, 40, 50, 1);
|
font-size: 32rpx;
|
flex: 3;
|
}
|
.info_content {
|
color: rgba(39, 40, 50, 0.6);
|
font-size: 32rpx;
|
flex: 6;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
.info_oprea {
|
text-align: right;
|
color: rgba(39, 40, 50, 0.6);
|
font-size: 38rpx;
|
flex: 1;
|
}
|
}
|
}
|
.info .info_item:not(:last-child) {
|
border-bottom: 2rpx solid #e2e2e2;
|
}
|
.operation {
|
border-bottom: 10rpx solid #dfdfdf;
|
.op_item {
|
margin: 0rpx 20rpx;
|
display: flex;
|
height: 100rpx;
|
.op_type {
|
flex: 4;
|
color: rgba(39, 40, 50, 1);
|
font-size: 32rpx;
|
height: 100rpx;
|
line-height: 100rpx;
|
}
|
.op_opera {
|
flex: 1;
|
text-align: right;
|
.switch {
|
margin-top: 16rpx;
|
transform: scale(0.8);
|
}
|
}
|
}
|
}
|
.dissolve {
|
height: 100rpx;
|
line-height: 100rpx;
|
text-align: center;
|
color: red;
|
border-bottom: 10rpx solid #dfdfdf;
|
}
|
.btn {
|
height: 100rpx;
|
line-height: 100rpx;
|
text-align: center;
|
color: red;
|
}
|
}
|
</style>
|
