IM测试，下一步页面调整

pages/im/friends/index.vue

@@ -1,14 +1,139 @@
 <template>
     <div>
+        <view class="list">
+            <view class="list__item" @click="toPending">
+                <u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></u-avatar>
+                <text class="list__item__user-name">新的朋友</text>
+            </view>
+            <u-line></u-line>
+            <view class="list__item" @click="toGroup">
+                <u-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar>
+                <text class="list__item__user-name">我的群聊</text>
+            </view>
+            <u-line></u-line>
+        </view>
 
+        <u-index-list :indexList="indexList">
+            <template v-for="(item, index) in itemArr">
+                <!-- #ifdef APP-NVUE -->
+                <u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
+                <!-- #endif -->
+                <u-index-item :key="index">
+                    <!-- #ifndef APP-NVUE -->
+                    <u-index-anchor :text="indexList[index]"></u-index-anchor>
+                    <!-- #endif -->
+                    <view class="list" v-for="(item1, index1) in item" :key="index1">
+                        <view class="list__item" @click="toInfo">
+                            <image class="list__item__avatar" :src="item1.url"></image>
+                            <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>
     </div>
 </template>
 
 <script>
+    const indexList = () => {
+        const indexList = []
+        const charCodeOfA = 'A'.charCodeAt(0)
+        indexList.push("↑")
+        indexList.push("☆")
+        for (let i = 0; i < 26; i++) {
+            indexList.push(String.fromCharCode(charCodeOfA + i))
+        }
+        indexList.push('#')
+        return indexList
+    }
     export default {
-
+        data() {
+            return {
+                indexList: indexList(),
+                urls: [
+                    'https://cdn.uviewui.com/uview/album/1.jpg',
+                    'https://cdn.uviewui.com/uview/album/2.jpg',
+                    'https://cdn.uviewui.com/uview/album/3.jpg',
+                    'https://cdn.uviewui.com/uview/album/4.jpg',
+                    'https://cdn.uviewui.com/uview/album/5.jpg',
+                    'https://cdn.uviewui.com/uview/album/6.jpg',
+                    'https://cdn.uviewui.com/uview/album/7.jpg',
+                    'https://cdn.uviewui.com/uview/album/8.jpg',
+                    'https://cdn.uviewui.com/uview/album/9.jpg',
+                    'https://cdn.uviewui.com/uview/album/10.jpg',
+                ],
+                names: ["勇往无敌", "疯狂的迪飙", "磊爱可", "梦幻梦幻梦", "枫中飘瓢", "飞翔天使",
+                    "曾经第一", "追风幻影族长", "麦小姐", "胡格罗雅", "Red磊磊", "乐乐立立", "青龙爆风", "跑跑卡叮车", "山里狼", "supersonic超"
+                ]
+            }
+        },
+        computed: {
+            itemArr() {
+                return this.indexList.map(item => {
+                    const arr = []
+                    for (let i = 0; i < 10; i++) {
+                        arr.push({
+                            name: this.names[uni.$u.random(0, this.names.length - 1)],
+                            url: this.urls[uni.$u.random(0, this.urls.length - 1)]
+                        })
+                    }
+                    return arr
+                })
+            }
+        },
+        methods: {
+            toPending() {
+                uni.navigateTo({
+                    url: '/pages/im/friends/pending'
+                })
+            },
+            toGroup() {
+                uni.navigateTo({
+                    url: '/pages/im/group/index',
+                    fail: (err) => {
+                        console.log(err);
+                    }
+                })
+            },
+            toInfo() {
+                uni.navigateTo({
+                    url: '/pages/im/friends/info'
+                })
+            }
+        }
     }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+    .list {
+
+        &__item {
+            @include flex;
+            padding: 6px 12px;
+            align-items: center;
+
+            &__avatar {
+                height: 35px;
+                width: 35px;
+                border-radius: 3px;
+            }
+
+            &__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;
+        }
+    }
 </style>

pages/im/friends/info.vue

@@ -1,8 +1,21 @@
-<template>
-</template>
-
+<template>
+    <div>
+        好友资料，
+        <u-button @click="toPrivate">发送消息</u-button>
+    </div>
+</template>
+
 <script>
-</script>
-
-<style>
+    export default {
+        methods: {
+            toPrivate() {
+                uni.navigateTo({
+                    url: '/pages/im/private/index?targetId=10047&conversationType=1'
+                })
+            }
+        }
+    }
+</script>
+
+<style>
 </style>

pages/im/friends/mine.vue

@@ -1,4 +1,7 @@
 <template>
+    <div>
+        我的资料，也就展示个二维码吧
+    </div>
 </template>
 
 <script>

pages/im/friends/pending.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        好友搜索，好友申请列表 都会在这个页面
+    </div>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>