From 33ee2ebd55bd5cef94755755250ce354c1c45775 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Tue, 25 Jan 2022 15:27:33 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=94=B3=E8=AF=B7=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/friends/index.vue    |   6 +-
 pages/im/index.vue            | 300 ++++++++++++++++++----------------
 utils/im/historyMessages.json |  23 +++
 utils/im/index.js             |   2 +-
 4 files changed, 191 insertions(+), 140 deletions(-)
 create mode 100644 utils/im/historyMessages.json

diff --git a/pages/im/friends/index.vue b/pages/im/friends/index.vue
index daa4e61..69d2f7a 100644
--- a/pages/im/friends/index.vue
+++ b/pages/im/friends/index.vue
@@ -68,12 +68,14 @@ export default {
         // 新朋友
         toPending() {
             uni.navigateTo({
-                url: '/pages/im/friends/search'
+                url: '/pages/im/friends/pending'
             });
         }
     },
     onNavigationBarButtonTap(e) {
-        this.toPending();
+        uni.navigateTo({
+            url: '/pages/im/friends/search'
+        });
     }
 };
 </script>
diff --git a/pages/im/index.vue b/pages/im/index.vue
index 7c0630f..fb567e3 100644
--- a/pages/im/index.vue
+++ b/pages/im/index.vue
@@ -1,51 +1,53 @@
 <template>
-    <view class="contents">
-		<view class="ios-top"></view>
-		<!-- header -->
-		<view class="custom-header">
-			<view class="header-flex">
-				<view class="tabs">
-					<view class="item show">私聊</view>
-					<view class="item" @click="onNav('', {})">群聊</view>
-				</view>
-				<view class="btns">
-					<view class="item" @click="onNav('imFriends', {})">
-						<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
-					</view>
-					<view class="item" @click="onNav('', {})">
-						<uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- content -->
+    <view class="contents">
+        <view class="ios-top"></view>
+        <!-- header -->
+        <view class="custom-header">
+            <view class="header-flex">
+                <view class="tabs">
+                    <view class="item show">私聊</view>
+                    <view class="item" @click="onNav('', {})">群聊</view>
+                </view>
+                <view class="btns">
+                    <view class="item" @click="onNav('imFriends', {})">
+                        <uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
+                    </view>
+                    <view class="item" @click="onNav('', {})">
+                        <uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <!-- content -->
         <view v-if="$store.state.token != ''">
             <block v-if="conversations.length < 1">
                 <view class="vertical null-list">
-                    <u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息">
-                        <!-- <template>
-                            <view class="null-list-btn">开启聊天</view>
-                        </template> -->
-                    </u-empty>
+                    <u-empty mode="message" textColor="#999" text="暂无好友消息" />
                 </view>
             </block>
             <block v-else>
-                <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
-                <view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]" @tap="toDetail(item)" @longpress="onLongPress" :data-item="item">
-					<view class="avatar">
-						<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]" :value="item.unreadMessageCount" />
-						<u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" shape="square" :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'" font-size="16" randomBgColor></u-avatar>
-						<u-avatar v-else :src="friend(item.targetId).portraitUrl" shape="square" size="44"></u-avatar>
-					</view>
-					<view class="content">
-						<view class="header">
+                <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
+                <view v-for="(item, index) in conversations" :key="index"
+                    :class="['message', 'u-border-bottom', { 'is-top': item.isTop }]" @tap="toDetail(item)"
+                    @longpress="onLongPress" :data-item="item">
+                    <view class="avatar">
+                        <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
+                            :value="item.unreadMessageCount" />
+                        <u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" shape="square"
+                            :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
+                            font-size="16" randomBgColor></u-avatar>
+                        <u-avatar v-else :src="friend(item.targetId).portraitUrl" shape="square" size="44"></u-avatar>
+                    </view>
+                    <view class="content">
+                        <view class="header">
                             <view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
                             <view class="time">{{ item.sentTime|timeCustomCN }}</view>
-						</view>
-						<view class="preview">{{ item.latestMessage.content || '' }}</view>
-                    </view>
+                        </view>
+                        <view class="preview">{{ item.latestMessage.content || '' }}</view>
+                    </view>
                 </view>
