IM测试，下一步页面调整

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,21 +375,58 @@
             }
         },
         {
-            "path": "pages/im/detail",
+            "path": "pages/im/private/index",
             "style": {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "单聊",
                 "app-plus": {
                     "titleNView": {
                         "type": "default",
                         "buttons": [{
                             "float": "right",
-                            "fontSrc": "/static/uniicons.ttf",
+                            "fontSrc": "/static/iconfont.ttf",
-                            "text": "\ue607"
+                            "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",
             "name": "WalletAdd",

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

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>

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>
@@ -51,6 +51,8 @@
             getImToken().then(res => {
                 im.syncFriends()
                 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
                 })
             }
@@ -129,6 +138,7 @@
             .name {
                 display: flex;
                 justify-content: space-between;
+                font-size: $uni-font-size-base;
 
                 .time {
                     font-size: $uni-font-size-sm;
@@ -138,6 +148,7 @@
 
             .u-line-1 {
                 color: $u-info;
+                font-size: $uni-font-size-sm;
             }
         }
     }

pages/im/private/index.vue

@@ -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) {
@@ -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;

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>