TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

朋友列表

Browse Source
This commit is contained in:
唐明明
2022-01-24 16:49:44 +08:00
parent 17196b9779
commit e192fc81a6
7 changed files with 73 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
pages/im/friends/index.vue
View File

@@ -1,28 +1,37 @@
<template>
<view>
<u-list height="auto">
<u-list-item>
<u-cell title="新的朋友" @click="toPending">
<u-avatar slot="icon" size="35" font-size="24" icon="plus-people-fill" shape="square"
bg-color="#f0ad4e"></u-avatar>
</u-cell>
</u-list-item>
<u-list-item>
<u-cell title="我的群聊" @click="showToast">
<u-avatar slot="icon" size="35" font-size="24" icon="account-fill" shape="square"
bg-color="#4cd964"></u-avatar>
</u-cell>
</u-list-item>
</u-list>
<block v-if="friends.length > 0">
<u-list height="auto">
<u-list-item v-for="(item, index) in friends" :key="index">
<u-cell :title="item.name + item.userId" @click="toInfo(item.userId)">
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
</u-cell>
</u-list-item>
</u-list>
<view>
<block v-if="friends.length > 0">
<u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
<view>
<view class="friend-flex" @click="toPending">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
<view class="name">新的朋友</view>
</view>
<view class="friend-flex" @click="showToast">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
<view class="name">我的群聊</view>
</view>
</view>
<template v-for="(item, friend) in friends">
<!-- #ifdef APP-NVUE -->
<u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666"></u-index-anchor>
<!-- #endif -->
<u-index-item>
<!-- #ifndef APP-NVUE -->
<u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666"></u-index-anchor>
<!-- #endif -->
<view v-for="(friendItem, index) in item" :key="friendItem.userId" class="friend-flex">
<block v-if="friendItem.portraitUrl != ''">
<u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''" :default-url="require('@/static/user/cover.png')"></u-avatar>
</block>
<block v-else>
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/user/cover.png')"></u-avatar>
</block>
<view class="name">{{friendItem.name}}</view>
</view>
</u-index-item>
</template>
</u-index-list>
</block>
<block v-else>
<u-empty class="pages-null" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无好友">
@@ -37,13 +46,17 @@
} from '@/apis/interfaces/im'
export default {
data() {
return {
return {
indexs : [],
friends: []
}
},
onShow() {
getFriends().then(res => {
this.friends = res
getFriends().then(res => {
this.indexs = res.indexList
this.friends = res.itemArr
console.log(res.itemArr)
})
},
computed: {
@@ -76,9 +89,36 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
// 页面空
.pages-null {
height: 70vh;
}
}
// 好友列表
.friend-flex{
position: relative;
padding: 20rpx $padding;
display: flex;
flex-direction: row;
align-items: center;
// .cover
.name{
flex: 1;
padding-left: $padding;
font-size: $title-size;
@extend .nowrap;
}
&::after{
position: absolute;
height: 1rpx;
background: $border-color;
left: calc(40px + #{$padding * 2});
right: 0;
bottom: 0;
content: " ";
}
&:last-child::after{
display: none;
}
}
</style>