429 lines
13 KiB
Plaintext
429 lines
13 KiB
Plaintext
<style lang="less" scoped>
|
|
@import url(../../styles/theme.less);
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.ui-member-data-box{
|
|
padding: 30rpx 40rpx 0;
|
|
background: #FFFFFF;
|
|
width: 100vw;
|
|
|
|
.ui-member-list{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
.ui-member-box{
|
|
margin: 0 52rpx 42rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.ui-member-pic{
|
|
margin-bottom: 10rpx;
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.ui-member-name{
|
|
max-width: 88rpx;
|
|
}
|
|
}
|
|
.ui-member-block:nth-child(5n) .ui-member-box{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.ui-more-list{
|
|
margin-left: 234rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 30rpx;
|
|
.ui-more-pic{
|
|
margin-left: 10rpx;
|
|
width: 12rpx;
|
|
height: 24rpx;
|
|
}
|
|
.ui-more-pic-v1{
|
|
margin-right: 10rpx;
|
|
width: 24rpx;
|
|
height: 12rpx;
|
|
}
|
|
}
|
|
.ui-more-list-v1{
|
|
margin-left: 274rpx;
|
|
}
|
|
}
|
|
|
|
.ui-group-detail{
|
|
margin-top: 12rpx;
|
|
padding: 22rpx 40rpx;
|
|
width: 100vw;
|
|
background: #ffffff;
|
|
.ui-detail-list{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
.ui-detail-title{
|
|
width: 400rpx;
|
|
}
|
|
.ui-detail-name{
|
|
//text-align: right;
|
|
max-width: 430rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.ui-detail-name-text{
|
|
margin-right: 10rpx;
|
|
text-align: right;
|
|
width: 420rpx;
|
|
}
|
|
.ui-detail-name-icon{
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
.ui-detail-pic{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.ui-detail-line{
|
|
margin: 20rpx 0 30rpx;
|
|
width: 670rpx;
|
|
height: 2rpx;
|
|
background: #F8F8F8;
|
|
}
|
|
.ui-detail-intro{
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
.ui-group-quit{
|
|
margin-top: 12rpx;
|
|
padding: 30rpx 0;
|
|
color: #FF3051;
|
|
background: #ffffff;
|
|
text-align: center;
|
|
button::after{
|
|
border: none;
|
|
}
|
|
}
|
|
.ui-group-join{
|
|
margin-top: 12rpx;
|
|
padding: 30rpx 0;
|
|
color: #2d8cf0;
|
|
background: #ffffff;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-server{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #ffffff;
|
|
box-sizing: border-box;
|
|
}
|
|
.service {
|
|
position: fixed;
|
|
bottom: 12vh;
|
|
right: 5vw;
|
|
image {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<template>
|
|
<view class="ui-groupChitchatDetail">
|
|
<view class="ui-member-data-box">
|
|
<view class="ui-member-list">
|
|
<view class="ui-member-block" v-for="(item,index) in detail.members" :key="index">
|
|
<block v-if="hidden">
|
|
<view class="ui-member-box">
|
|
<image @tap.stop="jumpPath(item)" class="ui-member-pic" :src="item.avatar === 'https://image.fulllinkai.com/202207/04/1fa9a906b956efa26852fb685a845fff.png?x-oss-process=style/scale1' ? defaultImg : item.avatar" mode="aspectFill"></image>
|
|
<view class="ui-member-name color-666 font_22 ellipsis_1">{{item.pivot.nick ? item.pivot.nick :item.nickname}}</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<block v-if="detail.members.length > 20 && !hidden">
|
|
<view class="ui-more-list" @tap="moreMembers">
|
|
<view class="color-666 font_26">查看更多群成员</view>
|
|
<image class="ui-more-pic" src="https://image.fulllinkai.com/202307/24/8c1a30360cf0c55605ae784dd47022e0.png" mode="scaleToFill"></image>
|
|
</view>
|
|
</block>
|
|
<block v-else-if="detail.members.length > 20 && hidden">
|
|
<view class="ui-more-list ui-more-list-v1" @tap="moreMembers">
|
|
<image class="ui-more-pic-v1" src="https://image.fulllinkai.com/202307/28/a9ab5fc1b5c91a01df47de4473bdbeb6.png" mode="scaleToFill"></image>
|
|
<view class="color-666 font_26">收起</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="ui-group-detail">
|
|
<view class="ui-detail-list">
|
|
<view class="ui-detail-title bold font30 color-333">群聊头像</view>
|
|
<image class="ui-detail-pic" :src="detail.icon" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="ui-detail-line"></view>
|
|
<view class="ui-detail-list">
|
|
<view class="ui-detail-title bold font30 color-333">群聊名称</view>
|
|
<view class="ui-detail-name ellipsis_1 font30 color-666">{{ detail.tname }}</view>
|
|
</view>
|
|
<view class="ui-detail-line"></view>
|
|
<view class="ui-detail-list" v-if="detail.is_join == 1">
|
|
<view class="ui-detail-title bold font30 color-333">我在本群的昵称</view>
|
|
<view class="ui-detail-name ellipsis_1 font30 color-666">
|
|
<input class=" ui-detail-name-text" adjust-position="{{true}}" type="text" confirm-type="done" placeholder="请输入不超过12个字符" @enter="changeGroupName" maxlength="12" cursor-spacing="20" v-model="detail.user_team.nick" @confirm="changeGroupName"/>
|
|
<image id="img" class="ui-detail-name-icon" src="https://image.fulllinkai.com/202308/11/54e725db8277cce7c2803070aa3eb289.png" mode="aspectFill" lazy-load="true"></image>
|
|
</view>
|
|
</view>
|
|
<view class="ui-detail-line"></view>
|
|
<view class="font30 color-333 bold">群聊简介</view>
|
|
<view class="ui-detail-intro color-666 font_26">{{ detail.intro }}</view>
|
|
</view>
|
|
<view class="ui-group-detail" v-if="detail.is_join == 1">
|
|
<view class="ui-detail-list">
|
|
<view class="ui-detail-title bold font30 color-333">显示群成员昵称</view>
|
|
<switch checked="{{detail.user_team.show_other_nick}}" @change="changeShowNick" color="#d92553" style="margin-right: -2rpx;margin-top: -6rpx;"/>
|
|
</view>
|
|
<view class="ui-detail-line"></view>
|
|
<view class="ui-detail-list">
|
|
<view class="ui-detail-title bold font30 color-333">消息免打扰</view>
|
|
<switch checked="{{notiTypeData.muteNotiType}}" @change="changeMutenotiType" color="#d92553" style="margin-right: -2rpx;margin-top: -6rpx;"/>
|
|
</view>
|
|
<view class="ui-detail-line"></view>
|
|
<view class="ui-detail-list">
|
|
<view class="ui-detail-title bold font30 color-333">置顶聊天</view>
|
|
<switch checked="{{detail.user_team.is_top}}" @change="changeShowTop" color="#d92553" class="flo_r" style="margin-right: -2rpx;margin-top: -6rpx;"/>
|
|
</view>
|
|
</view>
|
|
<view class="ui-group-quit font_30 color-333" @tap.stop="handleContact" >
|
|
<button class="btn ui-server text-center font_30" hover-class="btn_active" @tap.stop="handleContact">
|
|
联系客服
|
|
</button>
|
|
</view>
|
|
<view class="ui-group-quit font_30" v-if="detail.is_join == 1" @tap.stop="quitGroup">退出群聊</view>
|
|
<view class="ui-group-join font_30" v-else-if="detail.is_join == 0" @tap.stop="joinGroup">加入群聊</view>
|
|
<view class="btn service" v-if="detail.is_join == 1 && isCodeIn" @tap.stop="backChat">
|
|
<image src="https://image.fulllinkai.com/202309/19/de337109d51243a3b3e8acaa79bbbc27.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import wepy from '@wepy/core'
|
|
import https from '../../mixins/https'
|
|
import base from '../../mixins/base'
|
|
import {service} from '../../config'
|
|
import {getDiffTime} from '../../mixins/plugins'
|
|
|
|
wepy.page({
|
|
config: {},
|
|
mixins: [https, base],
|
|
|
|
data: {
|
|
id: '',
|
|
defaultImg: 'https://image.fulllinkai.com/202307/18/449c3253ca2bbed9314d39977a486d0e.png', // 默认头像
|
|
detail: {},
|
|
notiTypeList: [],
|
|
notiTypeData: {muteNotiType: 0},
|
|
notiTypeIndex: null,
|
|
hidden: true,
|
|
throttle: true,
|
|
isCodeIn: false // 是否扫码进入详情
|
|
},
|
|
methods: {
|
|
getDetail() {
|
|
let vm = this
|
|
vm.$showLoading('')
|
|
vm.$post({url: `${service.host}/chat/group/detail?team_id=${vm.id}`}).then(({code, data}) => {
|
|
if (code === 0) {
|
|
vm.detail = data
|
|
}
|
|
wx.hideLoading()
|
|
}).catch(err => {
|
|
wx.hideLoading()
|
|
console.log(err)
|
|
})
|
|
},
|
|
// 修改群昵称
|
|
changeGroupName() {
|
|
let vm = this
|
|
let data = {
|
|
team_id: vm.id,
|
|
nick: vm.detail.user_team.nick
|
|
}
|
|
if (!vm.detail.user_team.nick) {
|
|
vm.$showToast('请输入昵称')
|
|
return
|
|
}
|
|
if (vm.throttle) {
|
|
vm.throttle = false
|
|
vm.$showLoading('更改中')
|
|
vm.$post({url: `${service.host}/chat/group/update/nick`, data}).then(({code, data}) => {
|
|
wx.hideLoading()
|
|
if (code == 0) {
|
|
vm.$showToast(`群昵称已修改`)
|
|
}
|
|
vm.throttle = true
|
|
}).catch(() => {
|
|
wx.hideLoading()
|
|
vm.throttle = true
|
|
})
|
|
}
|
|
},
|
|
// 是否展示成员昵称
|
|
changeShowNick(e) {
|
|
let vm = this
|
|
let data = {
|
|
team_id: vm.id,
|
|
show_other_nick: e.$wx.detail.value ? 1 : 0
|
|
}
|
|
if (vm.throttle) {
|
|
vm.throttle = false
|
|
vm.$showLoading('')
|
|
vm.$post({url: `${service.host}/chat/group/update/show_other_nick`, data}).then(({code, data}) => {
|
|
if (code == 0) {
|
|
vm.detail.user_team.show_other_nick = e.detail.value ? 1 : 0
|
|
}
|
|
wx.hideLoading()
|
|
vm.throttle = true
|
|
}).catch(() => {
|
|
wx.hideLoading()
|
|
vm.throttle = true
|
|
})
|
|
}
|
|
},
|
|
// 消息免打扰设置
|
|
changeMutenotiType(e) {
|
|
let vm = this
|
|
vm.$showLoading('')
|
|
let muteNotiType = null
|
|
let muteTeam = null
|
|
if (!e.$wx.detail.value) {
|
|
muteNotiType = 0
|
|
muteTeam = false
|
|
} else {
|
|
muteNotiType = 1
|
|
muteTeam = true
|
|
}
|
|
vm.$app.$options.globalData.nim.team.updateMyMemberInfo({
|
|
teamId: vm.id,
|
|
bitConfigMask: muteNotiType
|
|
}).then((res) => {
|
|
if (res) {
|
|
vm.notiTypeData.muteNotiType = muteNotiType
|
|
vm.notiTypeData.muteTeam = muteTeam
|
|
if (vm.notiTypeIndex !== null) {
|
|
vm.notiTypeList[vm.notiTypeIndex].muteNotiType = muteNotiType
|
|
vm.notiTypeList[vm.notiTypeIndex].muteTeam = muteTeam
|
|
} else {
|
|
vm.notiTypeList.push({
|
|
teamId: vm.detail.tid,
|
|
muteNotiType: muteNotiType,
|
|
muteTeam: muteTeam
|
|
})
|
|
vm.notiTypeIndex = vm.notiTypeList.length - 1
|
|
}
|
|
if (!e.$wx.detail.value) {
|
|
vm.notiTypeList.splice(vm.notiTypeIndex, 1)
|
|
}
|
|
wx.setStorageSync('muteNotList', vm.notiTypeList)
|
|
}
|
|
wx.hideLoading()
|
|
})
|
|
},
|
|
// 退出群聊
|
|
quitGroup() {
|
|
let vm = this
|
|
wx.showModal({
|
|
title: '提示',
|
|
content: `是否确认退出该群聊吗？`,
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
vm.$showLoading('')
|
|
vm.$post({url: `${service.host}/chat/group/out?team_id=${vm.id}`}).then(({code, data}) => {
|
|
if (code == 0) {
|
|
wx.switchTab({url: '/pages/tabBar/news'})
|
|
}
|
|
}).catch(() => {
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 加入群聊
|
|
joinGroup() {
|
|
let vm = this
|
|
wx.showModal({
|
|
title: '提示',
|
|
content: `是否确认加入该群聊吗？`,
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
vm.$showLoading('')
|
|
vm.$post({url: `${service.host}/chat/group/join?team_id=${vm.id}`}).then(({code, data}) => {
|
|
if (code == 0) {
|
|
vm.getDetail()
|
|
}
|
|
}).catch(() => {
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 返回群聊天
|
|
backChat() {
|
|
let vm = this
|
|
wx.redirectTo({url: `/pages/news/groupChitchat?id=${vm.id}&name=${encodeURIComponent(vm.detail.tname)}`})
|
|
},
|
|
// 展示、收起更多成员
|
|
moreMembers() {
|
|
let vm = this
|
|
vm.hidden = !vm.hidden
|
|
},
|
|
jumpPath(e) {
|
|
wx.navigateTo({url: `/pages/home/information?id=${e.id}`})
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
let vm = this
|
|
if (e.scene) {
|
|
let newScene = decodeURIComponent(e.scene)
|
|
vm.id = newScene.split('=')[1]
|
|
vm.isCodeIn = true
|
|
} else {
|
|
vm.id = e.id
|
|
vm.isCodeIn = false
|
|
}
|
|
if (wx.getStorageSync('muteNotList')) {
|
|
vm.notiTypeList = wx.getStorageSync('muteNotList')
|
|
vm.notiTypeList.forEach((item, index) => {
|
|
if (item.teamId == vm.id) {
|
|
vm.notiTypeData = item
|
|
vm.notiTypeData.muteNotiType = vm.notiTypeData.muteNotiType * 1
|
|
vm.notiTypeIndex = index
|
|
}
|
|
})
|
|
}
|
|
vm.getDetail()
|
|
},
|
|
onShow() {
|
|
},
|
|
created() {
|
|
}
|
|
})
|
|
</script>
|
|
<config>
|
|
{
|
|
navigationBarTitleText: '群聊详情',
|
|
enablePullDownRefresh: false,
|
|
backgroundColorTop: '#f5f5f5',
|
|
backgroundColorBottom: '#f5f5f5',
|
|
}
|
|
</config>
|