yql/pages/chat/message/group_member.vue

<template>
	<view class="page">
		<view class="list-footer" v-if="data.type == 1">
			<view class="searchOut">
				<uni-search-bar ref="searchBar" placeholder="搜索" bgColor="#F7F7F7" :show="false" @confirm="search"
					@search="search">
				</uni-search-bar>
			</view>
			<view class="member-list">
				<view class="member-item" v-for="(val,index) in show_men" :key="index" @tap="goDetails(val.user_id)" v-if="isShow">
					<view class="item-left">
						<view class="item-left-img">
							<image :src="photo(val.photo+'')" :lazy-load="true" :data-index="index" @erro="imageError">
							</image>
						</view>
						<view class="item-text">
							<text>{{val.show_name}}</text>
							<text class="tag-admin" v-show="val.is_admin == 2">群主</text>
							<text class="tag-admin" v-show="val.is_admin == 1">管理员</text>
						</view>
					</view>
					<view class="item-right">
						<!-- <view class="item-right-img">
							<image src="/static/theme/default/qunzhu.png" v-show="val.is_admin == 2"></image>
							<image src="/static/theme/default/guanliyuan.png" v-show="val.is_admin == 1"></image>
						</view> -->
						<view class="item-right-text">
							{{val.is_online == 1 ? '在线' : '离线'}}
						</view>
					</view>
				</view>
			</view>
			<view class="yaoqing-menber">
				<view class="group-member-btn-box">
					<view class="group-member-btn" @tap="add">
						+
					</view>
					<text class="tip">添加</text>
				</view>
				<view class="group-member-btn-box">
					<view class="group-member-btn" @tap="reduce">
						-
					</view>
					<text class="tip">删除</text>
				</view>
			</view>
		</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 _page from '../../../common/common';
	import uniSearchBar from '@/components/mehaotian-search/mehaotian-search.vue';
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				show_men: [],
				isShow: true,
				data: {
					
					chat_msg: '55',
					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() {
			_hook.routeSonHook();
			let _this = this;
			_this.$httpSend({
				path: '/im/message/getChatDetails',
				data: {
					list_id: _this.list_id,
				},
				success(data) {
					_this.data = data;
					_this.show_men = data.member;
					console.log(_this.show_men,'_this.show_men');
					if (data.type == 1) {
						uni.setNavigationBarTitle({
							title: `全部成员（${data.member.length}人）`,
						});
					}
					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);
								}
							}
						});
					}

				}
			});
		},
		methods: {
			search(chat_msg) {
				chat_msg = chat_msg.trim();
				this.isShow = false
				console.log('chat_msg',chat_msg);
				let arr = []
				if(chat_msg == '' || chat_msg === undefined) {
					this.show_men = this.data.member
					this.isShow = true
				}else {
					this.data.member.forEach(item => {
						if(item.show_name.indexOf(chat_msg) != -1) {
							arr.push(item)
						}
					})
					this.$set(this,'show_men',arr)
					this.isShow = true
				}
				
				// this.show_men = arr
				
				console.log(this.show_men,'this.show_men');
			},
			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() {
				uni.navigateTo({
					url: ('../../friend/index_list?list_id=' + this.list_id),
					animationType: 'slide-in-bottom',
				});
			},
			reduce() {
				uni.navigateTo({
					url: ('./reduce?list_id=' + this.list_id),
					animationType: 'slide-in-bottom',
				});
			},
			groupCopy(value) {
				_page.uniCopy({
					content: this.data.group.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 scoped>
	.item-text {
		display: flex;
		align-items: center;
	}

	.item-right-text {
		color: #80c8a8;
	}

	.tag-admin {
		border: 1px solid #80c8a8;
		margin-left: 20rpx;
		color: #80c8a8;
		height: 30rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 15rpx;
		padding: 0 10rpx;
	}

	.group-member-btn-box {
		display: flex;
		flex-direction: column;
		align-items: center;

		.tip {
			font-size: 30rpx;
			color: #333;
		}
	}

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

	page {
		background: #fff;
	}

	.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;
		right: 30px;
		color: #8f8f94;
		display: inline-block;
		/* width: 320px; */
		overflow: hidden;
		height: 30px;
	}

	.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: 50%;
	}

	.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>