-                <view class="shade" @tap="hidePop">
+                <!-- TODO 长按的弹出框，怎么点击隐藏，没搞明白 -->
+                <view class="shade" @tap="hidePop">
                     <view class="pop" :style="popStyle" :class="{'show':showPop}">
                         <view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
                             {{item}}
@@ -69,8 +71,10 @@
     import * as RongIMLib from '@rongcloud/imlib-uni'
     import im from '@/utils/im/index.js'
     import userAuth from '@/public/userAuth'
-    import { getImToken } from '@/apis/interfaces/im.js'
-	
+    import {
+        getImToken
+    } from '@/apis/interfaces/im.js'
+
     export default {
         data() {
             return {
@@ -97,13 +101,12 @@
         },
         onShow() {
             if (this.$store.state.token !== '') {
-                getImToken().then(res => {
-                    console.log("IMTOKEN", res);
-                    im.connect(res.token, res.userInfo, () => {
-                        this.getConversationList()
+                getImToken().then(res => {
+                    im.connect(res.token, res.userInfo, () => {
+                        this.getConversationList()
                     })
                 })
-            }
+            }
             this.isShown = true
         },
         onHide() {
@@ -150,11 +153,12 @@
                         .pickedItem.isTop)
                 } else {
                     RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
-                }
+                }
+                im.setNotifyBadge()
                 this.getConversationList()
                 this.hidePop()
             },
-            onLongPress(e) {
+            onLongPress(e) {
                 let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
 
                 if (touches.clientY > (this.winSize.height / 2)) {
@@ -189,12 +193,12 @@
             getConversationList() {
                 const count = 1000
                 const timestamp = 0
-                RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
-                    console.log('获取列表', res);
-                    if (res.code === 0 && res.conversations.length > 0) {
-                        this.conversations = res.conversations
+                RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
+                    console.log('getConversationList', res);
+                    if (res.code === 0) {
+                        this.conversations = res.conversations
                     }
-                })
+                })
             },
             // 进入聊天的详情页面，清理未读消息数量
             toDetail(item) {
@@ -203,76 +207,86 @@
                     url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
                         .conversationType
                 })
-            },
-			// 点击按钮
-			onNav(name, params){
-				if(this.toLogin){
-					if(name === ''){
-						uni.showToast({
-							title: '开发中，敬请期待',
-							icon : 'none'
-						})
-						return
-					}
-					this.$Router.push({name, params})
-				}
-			}
+            },
+            // 点击按钮
+            onNav(name, params) {
+                if (this.toLogin) {
+                    if (name === '') {
+                        uni.showToast({
+                            title: '开发中，敬请期待',
+                            icon: 'none'
+                        })
+                        return
+                    }
+                    this.$Router.push({
+                        name,
+                        params
+                    })
+                }
+            }
         }
     }
 </script>
 
