CBB3/pages/chat/group/info/groupInfo.vue

<template>
	<view>
		<uni-nav-bar statusBar backgroundColor="#F8F6F6" fixed title="群聊基本信息" left-icon="left" @clickLeft="utils.navigateBack()" />
		<view class="cath-user fx-r">
			<view class="item fx-h fx-bc fx-ac" v-for="item in data.chatData" @tap="tapOpen" :data-url="'../userShow?usercode=' + item.uid" >
				<image class="avatar" :src="item.avatar == '' ? '/static/chat/user-avatar.png' : item.avatar" mode="aspectFill"></image>
				<view class="manager" v-if="item.is_manager">群主</view>
				<view class="admin" v-else-if="item.is_admin">管理</view>
				<view class="text">{{item.nickname}}</view>
			</view>  
			<view class="item fx-h fx-bc fx-ac" @tap="tapAdd" v-if="data.chat.is_manager || data.chat.is_admin">
				<image  class="avatar" src="/static/chat/id_chat_add.png" mode="aspectFill"></image>
				<view class="text">添加成员</view>
			</view>
			<view class="item fx-h fx-bc fx-ac" @tap="tapJdd" v-if="data.chat.is_manager || data.chat.is_admin">
				<image  class="avatar" src="/static/chat/id_chat_reduce.png" mode="aspectFill"></image>
				<view class="text">移除成员</view>
			</view>
		</view>
		<view class="chat-more" @tap="tapGroupUser" v-if="data.is_more">查看更多成员</view>
		

		
		
		<view class="list-item">
			
			<view class="item fx-r fx-bc fx-ac" @tap="tapUpChatAavatr" v-if="data.chat.is_manager">
				<view class="label">群头像</view>
				<view class="fx-g1"></view>
				<image :src="data.chat.img == '' ? '/static/chat/group_chat.png' : data.chat.img" style="width: 40px;height: 40px;border-radius: 20px;" mode="aspectFill"></image>
				<image class="pve" src="/static/chat/ic_next.png" mode="widthFix"></image>
			</view>
			
			<view class="item fx-r fx-bc fx-ac" @tap="tapRkname">
				<view class="label">群聊名称</view>
				<view class="fx-g1"></view>
				<view class="name">{{data.name}}</view>
				<image class="pve" src="/static/chat/ic_next.png" mode="widthFix"></image>
			</view>
			
			
			
			<view class="item fx-r fx-bc fx-ac" @tap="tapOpen" :data-url="'groupInfo/qrcode?groupId=' + groupId + '&name=' + data.name + '&img=' + encodeURIComponent(data.img)">
				<view class="label">群二维码</view>
				<view class="fx-g1"></view>
				<image src="/static/chat/id-qrcode.svg" style="width: 20px;height: 20px;"></image>
				<image class="pve" src="/static/chat/ic_next.png" mode="widthFix"></image>
			</view>
			
		
			
			<view class="item fx-r fx-bc fx-ac" @tap="tapOpen" :data-url="'groupInfo/msg?groupId=' + groupId + '&name=' + data.name + '&msg=' + encodeURIComponent(data.msg)">
				<view class="label">群公告</view>
				<view class="fx-g1"></view>
				<view class="name">
					{{data.msg}}
				</view>
				<image class="pve" src="/static/chat/ic_next.png" mode="widthFix"></image>
			</view>
			
			<view class="item fx-r fx-bc fx-ac" @tap="tapNotOrder" v-if="data.chat.is_manager || data.chat.is_admin">
				<view class="label" style="color: red;">不持单会员</view>
				<view class="fx-g1"></view>
				<image class="pve" src="/static/chat/ic_next.png" mode="widthFix"></image>
			</view>
			
			<view class="item fx-r fx-bc fx-ac" @tap="tapGrouAmin" v-if="data.chat.is_manager">
				<view class="label">群管理</view>
				<view class="fx-g1"></view>
				<image class="pve" src="/static/chat/ic_next.png" mode="widthFix"></image>
			</view>
			
			
			
			
		</view>
		
		
		<view class="list-item">
			<view class="item fx-r fx-bc fx-ac" @tap="tapSearch">
				<view class="label">聊天记录</view>
				<view class="fx-g1"></view>
				<image class="pve" src="/static/chat/ic_next.png" mode="widthFix"></image>
			</view>
			
			<view class="item fx-r fx-bc fx-ac" @tap="tapGroupUser">
				<view class="label">群成员</view>
				<view class="fx-g1"></view>
				<image class="pve" src="/static/chat/ic_next.png" mode="widthFix"></image>
			</view>
			
			<view class="item fx-r fx-bc fx-ac"  @tap="tapRemarkName">
				<view class="label">我在群里的昵称</view>
				<view class="fx-g1"></view>
				<view class="tag">{{data.chat.remark_name}}</view>
				<image class="pve" src="/static/chat/ic_next.png" mode="widthFix"></image>
			</view>
			
		</view>
		
		
		<view class="list-item">
			<view class="item fx-r fx-bc fx-ac">
				<view class="label">消息免打扰</view>
				<view class="fx-g1"></view>
				<image @tap="tapAction('is_disturb','0')" v-if="data.chat.is_disturb == 1" src="/static/chat/select-options-btn.png" class="icon-next"></image>
				<image @tap="tapAction('is_disturb','1')" v-else src="/static/chat/select-options.png" class="icon-next"></image>
			</view>
			
			  
			<view class="item fx-r fx-bc fx-ac" >
				<view class="label">置顶聊天</view>
				<view class="fx-g1"></view>
				<image @tap="tapAction('is_top','0')" v-if="data.chat.is_top == 1" src="/static/chat/select-options-btn.png" class="icon-next"></image>
				<image @tap="tapAction('is_top','1')" v-else src="/static/chat/select-options.png" class="icon-next"></image>
			</view>
		</view>
		
		
		<view class="list-item" style="margin-top: 10px;">
			<view class="item fx-r fx-bc fx-ac" style="padding: 20px 0;" @tap="tapClerAr">
				<view class="label">清空聊天记录</view>
			</view>
			
		</view>
		
		
		<!-- <view class="list-item" style="margin-top: 10px;">
			<view class="item fx-r fx-bc fx-ac" style="padding: 20px 0;" @tap="tapDelet">
				<view class="label">删除退出</view>
			</view>
			
		</view> -->
		
	</view>
