From 21bee4972980b4503002a5f78e3aab9a5c05f97b Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Fri, 21 Jan 2022 12:15:45 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E3=80=90=E6=9B=B4=E6=96=B0=E3=80=91IM?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E9=80=BB=E8=BE=91=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                      |   1 +
 pages/im/friends/info.vue    | 255 +++++++++++++++++++----------------
 pages/im/index.vue           | 225 ++++++++++++++++++++-----------
 pages/im/private/index.vue   |  25 ++--
 pages/im/private/setting.vue | 191 +++++++++++++++-----------
 store/modules/im.js          |  23 +++-
 uni.scss                     |   2 +-
 utils/im/index.js            |   3 +-
 8 files changed, 430 insertions(+), 295 deletions(-)

diff --git a/App.vue b/App.vue
index 6861729..069c1f4 100644
--- a/App.vue
+++ b/App.vue
@@ -5,6 +5,7 @@
     export default {
         onLaunch: function() {
             im.initIm('lmxuhwaglu76d')
+            return;
             //#ifdef APP-PLUS
             // 获取系统版本号
             getVersions({
diff --git a/pages/im/friends/info.vue b/pages/im/friends/info.vue
index 75a55d6..1c4bebe 100644
--- a/pages/im/friends/info.vue
+++ b/pages/im/friends/info.vue
@@ -1,122 +1,145 @@
-<template>
-	<view class="content">
-		<!-- 用户信息 -->
-		<view class="user-info">
-			<u-avatar
-				src="https://cdn.uviewui.com/uview/album/1.jpg"
-				size="58"
-			></u-avatar>
-			<view class="nickname">{{ userInfo.name }}</view>
-			<view class="sex">
-				<u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
-				<!-- <u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag> -->
-			</view>
-		</view>
-		<view class="user-lists">
-			<view class="user-lists-item">
-				<label>地区</label>
-				<text>黑龙江 哈尔滨</text>
-			</view>
-		</view>
-		<!-- 发送消息 -->
-		<view class="info-footer">
-			<button class="open-btn" @click="toPrivate">发送消息</button>
-		</view>
-	</view>
+<template>
+    <view class="content">
+        <!-- 用户信息 -->
+        <view class="user-info">
+            <u-avatar :src="userInfo.portraitUrl" size="100"></u-avatar>
+            
+            <view class="nickname">{{ userInfo.name }}</view>
+            <!-- <view class="sex">
+                <u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
+                <u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag>
+            </view> -->
+            <view class="address">
+                {{ userInfo.address}}
+            </view>
+        </view>
+        <!-- <view class="user-lists">
+			<view class="user-lists-item">
+				<label>地区</label>
+				<text>黑龙江 哈尔滨</text>
+			</view>
+		</view> -->
+        <!-- 发送消息 -->
+        <view class="info-footer">
+            <button class="open-btn" @click="toPrivate">发送消息</button>
+        </view>
+    </view>
 </template>
 
-<script>
-    import {
-        getUserInfo
-    } from '@/apis/interfaces/im.js'
-    
-    export default {
-        data() {
-            return {
-                userInfo: {}
-            }
-        },
-        onLoad(e) {
-            getUserInfo(e.targetId).then(res => {
-                this.userInfo = res
-            })
-        },
-        methods: {
-            toPrivate() {
-                uni.navigateTo({
-                    url: '/pages/im/private/index?targetId=10047&conversationType=1'
-                })
-            }
-        }
+<script>
+    import {
+        getUserInfo
+    } from '@/apis/interfaces/im.js'
+
+    export default {
+        data() {
+            return {
+                targetId: '',
+                userInfo: {}
+            }
+        },
+        onLoad(e) {
+            this.targetId = e.targetId
+            getUserInfo(e.targetId).then(res => {
+                this.userInfo = res
+
+                uni.setNavigationBarTitle({
+                    title: res.name
+                })
+            })
+        },
+        methods: {
+            toPrivate() {
+                uni.navigateTo({
+                    url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
+                })
+            }
+        }
     }
 </script>
 
-<style lang="scss" scoped>
-	.content{
-		min-height: 100vh;
-		background: $window-color;
-	}
-	// 用户信息
-	.user-info{
-		padding: $padding*3 $padding;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		background: white;
-		.nickname{
-			font-size: 42rpx;
-			padding-top: $padding;
-			color: $text-color;
-		}
-		.sex{
-			padding-top: $padding/2;
-			text{
-				font-size: $title-size-sm;
-				background: #303133;
-				padding: 0 10rpx;
-				color: white;
-				border-radius: $radius-m;
-				line-height: 30rpx;
-				display: inline-block;
-			}
-		}
-	}
-	.user-lists{
-		margin-top: $margin;
-		background: white;
-		.user-lists-item{
-			padding: 0 $padding;
-			display: flex;
-			justify-content: space-between;
-			line-height: 90rpx;
-			font-size: $title-size-lg;
-			label{
-				color: $text-color;
-			}
-			text{
-				color: $text-gray;
-			}
-		}
-	}
-	// 发送消息
-	.info-footer{
-		padding: $padding;
-		width: 100%;
-		box-sizing: border-box;
-		.open-btn{
-			width: 100%;
-			height: 90rpx;
-			line-height: 90rpx;
-			background: $main-color;
-			border-radius: $radius-lg;
-			padding: 0;
-			margin: 0;
-			color: white;
-			font-size: $title-size;
-			&::after{
-				display: none;
-			}
-		}
-	}
+<style lang="scss" scoped>
+    .content {
+        min-height: 100vh;
+        background: $window-color;
+    }
+
+    // 用户信息
+    .user-info {
+        padding: $padding*3 $padding;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: white;
+
+        .nickname {
+            font-size: 42rpx;
+            padding-top: $padding;
+        }
+
+        .address {
+            line-height: 64rpx;
+            font-size: 26rpx;
+            color: $text-gray;
+        }
+
+        .sex {
+            padding-top: $padding/2;
+
+            text {
+                font-size: $title-size-sm;
+                background: #303133;
+                padding: 0 10rpx;
+                color: white;
+                border-radius: $radius-m;
+                line-height: 30rpx;
+                display: inline-block;
+            }
+        }
+    }
+
+    .user-lists {
+        margin-top: $margin;
+        background: white;
+
+        .user-lists-item {
+            padding: 0 $padding;
+            display: flex;
+            justify-content: space-between;
+            line-height: 90rpx;
+            font-size: $title-size-lg;
+
+            label {
+                color: $text-color;
+            }
+
+            text {
+                color: $text-gray;
+            }
+        }
+    }
+
+    // 发送消息
+    .info-footer {
+        padding: $padding;
+        width: 100%;
+        box-sizing: border-box;
+
+        .open-btn {
+            width: 100%;
+            height: 90rpx;
+            line-height: 90rpx;
+            background: $main-color;
+            border-radius: $radius-lg;
+            padding: 0;
+            margin: 0;
+            color: white;
+            font-size: $title-size;
+
+            &::after {
+                display: none;
+            }
+        }
+    }
 </style>
diff --git a/pages/im/index.vue b/pages/im/index.vue
index 5634ccc..d4234c7 100644
--- a/pages/im/index.vue
+++ b/pages/im/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <view class="content">
+    <view class="container">
         <view v-if="$store.state.token != ''">
             <block v-if="conversations.length < 1">
                 <view class="vertical null-list">
@@ -11,24 +11,25 @@
                 </view>
             </block>
             <block v-else>
-                <view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)">
-                    <view class="mssage-action">
-                        <block v-if="!friend(item.targetId).portraitUrl">
-                            <u-avatar clsss="mssage-action-cover" size="44"
-                                :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
-                                font-size="14" randomBgColor></u-avatar>
-                        </block>
-                        <block v-else>
-                            <u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44">
-                            </u-avatar>
-                        </block>
-                        <view class="mssage-action-content">
-                            <view class="mssage-header">
-                                <view class="header-name">{{ friend(item.targetId).name || '未知用户' }}</view>
-                                <view class="header-time">{{ item.sentTime|timeCustomCN }}</view>
-                            </view>
-                            <view class="mssage-msg">{{ item.latestMessage.content }}</view>
+                <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" @click="toDetail(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"
+                            :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
+                            font-size="14" randomBgColor></u-avatar>
+                        <u-avatar v-else :src="friend(item.targetId).portraitUrl" size="44">
+                        </u-avatar>
+                    </view>
+
+                    <view class="content">
+                        <view class="header">
+                            <view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
+                            <view class="time">{{ item.targetId }} | {{ item.sentTime|timeCustomCN }}</view>
                         </view>
+                        <view class="preview">{{ item.latestMessage.content || '&nbsp;' }}</view>
                     </view>
                 </view>
             </block>
@@ -58,6 +59,7 @@
                 isShown: true, // 当前页面显示状态
                 conversations: [], // 会话列表
                 isImToken: '', // 是否已鉴权
+                connection: 0
             }
         },
         computed: {
@@ -75,7 +77,7 @@
                         this.isImToken = res.token
                         this.getConversationList()
                     })
-                }
+                }
                 this.getConversationList()
                 this.isShown = true
             }
@@ -90,19 +92,22 @@
                     icon: 'none'
                 })
             }