-<style lang="scss" scoped>
-	// header
-	.custom-header{
-		@extend .ios-top;
-		background: white;
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: 9999;
-		.header-flex{
-			padding: 20rpx $padding;
-			display: flex;
-			justify-content: space-between;
-			height: 60rpx;
-			line-height: 60rpx;
-			.tabs{
-				.item{
-					margin-left: $margin;
-					display: inline-block;
-					font-size: $title-size-lg;
-					color: $text-gray;
-					padding: 0 ($padding - 10);
-					border-radius: 30rpx;
-					&:first-child{
-						margin: 0;
-					}
-					&.show{
-						background: rgba($color: $main-color, $alpha: .1);
-						color: $main-color;
-						font-weight: bold;
-					}
-				}
-			}
-			.btns{
-				.item{
-					display: inline-block;
-					margin-left: $margin;
-				}
-			}
-		}
-	}
-	
-	// contents
+<style lang="scss" scoped>
+    // header
+    .custom-header {
+        @extend .ios-top;
+        background: $window-color;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 9999;
+
+        .header-flex {
+            padding: 20rpx $padding;
+            display: flex;
+            justify-content: space-between;
+            height: 60rpx;
+            line-height: 60rpx;
+
+            .tabs {
+                .item {
+                    margin-left: $margin;
+                    display: inline-block;
+                    font-size: $title-size-lg;
+                    color: $text-gray;
+                    padding: 0 ($padding - 10);
+                    border-radius: 30rpx;
+
+                    &:first-child {
+                        margin: 0;
+                    }
+
+                    &.show {
+                        background: rgba($color: $main-color, $alpha: .1);
+                        color: $main-color;
+                        font-weight: bold;
+                    }
+                }
+            }
+
+            .btns {
+                .item {
+                    display: inline-block;
+                    margin-left: $margin;
+                }
+            }
+        }
+    }
+
+    // contents
     .contents {
         background-color: $window-color;
-        min-height: 100vh;
-		padding-top: 90rpx;
-		box-sizing: border-box;
+        min-height: 100vh;
+        padding-top: 90rpx;
+        box-sizing: border-box;
+
         .null-list {
             height: 100vh;
             text-align: center;
+
             &-btn {
                 margin-top: $margin * 2;
                 line-height: 70rpx;
@@ -284,54 +298,66 @@
                 box-sizing: border-box;
             }
         }
+
         .message {
-            background: white;
-			padding: 20rpx 30rpx;
-			position: relative;
-			display: flex;
+            background: white;
+            padding: 20rpx 30rpx;
+            position: relative;
+            display: flex;
+
+            &.u-border-bottom {}
+
             &.is-top {
-                background: $window-color;
-            }
-            .avatar {
-				position: relative;
+                background: $window-color;
+            }
+
+            .avatar {
+                position: relative;
+
                 .u-badge {
                     z-index: 998;
                 }
             }
-            .content {
-				padding-left: 30rpx;
-				width: calc(100% - 44px);
-				box-sizing: border-box;
+
+            .content {
+                padding-left: 30rpx;
+                width: calc(100% - 44px);
+                box-sizing: border-box;
+
                 .header {
                     display: flex;
                     justify-content: space-between;
+
                     .name {
                         font-size: $title-size + 4;
                     }
+
                     .time {
                         font-size: $title-size-sm;
                         color: $text-gray;
                     }
                 }
+
                 .preview {
                     word-break: break-all;
                     color: $text-gray;
-                    font-size: $title-size-sm;
+                    font-size: $title-size-sm;
                     @extend .nowrap;
                 }
             }
         }
-        .message:not(:last-child) {
-            &::after {
-                position: absolute;
-                left: calc(44px + #{$padding} + 30rpx);
-                right: 0;
-                bottom: 0;
-                content: " ";
-                height: 1rpx;
-                background: $border-color;
-            }
-        }
+
+        // .message:not(:last-child) {
+        //     &::after {
+        //         position: absolute;
+        //         left: calc(44px + #{$padding} + 30rpx);
+        //         right: 0;
+        //         bottom: 0;
+        //         content: " ";
+        //         height: 1rpx;
+        //         background: $border-color;
+        //     }
+        // }
     }
 
     /* 遮罩 */
diff --git a/utils/im/historyMessages.json b/utils/im/historyMessages.json
new file mode 100644
index 0000000..97f2e47
--- /dev/null
+++ b/utils/im/historyMessages.json
@@ -0,0 +1,23 @@
+[{
+    "objectName": "RC:TxtMsg",
+    "receivedTime": 1643080237399,
+    "extra": "",
+    "messageUId": "BUFC-3FSU-OLE4-I31K",
+    "conversationType": 1,
+    "messageDirection": 2,
+    "senderUserId": "10041",
+    "content": {
+        "content": "你好，这是 1710 条消息条消息条消息条消息条消息条消息条消息条消息条消息0.97796900 1642741562",
+        "objectName": "RC:TxtMsg",
+        "userInfo": {
+            "userId": "10041",
+            "name": "我是eth",
+            "portraitUrl": "http://storage.zh.shangkelian.cn/images/2022/01/12/3d2a103386df6822db7e5290272e8bc2.png"
+        }
+    },
+    "targetId": "10041",
+    "sentTime": 1642741563003,
+    "messageId": 2,
+    "receivedStatus": 1,
+    "sentStatus": 30
+}]
diff --git a/utils/im/index.js b/utils/im/index.js
index d6a13bb..50ac24b 100644
--- a/utils/im/index.js
+++ b/utils/im/index.js
@@ -10,7 +10,7 @@ const initIm = (KEY) => {
     addListeners()
 }
 
-const setNotifyBadge = (count) => {
+const setNotifyBadge = () => {
     // 获取未读消息数量
     RongIMLib.getTotalUnreadCount(({
         code,