Merge pull request bailicangdu#6 from bailichen/master

hebing

.gitignore

@@ -1,5 +1,5 @@
 .DS_Store
 node_modules/
-dist/
-npm-debug.log
 weixin/
+npm-debug.log
+

README.md

@@ -1,7 +1,47 @@
+## 前言
 
-### 利用vue2+vuex写一个模仿微信app的单页面应用
-使用SVG格式构建页面icon图
+这个项目是利用工作之余写的一个模仿微信app的单页面应用，整个项目包含27个页面，涉及实时群聊，机器人聊天，同学录，朋友圈等等，后续页面还是开发中。写这个项目主要目的是练习和熟悉vue和vuex的配合使用，利用socket.io实现实时聊天。
 
+欢迎各路大神Issuess
+
+## 技术栈
+
+```
+vue2+vue-router+webpack+vuex+sass+svg构图+es6/7+socket.io+http-proxy-middleware
+
+```
+
+##### 项目运行
+
+```
+git clone https://github.com/bailichen/vue-weixin.git
+
+cd vue-weixin
+
+npm install
+
+npm run buid (访问线上后台系统)
+
+npm run dev (访问本地，运行后访问 http://localhost:8882)
+
+```
+### 效果演示
+
+[项目演示请点击这里](http://cangdu.org:8003/dialogue) （请用chrome手机模式预览）
+
+
+### 移动端扫描下方二维码
+
+![](https://github.com/bailichen/vue-weixin/raw/master/printscreen/code.png)
+
+
+### 说明
+
+> 本项目主要用于熟悉vue2+vuex，svg的用法
+
+> 如有问题请直接在Issues中提出，或加qq：812571880
+
+> 如果觉得对您学习vue有点点帮助，请右上角star一下吧   ^_^
 
 # 目标功能
 - [x] 微信 
@@ -31,92 +71,34 @@
 - [x] 设置
 - [x] 登录
 
-
-
-# 页面部分截图
-
-### 底部导航
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/nav.gif" width="300" height="530"/>
-
-### 通讯录
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/addressbook.jpg" width="300" height="530"/>
-
-### 单人聊天
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/chatwo.gif" width="300" height="530" alt="">  <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/singlechat.gif" width="300" height="530" alt="">
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/single.jpg" width="300" height="530" alt="">
-
-### 群聊
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/groupchat.gif" width="300" height="530" alt="">  <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/group.jpg" width="300" height="530" alt="">
-
-
-### 发现
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/find.png" width="300" height="530"/>
-
-### 朋友圈
-
-###### 上传图片
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/shangchuan.gif" width="300" height="530"/>
-
-###### 点赞
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/like.gif" width="300" height="530"/>
-
-###### 评论
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/commont.gif" width="300" height="530"/>
-
-### 个人资料
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/infor.png" width="300" height="530"/>  <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/photo.png" width="300" height="530"/>
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/collect.png" width="300" height="530"/>  <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/card.png" width="300" height="530"/>
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/cardbag.png" width="300" height="530"/>  <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/set.png" width="300" height="530"/>
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/newmess.png" width="300" height="530"/>  <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/notrao.png" width="300" height="530"/>
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/chatset.png" width="300" height="530"/>  <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/priat.png" width="300" height="530"/>
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/tongyong.png" width="300" height="530"/>  <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/aboutwx.png" width="300" height="530"/>
-
-<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/login.png" width="300" height="530"/> 
-
-
-
-
 # 项目布局
 
 ```
 
-├── README.md// webpack配置文件
-├── build// 项目打包路径
-├── config// 上线项目文件，放在服务器即可正常访问
+├── README.md // webpack配置文件
+├── build // 项目打包路径
+├── config // 上线项目文件，放在服务器即可正常访问
 │   └── index.js
 ├── favicon.ico
 ├── index.html
 ├── package.json
 ├── printscreen
-├── src// 源码目录
-│   ├── App.vue// 页面入口文件
-│   ├── components// 公共组件
+├── src // 源码目录
+│   ├── App.vue // 页面入口文件
+│   ├── components // 公共组件
 │   │   ├── findandMe
-│   │   │   └── findandMe.vue// 发现和我共同的模块的列表
+│   │   │   └── findandMe.vue // 发现和我共同的模块的列表
 │   │   ├── footer
-│   │   │   └── foot.vue// 底部微信导航
+│   │   │   └── foot.vue // 底部微信导航
 │   │   └── header
-│   │       └── head.vue// 头部公共组件
-│   ├── config// 基本配置
-│   │   ├── env.js// 环境切换配置
-│   │   ├── fetch.js// 获取数据
+│   │       └── head.vue // 头部公共组件
+│   ├── config // 基本配置
+│   │   ├── env.js // 环境切换配置
+│   │   ├── fetch.js // 获取数据
 │   │   ├── iscroll.js 
-│   │   ├── mUtils.js// 工具
-│   │   ├── rem.js// px转换rem
-│   │   ├── swiper.min.js// 轮播图控件
+│   │   ├── mUtils.js // 工具
+│   │   ├── rem.js // px转换rem
+│   │   ├── swiper.min.js // 轮播图控件
 │   │   └── uploadPreview.js // 上传图片控件
 │   ├── frames
 │   │   ├── addressbook
@@ -165,38 +147,55 @@
 │   │   │   └── wallet
 │   │   │       └── wallet.vue // 我的钱包
 │   │   ├── search
-│   │   │   └── search.vue// 搜索
+│   │   │   └── search.vue // 搜索
 │   │   └── transfer
 │   │       └── transfer.vue
 │   ├── images
-│   ├── main.js// 程序入口文件，加载各种公共组件
+│   ├── main.js // 程序入口文件，加载各种公共组件
 │   ├── router
-│   │   └── router.js// 所有页面路由控制中心
+│   │   └── router.js // 所有页面路由控制中心
 │   ├── service
 │   │   ├── data
-│   │   │   ├── album.js// 个人相册
-│   │   │   ├── burse.js// 钱包数据
+│   │   │   ├── album.js // 个人相册
+│   │   │   ├── burse.js // 钱包数据
 │   │   │   ├── chatmore.js
-│   │   │   ├── collect.js// 我的收藏
+│   │   │   ├── collect.js // 我的收藏
 │   │   │   ├── contacts.js // 联系人列表数据
 │   │   │   ├── dialoglist.js // 对话列表
 │   │   │   ├── friendcircle.js // 朋友圈数据
 │   │   │   ├── groupchat.js // 群聊数据
-│   │   │   ├── login.js// 个人用户信息
-│   │   │   ├── search.js// 搜索的分类
+│   │   │   ├── login.js // 个人用户信息
+│   │   │   ├── search.js // 搜索的分类
 │   │   │   └── userword.js
-│   │   └── getData.js// 数据交互统一调配
+│   │   └── getData.js // 数据交互统一调配
 │   ├── style
-│   │   ├── public.scss//公共样式
+│   │   ├── public.scss //公共样式
 │   │   └── swiper.min.css
-│   └── vuex// vuex的状态管理
-│       ├── action.js// 配置根actions
-│       ├── index.js// 引用vuex，创建store
-│       ├── mutation-types.js// 定义常量muations名
-│       └── mutation.js// 配置根mutations
+│   └── vuex // vuex的状态管理
+│       ├── action.js // 配置根actions
+│       ├── index.js // 引用vuex，创建store
+│       ├── mutation-types.js // 定义常量muations名
+│       └── mutation.js // 配置根mutations
 └── tree.md
 
-
 36 directories, 133 files
 
-```
+```
+
+# 页面部分截图
+
+### 单人聊天、群聊
+
+<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/singlechat.gif" width="300" height="530" alt="">  <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/groupchat.gif" width="300" height="530" alt="">
+
+
+### 朋友圈
+
+###### 上传图片
+
+<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/shangchuan.gif" width="300" height="530"/>
+
+###### 点赞、评论
+
+<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/like.gif" width="300" height="530"/>  <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/commont.gif" width="300" height="530"/>
+

src/frames/conversation/chatmessage/groupchatmessage.vue

@@ -2,23 +2,25 @@
 	<section class="child_page">
 		<head-top crossover="聊天信息"></head-top>
 		<section class="groupchat">
-			<ul class="groupchat_ul clear">
+			<ul class="groupchat_ul clear"  ref="groupUl" :class="{ beforeUl : notlook, afterUl : looking}">
 				<li v-for="item in allPeople">
 					<img :src="imgurl + item.avatar" alt="">
 					<span class="ellipsis">{{item.name}}</span>
 				</li>
 			</ul>
+			<div class="lookmore" v-if="lookgroup" @click="lookAll">
+				查看全部群成员
+			</div>
 		</section>
 		<section class="chat">
-			<ul class="groupChat_ul">
+			<ul>
 				<li>
 					<div>群聊名称</div>
 					<div class="voice-music">{{gropname}}</div>
 				</li>
 				<li>
 					<div>群公告</div>
 				</li>
-
 			</ul>
 			<ul>
 				<li>
@@ -63,7 +65,10 @@
 			return{
 				allPeople:[],
 				imgurl:imgurl,
-				gropname:''
+				gropname:'',
+				looking:false,		//看全部
+				notlook:false,		//多出隐藏
+				lookgroup:false,	//查看全部群成员按钮
 			}
 		},
 		created(){
@@ -76,22 +81,30 @@
 			allgroup().then((res)=>{
 				if(res.status == 200){
 					this.allPeople=res.users
+					console.log(this.allPeople)
+					if(this.allPeople.length > 20){
+						this.lookgroup=true
+						this.notlook=true;
+					}
 				}else{
 					alert("获取数据失败，请检查网络是否正常！")
 				}
 				
 			});
 			groupChat().then((res) => {
 				this.gropname=res.petname;
-				//this.groupconversine=[...res.grouphead];
 			});	
 		},
 
 		components:{
 			headTop,
 		},
 		methods:{
-
+			lookAll(){
+				this.notlook=false;
+				this.looking=true;
+				this.lookgroup=false;
+			}
 		}
 	}
 </script>
@@ -118,7 +131,7 @@
 		padding-top: 2.9rem;
 		background:#fff;
 		padding:2.9rem 0.8533333333rem 0;
-		ul{
+		.groupchat_ul{
 			box-sizing:border-box;
 			li{
 				float:left;
@@ -144,6 +157,19 @@
 				margin-right:0;
 			}
 		}
+		.beforeUl{
+			max-height:14rem;
+			overflow:hidden;
+		}
+		.afterUl{
+			overflow:auto;
+			height:auto;
+		}
+		.lookmore{
+			padding:0.64rem 0 0.8533333333rem;
+			text-align:center;
+			@include sizeColor(0.64rem,#666);
+		}
 	}
 	.chat{
 		margin-top:0.8533333333rem;

src/frames/conversation/groupchat.vue

@@ -159,7 +159,7 @@
 				//this.groupconversine=[...res.grouphead];
 			});	
 			socket.on('chat', (data) => {
-				console.log(data);//聊天返回内容
+				//console.log(data);//聊天返回内容
 				this.groupconversine.push(data);
 				this.$nextTick(()=>{
 					window.scrollTo(0,this.$refs.groupHeight.offsetHeight-window.innerHeight)