diff --git a/.DS_Store b/.DS_Store
index 66544f0..4a239b7 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/pages.json b/pages.json
index 72c7d45..aa9dec8 100644
--- a/pages.json
+++ b/pages.json
@@ -356,14 +356,14 @@
                 "app-plus": {
                     "titleNView": {
                         "buttons": [{
-                                "float": "right",
+                                "float": "left",
                                 "text": "\ue605",
                                 "fontSrc": "/static/iconfont.ttf",
                                 "color": "#000",
                                 "fontSize": "20px"
                             },
                             {
-                                "float": "left",
+                                "float": "right",
                                 "text": "\ue606",
                                 "fontSrc": "/static/iconfont.ttf",
                                 "color": "#000",
@@ -375,20 +375,57 @@
             }
         },
         {
-            "path": "pages/im/detail",
+            "path": "pages/im/private/index",
             "style": {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "单聊",
                 "app-plus": {
                     "titleNView": {
                         "type": "default",
                         "buttons": [{
                             "float": "right",
-                            "fontSrc": "/static/uniicons.ttf",
-                            "text": "\ue607"
+                            "fontSrc": "/static/iconfont.ttf",
+                            "text": "\ue607",
+                            "fontSize": "20px"
                         }]
                     }
                 }
             }
+        },
+        {
+            "path": "pages/im/private/setting",
+            "style": {
+                "navigationBarTitleText": "设置"
+            }
+        },
+        {
+            "path": "pages/im/friends/index",
+            "style": {
+                "navigationBarTitleText": "我的好友"
+            }
+        },
+        {
+            "path": "pages/im/friends/pending",
+            "style": {
+                "navigationBarTitleText": "新的朋友"
+            }
+        },
+        {
+            "path": "pages/im/friends/info",
+            "style": {
+                "navigationBarTitleText": ""
+            }
+        },
+        {
+            "path": "pages/im/friends/mine",
+            "style": {
+                "navigationBarTitleText": "我的资料"
+            }
+        },
+        {
+            "path": "pages/im/group/index",
+            "style": {
+                "navigationBarTitleText": "我的群聊"
+            }
         },
         {
             "path": "pages/wallet/add",
diff --git a/pages/im/friends/index.vue b/pages/im/friends/index.vue
index fabc223..d4cca29 100644
--- a/pages/im/friends/index.vue
+++ b/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>
diff --git a/pages/im/friends/info.vue b/pages/im/friends/info.vue
index 48d48ea..f9d78a3 100644
--- a/pages/im/friends/info.vue
+++ b/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>
diff --git a/pages/im/friends/mine.vue b/pages/im/friends/mine.vue
index 48d48ea..079e797 100644
--- a/pages/im/friends/mine.vue
+++ b/pages/im/friends/mine.vue
@@ -1,4 +1,7 @@
 <template>
+    <div>
+        我的资料，也就展示个二维码吧
+    </div>
 </template>
 
 <script>
diff --git a/pages/im/friends/pending.vue b/pages/im/friends/pending.vue
new file mode 100644
index 0000000..e890ad9
--- /dev/null
+++ b/pages/im/friends/pending.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>
+        好友搜索，好友申请列表 都会在这个页面
+    </div>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
diff --git a/pages/im/group/index.vue b/pages/im/group/index.vue
new file mode 100644
index 0000000..047b2fb
--- /dev/null
+++ b/pages/im/group/index.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <u-button @click="toIndex">会首页</u-button>
+    </div>
+</template>
+
+<script>
+    export default {
+        methods: {
+            toIndex() {
+                uni.switchTab({
+                    url: '/pages/im/index'
+                })
+            }
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/pages/im/index.vue b/pages/im/index.vue
index c0e94ed..93f4792 100644
--- a/pages/im/index.vue
+++ b/pages/im/index.vue
@@ -20,7 +20,7 @@
             <u-loadmore status="nomore" />
         </div>
         <div v-else>
-            <button @click="toLogin">去登录</button>
+            <u-button @click="toLogin">去登录</u-button>
         </div>
     </div>
 </template>
@@ -48,9 +48,11 @@
             }
         },
         onLoad() {
-            getImToken().then(res => {
+            getImToken().then(res => {
                 im.syncFriends()
-                im.connect(res.token, res.userInfo)
+                im.connect(res.token, res.userInfo)
+                
+                this.getConversationList()
             })
         },
         onShow() {
@@ -61,7 +63,14 @@
             this.isShown = false
         },
         onNavigationBarButtonTap(e) {
-            if (e.index == 0) {
+            if (e.index == 0) {}
+            if (e.index == 1) {
+                uni.navigateTo({
+                    url: '/pages/im/friends/index',
+                    fail: (err) => {
+                        console.log(err);
+                    }
+                })
             }
         },
         watch: {
@@ -96,7 +105,7 @@
             // 进入聊天的详情页面，清理未读消息数量
             toDetail(item) {
                 uni.navigateTo({
-                    url: '/pages/im/detail?targetId=' + item.targetId +
+                    url: '/pages/im/private/index?targetId=' + item.targetId +
                         '&conversationType=' + item.conversationType
                 })
             }
@@ -128,7 +137,8 @@
 
             .name {
                 display: flex;
-                justify-content: space-between;
+                justify-content: space-between;
+                font-size: $uni-font-size-base;
 
                 .time {
                     font-size: $uni-font-size-sm;
@@ -137,7 +147,8 @@
             }
 
             .u-line-1 {
-                color: $u-info;
+                color: $u-info;
+                font-size: $uni-font-size-sm;
             }
         }
     }
diff --git a/pages/im/detail.vue b/pages/im/private/index.vue
similarity index 93%
rename from pages/im/detail.vue
rename to pages/im/private/index.vue
index 4b04d38..6cb5d5b 100644
--- a/pages/im/detail.vue
+++ b/pages/im/private/index.vue
@@ -76,18 +76,18 @@
             })
 
             RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
-            im.setNotifyBadge()
+            im.setNotifyBadge()
             RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
 
             this.getMessageList()
-            
+
             // 监听消息回执
             RongIMLib.addReadReceiptReceivedListener((result) => {
-                const res = result.data.message
-                if (res.targetId == this.targetId) {
-                    this.getMessageList()
-                }
-            })
+                const res = result.data.message
+                if (res.targetId == this.targetId) {
+                    this.getMessageList()
+                }
+            })
         },
         onUnload() {
             RongIMLib.clearReadReceiptReceivedListener()
@@ -97,6 +97,14 @@
                 return this.inputTxt.length > 0
             }
         },
