You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

97 lines
2.3 KiB

<template>
<view class="page friend-add">
<view class="search-bar">
<uni-search-bar v-model="searchText" :focus="true" @confirm="onSearch()" @cancel="onCancel()"
placeholder="用户名/昵称"></uni-search-bar>
</view>
<view class="user-items">
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<view v-for="(user) in users" :key="user.id" v-show="user.id != $store.state.userStore.userInfo.id">
<uni-list-chat :avatar="user.headImage" :title="user.userName" :note="'昵称:'+user.nickName"
:clickable="true" @click="onShowUserInfo(user)">
<view class="chat-custom-right">
<button type="primary" v-show="!isFriend(user.id)" size="mini"
@click.stop="onAddFriend(user)">加为好友</button>
<button type="default" v-show="isFriend(user.id)" size="mini" disabled>已添加</button>
</view>
</uni-list-chat>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
searchText: "",
users: []
}
},
methods: {
onCancel() {
uni.navigateBack();
},
onSearch() {
console.log("onSearch")
this.$http({
url: "/user/findByName?name=" + this.searchText,
method: "GET"
}).then((data) => {
this.users = data;
})
},
onAddFriend(user) {
this.$http({
url: "/friend/add?friendId=" + user.id,
method: "POST"
}).then((data) => {
let friend = {
id: user.id,
nickName: user.nickName,
headImage: user.headImage,
online: user.online
}
this.$store.commit("addFriend", friend);
uni.showToast({
title: "添加成功,对方已成为您的好友",
icon: "none"
})
})
},
onShowUserInfo(user) {
uni.navigateTo({
url: "/pages/common/user-info?id=" + user.id
})
},
isFriend(userId) {
let friends = this.$store.state.friendStore.friends;
let friend = friends.find((f) => f.id == userId);
return friend != undefined;
}
}
}
</script>
<style scoped lang="scss">
.friend-add {
position: relative;
border: #dddddd solid 1px;
display: flex;
flex-direction: column;
.search-bar {
background: white;
}
.user-items{
position: relative;
flex: 1;
overflow: hidden;
.scroll-bar {
height: 100%;
}
}
}
</style>