126 lines
3.5 KiB
Vue
126 lines
3.5 KiB
Vue
<template>
|
|
<view>
|
|
<view class="list">
|
|
<view class="list__item" @click="toPending">
|
|
<u-avatar size="35" icon="plus-people-fill" fontSize="26" bg-color="#f0ad4e"></u-avatar>
|
|
<text class="list__item__user-name">新的朋友</text>
|
|
</view>
|
|
<u-line></u-line>
|
|
<view class="list__item" @click="showToast">
|
|
<u-avatar size="35" icon="account-fill" fontSize="26" bg-color="#4cd964"></u-avatar>
|
|
<text class="list__item__user-name">我的群聊</text>
|
|
</view>
|
|
<u-line></u-line>
|
|
</view>
|
|
<block v-if="friendsArr.length > 0">
|
|
<u-index-list activeColor="#34CE98">
|
|
<template v-for="(item, index) in friendsArr">
|
|
<!-- #ifdef APP-NVUE -->
|
|
<u-index-anchor bgColor="#F3F6FB" color="#666" :text="indexList[index]" :key="index"></u-index-anchor>
|
|
<!-- #endif -->
|
|
<u-index-item :key="index">
|
|
<!-- #ifndef APP-NVUE -->
|
|
<u-index-anchor :text="indexList[index]" bgColor="#F3F6FB" color="#666"></u-index-anchor>
|
|
<!-- #endif -->
|
|
<view class="list" v-for="(item1, index1) in item" :key="index1">
|
|
<view class="list__item" @click="toInfo(10047)">
|
|
<image class="list__item__avatar" :src="item1.url"></image>
|
|
<!-- <u-avatar size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar> -->
|
|
<text class="list__item__user-name">{{item1.name}}</text>
|
|
</view>
|
|
<u-line></u-line>
|
|
</view>
|
|
</u-index-item>
|
|
</template>
|
|
<view slot="footer" class="u-safe-area-inset--bottom">
|
|
<text class="list__footer">共305位好友</text>
|
|
</view>
|
|
</u-index-list>
|
|
</block>
|
|
<block v-else>
|
|
<u-empty
|
|
class="pages-null"
|
|
mode="data"
|
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
|
text="暂未添加好友"
|
|
>
|
|
</u-empty>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getFriends } from '@/apis/interfaces/im'
|
|
export default {
|
|
data() {
|
|
return {
|
|
friendsArr: []
|
|
}
|
|
},
|
|
onShow() {
|
|
getFriends().then(res => {
|
|
this.friendsArr = res
|
|
console.log(res)
|
|
})
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
methods: {
|
|
// 扫码提示
|
|
showToast(){
|
|
uni.showToast({
|
|
title: "群聊功能暂未开放，敬请期待",
|
|
icon : "none"
|
|
})
|
|
},
|
|
// 新朋友
|
|
toPending() {
|
|
uni.navigateTo({
|
|
url: '/pages/im/friends/pending'
|
|
})
|
|
},
|
|
// 用户资料
|
|
toInfo(targetId) {
|
|
uni.navigateTo({
|
|
url: '/pages/im/friends/info?targeId=' + targetId
|
|
})
|
|
}
|
|
},
|
|
onNavigationBarButtonTap(e) {
|
|
this.toPending()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.list {
|
|
&__item {
|
|
@include flex;
|
|
padding: 6px 12px;
|
|
align-items: center;
|
|
&__avatar {
|
|
height: 35px;
|
|
width: 35px;
|
|
border-radius: 50%;
|
|
}
|
|
&__user-name {
|
|
font-size: 16px;
|
|
margin-left: 10px;
|
|
color: $u-main-color;
|
|
}
|
|
}
|
|
&__footer {
|
|
color: $u-tips-color;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
margin: 15px 0;
|
|
}
|
|
}
|
|
|
|
// 页面空
|
|
.pages-null{
|
|
height: 70vh;
|
|
}
|
|
</style>
|