+        onNavigationBarButtonTap(e) {
+            if (e.index == 0) {
+                uni.navigateTo({
+                    url: '/pages/im/private/setting?targetId=' + this.targetId +
+                        '&conversationType=' + this.conversationType
+                })
+            }
+        },
         watch: {
             '$store.getters.newMessage': function(msg) {
                 if (msg.targetId == this.targetId) {
@@ -183,7 +191,7 @@
     $footer-height: 55px;
 
     .scroll {
-        height: calc(100vh - 55px);
+        height: calc(100vh - 55px);
         width: 100vw;
         padding: 0 $uni-spacing-col-lg;
     }
@@ -245,7 +253,7 @@
         .msg {
             font-size: $uni-font-size-base;
             margin: $uni-spacing-col-base;
-            padding: $uni-spacing-col-lg;
+            padding: $uni-spacing-col-base;
             word-wrap: break-word;
             width: 60%;
             border-radius: $uni-border-radius-base;
diff --git a/pages/im/private/setting.vue b/pages/im/private/setting.vue
new file mode 100644
index 0000000..89d97db
--- /dev/null
+++ b/pages/im/private/setting.vue
@@ -0,0 +1,68 @@
+<template>
+    <div>
+        会话设置 {{ targetId}}
+        <div @click="setStatus">免打扰开关 {{status}}</div>
+        <div @click="setTop">置顶会话 {{isTop}}</div>
+        
+        <u-button @click="toIndex">会首页</u-button>
+    </div>
+</template>
+
+<script>
+    import * as RongIMLib from '@rongcloud/imlib-uni'
+
+    export default {
+        data() {
+            return {
+                targetId: '',
+                conversationType: 1,
+                isTop: false,
+                status: 0 // 0 是免打扰，1是正常通知
+            }
+        },
+        onLoad(e) {
+            this.targetId = e.targetId
+            this.conversationType = e.conversationType
+
+            RongIMLib.getConversation(this.conversationType, this.targetId, ({
+                conversation
+            }) => {
+                this.isTop = conversation.isTop
+            })
+
+            RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
+                status
+            }) => {
+                this.status = status
+            })
+        },
+        methods: {
+            toIndex() {
+                uni.switchTab({
+                    url: '/pages/im/index'
+                })
+            },
+            setStatus() {
+                RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
+                    status
+                }) => {
+                    this.status = status
+                })
+            },
+            setTop() {
+                RongIMLib.setConversationToTop(this.conversationType, this.targetId, !this.isTop, (res) => {
+                    console.log(res);
+                    RongIMLib.getConversation(this.conversationType, this.targetId, ({
+                        conversation
+                    }) => {
+                        console.log(conversation.isTop);
+                        this.isTop = conversation.isTop
+                    })
+                })
+            }
+        }
+    }
+</script>
+
+<style>
+</style>