</template>
<style lang="scss">
	.cath-user{padding: 10px;background: #fff;}
	.cath-user .item{width:16.5%;margin-bottom: 10px;position: relative;}
	.cath-user .item .avatar{width:40px;height: 40px;border-radius: 6px;}
	.cath-user .item .text{font-size: 12px;margin-top: 4px;overflow:hidden;white-space:nowrap; text-overflow:ellipsis;width: 16vw;text-align: center;}
	.cath-user .manager{transform:scale(0.5);border: 1px solid #faac06;border-radius: 6px;font-size: 10px;padding:0px 6px;color: #faac06;position: absolute;top: -6px;right: 0;background: #fff;}
	.cath-user .admin{transform:scale(0.5);border: 1px solid #2fbec0;border-radius: 6px;font-size: 10px;padding:0px 6px;color: #2fbec0;position: absolute;top: -6px;right: 0;background: #fff;}

	.list-item{background: #fff;padding: 0px 20px;margin-top: 10px;}
	.list-item .item{padding: 15px 0;border-bottom: 1px solid #f1f1f1;}
	.list-item .item:last-child{border-bottom: 0;}
	.list-item .item .label{font-size: 16px;color:$ic-default-text;}
	.list-item .item .name{color:$ic-default-text;font-size: 14px;max-width: calc(100% - 90px);}
	.list-item .item .tag{color:$ic-default-text;font-size: 14px;max-width: calc(100% - 90px);}
	.list-item .item .pve{width: 20px;}
	.icon-next{width:40px;height: 40px;}
	.chat-more{background: #fff;padding: 10px;color: #787878;text-align: center;}
</style>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
	    data() {
	        return {  
				data : {
					chat:{}
				},
				groupId : "",
				isPop:false
	        }  
	    },
		
		onLoad(option){
			this.groupId = option.groupId || "";
			uni.$on('glRkName',this.glRkName);
		},
		onUnload() {
			uni.$off('glRkName',this.glRkName);
		},
		onShow() {
			this.getData();
		},
	    methods: {
				getData:function(){
					uni.showLoading({	title: '获取数据中..'});
					this
						.request
						.post("chatChatFindGroup",{groupip:this.groupId})
						.then(res => {
							uni.hideLoading();
							if(res.code == 200) {
								this.data = res.data;
							} else {
								uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
							}
						})
						.catch(res=>{
							console.log(res);
							uni.hideLoading();
							uni.showModal({title: '系统提示',content: '加载失败，重新点击尝试！',showCancel: false});
						});
				},
				
				tapAdd:function(){
					var nAr = [];
					for(var i in this.data.chatData){
						nAr.push(this.data.chatData[i].uid);
					}
					uni.navigateTo({
						url : "groupInfo/add?groupId=" + this.groupId + "&notData=" + JSON.stringify(nAr)
					});
				},
				/**
				 * 减少成员
				 */
				tapJdd:function(){
					var nAr = [];
					for(var i in this.data.chatData){
						if(this.data.chat.is_manager) {
							if(this.data.chatData[i].is_manager)
								nAr.push(this.data.chatData[i].uid);
						}
						
						if(!this.data.chat.is_manager && this.data.chat.is_admin) {
							if(this.data.chatData[i].is_manager || this.data.chatData[i].is_admin)
								nAr.push(this.data.chatData[i].uid);
						}
					}
				
					uni.navigateTo({
						url : "groupInfo/jdd?groupId=" + this.groupId + "&notData=" + JSON.stringify(nAr)
					});
				},
				
				tapRkname:function(){
					if(!this.data.chat.is_manager) {
						return this.utils.Tip("你还不是管理人员");
					} 
					uni.navigateTo({
						url:"groupInfo/rkname?groupId=" + this.groupId + "&name=" + this.data.name + "&img=" + this.data.img
					})
				},
				/**
				 * 修改昵称
				 */
				tapRemarkName:function(){
					uni.navigateTo({
						url:"groupInfo/remark_name?groupId=" + this.groupId + "&name=" + this.data.chat.remark_name + "&img=" + this.data.img
					});
				},
				/**
				 * 不支持单会员
				 */
				tapNotOrder:function(){
					if(!this.data.chat.is_manager) {
						return this.utils.Tip("你还不是管理人员");
					} 
					uni.navigateTo({
						url:"groupInfo/jddNo?groupId=" + this.groupId 
					})
				},
				
				
				/**
				 * 设置数据
				 * @param {Object} name
				 * @param {Object} bool
				 */
				tapAction:function(name,bool){
					this
						.request
						.post("chatUpdateChat",{groupId:this.groupId,code:name,val:bool})
						.then(res=>{
							if(res.code == 200) {
								this.$set(this.data.chat,name,bool);
							} else {
								uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
							}
						});
				},
				tapGroupUser:function(){
					uni.navigateTo({
						url:"groupInfo/user?groupId=" + this.groupId
					})
				},
				/**
				 * 群管理
				 */
				tapGrouAmin:function(){
					uni.navigateTo({
						url:"groupInfo/admin?groupId=" + this.groupId
					})
				},
				
				/**
				 * open
				 * @param {Object} ev
				 */
				tapOpen:function(ev){
					let url = ev.currentTarget.dataset.url;
					this.utils.navigateTo(url);
				}, 
				/**
				 * 聊天记录
				 */ 
				tapSearch:function(){
					uni.navigateTo({
						url:"/pages/chat/search?groupId=" + this.groupId + "&type=group_chat"
					});
				},
				/**
				 * 清理数据
				 */	
				tapClerAr:function(){
					this.utils.showModal("你确定要清空聊天记录吗？", ()=>{
						uni.showLoading({ title:"提交数据中..." });
						this
							.request
							.post("clearChat",{groupId:this.groupId})
							.then(res=>{
								uni.hideLoading();
								if(res.code == 200) {
									this.utils.Tip("清理成功");
									uni.$emit('chatClear',this.groupId);
									setTimeout(()=>{
										uni.navigateBack();
									},200);
								} else {
									this.utils.Tip(res.msg);
								}
							})
							.catch(err=>{
								uni.hideLoading();
								this.utils.Tip("加载失败，请重新尝试");
							});
					});
				},
				 
				
				tapDelet:function(){
					this.utils.showModal("你确定要退出群聊吗？", ()=>{
						uni.showLoading({ title:"提交数据中..." });
						this.request.post("chatGroupRemove",{groupId:this.groupId})
							.then(res=>{
								uni.hideLoading();
								if(res.code == 200) {
									this.utils.Tip("退出成功");
									uni.$emit('chatDel',this.groupId);
									setTimeout(()=>{
										uni.navigateBack();
									},200);
								} else {
									this.utils.Tip(res.msg);
								}
							})
							.catch(err=>{
								uni.hideLoading();
								this.utils.Tip("加载失败，请重新尝试");
							});
					});
				},
				
				glRkName:function(data){
					if(this.groupId == data.groupId) {
						this.$set(this.data.chat,"remark_name",data.name);
					}
				},
				tapUpChatAavatr:function(){
					// #ifdef APP-PLUS
						this.$store.dispatch('permission/requestPermissions', 'WRITE_EXTERNAL_STORAGE').then(res => {
							console.log(res);
							if(res !== 1) return;
							this.tapUpChatAavatrS();
						});   
						return;
					// #endif
					this.tapUpChatAavatrS();
				},
				
				/**
				 * 更换群头像
				 */
				tapUpChatAavatrS:function(){
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						success: (res) => {
							let img = res.tempFilePaths[0];
							this.utils.loadIng();
							this
								.request
								.uploadFile("chatGroupAvatar",img,"file",{groupId:this.groupId})
								.then(res2 => {
									uni.hideLoading();
									if (res2.code == 200) {
										this.data.chat.img = res2.data.img;
										this.$forceUpdate();
									} else {
										this.utils.Tip(res2.msg);
									}
								})
								.catch(err => {
									uni.hideLoading();
									this.utils.Tip("网络错误，请稍后尝试");
								});
						}
					});
				}
				
			}
	}
</script>