like

README.md

@@ -16,6 +16,11 @@
 
 <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/find.png" width="416" height="737"/>
 
+###朋友圈
+
+<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/firendcircle.gif" width="416" height="737"/>
+
+
 
 # 目标功能
 - [x] 微信 
@@ -28,9 +33,10 @@
 - [x] 聊天
 - [x] widows 微信已登录
 - [x] 搜索页
-- [x] 对话页、对话功能
+- [ ] 对话页、对话功能
 - [ ] 对话功能
 - [x] 朋友圈
+- [x] 朋友圈点赞、评论
 - [x] 个人中心
 - [x] 详细资料
 - [x] 更多

src/components/findandMe/findandMe.vue

@@ -23,7 +23,7 @@
 							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#QRcode"></use>
 						</svg>
 						<div v-else>
-							<img src="../../images/tao.jpg" alt="">
+							<img :src="newGetImage" alt="">
 							<i class="redicon" v-if="firendwarn"></i>
 						</div>
 					</div>
@@ -130,7 +130,8 @@
 <script>
 	import {userInfo} from 'src/service/getData'
 	import {imgurl} from 'src/config/env';
-	import {mapState,mapMutations} from 'vuex'
+	import {mapState,mapMutations} from 'vuex';
+	import {circle} from 'src/service/getData' 
 	export default{
 		data(){
 			return{
@@ -141,6 +142,7 @@
 				reminderhide:false,		//隐藏时的动画
 				gifSrc:'',
 				timer:null,
+				newGetImage:'',			//朋友圈动态第一个头像
 			}
 		},
 		props: ['mepart',],
@@ -156,7 +158,12 @@
 			});
 		},
 		mounted(){
-			
+			circle().then( (res) =>{
+				for(let i=0; i < res.length; i++){
+					this.newGetImage=res[0].headurl;
+					return
+				}
+			})
 		},
 		components:{
 			
@@ -277,10 +284,15 @@
 					position: relative;
 					@include widthHeight(1.6rem,1.6rem);
 					@include align;
-					img{
-						display:block;
-						@include widthHeight(100%,100%);
+					div{
+						@include widthHeight(1.6rem,1.6rem);
+						overflow: hidden;
+						img{
+							display:block;
+							@include widthHeight(100%,100%);
+						}
 					}
+					
 					.redicon{
 						position: absolute;
 						right:-0.21rem;

src/frames/find/friendcircle/friendcircle.vue

@@ -2,8 +2,8 @@
 	<section class="child_page">
 		<head-top crossover="朋友圈" clickrefresh="friendcicle" @refreshPage="freshPage"></head-top>
 		<section class="friend_wipe" ref="friend">
-			<section class="friend" >
-				<div class="theme" >
+			<section class="friend">
+				<div class="theme">
 					<div class="themeinit" @click="exportInput"></div>
 					<div :class="{shoowimg : !imagestatus}" @click="exportInput">
 						<img :src="newImg" id="imgSrc" ref="imgSrc" class="imgSrc"  />
@@ -49,21 +49,24 @@
 											<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#comment"></use>
 										</svg>
 										<div class="discuss" v-if="item.criticism" :class="{discusshow : item.reviewshow, discusshide : item.reviewhide}">
-											<div >
-												<svg fill="#fff">
+											<div @click="supportThing(item)" >
+												<svg fill="#fff" :class="{surportdiv : likediv}">
 													<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#like"></use>
 												</svg>
-												<span>赞</span>
+												<span ref="suporttext">{{item.suporthtml}}</span>
 											</div>
-											<div>
+											<div @click="criticismThing(item)">
 												<svg fill="#fff">
 													<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#discuss"></use>
 												</svg>
 												<span>评论</span>
 											</div>
+
 										</div>
 									</div>
+
 								</div>
+
 								<div class="retext" v-show = "item.like.length >0 || item.comment.length > 0">
 									<svg class="retext_trigon" fill="#efefef">
 										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#trigon"></use>
@@ -83,9 +86,17 @@
 									</div>
 								</div>
 							</div>
+
 						</li>
 					</ul>
 				</div>
+				<!-- 评论 -->
+				<section class="criticism" v-if="criticismstate">
+					<div class="criticism_con">
+						<textarea name="" id="" cols="30" rows="10" v-model="textareaVlue" @input="inputCriticism"></textarea>
+						<span :class="{notempty:changeinput}" @click="commentSend">发送</span>
+					</div>
+				</section>
 			</section>
 		</section>
 	</section>	
@@ -107,18 +118,27 @@
 				/*reviewshow:false,		//评论的弹层显示时的动画
 				reviewhide:false,		//评论的弹层消失时的动画
 				criticism:false,		//评论的弹层是否显示
-				flag:true,				//点击判断*/
+				flag:true,				//点击判断
+				suporthtml:"赞",			*/
 				timer:null,				//定时器
+				timers:null,			//点赞定时器
 				bordercss:true,			//点赞的下边框
 				likenum:true,			//点赞的人数
 				circleData:[],
+				likediv:false,			//点击时svg图放大
+				textareaVlue:'',		//评论输入的内容
+				changeinput:false,		//控制发送按钮状态的改变
+				criticismstate:false,	//评论显隐
+				itemlist:{},			//点击当前的li
+
 			}
 		},
 		created(){
 
 		},
 		beforeDestroy(){
-            clearTimeout(this.timer) 
+            clearTimeout(this.timer);
+            clearTimeout(this.timers); 
         },
 		mounted(){
 			//上传图片并展示图片（无剪裁功能）
@@ -176,19 +196,55 @@
 				},1000)
 				item.flag=true;
 			},
