xie.bx
3 years ago
21 changed files with 207 additions and 708 deletions
@ -0,0 +1,29 @@ |
|||
package com.lx.implatform.service; |
|||
|
|||
import com.baomidou.mybatisplus.extension.service.IService; |
|||
import com.lx.implatform.entity.Friend; |
|||
import com.lx.implatform.vo.FriendVO; |
|||
|
|||
import java.util.List; |
|||
|
|||
/** |
|||
* <p> |
|||
* 服务类 |
|||
* </p> |
|||
* |
|||
* @author blue |
|||
* @since 2022-10-22 |
|||
*/ |
|||
public interface IFriendService extends IService<Friend> { |
|||
|
|||
Boolean isFriend(Long userId1, long userId2); |
|||
|
|||
List<Friend> findFriendByUserId(long UserId); |
|||
|
|||
void addFriend(long friendId); |
|||
|
|||
void delFriend(long friendId); |
|||
|
|||
void update(FriendVO vo); |
|||
|
|||
} |
|||
@ -1,29 +0,0 @@ |
|||
package com.lx.implatform.service; |
|||
|
|||
import com.baomidou.mybatisplus.extension.service.IService; |
|||
import com.lx.implatform.entity.Friends; |
|||
import com.lx.implatform.vo.FriendsVO; |
|||
|
|||
import java.util.List; |
|||
|
|||
/** |
|||
* <p> |
|||
* 服务类 |
|||
* </p> |
|||
* |
|||
* @author blue |
|||
* @since 2022-10-22 |
|||
*/ |
|||
public interface IFriendsService extends IService<Friends> { |
|||
|
|||
Boolean isFriends(Long userId1,long userId2); |
|||
|
|||
List<Friends> findFriendsByUserId(long UserId); |
|||
|
|||
void addFriends(long friendId); |
|||
|
|||
void delFriends(long friendId); |
|||
|
|||
void update(FriendsVO vo); |
|||
|
|||
} |
|||
@ -0,0 +1,124 @@ |
|||
package com.lx.implatform.service.impl; |
|||
|
|||
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; |
|||
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; |
|||
import com.lx.common.enums.ResultCode; |
|||
import com.lx.implatform.entity.Friend; |
|||
import com.lx.implatform.entity.User; |
|||
import com.lx.implatform.exception.GlobalException; |
|||
import com.lx.implatform.mapper.FriendMapper; |
|||
import com.lx.implatform.service.IFriendService; |
|||
import com.lx.implatform.service.IUserService; |
|||
import com.lx.implatform.session.SessionContext; |
|||
import com.lx.implatform.vo.FriendVO; |
|||
import org.springframework.beans.factory.annotation.Autowired; |
|||
import org.springframework.stereotype.Service; |
|||
import org.springframework.transaction.annotation.Transactional; |
|||
|
|||
import java.util.List; |
|||
|
|||
/** |
|||
* <p> |
|||
* 好友服务实现类 |
|||
* </p> |
|||
* |
|||
* @author blue |
|||
* @since 2022-10-22 |
|||
*/ |
|||
@Service |
|||
public class FriendServiceImpl extends ServiceImpl<FriendMapper, Friend> implements IFriendService { |
|||
|
|||
@Autowired |
|||
private IUserService userService; |
|||
|
|||
@Override |
|||
public List<Friend> findFriendByUserId(long UserId) { |
|||
QueryWrapper<Friend> queryWrapper = new QueryWrapper<>(); |
|||
queryWrapper.lambda().eq(Friend::getUserId,UserId); |
|||
List<Friend> friends = this.list(queryWrapper); |
|||
return friends; |
|||
} |
|||
|
|||
|
|||
@Transactional |
|||
@Override |
|||
public void addFriend(long friendId) { |
|||
long userId = SessionContext.getSession().getId(); |
|||
if(userId == friendId){ |
|||
throw new GlobalException(ResultCode.PROGRAM_ERROR,"不允许添加自己为好友"); |
|||
} |
|||
// 互相绑定好友关系
|
|||
bindFriend(userId,friendId); |
|||
bindFriend(friendId,userId); |
|||
} |
|||
|
|||
|
|||
@Transactional |
|||
@Override |
|||
public void delFriend(long friendId) { |
|||
long userId = SessionContext.getSession().getId(); |
|||
// 互相解除好友关系
|
|||
unbindFriend(userId,friendId); |
|||
unbindFriend(friendId,userId); |
|||
} |
|||
|
|||
|
|||
|
|||
@Override |
|||
public Boolean isFriend(Long userId1, long userId2) { |
|||
QueryWrapper<Friend> queryWrapper = new QueryWrapper<>(); |
|||
queryWrapper.lambda() |
|||
.eq(Friend::getUserId,userId1) |
|||
.eq(Friend::getFriendId,userId2); |
|||
return this.count(queryWrapper) > 0; |
|||
} |
|||
|
|||
|
|||
@Override |
|||
public void update(FriendVO vo) { |
|||
long userId = SessionContext.getSession().getId(); |
|||
QueryWrapper<Friend> queryWrapper = new QueryWrapper<>(); |
|||
queryWrapper.lambda() |
|||
.eq(Friend::getUserId,userId) |
|||
.eq(Friend::getFriendId,vo.getFriendId()); |
|||
|
|||
Friend f = this.getOne(queryWrapper); |
|||
if(f == null){ |
|||
throw new GlobalException(ResultCode.PROGRAM_ERROR,"对方不是您的好友"); |
|||
} |
|||
|
|||
f.setFriendHeadImage(vo.getFriendHeadImage()); |
|||
f.setFriendNickName(vo.getFriendNickName()); |
|||
this.updateById(f); |
|||
} |
|||
|
|||
private void bindFriend(long userId, long friendId) { |
|||
QueryWrapper<Friend> queryWrapper = new QueryWrapper<>(); |
|||
queryWrapper.lambda() |
|||
.eq(Friend::getUserId,userId) |
|||
.eq(Friend::getFriendId,friendId); |
|||
if(this.count(queryWrapper)==0){ |
|||
Friend friend = new Friend(); |
|||
friend.setUserId(userId); |
|||
friend.setFriendId(friendId); |
|||
User friendInfo = userService.getById(friendId); |
|||
friend.setFriendHeadImage(friendInfo.getHeadImage()); |
|||
friend.setFriendNickName(friendInfo.getNickName()); |
|||
this.save(friend); |
|||
} |
|||
} |
|||
|
|||
|
|||
private void unbindFriend(long userId, long friendId) { |
|||
QueryWrapper<Friend> queryWrapper = new QueryWrapper<>(); |
|||
queryWrapper.lambda() |
|||
.eq(Friend::getUserId,userId) |
|||
.eq(Friend::getFriendId,friendId); |
|||
List<Friend> friends = this.list(queryWrapper); |
|||
friends.stream().forEach(friend -> { |
|||
this.removeById(friend.getId()); |
|||
}); |
|||
} |
|||
|
|||
|
|||
} |
|||
@ -1,124 +0,0 @@ |
|||
package com.lx.implatform.service.impl; |
|||
|
|||
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; |
|||
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; |
|||
import com.lx.common.enums.ResultCode; |
|||
import com.lx.implatform.entity.Friends; |
|||
import com.lx.implatform.entity.User; |
|||
import com.lx.implatform.exception.GlobalException; |
|||
import com.lx.implatform.mapper.FriendsMapper; |
|||
import com.lx.implatform.service.IFriendsService; |
|||
import com.lx.implatform.service.IUserService; |
|||
import com.lx.implatform.session.SessionContext; |
|||
import com.lx.implatform.vo.FriendsVO; |
|||
import org.springframework.beans.factory.annotation.Autowired; |
|||
import org.springframework.stereotype.Service; |
|||
import org.springframework.transaction.annotation.Transactional; |
|||
|
|||
import java.util.List; |
|||
|
|||
/** |
|||
* <p> |
|||
* 好友服务实现类 |
|||
* </p> |
|||
* |
|||
* @author blue |
|||
* @since 2022-10-22 |
|||
*/ |
|||
@Service |
|||
public class FriendsServiceImpl extends ServiceImpl<FriendsMapper, Friends> implements IFriendsService { |
|||
|
|||
@Autowired |
|||
private IUserService userService; |
|||
|
|||
@Override |
|||
public List<Friends> findFriendsByUserId(long UserId) { |
|||
QueryWrapper<Friends> queryWrapper = new QueryWrapper<>(); |
|||
queryWrapper.lambda().eq(Friends::getUserId,UserId); |
|||
List<Friends> friendsList = this.list(queryWrapper); |
|||
return friendsList; |
|||
} |
|||
|
|||
|
|||
@Transactional |
|||
@Override |
|||
public void addFriends(long friendId) { |
|||
long userId = SessionContext.getSession().getId(); |
|||
if(userId == friendId){ |
|||
throw new GlobalException(ResultCode.PROGRAM_ERROR,"不允许添加自己为好友"); |
|||
} |
|||
// 互相绑定好友关系
|
|||
bindFriends(userId,friendId); |
|||
bindFriends(friendId,userId); |
|||
} |
|||
|
|||
|
|||
@Transactional |
|||
@Override |
|||
public void delFriends(long friendId) { |
|||
long userId = SessionContext.getSession().getId(); |
|||
// 互相解除好友关系
|
|||
unbindFriends(userId,friendId); |
|||
unbindFriends(friendId,userId); |
|||
} |
|||
|
|||
|
|||
|
|||
@Override |
|||
public Boolean isFriends(Long userId1, long userId2) { |
|||
QueryWrapper<Friends> queryWrapper = new QueryWrapper<>(); |
|||
queryWrapper.lambda() |
|||
.eq(Friends::getUserId,userId1) |
|||
.eq(Friends::getFriendId,userId2); |
|||
return this.count(queryWrapper) > 0; |
|||
} |
|||
|
|||
|
|||
@Override |
|||
public void update(FriendsVO vo) { |
|||
long userId = SessionContext.getSession().getId(); |
|||
QueryWrapper<Friends> queryWrapper = new QueryWrapper<>(); |
|||
queryWrapper.lambda() |
|||
.eq(Friends::getUserId,userId) |
|||
.eq(Friends::getFriendId,vo.getFriendId()); |
|||
|
|||
Friends f = this.getOne(queryWrapper); |
|||
if(f == null){ |
|||
throw new GlobalException(ResultCode.PROGRAM_ERROR,"对方不是您的好友"); |
|||
} |
|||
|
|||
f.setFriendHeadImage(vo.getFriendHeadImage()); |
|||
f.setFriendNickName(vo.getFriendNickName()); |
|||
this.updateById(f); |
|||
} |
|||
|
|||
private void bindFriends(long userId, long friendsId) { |
|||
QueryWrapper<Friends> queryWrapper = new QueryWrapper<>(); |
|||
queryWrapper.lambda() |
|||
.eq(Friends::getUserId,userId) |
|||
.eq(Friends::getFriendId,friendsId); |
|||
if(this.count(queryWrapper)==0){ |
|||
Friends friends = new Friends(); |
|||
friends.setUserId(userId); |
|||
friends.setFriendId(friendsId); |
|||
User friendsInfo = userService.getById(friendsId); |
|||
friends.setFriendHeadImage(friendsInfo.getHeadImage()); |
|||
friends.setFriendNickName(friendsInfo.getNickName()); |
|||
this.save(friends); |
|||
} |
|||
} |
|||
|
|||
|
|||
private void unbindFriends(long userId, long friendsId) { |
|||
QueryWrapper<Friends> queryWrapper = new QueryWrapper<>(); |
|||
queryWrapper.lambda() |
|||
.eq(Friends::getUserId,userId) |
|||
.eq(Friends::getFriendId,friendsId); |
|||
List<Friends> friendsList = this.list(queryWrapper); |
|||
friendsList.stream().forEach(friends -> { |
|||
this.removeById(friends.getId()); |
|||
}); |
|||
} |
|||
|
|||
|
|||
} |
|||
@ -1,119 +0,0 @@ |
|||
<template> |
|||
<el-dialog title="添加好友" :visible.sync="dialogVisible" width="350px" :before-close="onClose"> |
|||
<el-input width="200px" placeholder="搜索好友" class="input-with-select" v-model="searchText" @keyup.enter.native="onSearch()"> |
|||
<el-button slot="append" icon="el-icon-search" @click="onSearch()"></el-button> |
|||
</el-input> |
|||
<el-scrollbar style="height:400px"> |
|||
<div v-for="(userInfo) in users" :key="userInfo.id"> |
|||
<div class="item"> |
|||
<div class="avatar"> |
|||
<head-image :url="userInfo.headImage"></head-image> |
|||
</div> |
|||
<div class="add-friend-text"> |
|||
<div>{{userInfo.nickName}}</div> |
|||
<div :class="userInfo.online ? 'online-status online':'online-status'">{{ userInfo.online?"[在线]":"[离线]"}}</div> |
|||
</div> |
|||
<el-button type="success" v-show="!isFriend(userInfo.id)" plain @click="onAddFriends(userInfo)">添加</el-button> |
|||
<el-button type="info" v-show="isFriend(userInfo.id)" plain disabled>已添加</el-button> |
|||
</div> |
|||
</div> |
|||
</el-scrollbar> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import HeadImage from '../common/HeadImage.vue' |
|||
|
|||
|
|||
export default { |
|||
name: "addFriends", |
|||
components:{HeadImage}, |
|||
data() { |
|||
return { |
|||
users: [], |
|||
searchText: "" |
|||
} |
|||
}, |
|||
props: { |
|||
dialogVisible: { |
|||
type: Boolean |
|||
} |
|||
}, |
|||
methods: { |
|||
onClose() { |
|||
this.$emit("close"); |
|||
}, |
|||
onSearch() { |
|||
this.$http({ |
|||
url: "/api/user/findByNickName", |
|||
method: "get", |
|||
params: { |
|||
nickName: this.searchText |
|||
} |
|||
}).then((data) => { |
|||
this.users = data; |
|||
}) |
|||
}, |
|||
onAddFriends(userInfo){ |
|||
this.$http({ |
|||
url: "/api/friends/add", |
|||
method: "post", |
|||
params: { |
|||
friendId: userInfo.id |
|||
} |
|||
}).then((data) => { |
|||
this.$store.commit("") |
|||
this.$message.success("添加成功，对方已成为您的好友"); |
|||
let friendsInfo = { |
|||
friendId:userInfo.id, |
|||
friendNickName: userInfo.nickName, |
|||
friendHeadImage: userInfo.headImage, |
|||
online: userInfo.online |
|||
} |
|||
this.$store.commit("addFriends",friendsInfo); |
|||
|
|||
}) |
|||
}, |
|||
isFriend(userId){ |
|||
let friendList = this.$store.state.friendsStore.friendsList; |
|||
let friend = friendList.find((f)=> f.friendId==userId); |
|||
return friend != undefined; |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.onSearch(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
|
|||
.item { |
|||
height: 80px; |
|||
display: flex; |
|||
position: relative; |
|||
padding-left: 15px; |
|||
align-items: center; |
|||
padding-right: 25px; |
|||
|
|||
.add-friend-text { |
|||
margin-left: 15px; |
|||
line-height: 80px; |
|||
flex: 3; |
|||
display: flex; |
|||
flex-direction: row; |
|||
height: 100%; |
|||
flex-shrink: 0; |
|||
overflow: hidden; |
|||
|
|||
.online-status{ |
|||
font-size: 12px; |
|||
font-weight: 600; |
|||
&.online{ |
|||
color: #5fb878; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,114 +0,0 @@ |
|||
<template> |
|||
<div class="item" :class="active ? 'active' : ''"> |
|||
<div class="avatar"> |
|||
<head-image :url="friendsInfo.friendHeadImage" > </head-image> |
|||
</div> |
|||
<div class="text"> |
|||
<div>{{ friendsInfo.friendNickName}}</div> |
|||
<div :class="online ? 'online-status online':'online-status'">{{ online?"[在线]":"[离线]"}}</div> |
|||
</div> |
|||
<div class="close" @click.stop="$emit('del',friendsInfo,index)"> |
|||
<i class="el-icon-close" style="border: none; font-size: 20px;color: black;" title="添加好友"></i> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import HeadImage from '../common/HeadImage.vue'; |
|||
|
|||
export default { |
|||
name: "frinedsItem", |
|||
components: {HeadImage}, |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
props: { |
|||
friendsInfo: { |
|||
type: Object |
|||
}, |
|||
active:{ |
|||
type: Boolean |
|||
}, |
|||
index:{ |
|||
type: Number |
|||
} |
|||
}, |
|||
computed:{ |
|||
online(){ |
|||
return this.$store.state.friendsStore.friendsList[this.index].online; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scope lang="scss"> |
|||
.item { |
|||
height: 65px; |
|||
display: flex; |
|||
margin-bottom: 1px; |
|||
position: relative; |
|||
padding-left: 15px; |
|||
align-items: center; |
|||
padding-right: 5px; |
|||
background-color: #eeeeee; |
|||
&:hover { |
|||
background-color: #dddddd; |
|||
} |
|||
|
|||
&.active{ |
|||
background-color: #cccccc; |
|||
} |
|||
|
|||
|
|||
.close { |
|||
width: 1.5rem; |
|||
height: 1.5rem; |
|||
right: 10px; |
|||
top: 1.825rem; |
|||
cursor: pointer; |
|||
display: none; |
|||
} |
|||
|
|||
&:hover { |
|||
.close { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.avatar { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 45px; |
|||
height: 45px; |
|||
} |
|||
|
|||
.text { |
|||
margin-left: 15px; |
|||
flex: 3; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
height: 100%; |
|||
flex-shrink: 0; |
|||
overflow: hidden; |
|||
&>div { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.online-status{ |
|||
font-size: 12px; |
|||
font-weight: 600; |
|||
&.online{ |
|||
color: #5fb878; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.active { |
|||
background-color: #eeeeee; |
|||
} |
|||
</style> |
|||
@ -1,90 +0,0 @@ |
|||
import httpRequest from '../api/httpRequest.js' |
|||
|
|||
export default { |
|||
|
|||
state: { |
|||
friendsList: [], |
|||
activeIndex: -1, |
|||
timer: null |
|||
}, |
|||
mutations: { |
|||
initFriendsStore(state) { |
|||
httpRequest({ |
|||
url: '/api/friends/list', |
|||
method: 'get' |
|||
}).then((friendsList) => { |
|||
this.commit("setFriendsList",friendsList); |
|||
this.commit("refreshOnlineStatus"); |
|||
}) |
|||
}, |
|||
|
|||
setFriendsList(state, friendsList) { |
|||
state.friendsList = friendsList; |
|||
}, |
|||
updateFriends(state,friendsInfo){ |
|||
console.log(friendsInfo) |
|||
state.friendsList.forEach((f,index)=>{ |
|||
if(f.friendId==friendsInfo.friendId){ |
|||
state.friendsList[index] = friendsInfo; |
|||
} |
|||
}) |
|||
}, |
|||
activeFriends(state, index) { |
|||
state.activeIndex = index; |
|||
}, |
|||
removeFriends(state, index) { |
|||
state.friendsList.splice(index, 1); |
|||
}, |
|||
addFriends(state, friendsInfo) { |
|||
state.friendsList.push(friendsInfo); |
|||
}, |
|||
refreshOnlineStatus(state){ |
|||
let userIds = []; |
|||
if(state.friendsList.length ==0){ |
|||
return; |
|||
} |
|||
state.friendsList.forEach((f)=>{userIds.push(f.friendId)}); |
|||
httpRequest({ |
|||
url: '/api/user/online', |
|||
method: 'get', |
|||
params: {userIds: userIds.join(',')} |
|||
}).then((onlineIds) => { |
|||
this.commit("setOnlineStatus",onlineIds); |
|||
}) |
|||
|
|||
// 30s后重新拉取
|
|||
clearTimeout(state.timer); |
|||
state.timer = setTimeout(()=>{ |
|||
this.commit("refreshOnlineStatus"); |
|||
},30000) |
|||
}, |
|||
setOnlineStatus(state,onlineIds){ |
|||
state.friendsList.forEach((f)=>{ |
|||
let onlineFriend = onlineIds.find((id)=> f.friendId==id); |
|||
f.online = onlineFriend != undefined; |
|||
console.log(f.friendNickName+":"+f.online); |
|||
}); |
|||
|
|||
let activeFriend = state.friendsList[state.activeIndex]; |
|||
state.friendsList.sort((f1,f2)=>{ |
|||
if(f1.online&&!f2.online){ |
|||
return -1; |
|||
} |
|||
if(f2.online&&!f1.online){ |
|||
return 1; |
|||
} |
|||
return 0; |
|||
}); |
|||
|
|||
// 重新排序后，activeIndex指向的好友可能会变化，需要重新指定
|
|||
if(state.activeIndex >=0){ |
|||
state.friendsList.forEach((f,i)=>{ |
|||
if(f.friendId == activeFriend.friendId){ |
|||
state.activeIndex = i; |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
@ -1,184 +0,0 @@ |
|||
<template> |
|||
<el-container> |
|||
<el-aside width="250px" class="l-friend-box"> |
|||
<el-header class="l-friend-header" height="60px"> |
|||
<div class="l-friend-search"> |
|||
<el-input width="200px" placeholder="搜索好友" v-model="searchText"> |
|||
<el-button slot="append" icon="el-icon-search"></el-button> |
|||
</el-input> |
|||
</div> |
|||
<el-button plain icon="el-icon-plus" style="border: none; padding:12px; font-size: 20px;color: black;" title="添加好友" @click="onShowAddFriends"></el-button> |
|||
|
|||
<add-friends :dialogVisible="showAddFriend" @close="onCloseAddFriends" @add="onAddFriend()"> |
|||
</add-friends> |
|||
</el-header> |
|||
<el-main> |
|||
<div v-for="(friendsInfo,index) in $store.state.friendsStore.friendsList" :key="friendsInfo.id"> |
|||
<friends-item v-show="friendsInfo.friendNickName.startsWith(searchText)" :friendsInfo="friendsInfo" :index="index" |
|||
:active="index === $store.state.friendsStore.activeIndex" @del="onDelItem(friendsInfo,index)" @click.native="onClickItem(friendsInfo,index)"> |
|||
</friends-item> |
|||
</div> |
|||
</el-main> |
|||
</el-aside> |
|||
<el-container class="r-friend-box"> |
|||
<div v-show="$store.state.friendsStore.activeIndex>=0"> |
|||
<div class="user-detail"> |
|||
<head-image class="detail-head-image" :url="activeUserInfo.headImage"></head-image> |
|||
<div class="info-item"> |
|||
<el-descriptions title="好友信息" class="description" :column="1"> |
|||
<el-descriptions-item label="用户名">{{ activeUserInfo.userName }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="昵称">{{ activeUserInfo.nickName }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="性别">{{ activeUserInfo.sex==0?"男":"女" }}</el-descriptions-item> |
|||
<el-descriptions-item label="签名">{{ activeUserInfo.signature }}</el-descriptions-item> |
|||
</el-descriptions> |
|||
</div> |
|||
</div> |
|||
<div class="btn-group"> |
|||
<el-button class="send-btn" @click="onSend()">发消息</el-button> |
|||
</div> |
|||
</div> |
|||
</el-container> |
|||
</el-container> |
|||
</template> |
|||
|
|||
<script> |
|||
import FriendsItem from "../components/friend/FriendsItem.vue"; |
|||
import AddFriends from "../components/friend/AddFriends.vue"; |
|||
import HeadImage from "../components/common/HeadImage.vue"; |
|||
|
|||
export default { |
|||
name: "friends", |
|||
components: { |
|||
FriendsItem, |
|||
AddFriends, |
|||
HeadImage |
|||
}, |
|||
data() { |
|||
return { |
|||
searchText: "", |
|||
showAddFriend: false, |
|||
activeUserInfo: {} |
|||
} |
|||
}, |
|||
methods: { |
|||
onShowAddFriends() { |
|||
this.showAddFriend = true; |
|||
}, |
|||
onCloseAddFriends() { |
|||
this.showAddFriend = false; |
|||
}, |
|||
onClickItem(friendsInfo, index) { |
|||
this.$store.commit("activeFriends", index); |
|||
this.$http({ |
|||
url: `/api/user/find/${friendsInfo.friendId}`, |
|||
method: 'get' |
|||
}).then((userInfo) => { |
|||
this.activeUserInfo = userInfo; |
|||
// 如果发现好友的头像和昵称改了，进行更新 |
|||
if (userInfo.headImageThumb != friendsInfo.friendHeadImage || |
|||
userInfo.nickName != friendsInfo.friendNickName) { |
|||
this.updateFriendInfo(friendsInfo, userInfo, index) |
|||
} |
|||
}) |
|||
}, |
|||
onDelItem(friendsInfo, index) { |
|||
this.$http({ |
|||
url: '/api/friends/delete', |
|||
method: 'delete', |
|||
params: { |
|||
friendId: friendsInfo.friendId |
|||
} |
|||
}).then((data) => { |
|||
this.$message.success("删除好友成功"); |
|||
this.$store.commit("removeFriends", index); |
|||
}) |
|||
}, |
|||
onSend() { |
|||
let userInfo = this.activeUserInfo; |
|||
let chatInfo = { |
|||
type: 'single', |
|||
targetId: userInfo.id, |
|||
showName: userInfo.nickName, |
|||
headImage: userInfo.headImage, |
|||
}; |
|||
this.$store.commit("openChat", chatInfo); |
|||
this.$store.commit("activeChat", 0); |
|||
this.$router.push("/home/chat"); |
|||
}, |
|||
updateFriendInfo(friendsInfo, userInfo, index) { |
|||
friendsInfo.friendHeadImage = userInfo.headImageThumb; |
|||
friendsInfo.friendNickName = userInfo.nickName; |
|||
this.$http({ |
|||
url: "/api/friends/update", |
|||
method: "put", |
|||
data: friendsInfo |
|||
}).then(() => { |
|||
this.$store.commit("updateFriends", friendsInfo); |
|||
this.$store.commit("setChatUserInfo", userInfo); |
|||
}) |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.el-container { |
|||
.l-friend-box { |
|||
border: #dddddd solid 1px; |
|||
background: #eeeeee; |
|||
|
|||
.l-friend-header { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 5px; |
|||
background-color: white; |
|||
|
|||
.l-friend-search{ |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.el-main { |
|||
padding: 0; |
|||
} |
|||
} |
|||
|
|||
|
|||
.r-friend-box { |
|||
.user-detail { |
|||
width: 100%; |
|||
display: flex; |
|||
padding: 50px 10px 10px 50px; |
|||
text-align: center; |
|||
justify-content: space-around; |
|||
|
|||
.detail-head-image { |
|||
width: 200px; |
|||
height: 200px; |
|||
} |
|||
|
|||
.info-item { |
|||
width: 400px; |
|||
height: 200px; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.description { |
|||
padding: 20px 20px 0px 20px; |
|||
|
|||
} |
|||
} |
|||
|
|||
.btn-group { |
|||
text-align: left !important; |
|||
padding-left: 100px; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue