355 lines
8.0 KiB
Vue
355 lines
8.0 KiB
Vue
<template>
|
||
<view class="page fc">
|
||
<uni-nav-bar fixed statusBar background-color="transparent" :border="false" @clickLeft="back"
|
||
title="好友列表"></uni-nav-bar>
|
||
<view class="back"></view>
|
||
<view class="head fa end">
|
||
<image @click="tosearch" src="/static/friends/friends_add.png"></image>
|
||
<image @click="tosearch" src="/static/friends/friends_search.png" mode="widthFix"></image>
|
||
<view class="head_content" @click="tomessageList">
|
||
<image src="/static/friends/friends_message.png" mode="widthFix"></image>
|
||
<text class="head_number faj" v-if="requestsInfo">{{ requestsInfo }}</text>
|
||
</view>
|
||
<view class="head_content" @click="toofficialList">
|
||
<image src="/static/friends/friends_messageA.png" mode="widthFix"></image>
|
||
<text class="head_number faj" v-if="msgCountInfo">{{ msgCountInfo }}</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="scroll-view f1" show-scrollbar @scrolltolower="onScrollToLower">
|
||
<view class="body">
|
||
<view class="list">
|
||
<view class="list_content fa" v-for="(item, index) in friendList" :key="index"
|
||
@click="toFriendsChat(item)">
|
||
<view class="list_avatar">
|
||
<image :src="item.friend.avatar ? item.friend.avatar : ''" mode="aspectFill"></image>
|
||
<text class="list_round" v-if="item.is_online"></text>
|
||
</view>
|
||
<view class="list_module f1">
|
||
<view class="list_name h1">{{ item.friend.nickname ? item.friend.nickname : '' }}</view>
|
||
<view class="list_id h1">ID：{{ item.friend.user_number ? item.friend.user_number : '' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="not" v-if="friendList.length == 0">
|
||
<image
|
||
src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/ff9c872002cc5a5c91154cce12e8342c.png"
|
||
mode="widthFix"></image>
|
||
<view class="not_title">暂无好友</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<tab-bar></tab-bar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
Friend,
|
||
MsgCount
|
||
} from '@/utils/api.js'
|
||
import { getTokenApi, getOnlineApi } from '@/utils/Huanxin.js'
|
||
import notHave from '@/components/not-have.vue';
|
||
import topSafety from '@/components/top-safety.vue';
|
||
import tabBar from '@/components/tab-bar.vue';
|
||
|
||
import { emConnect, emConversation } from '@/EaseIM/imApis';
|
||
import { useLoginStore } from '@/stores/login';
|
||
import { useConversationStore } from '@/stores/conversation';
|
||
|
||
export default {
|
||
components: {
|
||
notHave,
|
||
topSafety,
|
||
tabBar,
|
||
},
|
||
data() {
|
||
return {
|
||
form: {
|
||
page: 1,
|
||
},
|
||
friendList: [],
|
||
msgCountInfo: 0,
|
||
requestsInfo: 0,
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getToken() //获取环信token
|
||
|
||
},
|
||
onShow() {
|
||
this.page = 1;
|
||
this.friendList = [];
|
||
this.friend();
|
||
this.msgCount();
|
||
},
|
||
methods: {
|
||
|
||
setUserTokenToStorage(userId, token) {
|
||
const params = {
|
||
key: `EM_${userId}_TOKEN`,
|
||
data: { token: token },
|
||
};
|
||
uni.setStorage({ ...params });
|
||
},
|
||
async getToken() {
|
||
getTokenApi({}).then(res => {
|
||
if (res.code == 1) {
|
||
// if (!uni.getStorageSync('hxtoken')) {
|
||
const loginStore = useLoginStore();
|
||
let chatUserName = uni.getStorageSync('userinfo').user_number
|
||
let token = res.data.access_token
|
||
const { loginWithPassword, loginWithAccessToken } = emConnect();
|
||
loginWithPassword(String(chatUserName), 'xuni123');
|
||
// loginWithAccessToken(chatUserName, token);
|
||
uni.setStorage({
|
||
key: 'myUsername',
|
||
data: chatUserName
|
||
});
|
||
loginStore.setLoginUserBaseInfos({ loginUserId: chatUserName });
|
||
this.setUserTokenToStorage(chatUserName, token);
|
||
// }
|
||
// uni.setStorageSync('hxtoken', res.data.access_token)
|
||
}
|
||
})
|
||
},
|
||
async friend() {
|
||
const res = await Friend(this.form)
|
||
let data = ''
|
||
let ids = ''
|
||
let onlineData = ''
|
||
if (res.code == 1) {
|
||
data = res.data.data
|
||
ids = data.map(item => {
|
||
return item.friend_id
|
||
});
|
||
}
|
||
if (ids.length == 0) {
|
||
return
|
||
}
|
||
const onlineRes = await getOnlineApi({
|
||
'user_ids': ids.join(',')
|
||
})
|
||
if (onlineRes.code == 1) {
|
||
onlineData = onlineRes.data
|
||
data.forEach(item => {
|
||
const onlineStatus = onlineData.find(onlineItem => onlineItem.id == item.friend_id)
|
||
if (onlineStatus) {
|
||
item.is_online = onlineStatus.is_online
|
||
} else {
|
||
item.is_online = false
|
||
}
|
||
})
|
||
}
|
||
this.friendList.push(...data)
|
||
},
|
||
msgCount() {
|
||
MsgCount({}).then(res => {
|
||
if (res.code == 1) {
|
||
this.msgCountInfo = res.data.msg_count
|
||
this.requestsInfo = res.data.requests
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
onScrollToLower() {
|
||
++this.form.page
|
||
console.log('触底事件')
|
||
this.friend()
|
||
},
|
||
tosearch() {
|
||
uni.navigateTo({
|
||
url: '/pages/friends/search'
|
||
})
|
||
},
|
||
tomessageList() {
|
||
uni.navigateTo({
|
||
url: '/pages/friends/messageList'
|
||
})
|
||
},
|
||
toofficialList() {
|
||
uni.navigateTo({
|
||
url: '/pages/friends/officialList'
|
||
})
|
||
},
|
||
toFriendsChat(item) {
|
||
const {
|
||
fetchConversationFromServer,
|
||
removeConversationFromServer,
|
||
sendChannelAck,
|
||
} = emConversation();
|
||
const conversationStore = useConversationStore();
|
||
let channel_id = item.friend.user_number
|
||
//好友的信息openid
|
||
let listener = {
|
||
nickname: item.friend.nickname,
|
||
headImage: item.friend.avatar, // 头像，自行修改
|
||
openid: item.friend.open_id, //获取小程序用户的openId
|
||
}
|
||
sendChannelAck(channel_id, 'singleChat');
|
||
conversationStore.clearConversationUnReadNum(channel_id);
|
||
conversationStore.setChattingUserId(channel_id); //存贮当前聊天对象环信账号
|
||
conversationStore.setUserId(item.friend_id); //存贮当前聊天对象i用户id
|
||
conversationStore.setUserLevel(item.intimacy_level); //存贮当前聊天对象i用户id
|
||
conversationStore.setFriendInfo(listener); //存贮当前聊天对象好友信息
|
||
|
||
|
||
|
||
|
||
let avatarurl = uni.getStorageSync('userinfo').avatar
|
||
let friendAvatar = item.friend.avatar
|
||
conversationStore.setAvatar(avatarurl);
|
||
conversationStore.setFriendAvatar(friendAvatar);
|
||
let data = {
|
||
id: item.friend_id,
|
||
intimacy_level: item.intimacy_level,
|
||
avatar: item.friend.avatar,
|
||
nickname: item.friend.nickname,
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/friends/chat?item=' + encodeURIComponent(JSON.stringify(data))
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background: #F6F8FA;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.page {
|
||
position: relative;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.scroll-view {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.body {
|
||
position: relative;
|
||
padding: 0 60rpx;
|
||
}
|
||
|
||
.back {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 436rpx;
|
||
background: linear-gradient(180deg, #EAD6FF 0%, rgba(255, 255, 255, 0) 100%);
|
||
}
|
||
|
||
.head {
|
||
position: relative;
|
||
padding: 50rpx 60rpx 0 22rpx;
|
||
}
|
||
|
||
.head image {
|
||
position: relative;
|
||
margin: 0 0 0 32rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.head_content {
|
||
position: relative;
|
||
}
|
||
|
||
.head_number {
|
||
position: absolute;
|
||
right: -26rpx;
|
||
top: -30rpx;
|
||
padding: 5rpx 15rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
background: #F55726;
|
||
border: 3rpx solid #FFFFFF;
|
||
border-radius: 100rpx;
|
||
}
|
||
|
||
.list {
|
||
position: relative;
|
||
padding: 30rpx 0 200rpx 0;
|
||
}
|
||
|
||
.list_content {
|
||
position: relative;
|
||
margin: 0 0 30rpx 0;
|
||
padding: 32rpx 30rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.list_avatar {
|
||
position: relative;
|
||
}
|
||
|
||
.list_avatar image {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
display: block;
|
||
flex-shrink: 0;
|
||
border-radius: 100rpx;
|
||
}
|
||
|
||
.list_round {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
background: #02AD41;
|
||
border: 3rpx solid #FFFFFF;
|
||
border-radius: 100rpx;
|
||
}
|
||
|
||
.list_module {
|
||
position: relative;
|
||
margin: 0 0 0 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.list_name {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_id {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #B5B5B5;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.not {
|
||
position: relative;
|
||
margin: 88rpx 0 0 0;
|
||
}
|
||
|
||
.not image {
|
||
width: 344rpx;
|
||
display: block;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.not_title {
|
||
margin: 14rpx 0 0 0;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #9E9E9E;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
}
|
||
</style> |