群聊

zhdxcz · Jun 14, 2017 · e61b9f8 · e61b9f8
1 parent abe0a62
commit e61b9f8
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 35 deletions.
diff --git a/src/components/findandMe/findandMe.vue b/src/components/findandMe/findandMe.vue
@@ -158,7 +158,6 @@
 		},
 		mounted(){
 			this.userHeader=imgurl + this.userInfo.avatar
-			console.log(this.userHeader)
 			circle().then( (res) =>{
 				for(let i=0; i < res.length; i++){
 					this.newGetImage=res[0].headurl;

diff --git a/src/frames/conversation/chatmessage/chatmessage.vue b/src/frames/conversation/chatmessage/chatmessage.vue
@@ -82,7 +82,7 @@
 		transform:translateX(100%)
 	}
 	.child_page{
-		position: absolute;
+		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;

diff --git a/src/frames/conversation/chatmessage/groupchatmessage.vue b/src/frames/conversation/chatmessage/groupchatmessage.vue
@@ -1,44 +1,49 @@
 <template>
 	<section class="child_page">
-		<head-top crossover="聊天信息(3)"></head-top>
+		<head-top crossover="聊天信息"></head-top>
 		<section class="groupchat">
 			<ul class="groupchat_ul clear">
-				<li>
-					<img src="../../../images/a.jpg" alt="">
-					<span class="ellipsis">百里辰</span>
+				<li v-for="item in allPeople">
+					<img :src="imgurl + item.avatar" alt="">
+					<span class="ellipsis">{{item.username}}</span>
 				</li>
 			</ul>
 		</section>
 		<section class="chat">
 			<ul>
 				<li>
-					<div>使用听筒播放语音</div>
+					<div>群聊名称</div>
+					<div class="voice-music">开饭啦~</div>
+				</li>
+				<li>
+					<div>群公告</div>
+				</li>
+
+			</ul>
+			<ul>
+				<li>
+					<div>查看聊天记录</div>
+				</li>
+				<li>
+					<div>消息免打扰</div>
 					<div class="push-button">
 						<input class='tgl tgl-light' id='new' type='checkbox'>
 						<label class='tgl-btn' for='new'></label>
 					</div>
 				</li>
 				<li>
-					<div>回车键发送信息</div>
+					<div>置顶聊天</div>
 					<div class="push-button">
 						<input class='tgl tgl-light' id='video' type='checkbox' checked="checked">
 						<label class='tgl-btn' for='video'></label>
 					</div>
 				</li>
 				<li>
-					<div>聊天背景</div>
-				</li>
-				<li>
-					<div>表情管理</div>
-				</li>
-			</ul>
-			<h1 class="chatrecord">聊天记录</h1>
-			<ul>
-				<li>
-					<div>聊天记录迁移</div>
-				</li>
-				<li>
-					<div>清空聊天记录</div>
+					<div>保存到通讯录</div>
+					<div class="push-button">
+						<input class='tgl tgl-light' id='video' type='checkbox' checked="checked">
+						<label class='tgl-btn' for='video'></label>
+					</div>
 				</li>
 			</ul>
 		</section>
@@ -49,19 +54,31 @@
 </template>
 
 <script>
-	import headTop from 'src/components/header/head'
+	import headTop from 'src/components/header/head';
+	import {mapState} from 'vuex';
+	import {imgurl} from 'src/config/env';
 	export default{
 		data(){
 			return{
-				
+				allPeople:[]
 			}
 		},
 		created(){
 
+		},
+		computed:{
+			...mapState([
+			    "allgroup"
+			]),
 		},
 		mounted(){
+			this.$nextTick(()=>{
+				console.log(this.allgroup)
+			})
 			
+			//this.allPeople=this.allGroup
 		},
+
 		components:{
 			headTop,
 		},
@@ -82,7 +99,7 @@
 		transform:translateX(100%)
 	}
 	.child_page{
-		position: absolute;
+		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
@@ -137,11 +154,8 @@
 				@include sizeColor(0.64rem,#333);
 				@include justify;
 				align-items:center;
-				.push-button{
-					
-				}
 				.voice-music{
-					@include sizeColor(0.512rem,#9c9c9c);
+					@include sizeColor(0.6rem,#9c9c9c);
 				}
 			}
 			li:last-child{

diff --git a/src/frames/conversation/groupchat.vue b/src/frames/conversation/groupchat.vue
@@ -115,7 +115,7 @@
 
 <script>
 	import headTop from 'src/components/header/head';
-	import {mapState, mapActions,} from 'vuex';
+	import {mapState, mapActions, mapMutations} from 'vuex';
 	import {groupChat, chatData, getHistory} from 'src/service/getData';
 	import {imgurl} from 'src/config/env';
 	import 'src/config/swiper.min.js' 
@@ -144,6 +144,7 @@
 				chatData:{},
 				imgurl,
 				userId:'',
+				allgroup:[],	//所有群聊信息
 			}
 		},
 		created(){
@@ -175,7 +176,7 @@
 		},
 		computed:{
 			...mapState([
-			    "infor", "userInfo", 
+			    "infor", "userInfo","allGroup"
 			]),
 		},
 		beforeDestroy(){
@@ -187,20 +188,47 @@
 			...mapActions([
                 'getUserInfo',
             ]),
+            ...mapMutations([
+                'GET_ALLGROUP',
+            ]),
             async groupList(offset){
             	const groupData = await getHistory({"offset":this.offset, "limit":20} )
             	if(groupData.history.length < 20){
             		this.underscore=true;
             	}
             	if(groupData.status == 200){
+
 	            	for(let i=0; i<groupData.history.length; i++){
 	            		
 	            		if(!groupData.history[i].content){//清空 空 数据
 	            			groupData.history.splice(i,1);
 	            			i=i-1
 	            		}
+
 	            	}
             		this.groupconversine = [...groupData.history, ...this.groupconversine]
+
+            		this.allgroup=[...this.groupconversine]
+					Array.prototype.unique = function(){//去重
+						var res = [this[0]];
+						for(var l = 1; l < this.length; l++){
+							var repeat = false;
+							for(var j = 0; j < res.length; j++){
+								if(this[l].user_id == res[j].user_id){
+									repeat = true;
+									break;
+								}
+							}
+							if(!repeat){
+								res.push(this[l]);
+							}
+						}
+						return res;
+					}
+					var arr = this.allgroup;
+					this.GET_ALLGROUP(arr.unique())//保存所有人数据信息
+					console.log(this.allgroup)
+					
             	}
         		this.$nextTick(() => {
             		this.loadStatus=false;

diff --git a/src/frames/conversation/singlechat.vue b/src/frames/conversation/singlechat.vue
@@ -136,14 +136,13 @@
 			userWord().then((res) => {
 				//this.conversine=[...res]
 			});	
-
 		},
 		components:{
 			headTop,
 		},
 		computed:{
 			...mapState([
-			    "infor", "userInfo", 
+			    "infor", "userInfo",
 			]),
 			
 		},

diff --git a/src/vuex/index.js b/src/vuex/index.js
@@ -8,15 +8,16 @@ import actions from './action'
 Vue.use(Vuex)
 
 const state = {
-	mute: false,				//是否静音
+	mute: false,			//是否静音
 	computershow: true,		//是否电脑登录
 	infor: {},				//联系人信息
-	contactList: [],			//对话列表
+	contactList: [],		//对话列表
 	userInfo: {},			//用户信息
 	newImg: '',				//主题图片地址
 	imagestatus: false,
 	firendwarn: true,		//朋友圈提示红色按钮
-	consumerthing: false,		//登录弹窗显隐
+	consumerthing: false,	//登录弹窗显隐
+	allgroup:[],			//所有群聊的人
 
 }
 

diff --git a/src/vuex/mutation-types.js b/src/vuex/mutation-types.js
@@ -9,4 +9,5 @@ export const ENLARGE_HEAD = 'ENLARGE_HEAD'
 export const SAVE_THEMIMG = 'SAVE_THEMIMG'
 export const CHANGE_RED = 'CHANGE_RED'
 export const LOGIN_COVER = 'LOGIN_COVER'
+export const GET_ALLGROUP = 'GET_ALLGROUP'
 
diff --git a/src/vuex/mutation.js b/src/vuex/mutation.js
@@ -11,6 +11,7 @@ import {
 	SAVE_THEMIMG,
 	CHANGE_RED,
 	LOGIN_COVER,
+	GET_ALLGROUP,
 } from './mutation-types.js'
 
 export default {
@@ -57,5 +58,10 @@ export default {
 	},
 	[LOGIN_COVER](status,consumerthing){
 		status.consumerthing=consumerthing;
+	},
+	//获取所有群聊人信息
+	[GET_ALLGROUP](status,allgroup){
+		status.allgroup=allgroup
+		console.log(status.allgroup)
 	}
 }