yql/pages/chat/message/more.vue

<template>
	<view class="page">

		<view class="title" v-if="data.type == 0">
			<view class="title-msg">
				<view class="title_val">会话成员</view>
				<view class="title_num">共{{data.member.length}}人</view>
			</view>
			<view class="title-img">
				<uni-icons :size="22" class="uni-icon-wrapper" color="#c9c9cb" type="arrowright" />
			</view>
		</view>

		<view class="photos" v-if="data.type == 0">
			<view class="photo_main" v-for="(val,index) of data.member" :key="index" @tap="goDetails(val.user_id)">
				<image class="photo" :src="photo(val.photo+'')" :lazy-load="true" style="border-radius: 10px;"
					:data-index="index" @erro="imageError" />
				<view class="name_class">{{val.show_name}}</view>
			</view>
			<view class="photo_main" @tap="add" v-if="data.type">
				<image class="photo" :src="'../../../static/theme/default/chat/add.png'" :lazy-load="true" />
				<view class="name_class  msg-size">邀 请</view>
			</view>
			<view class="photo_main" @tap="reduce" v-if="data.is_action && data.type">
				<image class="photo" :src="'../../../static/theme/default/chat/reduce.png'" :lazy-load="true" />
				<view class="name_class  msg-size">移 除</view>
			</view>
		</view>

		<view class="uni-card" v-if="data.type == 1">
			<view class="chatgroup-box">
				<view class="chatgroup-top" @tap="goSetGroupPhoto">
					<!-- <view class="chatgroup-avatar-group">
						<image :class="'chatgroup-avatar-item-' + data.member.length"
							v-for="(item,index) in data.member" :key="index" :src="photo(item.photo)" :lazy-load="true">
						</image>
					</view> -->

					<!-- <view class="chatgroup-title" @click.stop="goSet('name')">
						<text v-for="(item,index) in data.member" :key="index">{{item.show_name}}
							<block v-if="index < data.member.length - 1">、</block>
						</text>
					</view> -->
					<image class="chatgroup-avatar" :src="photo(data.group.is_photo+'')" :lazy-load="true"></image>
					<view class="chatgroup-title" @click.stop="goSet('name')">
						<text>{{data.group.name}}</text>
					</view>
				</view>
				<view class="chatgroup-center">
					<view class="chatgroup-tag">
						<image src="/static/group/safe.png" mode=""></image>
						<text>消息通道通过端对端加密</text>
					</view>
				</view>
				<view class="chatgroup-list">
					<view class="chatgroup-item" @tap="goSet('notice')">
						<image src="/static/group/1.png" mode=""></image>
						<text>群公告</text>
					</view>
					<!-- <view class="chatgroup-item">
						<image src="/static/group/2.png" mode=""></image>
						<text>图片</text>
					</view>
					<view class="chatgroup-item">
						<image src="/static/group/3.png" mode=""></image>
						<text>搜索</text>
					</view> -->
					<view class="chatgroup-item" @tap="manarger('notice')">
						<image src="/static/group/4.png" mode=""></image>
						<text>管理</text>
					</view>
				</view>
			</view>
			<view class="list-member-count"></view>
			<view class="uni-list">
				<view class="uni-list-cell" @click="toMember">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<view>
							<text class="msg-size">群成员</text>
							<view class="show_text msg-size">{{data.member.length}}</view>
						</view>
					</view>
				</view>
				<view class="group-member-list">
					<image class="group-member-item" :src="photo(val.photo+'')" v-for="(val,index) of data.member"
						:key="index" :data-index="index" @erro="imageError"></image>
					<view class="group-member-btn" @tap="add">
						+
					</view>
					<view class="group-member-btn" @tap="reduce">
						-
					</view>
				</view>
				<view class="uni-list-cell" style="height: 80px!important;" @tap="goGroupQrcode">
					<view class="uni-media-list uni-list-cell-navigate uni-navigate-right">
						<view class="group-tips">
							<text class="msg-size">分享群</text>
							<text class="" style="color: #8f8f94;">分享群二维码</text>
						</view>
					</view>
				</view>
				<view class="list-member-count"></view>
				<view class="uni-list-cell" @tap="groupNickname(data.my_nickname)">
					<view class="uni-media-list uni-list-cell-navigate uni-navigate-right">
						<text class="msg-size">我在本群的昵称</text>
						<view class="uni-media-list-logo qun-id">
							<view class="show_text msg-size">{{data.my_nickname}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" @tap="goSet('name')">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<view>
							<text class="msg-size">群聊昵称</text>
							<view class="msg-size show_text">{{data.group.name}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" @tap="groupCopy">
					<view class="uni-list-cell-navigate uni-navigate-right noarrow">
						<view>
							<text class="msg-size">群ID(点击复制)</text>
							<view class="msg-size show_text">{{data.group.list_id + ''}}</view>
						</view>
					</view>
				</view>

				<view class="list-member-count">
				</view>

				<view class="uni-list-cell" @tap="goBigRedList">
					<view class="uni-media-list uni-list-cell-navigate uni-navigate-right">
						<text class="msg-size">长时间未领取红包</text>
						<view class="uni-media-list-logo photo_qrcode">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="switch_class">
			<view class="uni-list">
				<view class="uni-list-cell uni-list-cell-pd">
					<view class="uni-list-cell-db msg-size">置顶聊天</view>
					<switch :checked="!!data.top" @change="msgTop" />
				</view>
				<view class="uni-list-cell uni-list-cell-pd">
					<view class="uni-list-cell-db  msg-size">消息免打扰</view>
					<switch :checked="!!data.is_disturb" @change="disturb" />
				</view>
				<view v-if="data.type == 1" class="uni-list-cell" @click="clearLog(3,'确定要清空我的聊天记录吗？')">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<view class="qun-gonggao">
							<text class="msg-size">清空我的聊天记录</text>
							<view class="show_text_ msg-size"></view>
						</view>
					</view>
				</view>
				<view v-if="data.type == 1" class="uni-list-cell" @click="clearLog(2,'确定要清空所有聊天记录吗？')">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<view class="qun-gonggao">
							<text class="msg-size">清空聊天记录</text>
							<view class="show_text_ msg-size"></view>
						</view>
					</view>
				</view>
				<view v-if="data.type == 0" class="uni-list-cell" @click="clearLog(1,'确定要清空所有聊天记录吗？')">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<view class="qun-gonggao">
							<text class="msg-size">清空聊天记录</text>
							<view class="show_text_ msg-size"></view>
						</view>
					</view>
				</view>

				<view v-if="data.type == 0" class="uni-list-cell" @click="clearLog(2,'确定要一键销毁双方聊天记录吗')">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<view class="qun-gonggao">
							<text class="msg-size">一键销毁双方记录</text>
							<view class="show_text_ msg-size"></view>
						</view>
					</view>
				</view>

				<!--<view class="uni-list-cell"  v-if="data.type == 0"  @tap="xiaoHui">-->
				<!--<view class="uni-list-cell-navigate uni-navigate-right">-->
				<!--<view class="qun-gonggao">-->
				<!--<text  class="msg-size">一键销毁双方记录</text>-->
				<!--<view class="show_text_ msg-size"></view>-->
				<!--</view>-->
				<!--</view>-->
				<!--</view>-->
				<view class="uni-list-cell" v-if="user_id != 5800" @tap="goKefu">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<view class="qun-gonggao">
							<text class="msg-size">举报</text>
							<view class="show_text_ msg-size"></view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-navigate my-padding">
						<view class="qun-gonggao">
							<text class="msg-size">IP</text>
							<view class="show_text_ msg-size">
								{{data.ip}}
							</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell uni-list-cell-pd" v-if="0">
					<view class="uni-list-cell-db  msg-size">强提醒</view>
					<switch />
				</view>
			</view>

		</view>
		<view class="list-member-count">
		</view>


		<view class="del-btn" v-if="data.type == 1" @tap="leaveGroup">删除并退出</view>
		<!-- <view class="doButton" v-show="!data.is_action && data.type == 1">
			<button class="group-button" type="button" @tap="liveGroup">离开群聊</button>
		</view> -->


	</view>
</template>

<script>
	import _hook from '../../../common/_hook';
	import _data from '../../../common/_data';
	import _get from '../../../common/_get';
	import _mixins from '../../../common/_mixins';
	import _page from '../../../common/common';

	export default {
		data() {
			return {
				data: {
					member: [],
					group: {
						is_photo: 'default_group_photo/90.jpg',
					},
					is_action: 0,
					type: 1,
				},
				list_id: 0,
				user_id: 0
			};
		},
		computed: {
			staticPhoto() {
				return _data.staticPhoto();
			},
			isAction() {
				if (this.data.group.main_id == _data.data('user_info').id) {
					return true;
				}
				return false;
			},
			showKefu() {
				return this.my_data.id != 5880
			}
		},
		onShow() {
			this.initData();
		},
		methods: {
			initData() {
				_hook.routeSonHook();
				let _this = this;
				_this.$httpSend({
					path: '/im/message/getChatDetails',
					data: {
						list_id: _this.list_id,
					},
					success(data) {
						_this.data = data;
						if (data.type == 1) {
							uni.setNavigationBarTitle({
								title: data.group.name,
							});
						}
						let cache_data = _data.data('cache');
						if (data.type == 1 && !('group_photo_' + _this.list_id in cache_data)) {
							uni.downloadFile({
								url: _data.staticPhoto() + data.group.is_photo,
								success: (res) => {
									if (res.statusCode === 200) {
										cache_data['group_photo_' + _this.list_id] = res.tempFilePath;
										_data.data('cache', cache_data);
									}
								}
							});
						}

					}
				});
			},
			// 删除退出群聊
			leaveGroup() {
				let _this = this;
				uni.showModal({
					title: '重要提示',
					content: '确定要删除并退出吗?',
					confirmText: '确认',
					cancelText: '取消',
					confirmColor: 'red',
					cancelColor: '#353535',
					success: function(res) {
						if (res.confirm) {
							_this.$httpSend({
								path: '/im/remove/sign_out',
								data: {
									list_id: _this.list_id,
								},
								success: function(data) {
									if (data.code == 0) {
										uni.showToast({
											icon: 'none',
											title: '退出成功'
										})
										_data.localData('chat_list', []);
										_data.localData(_this.list_id, null);
										uni.switchTab({
											url: '/pages/chat/index'
										})
									} else {
										uni.showToast({
											icon: 'none',
											title: data.msg
										})
									}

								}
							})
						}
					},
				})
			},
			// 清除聊天我的
			clearLog(type, msg) {
				let _this = this;
				uni.showModal({
					title: '重要提示',
					content: msg,
					confirmText: '确认',
					cancelText: '取消',
					confirmColor: 'red',
					cancelColor: '#353535',
					success: function(res) {
						if (res.confirm) {
							_this.$httpSend({
								path: '/im/remove/del_log',
								data: {
									list_id: _this.list_id,
									type: type
								},
								success: function(data) {
									uni.showToast({
										icon: 'none',
										title: '清除成功'
									})
									_data.localData(_this.list_id, null);
									_this.initData();
								}
							})
						}
					},
				})
			},
			toMember() {
				uni.navigateTo({
					url: './group_member?list_id=' + this.list_id
				})
			},
			reduce() {
				uni.navigateTo({
					url: ('./reduce?list_id=' + this.list_id),
					animationType: 'slide-in-bottom',
				});
			},
			goKefu() {
				this.$httpSend({
					path: '/im/get/kefu',
					success(data) {
						console.log('客服数据', data)
						uni.navigateTo({
							'url': '/pages/chat/message?list_id=' + data
						})
					}
				});
			},
			groupNickname(val) {
				console.log(val)
				uni.navigateTo({
					url: 'group_nickname?' + _page.pageParam({
						list_id: this.list_id,
						nickname: val
					})
				})
			},
			disturb(e) {
				//消息免打扰
				let value = e.detail.value ? 1 : 0;
				let _this = this;
				this.$httpSend({
					path: '/im/message/msgDisturb',
					data: {
						list_id: this.list_id,
						value: value
					},
					success(data) {
						_data.localData('DISTURB:' + _this.list_id, value)
					}
				});
			},
			liveGroup() {
				//离开群聊
				let _this = this;
				uni.showModal({
					title: '重要提示',
					content: '确定要离开群聊吗?',
					confirmText: '离开',
					cancelText: '再看看',
					confirmColor: 'red',
					cancelColor: '#353535',
					success: function(res) {
						if (res.confirm) {
							_this.$httpSend({
								path: '/im/message/liveGroup',
								data: {
									list_id: _this.list_id
								},
								success(data) {
									console.log(data)
									uni.switchTab({
										url: '../index'
									});
								}
							});
						}
					}
				});
			},
			imageError(e) {
				console.log("图片加载失败!", e.detail);
				let index = e.currentTarget.dataset.index
				console.log(e.currentTarget.dataset.index)
				//替换index对应的图片
				console.log(this.data.member[index].photo)
				this.data.member[index].photo = '/default_photo_path.png';
			},
			removeGroup() {
				let _this = this;
				uni.showModal({
					title: '重要提示',
					content: '此操作数据不可恢复,确定要解散该群吗?',
					confirmText: '不解散',
					cancelText: '解散',
					confirmColor: '#353535',
					cancelColor: 'red',
					success: function(res) {
						if (!res.confirm) {
							_this.$httpSend({
								path: '/im/message/removeGroup',
								data: {
									list_id: _this.list_id,
								},
								success(data) {
									uni.switchTab({
										url: '../index'
									});
								}
							});
						}
					}
				});
			},
			photo(path) {
				return this.staticPhoto + path + '?_=' + Math.random();
			},
			msgChange(e) {
				let value = e.detail.value ? 1 : 0;
				if (this.data.is_action != 2) {
					uni.showModal({
						content: '没有权限设置',
						showCancel: false,
					});
					return;
				}
				this.$httpSend({
					path: '/im/message/groupIsMsg',
					data: {
						list_id: this.list_id,
						value,
					},
					success(data) {
						return;
						uni.showToast({
							title: '设置成功',
							duration: 1500
						});
					}
				});
			},
			nimingChange(e) {
				let value = e.detail.value ? 1 : 0;
				if (!this.data.is_action && this.data.is_action != 2) {
					uni.showModal({
						content: '没有权限设置',
						showCancel: false,
					});
					return;
				}
				this.$httpSend({
					path: '/im/message/nimingChange',
					data: {
						list_id: this.list_id,
						value,
					},
					success(data) {
						return;
						uni.showToast({
							title: '设置成功',
							duration: 1500
						});
					}
				});
			},
			msgTop(e) {
				let _this = this,
					value = e.detail.value ? 1 : 0;
				this.$httpSend({
					path: '/im/message/chatTop',
					data: {
						list_id: this.list_id,
						value,
					},
					success(data) {
						/** 更新对话列表数据 */
						for (let i = 0, local_chat_list = _data.localData('chat_list'), j = local_chat_list
								.length; i < j; i++) {
							if (local_chat_list[i].list_id == _this.list_id) {
								let action_list_data = local_chat_list[i];
								local_chat_list.splice(i, 1);
								local_chat_list.unshift(action_list_data);
								_data.localData('chat_list', local_chat_list);
								uni.$emit('data_chat_list', local_chat_list);
								break;
							}
						}

						return;
						uni.showToast({
							title: '设置成功',
							duration: 1500
						});
					}
				});
			},
			switch1Change(e) {
				let _this = this,
					value = e.detail.value ? 1 : 0;
				this.$httpSend({
					path: '/im/message/speekChecked',
					data: {
						list_id: this.list_id,
						value: value,
					},
					success(data) {
						/** 更新对话列表数据 */
						for (let i = 0, local_chat_list = _data.localData('chat_list'), j = local_chat_list
								.length; i < j; i++) {
							if (local_chat_list[i].list_id == _this.list_id) {
								let action_list_data = local_chat_list[i];
								local_chat_list.splice(i, 1);
								local_chat_list.unshift(action_list_data);
								_data.localData('chat_list', local_chat_list);
								uni.$emit('data_chat_list', local_chat_list);
								break;
							}
						}
					}
				});
			},
			editChange(e) {
				let _this = this,
					value = e.detail.value ? 1 : 0;
				this.$httpSend({
					path: '/im/vendor/editChange',
					data: {
						list_id: this.list_id,
						value: value,
					},
					success(data) {

					}
				});
			},
			goGroupQrcode() {
				uni.navigateTo({
					url: ('./group_qrcode?list_id=' + this.list_id),
					animationType: 'slide-in-bottom',
				});
			},
			goSetGroupPhoto() {
				if (this.data.is_action != 2 && !this.data.group.edit_photo) {
					uni.showToast({
						title: '没有权限设置',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				uni.navigateTo({
					url: ('../../set/group_photo?list_id=' + this.list_id),
					animationType: 'slide-in-bottom',
				});
			},
			goSetAdmin(type) {
				switch (type) {
					case 1:
						if (this.data.is_action != 2) {
							console.log("this.data.is_action", this.data.is_action)
							uni.showToast({
								title: '群主才能设置',
								icon: 'none',
								duration: 1000
							});
							return;
						}
						break;
					case 2:
						if (this.data.is_action != 2) {
							uni.showModal({
								content: '没有权限设置',
								showCancel: false,
							});
							return;
						}
						break;
					case 3:
						if (this.data.is_action != 2) {
							uni.showModal({
								content: '没有权限设置',
								showCancel: false,
							});
							return;
						}
						break;
					case 4:
						if (this.data.is_action != 2) {
							uni.showModal({
								content: '没有权限设置',
								showCancel: false,
							});
							return;
						}
						break;
					default:
						return;
						break;
				}
				let url = '../../set/group_admin?list_id=' + this.list_id + '&type=' + type;
				if (type == 3) url = '../../set/group_trans?list_id=' + this.list_id + '&type=' + type;
				if (type == 4) url = '../../set/copy_group?list_id=' + this.list_id + '&type=' + type;
				uni.navigateTo({
					url: url,
					animationType: 'slide-in-bottom',
				});
			},
			goSet(type) {
				if (this.data.is_action != 2 && !this.data.group.edit_photo) {
					uni.showToast({
						title: '没有权限设置',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				uni.navigateTo({
					url: ('../../set/message_more?list_id=' + this.list_id + '&type=' + type),
					animationType: 'slide-in-bottom',
				});
			},
			goDetails(user_id) {
				if (this.data.type && this.data.is_action != 2) {
					uni.showToast({
						title: '没有权限查看',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				uni.navigateTo({
					url: ('../../details/index?user_id=' + user_id + '&type=' + this.data.type + '&list_id=' + this
						.list_id + "&is_action=" + this.data.is_action),
				});
			},
			add() {
				if (this.data.is_action != 2) {
					uni.showModal({
						content: '没有权限设置',
						showCancel: false,
					});
					return;
				}
				uni.navigateTo({
					url: ('../../friend/index_list?list_id=' + this.list_id),
					animationType: 'slide-in-bottom',
				});
			},
			reduce() {
				if (this.data.is_action != 2) {
					uni.showModal({
						content: '没有权限设置',
						showCancel: false,
					});
					return;
				}
				uni.navigateTo({
					url: ('./reduce?list_id=' + this.list_id),
					animationType: 'slide-in-bottom',
				});
			},
			groupCopy(value) {
				_page.uniCopy({
					content: this.data.group.list_id,
					success: function() {
						uni.showToast({
							'title': '复制成功',
							duration: 2000
						})
					}
				})
			},
			replaceStr(str) {
				console.log(str)
				return str.substr(10)
			},
			getRedChange(e) {
				let _this = this,
					value = e.detail.value ? 1 : 0;
				this.$httpSend({
					path: '/im/vendor/getRedChange',
					data: {
						list_id: this.list_id,
						value: value,
					},
					success(data) {

					}
				});
			},
			goBigRedList() { //todo 长时间未领取红包列表
				uni.navigateTo({
					url: "../message/red_list?list_id=" + this.list_id
				})
			},
			manarger() {
				uni.navigateTo({
					url: '../message/qun_manage?list_id=' + this.list_id
				})
			},
			xiaoHui() { //销毁聊天记录
				_get.xiaoHui({
					type: this.data.type,
					list_id: this.list_id
				}, function() {

				})
			}
		},
		onLoad(option) {
			this.list_id = option.list_id;
			this.data.type = option.type;
		},
	}
</script>

<style lang="scss">
	.noarrow::after {
		content: "";
		display: none !important;
	}

	.uni-card {
		margin: 0;
	}

	.del-btn {
		background: #fff;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #c5474d;
		font-size: 30rpx;
	}

	.group-tips {
		display: flex;
		flex-direction: column;
		height: 100rpx;
	}

	.group-member-list::after {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		left: 10px;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #e7e6ef;
	}

	.group-member-list {
		display: flex;
		flex-wrap: wrap;
		position: relative;

		.group-member-item {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin: 32rpx;
		}

		.group-member-btn {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: #efefef;
			margin: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
			color: #b6b6b8;
			font-weight: bold;
		}
	}

	.chatgroup-box {
		display: flex;
		flex-direction: column;

		.chatgroup-center {
			display: flex;
			justify-content: center;
			align-items: center;

			.chatgroup-tag {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 40rpx;
				background-color: #f7f7f7;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 0 10rpx;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					font-size: 24rpx;
					color: #ccc;
				}
			}


		}

		.chatgroup-top {
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding: 10rpx 40rpx;
			position: relative;

			.chatgroup-avatar-group {
				display: flex;
				flex-wrap: wrap;
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 20rpx;
				box-sizing: border-box;
				padding: 20rpx 10rpx;
				justify-content: center;
				align-items: center;

				.chatgroup-avatar-item-0 {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.chatgroup-avatar-item-1 {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.chatgroup-avatar-item-2 {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}

				.chatgroup-avatar-item-3 {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}

				.chatgroup-avatar-item-4 {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.chatgroup-avatar-item-5 {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}

				.chatgroup-avatar-item-6 {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}

			.chatgroup-avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.chatgroup-title {
				flex: 1;
				font-size: 40rpx;
				font-weight: bold;
				width: 400rpx; //固定宽度
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}

		.chatgroup-top:after {
			font-family: uniicons;
			content: '\e583';
			position: absolute;
			right: 12px;
			top: 50%;
			transform: translateY(-50%);
			color: #bbb;
			font-size: 40rpx;
		}

		.chatgroup-list {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 200rpx;

			.chatgroup-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 60rpx;
					height: 60rpx;
				}

				text {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #ccc;
				}
			}
		}

	}


	.my-padding {
		padding-right: 0 !important;
	}

	.page {
		max-width: 100%;
	}

	.photos {
		background-color: #FFFFFF;

	}

	.group-button {
		width: 92%;
		background-color: #5693ee;
		color: white;
		height: 70upx;
		line-height: 70upx !important;
		border-radius: 40upx;
		font-size: 36upx;
		cursor: pointer;
		margin-top: 20upx;
	}

	.photo_main {
		margin: 7upx 0 0 40upx;
		display: inline-block;
		text-align: center;
	}

	.qun-gonggao {
		display: flex;
		justify-content: space-between;
		width: 95%;
	}

	.photo {
		width: 106upx;
		height: 106upx;
		border-radius: 7upx;
	}

	.name_class {
		font-size: 12px;
		color: black;
		max-width: 106upx;
		overflow: hidden;
		white-space: nowrap;
	}

	.msg-size {
		font-size: 16px !important;
	}

	.title {
		background: #FFFFFF;
		padding: 10px 20px 10px 23px;
		border-top: 1px solid #e5e5e5;
		display: flex;
		justify-content: space-between;
	}

	.title-msg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		color: black !important;
		font-size: 16px !important;
	}

	.title-img {
		display: flex;
		align-items: center;
	}

	.title_val {
		display: inline-block;
	}

	.switch_class {
		margin-top: 20upx;
	}


	.show_text {
		position: absolute;
		text-align: right;
		right: 30px;
		color: #8f8f94;
		display: inline-block;
		height: 30px;
		width: 200rpx; //固定宽度
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.photo_qrcode {
		width: 52upx;
		height: 52upx;
		margin-right: 0upx;
	}

	.uni-list-cell-navigate.uni-navigate-right:after {
		font-size: 20px !important;
	}

	.uni-list-cell {
		height: 60px !important
	}

	.uni-list-cell-pd {
		padding: 0px 10px 0 12px !important;
	}

	.uni-media-list-logo {
		margin-right: 0px !important;
	}

	.qun-id {
		display: flex;
		justify-content: center;
		align-items: center;
		word-break: break-all;
	}

	.item-left-img {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10px 0 25px;
	}

	.item-right-img {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30px;
	}

	.item-right-img image {
		width: 20px;
		height: 20px;
	}

	.item-left-img image {
		width: 45px;
		height: 45px;
		border-radius: 10px;
	}

	.member-list {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;

	}

	.member-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-top: 1px solid #ebebeb;
	}

	.item-left {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.item-right {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 30px 0 20px;
		color: #435d90;
	}

	.yaoqing-menber {
		display: flex;
		align-items: center;
		padding: 10px 0 10px 30px;
		background-color: #ffffff;
	}

	.yaoqing {
		margin-left: 5px;
	}

	.list-member-count {
		padding: 5px 0 5px 30px;
		background-color: #f9f9f9;
	}

	.doButton {
		padding: 10px;
	}
</style>