-            if (e.index == 1) {
-				if(this.toLogin()){
-					this.$Router.push({
-					    name: 'imFriends'
-					})
-				}
+            if (e.index == 1) {
+                if (this.toLogin()) {
+                    this.$Router.push({
+                        name: 'imFriends'
+                    })
+                }
             }
         },
         watch: {
-            '$store.getters.newMessage': function(n, o) {
+            '$store.getters.newMessage': function(n, o) {
                 if (this.isShown) {
                     this.getConversationList()
                 }
+            },
+            '$store.getters.connection': function(n, o) {
+                this.connection = n
             }
         },
         methods: {
@@ -123,7 +128,8 @@
                 const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
                 RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
                     if (res.code === 0 && res.conversations.length > 0) {
-                        this.conversations = res.conversations
+                        this.conversations = res.conversations
+                        console.log(this.conversations);
                     }
                 })
             },
@@ -139,9 +145,10 @@
 </script>
 
 <style lang="scss" scoped>
-    .content {
+    .container {
         background-color: $window-color;
         min-height: 100vh;
+        padding-bottom: 200px;
 
         .null-list {
             height: 100vh;
@@ -159,64 +166,128 @@
             }
         }
 
-        .mssage-box {
+        .message {
+            position: relative;
+            display: flex;
             background: white;
+            padding: 24rpx 24rpx 20rpx 24rpx;
 
-            .mssage-action {
+            .avatar {
                 position: relative;
-                padding: 20rpx $padding;
 
-                &::after {
-                    position: absolute;
-                    left: $padding + 108;
-                    right: 0;
-                    bottom: 0;
-                    content: " ";
-                    height: 1rpx;
-                    background: $border-color;
-                }
-
-                &-content {
-                    position: absolute;
-                    top: 20rpx;
-                    height: 44px;
-                    left: $padding + 108;
-                    right: $margin;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-
-                    .mssage-header {
-                        display: flex;
-                        font-size: $title-size;
-                        line-height: 40rpx;
-                        justify-content: space-between;
-
-                        .header-name {
-                            flex: 1;
-                            @extend .nowrap;
-                        }
-
-                        .header-time {
-                            padding-left: $padding;
-                            font-size: $title-size-sm - 2;
-                            color: $text-gray;
-                        }
-                    }
-
-                    .mssage-msg {
-                        font-size: $title-size-sm - 2;
-                        color: $text-gray;
-                        @extend .nowrap;
-                    }
+                .u-badge {
+                    z-index: 999;
                 }
             }
 
-            &-item:last-child {
-                .mssage-action::after {
-                    display: none;
+            .content {
+                margin-left: 16rpx;
+                flex: 1;
+
+                .header {
+                    display: flex;
+                    justify-content: space-between;
+
+                    .name {
+                        font-size: 36rpx
+                    }
+
+                    .time {
+                        font-size: 24rpx;
+                        color: $text-gray;
+                    }
+                }
+
+                .preview {
+                    width: 520rpx;
+                    word-break: break-all;
+                    color: $text-gray;
+                    font-size: 26rpx;
+                    @extend .nowrap;
                 }
             }
         }
+
+        .message:not(:last-child) {
+            &::after {
+                position: absolute;
+                left: $padding + 108;
+                right: 0;
+                bottom: 0;
+                content: " ";
+                height: 1rpx;
+                background: $border-color;
+            }
+        }
+
+        // .message-box:not(:last-child) {
+
+        //     .message-action {
+        //         &::after {
+        //             position: absolute;
+        //             left: $padding + 108;
+        //             right: 0;
+        //             bottom: 0;
+        //             content: " ";
+        //             height: 1rpx;
+        //             background: $border-color;
+        //         }
+        //     }
+        // }
+
+        //  .message-box {
+        //     background: white;
+
+        //     .message-action {
+        //         position: relative;
+        //         padding: 20rpx $padding;
+
+        //         .message-avatar {
+        //             position: relative;
+        //             background: red;
+        //         }
+
+        //         &-content {
+        //             position: absolute;
+        //             top: 20rpx;
+        //             height: 44px;
+        //             left: $padding + 108;
+        //             right: $margin;
+        //             display: flex;
+        //             flex-direction: column;
+        //             justify-content: center;
+
+        //             .message-header {
+        //                 display: flex;
+        //                 font-size: $title-size;
+        //                 line-height: 40rpx;
+        //                 justify-content: space-between;
+
+        //                 .header-name {
+        //                     flex: 1;
+        //                     @extend .nowrap;
+        //                 }
+
+        //                 .header-time {
+        //                     padding-left: $padding;
+        //                     font-size: $title-size-sm - 2;
+        //                     color: $text-gray;
+        //                 }
+        //             }
+
+        //             .message-msg {
+        //                 font-size: $title-size-sm - 2;
+        //                 color: $text-gray;
+        //                 @extend .nowrap;
+        //             }
+        //         }
+        //     }
+
+        //     &-item:last-child {
+        //         .message-action::after {
+        //             display: none;
+        //         }
+        //     }
+        // }
     }
 </style>
diff --git a/pages/im/private/index.vue b/pages/im/private/index.vue
index 2a35f01..fa70f1d 100644
--- a/pages/im/private/index.vue
+++ b/pages/im/private/index.vue
@@ -1,6 +1,7 @@
 <template>
     <view class="chat-content">
-        <scroll-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID" :scroll-with-animation="false">
+        <scroll-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID"
+            :scroll-with-animation="false">
             <!-- 聊天窗口 -->
             <view class="chat-item" v-for="(item,index) in messages" :key="index" :id="'chatId_'+index">
                 <view class="chat-item-time">
@@ -14,12 +15,12 @@
                     <view class="chat-status" :class="{'hide': item.sentStatus == 50}"
                         v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
                     <view class="chat-avatar">
-                        <!-- <u-avatar :src="userInfo.portraitUrl" @click="showFriend"></u-avatar> -->
-                        <u-avatar v-if="item.messageDirection == 2" :src="friend(targetId).portraitUrl"></u-avatar>
-                        <u-avatar v-else :src="$store.getters.sender.portraitUrl"/>
+                        <u-avatar v-if="item.messageDirection == 2" :src="friend(targetId).portraitUrl"
+                            @click="showFriend(targetId)"></u-avatar>
+                        <u-avatar v-else @click="showMine" :src="$store.getters.sender.portraitUrl" />
                     </view>
                 </view>
-            </view>
+            </view>
         </scroll-view>
 
         <view class="chat-footer">
@@ -151,15 +152,15 @@
                     this.inputTxt = ''
                 })
             },
-            showFriend() {
-                // uni.navigateTo({
-                //     url: '/pages/im/friends/info?targetId=' + this.targetId
-                // })
+            showFriend(targetId) {
+                uni.navigateTo({
+                    url: '/pages/im/friends/info?targetId=' + targetId
+                })
             },
             showMine() {
-                // uni.navigateTo({
-                //     url: '/pages/im/friends/mine'
-                // })
+                uni.navigateTo({
+                    url: '/pages/im/friends/mine'
+                })
             },
             scrollBottom() {
                 this.$nextTick(function() {
diff --git a/pages/im/private/setting.vue b/pages/im/private/setting.vue
index d7fbb90..726bcd7 100644
--- a/pages/im/private/setting.vue
+++ b/pages/im/private/setting.vue
@@ -1,39 +1,41 @@
-<template>
-	<view class="content">
-		<!-- 聊天信息 -->
-		<view class="set-user">
-			<u-avatar
-				src="https://cdn.uviewui.com/uview/album/1.jpg"
-				size="48"
-			></u-avatar>
-			<view class="set-user-nickname">唐明明</view>
-		</view>
-		<!-- 聊天设置 -->
-		<view class="set-group">
-			<view class="group-flex">
-				<label>消息免打扰</label>
-				<u-switch activeColor="#34CE98" size="22"></u-switch>
-			</view>
-			<view class="group-flex">
-				<label>置顶会话</label>
-				<u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch>
-			</view>
-		</view>
-		<view class="set-group">
-			<view class="group-flex" @click="cleanConversation">
-				<label>清空聊天记录</label>
-				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
-			</view>
-		</view>
-	</view>
+<template>
+    <view class="content">
+        <!-- 聊天信息 -->
+        <view class="set-user" @click="showFriend">
+            <u-avatar :src="userInfo.portraitUrl" size="48"></u-avatar>
+            <view class="set-user-nickname">{{ userInfo.name }}</view>
+        </view>
+        <!-- 聊天设置 -->
+        <view class="set-group">
+            <view class="group-flex">
+                <label>消息免打扰</label>
+                <u-switch activeColor="#34CE98" size="22"></u-switch>
+            </view>
+            <view class="group-flex">
+                <label>置顶会话</label>
+                <u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch>
+            </view>
+        </view>
+        <view class="set-group">
+            <view class="group-flex" @click="cleanConversation">
+                <label>清空聊天记录</label>
+                <u-icon name="arrow-right" color="#999" size="16"></u-icon>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
     import * as RongIMLib from '@rongcloud/imlib-uni'
+    import {
+        getUserInfo
+    } from '@/apis/interfaces/im.js'
+
 
     export default {
         data() {
             return {
+                userInfo: {},
                 targetId: '',
                 conversationType: 1,
                 isTop: false,
@@ -44,6 +46,11 @@
             this.targetId = e.targetId
             this.conversationType = e.conversationType
 
+            getUserInfo(e.targetId).then(res => {
+                console.log(res);
+                this.userInfo = res
+            })
+
             RongIMLib.getConversation(this.conversationType, this.targetId, ({
                 conversation
             }) => {
@@ -57,6 +64,11 @@
             })
         },
         methods: {
+            showFriend() {
+                uni.navigateTo({
+                    url: '/pages/im/friends/info?targetId=' + this.targetId
+                })
+            },
             setStatus() {
                 RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
                     status
@@ -74,62 +86,79 @@
                         this.isTop = conversation.isTop
                     })
                 })
-            },
-            // 清空聊天记录
-            cleanConversation() {
-                RongIMLib.deleteMessages(this.conversationType, this.targetId, ({code}) => {
-                    if (code === 0) {
-                        console.log('chenggong ');
-                    }
-                })
+            },
+            // 清空聊天记录
+            cleanConversation() {
+                uni.showModal({
+                    title: '清空聊天记录',
+                    success: (res) => {
+                        if (res.confirm) {
+                            RongIMLib.deleteMessages(this.conversationType, this.targetId, ({
+                                code
+                            }) => {
+                                if (code === 0) {
+                                    uni.showToast({
+                                        title: '聊天记录已清空'
+                                    })
+                                }
+                            })
+                        }
+                    }
+                })
             }
         }
     }
 </script>
 
-<style lang="scss" scoped>
-	.content{
-		min-height: 100vh;
-		background: $window-color;
-		// 用户信息
-		.set-user{
-			background: white;
-			padding: $padding;
-			display: flex;
-			align-items: center;
-			.set-user-nickname{
-				padding-left: $padding;
-				flex: 1;
-				line-height: 70rpx;
-				font-size: $title-size + 6;
-			}
-		}
-		// 聊天设置
-		.set-group{
-			margin: $margin 0;
-			background: white;
-			.group-flex{
-				position: relative;
-				display: flex;
-				justify-content: space-between;
-				height: 90rpx;
-				line-height: 90rpx;
-				padding: 0 $padding;
-				font-size: $title-size;
-				align-items: center;
-				&::after{
-					content: " ";
-					position: absolute;
-					left: $margin;
-					right: 0;
-					bottom: 0;
-					height: 1rpx;
-					background-color: $border-color;
-				}
-				&:last-child::after{
-					display: none;
-				}
-			}
-		}
-	}
+<style lang="scss" scoped>
+    .content {
+        min-height: 100vh;
+        background: $window-color;
+
+        // 用户信息
+        .set-user {
+            background: white;
+            padding: $padding;
+            display: flex;
+            align-items: center;
+
+            .set-user-nickname {
+                padding-left: $padding;
+                flex: 1;
+                line-height: 70rpx;
+                font-size: $title-size + 6;
+            }
+        }
+
+        // 聊天设置
+        .set-group {
+            margin: $margin 0;
+            background: white;
+
+            .group-flex {
+                position: relative;
+                display: flex;
+                justify-content: space-between;
+                height: 90rpx;
+                line-height: 90rpx;
+                padding: 0 $padding;
+                font-size: $title-size;
+                align-items: center;
+
+                &::after {
+                    content: " ";
+                    position: absolute;
+                    left: $margin;
+                    right: 0;
+                    bottom: 0;
+                    height: 1rpx;
+                    background-color: $border-color;
+                }
+
+                &:last-child::after {
+                    display: none;
+                }
+            }
+        }
+    }
 </style>
diff --git a/store/modules/im.js b/store/modules/im.js
index 19657d5..c9db26e 100644
--- a/store/modules/im.js
+++ b/store/modules/im.js
@@ -4,12 +4,17 @@ export default {
     state: {
         newMsg: {},
         friends: {},
-        sender: {}
+        sender: {},
+        // IM连接状态，0是正常
+        connection: 0
     },
     getters: {
         newMessage(state) {
             return state.newMsg
         },
+        connection(state) {
+            return state.connection
+        },
         friends(state) {
             return state.friends
         },
@@ -17,8 +22,8 @@ export default {
             if (state.friends[targetId]) {
                 return state.friends[targetId]
             } else {
-                console.log('没找到,， 死循环了，得处理  todo', targetId);
-                im.syncUserInfo(targetId)
+                console.log('没找到,死循环了，得处理  todo', targetId);
+                // im.syncUserInfo(targetId)
                 return {
                     name: '',
                     address: '',
@@ -43,9 +48,15 @@ export default {
         },
         SET_state_sender(state, userInfo) {
             state.sender = userInfo
+        },
+        SET_connection_status(state, status) {
+            state.connection = status
         }
     },
-    actions: {
+    actions: {
+        updateConnectionStatus({commit}, status) {
+            commit('SET_connection_status', status)
+        },
         newMessage({
             commit
         }, msg) {
@@ -63,7 +74,6 @@ export default {
             const model = uni.model.friendModel
             model.find('userId=' + userInfo.userId, (err, user) => {
                 if (!err && user.length == 0) {
-                    console.log('哪里更新的 ', 1);
                     saveAvatar(userInfo, (savedFilePath) => {
                         model.insert({
                             userId: userInfo.userId,
@@ -76,7 +86,6 @@ export default {
                         commit('updateFriends', userInfo)
                     })
                 } else if (!err && user[0].hash != userInfo.hash) {
-                    console.log('哪里更新的 ', 2);
                     saveAvatar(userInfo, (savedFilePath) => {
                         model.update('userId=' + userInfo.userId, {
                             name: userInfo.name,
@@ -98,7 +107,7 @@ export default {
                         commit('updateFriends', userInfo)
                     })
                 } else {
-                    console.log('不需要有动作', user[0]);
+                    console.log('不用操作', user[0]);
                 }
             })
         }
diff --git a/uni.scss b/uni.scss
index ba7a252..45042d6 100644
--- a/uni.scss
+++ b/uni.scss
@@ -44,7 +44,7 @@ $uni-border-color:#c8c7cc;
 /* 文字尺寸 */
 $uni-font-size-sm:12px;
 $uni-font-size-base:14px;
-$uni-font-size-lg:16;
+$uni-font-size-lg:16px;
 
 /* 图片尺寸 */
 $uni-img-size-sm:20px;
diff --git a/utils/im/index.js b/utils/im/index.js
index a1f1534..028e9b7 100644
--- a/utils/im/index.js
+++ b/utils/im/index.js
@@ -61,7 +61,8 @@ const disconnect = () => {
 const addListeners = () => {
     // 添加连接状态监听函数 
     RongIMLib.addConnectionStatusListener((res) => {
-        console.log('连接状态监', res.data.status);
+        console.log('连接状态监', res.data.status);
+        store.dispatch('updateConnectionStatus', res.data.status)
     })
     // 添加消息监听函数
     RongIMLib.addReceiveMessageListener((res) => {

From 80cd737e39aa5f731c52f267f69f0fcc698b412d Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Fri, 21 Jan 2022 16:30:06 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=A5=BD=E5=8F=8B=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=9A=84=E5=9F=BA=E7=A1=80=E6=B5=81=E7=A8=8B=EF=BC=8C1.0.5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                      |   2 +-
 apis/interfaces/im.js        |  78 ++++++++++-----
 manifest.json                |   4 +-
 pages.json                   |  10 +-
 pages/im/friends/index.vue   | 117 ++++++++++------------
 pages/im/friends/info.vue    |   9 +-
 pages/im/friends/pending.vue | 186 ++++++++++++++++++++++-------------
 pages/im/index.vue           | 122 ++++++++++++++++++++---
 pages/im/private/index.vue   |   8 +-
 pages/im/private/setting.vue |  47 ++++-----
 10 files changed, 378 insertions(+), 205 deletions(-)

diff --git a/App.vue b/App.vue
index 069c1f4..ad31a1b 100644
--- a/App.vue
+++ b/App.vue
@@ -5,7 +5,7 @@
     export default {
         onLaunch: function() {
             im.initIm('lmxuhwaglu76d')
-            return;
+
             //#ifdef APP-PLUS
             // 获取系统版本号
             getVersions({
diff --git a/apis/interfaces/im.js b/apis/interfaces/im.js
index 7e3f394..07dcddf 100644
--- a/apis/interfaces/im.js
+++ b/apis/interfaces/im.js
@@ -1,46 +1,78 @@
-
-/**
- * Web唐明明
- * 匆匆数载恍如梦，岁月迢迢华发增。
- * 碌碌无为枉半生，一朝惊醒万事空。
- * moduleName: 聊聊
- */
-
-import { request } from '../index'
-
+/**
+ * Web唐明明
+ * 匆匆数载恍如梦，岁月迢迢华发增。
+ * 碌碌无为枉半生，一朝惊醒万事空。
+ * moduleName: 聊聊
+ */
+
+import {
+    request
+} from '../index'
+
 // 获取好友列表
 const getFriends = () => {
     return request({
         url: 'im/friends',
     }, true)
 }
-
+
 // 获取融云token
 const getImToken = () => {
     return request({
         url: 'im/token',
     }, true)
 }
-
+
 // 获取用户信息
 const getUserInfo = (targetId) => {
     return request({
         url: 'im/userInfo/' + targetId,
     })
 }
-
-/**
- * 获取好友申请列表
- */
-const getPedings = () => {
-    return request({
-        url: 'im/friends/pending'
-    })
+
+/**
+ * 获取好友申请列表
+ */
+const getPedings = () => {
+    return request({
+        url: 'im/friends/pending'
+    })
+}
+
+const resolveFriend = (targetId) => {
+    return request({
+        method: 'POST',
+        url: 'im/friends/accept/' + targetId
+    })
+}
+
+const rejectFriend = (targetId) => {
+    return request({
+        method: 'DELETE',
+        url: 'im/friends/accept/' + targetId
+    })
+}
+
+const searchFriend = (mobile) => {
+    return request({
+        url: 'im/search?mobile=' + mobile
+    })
+}
+
+const pedingFriend = (recipient) => {
+    return request({
+        method: 'POST',
+        url: 'im/friends/' + recipient
+    })
 }
-
+
 export {
     getImToken,
     getFriends,
-    getUserInfo,
-    getPedings
+    getUserInfo,
+    getPedings,
+    resolveFriend,
+    rejectFriend,
+    searchFriend,
+    pedingFriend
 }
diff --git a/manifest.json b/manifest.json
index 94c26d4..73cc5f5 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,8 +2,8 @@
     "name" : "ZH-HEALTH",
     "appid" : "__UNI__C29473D",
     "description" : "ZH-HEALTH，您手上的健康管理专家",
-    "versionName" : "1.0.2",
-    "versionCode" : 102,
+    "versionName" : "1.0.5",
+    "versionCode" : 105,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {
diff --git a/pages.json b/pages.json
index c297e34..cadb731 100644
--- a/pages.json
+++ b/pages.json
@@ -364,7 +364,7 @@
             "name": "IM",
             "style": {
                 "navigationBarTitleText": "聊聊",
-                "navigationBarBackgroundColor": "#FFFFFF",
+                "navigationBarBackgroundColor": "#F3F6FB",
                 "app-plus": {
                     "titleNView": {
                         "buttons": [
@@ -392,7 +392,7 @@
             "name": "imPrivate",
             "style": {
                 "navigationBarTitleText": "聊天",
-                "navigationBarBackgroundColor": "#FFFFFF",
+                "navigationBarBackgroundColor": "#F3F6FB",
                 "disableScroll": true,
                 "app-plus": {
                     "titleNView": {
@@ -440,8 +440,8 @@
             "path": "pages/im/friends/pending",
             "name": "imFriendsPending",
             "style": {
-                "navigationBarTitleText": "新的朋友",
-				"navigationBarBackgroundColor":"#FFFFFF"
+                "navigationBarTitleText": "新朋友",
+				"navigationBarBackgroundColor":"#F3F6FB"
             }
         },
         {
@@ -449,7 +449,7 @@
             "name": "imFriendsInfo",
             "style": {
                 "navigationBarTitleText": "好友资料",
-				"navigationBarBackgroundColor":"#FFFFFF"
+				"navigationBarBackgroundColor":"#F3F6FB"
             }
         },
         {
diff --git a/pages/im/friends/index.vue b/pages/im/friends/index.vue
index a06cc37..27abc38 100644
--- a/pages/im/friends/index.vue
+++ b/pages/im/friends/index.vue
@@ -7,89 +7,69 @@
             </view>
             <u-line></u-line>
             <view class="list__item" @click="showToast">
-                <u-avatar  size="35" icon="account-fill" fontSize="26" bg-color="#4cd964"></u-avatar>
+                <u-avatar size="35" icon="account-fill" fontSize="26" bg-color="#4cd964"></u-avatar>
                 <text class="list__item__user-name">我的群聊</text>
             </view>
             <u-line></u-line>
         </view>
-		<block v-if="friendsArr.length > 0">
-			<u-index-list activeColor="#34CE98">
-				<template v-for="(item, index) in friendsArr">
-					<!-- #ifdef APP-NVUE -->
-					<u-index-anchor bgColor="#F3F6FB" color="#666" :text="indexList[index]" :key="index"></u-index-anchor>
-					<!-- #endif -->
-					<u-index-item :key="index">
-						<!-- #ifndef APP-NVUE -->
-						<u-index-anchor :text="indexList[index]" bgColor="#F3F6FB" color="#666"></u-index-anchor>
-						<!-- #endif -->
-						<view class="list" v-for="(item1, index1) in item" :key="index1">
-							<view class="list__item" @click="toInfo(10047)">
-								<image class="list__item__avatar" :src="item1.url"></image>
-								<!-- <u-avatar  size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar> -->
-								<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>
-		</block>
-		<block v-else>
-			<u-empty
-				class="pages-null"
-				mode="data"
-				icon="http://cdn.uviewui.com/uview/empty/data.png"
-				text="暂未添加好友"
-			>
-			</u-empty>
-		</block>
+        <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>
+        </block>
+        <block v-else>
+            <u-empty class="pages-null" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无好友">
+            </u-empty>
+        </block>
     </view>
 </template>
 
-<script>
-	import { getFriends } from '@/apis/interfaces/im'
+<script>
+    import {
+        getFriends
+    } from '@/apis/interfaces/im'
     export default {
         data() {
             return {
-                friendsArr: []
+                friends: []
             }
-        },
-		onShow() {
-			getFriends().then(res => {
-				this.friendsArr = res
-				console.log(res)
-			})
-		},
+        },
+        onShow() {
+            getFriends().then(res => {
+                this.friends = res
+            })
+        },
         computed: {
 
         },
-        methods: {
-			// 扫码提示
-			showToast(){
-				uni.showToast({
-					title: "群聊功能暂未开放，敬请期待",
-					icon : "none"
-				})
-			},
-			// 新朋友
+        methods: {
+            // 扫码提示
+            showToast() {
+                uni.showToast({
+                    title: "群聊功能暂未开放，敬请期待",
+                    icon: "none"
+                })
+            },
+            // 新朋友
             toPending() {
                 uni.navigateTo({
                     url: '/pages/im/friends/pending'
                 })
-            },
-			// 用户资料
+            },
+            // 用户资料
             toInfo(targetId) {
                 uni.navigateTo({
-                    url: '/pages/im/friends/info?targeId=' + targetId
+                    url: '/pages/im/friends/info?targetId=' + targetId
                 })
             }
-        },
-		onNavigationBarButtonTap(e) {
-			this.toPending()
-		}
+        },
+        onNavigationBarButtonTap(e) {
+            this.toPending()
+        }
     }
 </script>
 
@@ -99,27 +79,30 @@
             @include flex;
             padding: 6px 12px;
             align-items: center;
+
             &__avatar {
                 height: 35px;
                 width: 35px;
                 border-radius: 50%;
             }
+
             &__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;
         }
-    }
-	
-	// 页面空
-	.pages-null{
-		height: 70vh;
-	}
+    }
+
+    // 页面空
+    .pages-null {
+        height: 70vh;
+    }
 </style>
diff --git a/pages/im/friends/info.vue b/pages/im/friends/info.vue
index 1c4bebe..49e666a 100644
--- a/pages/im/friends/info.vue
+++ b/pages/im/friends/info.vue
@@ -2,8 +2,8 @@
     <view class="content">
         <!-- 用户信息 -->
         <view class="user-info">
-            <u-avatar :src="userInfo.portraitUrl" size="100"></u-avatar>
-            
+            <u-avatar :src="userInfo.portraitUrl" size="100"></u-avatar>
+
             <view class="nickname">{{ userInfo.name }}</view>
             <!-- <view class="sex">
                 <u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
@@ -40,9 +40,10 @@
         },
         onLoad(e) {
             this.targetId = e.targetId
+            console.log('获取资料',e.targetId);
             getUserInfo(e.targetId).then(res => {
                 this.userInfo = res
-
+                console.log('获取资料', res);
                 uni.setNavigationBarTitle({
                     title: res.name
                 })
@@ -50,7 +51,7 @@
         },
         methods: {
             toPrivate() {
-                uni.navigateTo({
+                uni.redirectTo({
                     url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
                 })
             }
diff --git a/pages/im/friends/pending.vue b/pages/im/friends/pending.vue
index 373405e..70472eb 100644
--- a/pages/im/friends/pending.vue
+++ b/pages/im/friends/pending.vue
@@ -1,69 +1,119 @@
-<template>
-	<view>
-		<!-- 搜索 -->
-		<view class="header-search">
-			<u-search placeholder="输入手机号码搜索" v-model="searchValue"></u-search>
-		</view>
-		<!-- 新朋友 -->
-		<view class="lists">
-			<view class="lists-item" v-for="(item, index) in 10" :key="index">
-				<image class="lists-item-cover" src="" mode="aspectFill"></image>
-				<view class="">好友</view>
-				<view class="">
-					<text>通过</text>
-					<text>拒绝</text>
-				</view>
-			</view>
-		</view>
-		<!-- 空列表 -->
-		<view class="">
-			空列表
-		</view>
-	</view>
-</template>
-
-<script>
-	export default{
-		data(){
-			return{
-				searchValue: "",
-				listsArr: []
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.header-search{
-		padding: $padding/2 $padding;
-		background: white;
-	}
-	// 好友列表
-	.lists{
-		.lists-item{
-			padding: 20rpx $padding;
-			position: relative;
-			display: flex;
-			align-items: center;
-
-			&::after{
-				content: " ";
-				position: absolute;
-				left: $margin;
-				right: 0;
-				bottom: 0;
-				height: 1rpx;
-				background-color: $border-color;
-			}
-			&:last-child::after{
-				display: none;
-			}
-			.lists-item-cover{
-				width: 98rpx;
-				height: 98rpx;
-				border-radius: 50%;
-				background: $window-color;
-			}
-		}
-	}
+<template>
+    <view>
+        <!-- 搜索 -->
+        <u-sticky>
+            <view class="header-search">
+                <u-search placeholder="输入手机号码搜索" bgColor="white" @custom="search" @search="search"
+                    v-model="searchValue"></u-search>
+            </view>
+        </u-sticky>
+        <u-list height="auto">
+            <u-list-item v-for="(item, index) in searchResult" :key="index">
+                <u-cell :title="item.name">
+                    <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
+
+                    <div style="width: 50px;" slot="value">
+                        <u-button type="success" size="small" @click="pending(item.userId)">申请</u-button>
+                    </div>
+                </u-cell>
+            </u-list-item>
+        </u-list>
+        <!-- 新朋友 -->
+        <u-divider text="好友申请"></u-divider>
+        <u-list height="auto">
+            <u-swipe-action>
+                <u-list-item v-for="(item, index) in pedings" :key="index">
+                    <u-swipe-action-item autoClose :options="options" @click="action($event, item)">
+                        <u-cell :title="item.name">
+                            <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
+                        </u-cell>
+                    </u-swipe-action-item>
+                </u-list-item>
+            </u-swipe-action>
+        </u-list>
+    </view>
+</template>
+
+<script>
+    import {
+        getPedings,
+        resolveFriend,
+        rejectFriend,
+        searchFriend,
+        pedingFriend
+    } from '@/apis/interfaces/im.js'
+
+    export default {
+        data() {
+            return {
+                searchResult: [],
+                searchValue: '',
+                pedings: [],
+                options: [{
+                    text: '通过',
+                    style: {
+                        backgroundColor: '#3c9cff'
+                    }
+                }, {
+                    text: '拒绝',
+                    style: {
+                        backgroundColor: '#f56c6c'
+                    }
+                }]
+            }
+        },
+        onLoad() {
+            this.getPeddingList()
+        },
+        methods: {
+            search() {
+                console.log('sousuo');
+                searchFriend(this.searchValue).then(res => {
+                    console.log(res);
+                    this.searchResult = res
+                }).catch(err => {
+                    console.log('err', err);
+                })
+            },
+            action(e, item) {
+                if (e.index == 0) {
+                    resolveFriend(item.userId).then(res => {
+                        this.getPeddingList()
+                    })
+                } else {
+                    rejectFriend(item.userId).then(res => {
+                        this.getPeddingList()
+                    })
+                }
+            },
+            getPeddingList() {
+                getPedings().then(res => {
+                    this.pedings = res
+                })
+            },
+            pending(userId) {
+                uni.showLoading()
+                pedingFriend(userId).then(res => {
+                    uni.showToast({
+                        title: '申请成功',
+                        success: () => {
+                            this.searchResult = []
+                        }
+                    })
+                }).catch(err => {
+                    uni.showToast({
+                        icon: 'error',
+                        title: err.message
+                    })
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .header-search {
+        padding: $padding/2 $padding;
+        background: $window-color;
+    }
 </style>
diff --git a/pages/im/index.vue b/pages/im/index.vue
index d4234c7..a8cc868 100644
--- a/pages/im/index.vue
+++ b/pages/im/index.vue
@@ -13,7 +13,8 @@
             <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" @click="toDetail(item)">
+                <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" />
@@ -27,11 +28,19 @@
                     <view class="content">
                         <view class="header">
                             <view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
-                            <view class="time">{{ item.targetId }} | {{ item.sentTime|timeCustomCN }}</view>
+                            <view class="time">{{ item.sentTime|timeCustomCN }}</view>
                         </view>
                         <view class="preview">{{ item.latestMessage.content || '&nbsp;' }}</view>
                     </view>
                 </view>
+
+                <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}}
+                        </view>
+                    </view>
+                </view>
             </block>
         </view>
         <!-- 未登录 -->
@@ -59,7 +68,16 @@
                 isShown: true, // 当前页面显示状态
                 conversations: [], // 会话列表
                 isImToken: '', // 是否已鉴权
-                connection: 0
+                connection: 0,
+                /* 窗口尺寸 */
+                winSize: {},
+                /* 显示操作弹窗 */
+                showPop: false,
+                /* 弹窗按钮列表 */
+                popButton: ['置顶聊天', '删除该聊天'],
+                /* 弹窗定位样式 */
+                popStyle: "",
+                pickedItem: {}
             }
         },
         computed: {
@@ -111,6 +129,48 @@
             }
         },
         methods: {
+            hidePop() {
+                this.showPop = false
+                this.pickedItem = {}
+                setTimeout(() => {
+                    this.showShade = false
+                }, 250)
+            },
+            pickerMenu(e) {
+                const index = Number(e.currentTarget.dataset.index)
+
+                if (index == 0) {
+                    RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
+                        .pickedItem.isTop)
+                } else {
+                    RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
+                }
+                this.getConversationList()
+                this.hidePop()
+            },
+            onLongPress(e) {
+                let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
+
+                if (touches.clientY > (this.winSize.height / 2)) {
+                    style = `bottom:${this.winSize.height-touches.clientY}px;`
+                } else {
+                    style = `top:${touches.clientY}px;`
+                }
+                if (touches.clientX > (this.winSize.witdh / 2)) {
+                    style += `right:${this.winSize.witdh-touches.clientX}px`
+                } else {
+                    style += `left:${touches.clientX}px`
+                }
+
+                this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
+                this.popStyle = style
+                this.pickedItem = item
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        this.showPop = true;
+                    }, 10)
+                })
+            },
             // 检查登录
             toLogin() {
                 if (this.$store.state.token === '') {
@@ -120,21 +180,18 @@
                 }
                 return true
             },
-            getFriend(targetId) {
-                return this.$store.getters.userInfo(targetId)
-            },
             getConversationList() {
                 const count = 1000
                 const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
                 RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
                     if (res.code === 0 && res.conversations.length > 0) {
                         this.conversations = res.conversations
-                        console.log(this.conversations);
                     }
                 })
             },
             // 进入聊天的详情页面，清理未读消息数量
-            toDetail(item) {
+            toDetail(item) {
+                this.hidePop()
                 uni.navigateTo({
                     url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
                         .conversationType
@@ -148,7 +205,6 @@
     .container {
         background-color: $window-color;
         min-height: 100vh;
-        padding-bottom: 200px;
 
         .null-list {
             height: 100vh;
@@ -172,6 +228,10 @@
             background: white;
             padding: 24rpx 24rpx 20rpx 24rpx;
 
+            &.is-top {
+                background: $window-color;
+            }
+
             .avatar {
                 position: relative;
 
@@ -198,11 +258,11 @@
                     }
                 }
 
-                .preview {
-                    width: 520rpx;
+                .preview {
+                    width: 520rpx;
                     word-break: break-all;
                     color: $text-gray;
-                    font-size: 26rpx;
+                    font-size: 26rpx;
                     @extend .nowrap;
                 }
             }
@@ -290,4 +350,42 @@
         //     }
         // }
     }
+
+    /* 遮罩 */
+    .shade {
+
+        .pop {
+            position: fixed;
+            z-index: 101;
+            width: 200rpx;
+            box-sizing: border-box;
+            font-size: 28rpx;
+            text-align: left;
+            color: #333;
+            background-color: #fff;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+            line-height: 80rpx;
+            transition: transform 0.15s ease-in-out 0s;
+            user-select: none;
+            -webkit-touch-callout: none;
+            transform: scale(0, 0);
+
+            &.show {
+                transform: scale(1, 1);
+            }
+
+            &>view {
+                padding: 0 20rpx;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                user-select: none;
+                -webkit-touch-callout: none;
+
+                &:active {
+                    background-color: #f3f3f3;
+                }
+            }
+        }
+    }
 </style>
diff --git a/pages/im/private/index.vue b/pages/im/private/index.vue
index fa70f1d..ee6d370 100644
--- a/pages/im/private/index.vue
+++ b/pages/im/private/index.vue
@@ -99,7 +99,13 @@
             if (e.index == 0) {
                 uni.navigateTo({
                     url: '/pages/im/private/setting?targetId=' + this.targetId +
-                        '&conversationType=' + this.conversationType
+                        '&conversationType=' + this.conversationType,
+                    events: {
+                        messageClear: () => {
+                            this.getMessageList()
+                            console.log('聊天消息被清空');
+                        }
+                    }
                 })
             }
         },
diff --git a/pages/im/private/setting.vue b/pages/im/private/setting.vue
index 726bcd7..4c7353b 100644
--- a/pages/im/private/setting.vue
+++ b/pages/im/private/setting.vue
@@ -2,18 +2,18 @@
     <view class="content">
         <!-- 聊天信息 -->
         <view class="set-user" @click="showFriend">
-            <u-avatar :src="userInfo.portraitUrl" size="48"></u-avatar>
-            <view class="set-user-nickname">{{ userInfo.name }}</view>
+            <u-avatar :src="friend(targetId).portraitUrl" size="48"></u-avatar>
+            <view class="set-user-nickname">{{ friend(targetId).name }}</view>
         </view>
         <!-- 聊天设置 -->
         <view class="set-group">
             <view class="group-flex">
                 <label>消息免打扰</label>
-                <u-switch activeColor="#34CE98" size="22"></u-switch>
+                <u-switch v-model="status" activeColor="#34CE98" size="22" @change="setStatus"></u-switch>
             </view>
             <view class="group-flex">
-                <label>置顶会话</label>
-                <u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch>
+                <label>消息置顶</label>
+                <u-switch v-model="isTop" activeColor="#34CE98" size="22" @change="setTop"></u-switch>
             </view>
         </view>
         <view class="set-group">
@@ -35,22 +35,26 @@
     export default {
         data() {
             return {
-                userInfo: {},
+                eventChannel: null,
                 targetId: '',
                 conversationType: 1,
                 isTop: false,
-                status: 0 // 0 是免打扰，1是正常通知
+                status: false // 0 是免打扰，1是正常通知
+            }
+        },
+        computed: {
+            friend() {
+                return function(targetId) {
+                    return this.$store.getters.userInfo(targetId)
+                }
             }
         },
         onLoad(e) {
+            this.eventChannel = this.$scope.eventChannel
+
             this.targetId = e.targetId
             this.conversationType = e.conversationType
 
-            getUserInfo(e.targetId).then(res => {
-                console.log(res);
-                this.userInfo = res
-            })
-
             RongIMLib.getConversation(this.conversationType, this.targetId, ({
                 conversation
             }) => {
@@ -60,29 +64,27 @@
             RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
                 status
             }) => {
-                this.status = status
+                this.status = !Boolean(status)
             })
         },
-        methods: {
-            showFriend() {
-                uni.navigateTo({
-                    url: '/pages/im/friends/info?targetId=' + this.targetId
-                })
+        methods: {
+            showFriend() {
+                uni.navigateTo({
+                    url: '/pages/im/friends/info?targetId=' + this.targetId
+                })
             },
             setStatus() {
                 RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
                     status
                 }) => {
-                    this.status = status
+                    this.status = !Boolean(status)
                 })
             },
             setTop() {
-                RongIMLib.setConversationToTop(this.conversationType, this.targetId, !this.isTop, (res) => {
-                    console.log(res);
+                RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
                     RongIMLib.getConversation(this.conversationType, this.targetId, ({
                         conversation
                     }) => {
-                        console.log(conversation.isTop);
                         this.isTop = conversation.isTop
                     })
                 })
@@ -97,6 +99,7 @@
                                 code
                             }) => {
                                 if (code === 0) {
+                                    this.eventChannel.emit('messageClear')
                                     uni.showToast({
                                         title: '聊天记录已清空'
                                     })

From a30f2f9bd0076fedb451a5f03d792b396337b6dc Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Fri, 21 Jan 2022 17:47:37 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E6=B6=88=E6=81=AF=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .hbuilderx/launch.json       |   2 +-
 pages/im/index.vue           | 102 +-----
 pages/im/private/index.vue   |  14 +-
 pages/im/private/setting.vue |   1 -
 pages/topic/details.vue      | 594 ++++++++++++++++++-----------------
 utils/im/index.js            |   6 +-
 6 files changed, 340 insertions(+), 379 deletions(-)

diff --git a/.hbuilderx/launch.json b/.hbuilderx/launch.json
index 59d78d5..a97fd25 100644
--- a/.hbuilderx/launch.json
+++ b/.hbuilderx/launch.json
@@ -4,7 +4,7 @@
     "configurations": [{
      	"app-plus" : 
      	{
-     		"launchtype" : "remote"
+     		"launchtype" : "local"
      	},
      	"default" : 
      	{
diff --git a/pages/im/index.vue b/pages/im/index.vue
index a8cc868..741e92a 100644
--- a/pages/im/index.vue
+++ b/pages/im/index.vue
@@ -4,9 +4,9 @@
             <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>
+                        <!-- <template>
                             <view class="null-list-btn">开启聊天</view>
-                        </template>
+                        </template> -->
                     </u-empty>
                 </view>
             </block>
@@ -67,7 +67,6 @@
             return {
                 isShown: true, // 当前页面显示状态
                 conversations: [], // 会话列表
-                isImToken: '', // 是否已鉴权
                 connection: 0,
                 /* 窗口尺寸 */
                 winSize: {},
@@ -89,16 +88,14 @@
         },
         onShow() {
             if (this.$store.state.token !== '') {
-                if (this.isImToken === '') {
-                    getImToken().then(res => {
-                        im.connect(res.token, res.userInfo)
-                        this.isImToken = res.token
-                        this.getConversationList()
+                getImToken().then(res => {
+                    console.log("IMTOKEN", res);
+                    im.connect(res.token, res.userInfo, () => {
+                        this.getConversationList()
                     })
-                }
-                this.getConversationList()
-                this.isShown = true
-            }
+                })
+            }
+            this.isShown = true
         },
         onHide() {
             this.isShown = false
@@ -182,15 +179,16 @@
             },
             getConversationList() {
                 const count = 1000
-                const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
-                RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
+                const timestamp = 0
+                RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
+                    console.log('获取列表', res);
                     if (res.code === 0 && res.conversations.length > 0) {
-                        this.conversations = res.conversations
+                        this.conversations = res.conversations
                     }
-                })
+                })
             },
             // 进入聊天的详情页面，清理未读消息数量
-            toDetail(item) {
+            toDetail(item) {
                 this.hidePop()
                 uni.navigateTo({
                     url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
@@ -279,76 +277,6 @@
                 background: $border-color;
             }
         }
-
-        // .message-box:not(:last-child) {
-
-        //     .message-action {
-        //         &::after {
-        //             position: absolute;
-        //             left: $padding + 108;
-        //             right: 0;
-        //             bottom: 0;
-        //             content: " ";
-        //             height: 1rpx;
-        //             background: $border-color;
-        //         }
-        //     }
-        // }
-
-        //  .message-box {
-        //     background: white;
-
-        //     .message-action {
-        //         position: relative;
-        //         padding: 20rpx $padding;
-
-        //         .message-avatar {
-        //             position: relative;
-        //             background: red;
-        //         }
-
-        //         &-content {
-        //             position: absolute;
-        //             top: 20rpx;
-        //             height: 44px;
-        //             left: $padding + 108;
-        //             right: $margin;
-        //             display: flex;
-        //             flex-direction: column;
-        //             justify-content: center;
-
-        //             .message-header {
-        //                 display: flex;
-        //                 font-size: $title-size;
-        //                 line-height: 40rpx;
-        //                 justify-content: space-between;
-
-        //                 .header-name {
-        //                     flex: 1;
-        //                     @extend .nowrap;
-        //                 }
-
-        //                 .header-time {
-        //                     padding-left: $padding;
-        //                     font-size: $title-size-sm - 2;
-        //                     color: $text-gray;
-        //                 }
-        //             }
-
-        //             .message-msg {
-        //                 font-size: $title-size-sm - 2;
-        //                 color: $text-gray;
-        //                 @extend .nowrap;
-        //             }
-        //         }
-        //     }
-
-        //     &-item:last-child {
-        //         .message-action::after {
-        //             display: none;
-        //         }
-        //     }
-        // }
     }
 
     /* 遮罩 */
diff --git a/pages/im/private/index.vue b/pages/im/private/index.vue
index ee6d370..eada86a 100644
--- a/pages/im/private/index.vue
+++ b/pages/im/private/index.vue
@@ -3,10 +3,7 @@
         <scroll-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID"
             :scroll-with-animation="false">
             <!-- 聊天窗口 -->
-            <view class="chat-item" v-for="(item,index) in messages" :key="index" :id="'chatId_'+index">
-                <view class="chat-item-time">
-                    <text>{{ item.sentTime|timeCustomCN }}</text>
-                </view>
+            <view class="chat-item" v-for="(item,index) in messages" :key="index">
                 <view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
                     <view class="chat-msg">
                         <view class="chat-msg-text">{{ item.content.content }}</view>
@@ -15,11 +12,14 @@
                     <view class="chat-status" :class="{'hide': item.sentStatus == 50}"
                         v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
                     <view class="chat-avatar">
-                        <u-avatar v-if="item.messageDirection == 2" :src="friend(targetId).portraitUrl"
+                        <u-avatar v-if="item.messageDirection == 2" bg-color="#ffffff" :src="userInfo.portraitUrl"
                             @click="showFriend(targetId)"></u-avatar>
-                        <u-avatar v-else @click="showMine" :src="$store.getters.sender.portraitUrl" />
+                        <u-avatar v-else @click="showMine" bg-color="#ffffff" :src="$store.getters.sender.portraitUrl" />
                     </view>
                 </view>
+                <view class="chat-item-time" :id="'chatId_'+index">
+                    <text>{{ item.sentTime|timeCustomCN }}</text>
+                </view>
             </view>
         </scroll-view>
 
@@ -51,7 +51,7 @@
                 }
             }
         },
-        onLoad(e) {
+        onLoad(e) {
             this.targetId = e.targetId
             this.conversationType = e.conversationType // 会话类型
             // 消息总数量
diff --git a/pages/im/private/setting.vue b/pages/im/private/setting.vue
index 4c7353b..9de754e 100644
--- a/pages/im/private/setting.vue
+++ b/pages/im/private/setting.vue
@@ -31,7 +31,6 @@
         getUserInfo
     } from '@/apis/interfaces/im.js'
 
-
     export default {
         data() {
             return {
diff --git a/pages/topic/details.vue b/pages/topic/details.vue
index c73c794..90137c6 100644
--- a/pages/topic/details.vue
+++ b/pages/topic/details.vue
@@ -1,282 +1,314 @@
-<template>
-    <view class="content">
-        <view class="backCont">
-            <image class="img" :src="topicData.cover" mode="aspectFill"></image>
-            <view class="head">
-				<view class="ios-top"></view>
-                <view class="ellipsis title">
-                    {{ topicData.name }}
-                </view>
-                <view class="tips" v-if="topicData.category">
-                    # 话题 -- {{ topicData.category.name }} # 
-                </view>
-                <view class="ellipsis text">
-                    {{ topicData.description }}
-                </view>
-                <view class="tool">
-                    <view class="tool-see">
-                        <text>{{ topicData.clicks }} 人游览</text>
-                        <text>{{ topicData.favorites }} 人点赞</text>
-                    </view>
-                    <view class="tool-btn" :class="{active : isFavorite}" @click="thumbClick(topicData.topic_id)">
-                        <u-icon name="thumb-up-fill" :color="isFavorite ? '#333': '#fff'" size="17" style="margin-right: 5rpx;"></u-icon>
-                        {{ isFavorite ? '已赞' : '点赞' }}
-                    </view>
-                </view>
-            </view>
-            <view class="brief">
-                <view class="source">
-                    <image class="source-logo" src="/static/find/logo.png" mode="aspectFill"></image>
-                    <view class="source-title">
-                        <view class="source-name">
-                            {{ topicData.author }}
-                        </view>
-                        <view class="source-text">
-                            ZH大健康官方账号
-                        </view>
-                    </view>
-                </view>
-                <view class="brief-text">
-                    <rich-text :nodes="topicContent"></rich-text>
-                </view>
-                <view class="goods" v-if="goodsArr.length > 0">
-                    <view class="title">
-                        相关商品
-                    </view>
-                    <view class="item" v-for="(item, index) in goodsArr" :key="index">
-                    	<image class="item-cover" src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png" mode="aspectFill"></image>
-                    	<view class="item-title">
-                            <view class="nowrap item-name">
-                                {{ item.name }}
-                            </view>
-                            <view class="item-price">
-                                ￥{{ item.price }}
-                            </view>
-                        </view>
-                        <view class="item-btn" @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
-                            查看商品
-                        </view>
-                    </view>
-                </view>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script>
-    import { topicDet, topicThumb } from '@/apis/interfaces/topic'
-	import userAuth from '@/public/userAuth'
-    export default {
-        data() {
-            return {
-                topicData   : '',
-                goodsArr    : [],
-                topicContent: '',
-                isFavorite  : ''
-            }
-        },
-        mounted() {
-            this.getRank()
-        },
-        methods: {
-            // 详情
-            getRank(){
-            	topicDet(this.$Route.query.id).then(res => {
-					uni.setNavigationBarTitle({
-						title: res.name
-					})
-                    this.topicData    = res
-                    this.goodsArr     = res.goods
-                    this.isFavorite   = res.is_favorite
-                    this.topicContent = res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
-            	})
-            },
-            
-            // 点赞
-            thumbClick(id) {
-				if(this.$store.state.token === ''){
-					const Auth = new userAuth()
-					Auth.Login()
-					return
-				}
-                topicThumb(id).then(res => {
-                    this.isFavorite = !this.isFavorite
-                })
-            }
-        }
-    };
-</script>
-
-<style lang="scss" scoped>
-    page {
-        background: $window-color;
-    }
-    
-    .backCont {
-        position: relative;
-        width: 100vw;
-        padding-top: 90%;
-        &::after {
-            position: absolute;
-            content: '';
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 2;
-            background-color: rgba($color: #000000, $alpha: .35);
-        }
-        .img {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
-            filter: blur(10rpx);
-            overflow: hidden;
-        }
-        .head {
-            padding: $padding * 3 $padding + 30 0;
-            color: white;
-            box-sizing: border-box;
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            z-index: 9;
-            .title {
-                font-size: $title-size + 8;
-                margin-bottom: $margin - 10;
-                height: 100rpx;
-                font-weight: 600;
-            }
-            .tips {
-                margin-bottom: $margin + 20;
-            }
-            .text {
-                margin: $margin 0 $margin + 10;
-                line-height: 48rpx;
-                height: 100rpx;
-                font-size: $title-size-lg;
-            }
-            .tool {
-                width: 100%;
-                font-size: $title-size-m;
-                display: flex;
-                line-height: 48rpx;
-                .tool-see {
-                    flex: 1;
-                    text {
-                        padding-right: $padding;
-                    }
-                }
-                .tool-btn {
-                    border: 2rpx solid white;
-                    border-radius: $radius * 2;
-                    font-size: $title-size-sm;
-                    padding: 0 $padding - 5;
-                    line-height: 48rpx;
-                    display: flex;
-                    &.active {
-                        background-color: white;
-                        color: $text-color;
-                    }
-                }
-            }
-        }
-    }
-    
-    .brief {
-        position: absolute;
-        top: 90%;
-        width: 100%;
-        z-index: 10;
-        background-color: white;
-        border-radius: $radius * 3 $radius * 3 0 0;
-        padding: $padding;
-        box-sizing: border-box;
-        .brief-text {
-            margin: $margin 0;
-            line-height: 48rpx;
-            font-size: $title-size-lg;
-            color: $text-color;
-            padding: 0 $padding - 20;
-            box-sizing: border-box;
-        }
-        .source {
-            position: relative;
-            .source-logo {
-                width: 70rpx;
-                height: 70rpx;
-                border-radius: 50%;
-                margin-top: $margin - 24;
-            }
-            .source-title {
-                position: absolute;
-                left: 0;
-                top: 0;
-                width: 100%;
-                padding-left: 90rpx;
-                box-sizing: border-box;
-                font-size: $title-size-lg;
-                .source-name {
-                    font-weight: 600;
-                    margin-bottom: $margin - 25;
-                }
-                .source-text {
-                    line-height: 48rpx;
-                    font-size: $title-size-m;
-                    color: $text-gray-m;
-                }
-            }
-        }
-    }
-    
-    .goods {
-        margin-top: $margin;
-        .title {
-            font-weight: bold;
-            font-size: $title-size;
-        }
-        .item {
-        	position: relative;
-        	margin-top: $margin - 10;
-        	background: #f5fdfa;
-        	border-radius: $radius;
-        	padding: $padding;
-            box-sizing: border-box;
-        	.item-cover {
-        		width: 120rpx;
-        		height: 90rpx;
-        		border-radius: $radius-m;
-        	}
-        	.item-title {
-                position: absolute;
-                left: 0;
-                top: 0;
-                width: calc(100% - 180rpx);
-                box-sizing: border-box;
-                padding: $padding $padding 0  180rpx;
-        		font-size: $title-size-lg;
-        		margin-bottom: 10px;
-        		color: $text-color;
-                .item-price {
-                    color: $text-price;
-                    margin-top: $margin - 20;
-                }
-        	}
-            .item-btn {
-                position: absolute;
-                right: $padding;
-                top: $padding + 20;
-                background-color: $main-color;
-                color: white;
-                line-height: 62rpx;
-                font-size: $title-size-m;
-                padding: 0 $padding - 10;
-                border-radius: $radius-m;
-            }
-        }
-    }
+<template>
+    <view class="content">
+        <view class="backCont">
+            <image class="img" :src="topicData.cover" mode="aspectFill"></image>
+            <view class="head">
+                <view class="ios-top"></view>
+                <view class="ellipsis title">
+                    {{ topicData.name }}
+                </view>
+                <view class="tips" v-if="topicData.category">
+                    # 话题 -- {{ topicData.category.name }} #
+                </view>
+                <view class="ellipsis text">
+                    {{ topicData.description }}
+                </view>
+                <view class="tool">
+                    <view class="tool-see">
+                        <text>{{ topicData.clicks }} 人游览</text>
+                        <text>{{ topicData.favorites }} 人点赞</text>
+                    </view>
+                    <view class="tool-btn" :class="{active : isFavorite}" @click="thumbClick(topicData.topic_id)">
+                        <u-icon name="thumb-up-fill" :color="isFavorite ? '#333': '#fff'" size="17"
+                            style="margin-right: 5rpx;"></u-icon>
+                        {{ isFavorite ? '已赞' : '点赞' }}
+                    </view>
+                </view>
+            </view>
+            <view class="brief">
+                <view class="source">
+                    <image class="source-logo" src="/static/find/logo.png" mode="aspectFill"></image>
+                    <view class="source-title">
+                        <view class="source-name">
+                            {{ topicData.author }}
+                        </view>
+                        <view class="source-text">
+                            ZH大健康官方账号
+                        </view>
+                    </view>
+                </view>
+                <view class="brief-text">
+                    <rich-text :nodes="topicContent"></rich-text>
+                </view>
+                <view class="goods" v-if="goodsArr.length > 0">
+                    <view class="title">
+                        相关商品
+                    </view>
+                    <view class="item" v-for="(item, index) in goodsArr" :key="index">
+                        <image class="item-cover"
+                            src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png"
+                            mode="aspectFill"></image>
+                        <view class="item-title">
+                            <view class="nowrap item-name">
+                                {{ item.name }}
+                            </view>
+                            <view class="item-price">
+                                ￥{{ item.price }}
+                            </view>
+                        </view>
+                        <view class="item-btn"
+                            @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
+                            查看商品
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import {
+        topicDet,
+        topicThumb
+    } from '@/apis/interfaces/topic'
+    import userAuth from '@/public/userAuth'
+    export default {
+        data() {
+            return {
+                topicData: '',
+                goodsArr: [],
+                topicContent: '',
+                isFavorite: ''
+            }
+        },
+        mounted() {
+            this.getRank()
+        },
+        methods: {
+            // 详情
+            getRank() {
+                topicDet(this.$Route.query.id).then(res => {
+                    uni.setNavigationBarTitle({
+                        title: res.name
+                    })
+                    this.topicData = res
+                    this.goodsArr = res.goods
+                    this.isFavorite = res.is_favorite
+                    this.topicContent = res.content.replace(/\<img/gi,
+                        '<img style="max-width:100%;height:auto;display:block;"')
+                })
+            },
+            // 点赞
+            thumbClick(id) {
+                if (this.$store.state.token === '') {
+                    const Auth = new userAuth()
+                    Auth.Login()
+                    return
+                }
+                topicThumb(id).then(res => {
+                    this.isFavorite = !this.isFavorite
+
+                    this.topicData.favorites = res
+                })
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        background: $window-color;
+    }
+
+    .backCont {
+        position: relative;
+        width: 100vw;
+        padding-top: 90%;
+
+        &::after {
+            position: absolute;
+            content: '';
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            background-color: rgba($color: #000000, $alpha: .35);
+        }
+
+        .img {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            filter: blur(10rpx);
+            overflow: hidden;
+        }
+
+        .head {
+            padding: $padding * 3 $padding + 30 0;
+            color: white;
+            box-sizing: border-box;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            z-index: 9;
+
+            .title {
+                font-size: $title-size + 8;
+                margin-bottom: $margin - 10;
+                height: 100rpx;
+                font-weight: 600;
+            }
+
+            .tips {
+                margin-bottom: $margin + 20;
+            }
+
+            .text {
+                margin: $margin 0 $margin + 10;
+                line-height: 48rpx;
+                height: 100rpx;
+                font-size: $title-size-lg;
+            }
+
+            .tool {
+                width: 100%;
+                font-size: $title-size-m;
+                display: flex;
+                line-height: 48rpx;
+
+                .tool-see {
+                    flex: 1;
+
+                    text {
+                        padding-right: $padding;
+                    }
+                }
+
+                .tool-btn {
+                    border: 2rpx solid white;
+                    border-radius: $radius * 2;
+                    font-size: $title-size-sm;
+                    padding: 0 $padding - 5;
+                    line-height: 48rpx;
+                    display: flex;
+
+                    &.active {
+                        background-color: white;
+                        color: $text-color;
+                    }
+                }
+            }
+        }
+    }
+
+    .brief {
+        position: absolute;
+        top: 90%;
+        width: 100%;
+        z-index: 10;
+        background-color: white;
+        border-radius: $radius * 3 $radius * 3 0 0;
+        padding: $padding;
+        box-sizing: border-box;
+
+        .brief-text {
+            margin: $margin 0;
+            line-height: 48rpx;
+            font-size: $title-size-lg;
+            color: $text-color;
+            padding: 0 $padding - 20;
+            box-sizing: border-box;
+        }
+
+        .source {
+            position: relative;
+
+            .source-logo {
+                width: 70rpx;
+                height: 70rpx;
+                border-radius: 50%;
+                margin-top: $margin - 24;
+            }
+
+            .source-title {
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 100%;
+                padding-left: 90rpx;
+                box-sizing: border-box;
+                font-size: $title-size-lg;
+
+                .source-name {
+                    font-weight: 600;
+                    margin-bottom: $margin - 25;
+                }
+
+                .source-text {
+                    line-height: 48rpx;
+                    font-size: $title-size-m;
+                    color: $text-gray-m;
+                }
+            }
+        }
+    }
+
+    .goods {
+        margin-top: $margin;
+
+        .title {
+            font-weight: bold;
+            font-size: $title-size;
+        }
+
+        .item {
+            position: relative;
+            margin-top: $margin - 10;
+            background: #f5fdfa;
+            border-radius: $radius;
+            padding: $padding;
+            box-sizing: border-box;
+
+            .item-cover {
+                width: 120rpx;
+                height: 90rpx;
+                border-radius: $radius-m;
+            }
+
+            .item-title {
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: calc(100% - 180rpx);
+                box-sizing: border-box;
+                padding: $padding $padding 0 180rpx;
+                font-size: $title-size-lg;
+                margin-bottom: 10px;
+                color: $text-color;
+
+                .item-price {
+                    color: $text-price;
+                    margin-top: $margin - 20;
+                }
+            }
+
+            .item-btn {
+                position: absolute;
+                right: $padding;
+                top: $padding + 20;
+                background-color: $main-color;
+                color: white;
+                line-height: 62rpx;
+                font-size: $title-size-m;
+                padding: 0 $padding - 10;
+                border-radius: $radius-m;
+            }
+        }
+    }
 </style>
diff --git a/utils/im/index.js b/utils/im/index.js
index 028e9b7..b769da0 100644
--- a/utils/im/index.js
+++ b/utils/im/index.js
@@ -36,9 +36,11 @@ const setNotifyBadge = (count) => {
  * @param {string} token    token 
  * @param {object} userInfo {userId: string, name: string, portraitUrl: string}  
  */
-const connect = (token, userInfo) => {
+const connect = (token, userInfo, callback) => {
     RongIMLib.connect(token, res => {
-        console.log('连接结果', res);
+        console.log('连接结果', res);
+        
+        callback(res)
     })
 
     store.dispatch('setSenderInfo', userInfo)

From 33b4fb304d19b8e2d4a753c430e382fc6ed31107 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Mon, 24 Jan 2022 09:23:11 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=A5=BD=E5=8F=8B=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=EF=BC=8C=E7=BB=9F=E4=B8=80=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/friends/index.vue | 54 +++++++++++---------------------------
 pages/im/private/index.vue | 15 +++++++----
 2 files changed, 25 insertions(+), 44 deletions(-)

diff --git a/pages/im/friends/index.vue b/pages/im/friends/index.vue
index 27abc38..b3f2ed2 100644
--- a/pages/im/friends/index.vue
+++ b/pages/im/friends/index.vue
@@ -1,17 +1,20 @@
 <template>
     <view>
-        <view class="list">
-            <view class="list__item" @click="toPending">
-                <u-avatar size="35" icon="plus-people-fill" fontSize="26" bg-color="#f0ad4e"></u-avatar>
-                <text class="list__item__user-name">新的朋友</text>
-            </view>
-            <u-line></u-line>
-            <view class="list__item" @click="showToast">
-                <u-avatar size="35" icon="account-fill" fontSize="26" bg-color="#4cd964"></u-avatar>
-                <text class="list__item__user-name">我的群聊</text>
-            </view>
-            <u-line></u-line>
-        </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">
@@ -74,33 +77,6 @@
 </script>
 
 <style lang="scss">
-    .list {
-        &__item {
-            @include flex;
-            padding: 6px 12px;
-            align-items: center;
-
-            &__avatar {
-                height: 35px;
-                width: 35px;
-                border-radius: 50%;
-            }
-
-            &__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;
-        }
-    }
-
     // 页面空
     .pages-null {
         height: 70vh;
diff --git a/pages/im/private/index.vue b/pages/im/private/index.vue
index eada86a..e0931c4 100644
--- a/pages/im/private/index.vue
+++ b/pages/im/private/index.vue
@@ -14,7 +14,8 @@
                     <view class="chat-avatar">
                         <u-avatar v-if="item.messageDirection == 2" bg-color="#ffffff" :src="userInfo.portraitUrl"
                             @click="showFriend(targetId)"></u-avatar>
-                        <u-avatar v-else @click="showMine" bg-color="#ffffff" :src="$store.getters.sender.portraitUrl" />
+                        <u-avatar v-else @click="showMine" bg-color="#ffffff"
+                            :src="$store.getters.sender.portraitUrl" />
                     </view>
                 </view>
                 <view class="chat-item-time" :id="'chatId_'+index">
@@ -26,7 +27,7 @@
         <view class="chat-footer">
             <input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
                 cursor-spacing="10" />
-            <button class="chat-push" size="mini" @click="send">发送</button>
+            <button class="chat-push" :disabled="disabled" size="mini" @click="send">发送</button>
         </view>
     </view>
 </template>
@@ -51,7 +52,7 @@
                 }
             }
         },
-        onLoad(e) {
+        onLoad(e) {
             this.targetId = e.targetId
             this.conversationType = e.conversationType // 会话类型
             // 消息总数量
@@ -86,8 +87,8 @@
             RongIMLib.clearReadReceiptReceivedListener()
         },
         computed: {
-            showSendButton() {
-                return this.inputTxt.length > 0
+            disabled() {
+                return this.inputTxt.length == 0
             },
             friend() {
                 return function(targetId) {
@@ -317,6 +318,10 @@
                 font-size: $title-size-m;
                 font-weight: bold;
 
+                &[disabled] {
+                    background: $uni-bg-color-grey;
+                }
+
                 &::after {
                     display: none;
                 }