-			showDiscuss(item){
+			showDiscuss(item){ //点击评论按钮点赞与评论出现
 				if(item.flag){
 					this.commentShow(item)
 				}else{
 					this.commentHide(item);
 				}
 			},
-			freshPage(){
+			freshPage(){//点击头部页面滚动到顶部
 				animate(this.$refs.friend,{scrollTop:0})
 			},
-			personInfor(){
-				this.SAVE_MESSAGE(this.userInfo)
-				this.$router.push('/addressbook/details')
+			personInfor(){//点击头像进入个人资料页
+				this.SAVE_MESSAGE(this.userInfo);
+				this.$router.push('/addressbook/details');
+			},
+			supportThing(item){//点赞
+				this.likediv=true;
+				clearTimeout(this.timers);
+				this.timers=setTimeout(()=>{
+					this.likediv=false;
+				},200);
+				this.commentHide(item);
+				if(item.suporthtml == "赞"){
+					item.suporthtml="取消";
+					item.like.push(this.userInfo.petname)
+				}else{
+					item.suporthtml="赞";
+					item.like.pop();
+				}
+			},
+			criticismThing(item){//评论
+				this.itemlist={};
+				this.itemlist=item;
+				this.criticismstate=true;
+				this.commentHide(item);
+			},
+			inputCriticism(){//文本框是否为空
+				this.textareaVlue ? this.changeinput=true : this.changeinput=false;
+			},
+			commentSend(){//评论点击发送
+				if(this.textareaVlue){
+					this.itemlist.comment.push({
+						wxid:this.userInfo.wxid,
+						petname:this.userInfo.petname,
+						commentext:this.textareaVlue
+					})
+				}
+				this.criticismstate=false;
+				this.textareaVlue='';
+				this.changeinput=false;
 			}
 		}
 	}
@@ -209,12 +265,15 @@
 	.refresh{
 		position: absolute;
 		@include widthHeight(12rem,2rem);
+
 		background:#fff;
 		left:2rem;
 	}
 	.friend_wipe{
 		width:100%;
-		height:30rem;
+		padding-bottom:3rem;
+		height:33rem;
+		background-color: #f8f8f8;
 		overflow:auto;  
 		.friend{
 			padding-top:2.06933rem;
@@ -413,6 +472,9 @@
 										div:first-child{
 											border-right:2px solid #2f3336;
 										}
+										.surportdiv{
+											animation: pulse 0.5s;
+										}
 									}
 									.discusshow{
 										animation: flipInX 1s 1 ease-in-out both;
@@ -424,7 +486,6 @@
 								}
 							}
 							.retext{
-								
 								margin-top:0.128rem;
 								.retext_trigon{
 									display:block;
@@ -444,8 +505,12 @@
 										float:left;
 										margin-right:0.2133333333rem;
 										@include sizeColor(0.512rem,#8792b0);
+										i{
+											@include sizeColor(0.512rem,#8792b0);
+										}
 									}
 									span:last-child{
+										@include sizeColor(0.512rem,#8792b0);
 										i{
 											display:none;
 										}
@@ -478,6 +543,45 @@
 				}
 
 			}
+			.criticism{
+				position: fixed;
+				left:0;
+				z-index:10;
+				bottom:0;
+				width:100%;
+				background:#ebebeb;
+				.criticism_con{
+					padding:0.4266666667rem 0.64rem;
+					@include justify(space-between);
+					textarea{
+						display:block;
+						width:12rem;
+						height:1.5rem;
+						max-height:3.2rem;
+						border:0;
+						border-bottom:2px solid #18ae17;
+						resize:none;
+						@include sizeColor(0.64rem,#333);
+						line-height:0.768rem;
+						background:none;
+						padding-top:0.32rem;
+					}
+					span{
+						display:block;
+						width:1.8rem;
+						@include sizeColor(0.5546666667rem,#d2d2d2);
+						border:1px solid #d7d7d7;
+						text-align:center;
+						border-radius:5px;
+						line-height:1.3653333333rem;
+					}
+					.notempty{
+						background:#18ae17;
+						color:#fff;
+						border-color:#3e8d3e;
+					}
+				}
+			}
 		}
 	}
 	
@@ -533,4 +637,20 @@
 	    opacity: 0;
 	  }
 	}
+	@keyframes pulse {
+	  from {
+	    -webkit-transform: scale3d(1, 1, 1);
+	    transform: scale3d(1, 1, 1);
+	  }
+
+	  50% {
+	    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+	    transform: scale3d(1.1, 1.1, 1.1);
+	  }
+
+	  100% {
+	    -webkit-transform: scale3d(1, 1, 1);
+	    transform: scale3d(1, 1, 1);
+	  }
+	}
 </style>