朋友列表

apis/interfaces/im.js

@@ -12,7 +12,7 @@ import {
 // 获取好友列表
 const getFriends = () => {
     return request({
-        url: 'im/friends',
+        url: 'im/friends/letter',
     }, true)
 }
 

pages/im/friends/index.vue

@@ -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>

pages/im/index.vue

@@ -300,7 +300,8 @@
             }
             .content {
 				padding-left: 30rpx;
-                flex: 1;
+				width: calc(100% - 44px);
+				box-sizing: border-box;
                 .header {
                     display: flex;
                     justify-content: space-between;
@@ -315,7 +316,7 @@
                 .preview {
                     word-break: break-all;
                     color: $text-gray;
-                    font-size: $title-size-sm;
+                    font-size: $title-size-sm;
                     @extend .nowrap;
                 }
             }