登陆,注册功能,以及后端所需要的接口等已经在上一个项目实现:微信朋友圈
1.通讯录组件AddressBook.vue 的搭建
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/03fe4fef6372554f0693a48e481575d7.png)
<template>
<div class="address-book">
<Header
title='通讯录'
btn_icon='user-plus'>
</Header>
<div class="container">
<div class="search_wrap">
<div class="search_content">
<i class="fa fa-search"></i>
<input type="text" placeholder="搜索" v-model="search_value">
</div>
</div>
<div class="cell-wrap">
<UserCell
v-for="(user,index) in selectUser"
:key="index"
:user="user"
@click.native="getUserInfomation(user)"
/>
</div>
<div class="count_wrap">
<span>{
{selectUser.length}}位联系人</span>
</div>
</div>
</div>
</template>
<script>
import Header from "../../components/Header";
import UserCell from "../../components/UserCell";
export default {
name: "book",
data(){
return{
allUsers:[],
selectUser:[],
search_value:''
}
},
components: {
Header,UserCell
},
created(){
this.getAllUser();
},
watch:{
search_value(){
this.getSelectUsers();
}
},
methods:{
getAllUser(){
this.$axios.get("/api/users/all").then((res,err)=>{
if(err) return alert("获取所有用户信息失败");
this.allUsers = res.data;
this.selectUser=res.data;
})
},
getSelectUsers(){
this.selectUser = this.allUsers.filter(user=>{
return user.name.includes(this.search_value);
})
},
getUserInfomation(user){
this.$store.dispatch("setTargetUser",user);
this.$router.push("/userInformation")
}
}
};
</script>
<style scoped>
.address-book{
width: 100%;
height: 100%;
margin-bottom: 10px;
}
.container{
overflow: auto;
width: 100%;
height: calc(100% - 50px);
margin-top: 50px;
}
.container::-webkit-scrollbar{
display: none;
}
.search_wrap{
background-color: #f1f1f1;
padding: 8px;
box-sizing: border-box;
width: 100%;
}
.search_content{
height: 40px;
background: #ffffff;
padding: 0 10px;
box-sizing: border-box;
font-size: 16px;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
.search_content i{
color: #888888;
margin-right: 10px;
}
.search_content input{
height: 36px;
width: 90%;
outline: none;
border: none;
font-size: 14px ;
}
.count_wrap{
text-align: center;
line-height: 14px;
font-size: 14px;
font-weight: lighter;
}
</style>
2.用户信息组件UserCell.vue
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b1d288c2b0586397ce8d71e0a0ab8a6a.png)
<template>
<div class="user-cell">
<div class="cell-wrapper">
<div class="cell-title" v-if="user">
<img :src="user.avatar" alt="">
<span v-show="count" class="badge">{
{count}}</span>
<span>{
{user.name}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "UserCell",
props:{
user:Object,
count:Number
}
}
</script>
<style scoped>
.cell-wrapper{
background-color: #fff;
box-sizing: border-box;
color: inherit;
min-height: 50px;
display: flex;
font-size: 16px;
overflow: hidden;
padding: 0 8px;
width: 100%;
line-height: 50px;
border-top: 1px solid gainsboro;
}
.cell-title{
flex: 1;
margin-top: 10px;
display: flex;
}
.cell-title img{
width: 2.5rem;
height: 2.5rem;
vertical-align: center;</