From d4d366a357ea3521cde2bdd416822cfb77a73cc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E6=98=8E=E6=98=8E?= <970899069@qq.com>
Date: Wed, 19 Jan 2022 16:49:29 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=81=8A=E5=A4=A9=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .hbuilderx/launch.json       |   2 +-
 App.vue                      |   8 +-
 pages.json                   |  23 ++-
 pages/im/friends/index.vue   |   9 +-
 pages/im/index.vue           | 245 +++++++++++++++++++-----------
 pages/im/private/index.vue   | 281 ++++++++++++++++++-----------------
 pages/im/private/setting.vue |   5 +-
 7 files changed, 330 insertions(+), 243 deletions(-)

diff --git a/.hbuilderx/launch.json b/.hbuilderx/launch.json
index a97fd25..59d78d5 100644
--- a/.hbuilderx/launch.json
+++ b/.hbuilderx/launch.json
@@ -4,7 +4,7 @@
     "configurations": [{
      	"app-plus" : 
      	{
-     		"launchtype" : "local"
+     		"launchtype" : "remote"
      	},
      	"default" : 
      	{
diff --git a/App.vue b/App.vue
index 8a45324..b59f73f 100644
--- a/App.vue
+++ b/App.vue
@@ -1,12 +1,12 @@
 <script>
-    import {
-        getVersions
-    } from './apis/interfaces/versions'
+    import { getVersions } from './apis/interfaces/versions'
     import im from '@/utils/im/index.js'
 
     export default {
         onLaunch: function() {
-            im.initIm('lmxuhwaglu76d')
+            im.initIm('lmxuhwaglu76d')
+			
+			return
 
             //#ifdef APP-PLUS
             // 获取系统版本号
diff --git a/pages.json b/pages.json
index aa9dec8..348dc06 100644
--- a/pages.json
+++ b/pages.json
@@ -375,9 +375,12 @@
             }
         },
         {
-            "path": "pages/im/private/index",
+            "path": "pages/im/private/index",
+			"name": "imPrivate",
             "style": {
-                "navigationBarTitleText": "单聊",
+                "navigationBarTitleText": "聊天",
+				"navigationBarBackgroundColor":"#FFFFFF",
+				"disableScroll": true,
                 "app-plus": {
                     "titleNView": {
                         "type": "default",
@@ -393,36 +396,42 @@
         },
         {
             "path": "pages/im/private/setting",
+			"name": "imPrivateSetting",
             "style": {
                 "navigationBarTitleText": "设置"
             }
         },
         {
-            "path": "pages/im/friends/index",
+            "path": "pages/im/friends/index",
+			"name": "imFriends",
             "style": {
                 "navigationBarTitleText": "我的好友"
             }
         },
         {
-            "path": "pages/im/friends/pending",
+            "path": "pages/im/friends/pending",
+			"name": "imFriendsPending",
             "style": {
                 "navigationBarTitleText": "新的朋友"
             }
         },
         {
-            "path": "pages/im/friends/info",
+            "path": "pages/im/friends/info",
+			"name": "imFriendsInfo",
             "style": {
                 "navigationBarTitleText": ""
             }
         },
         {
-            "path": "pages/im/friends/mine",
+            "path": "pages/im/friends/mine",
+			"name": "imFriendsMine",
             "style": {
                 "navigationBarTitleText": "我的资料"
             }
         },
         {
-            "path": "pages/im/group/index",
+            "path": "pages/im/group/index",
+			"name": "imGroup",
             "style": {
                 "navigationBarTitleText": "我的群聊"
             }
diff --git a/pages/im/friends/index.vue b/pages/im/friends/index.vue
index d4cca29..536cf4d 100644
--- a/pages/im/friends/index.vue
+++ b/pages/im/friends/index.vue
@@ -2,12 +2,12 @@
     <div>
         <view class="list">
             <view class="list__item" @click="toPending">
-                <u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></u-avatar>
+                <u-avatar size="35" icon="plus-people-fill" fontSize="26" randomBgColor></u-avatar>
                 <text class="list__item__user-name">新的朋友</text>
             </view>
             <u-line></u-line>
             <view class="list__item" @click="toGroup">
-                <u-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar>
+                <u-avatar  size="35" icon="account-fill" fontSize="26" randomBgColor></u-avatar>
                 <text class="list__item__user-name">我的群聊</text>
             </view>
             <u-line></u-line>
@@ -24,7 +24,8 @@
                     <!-- #endif -->
                     <view class="list" v-for="(item1, index1) in item" :key="index1">
                         <view class="list__item" @click="toInfo">
-                            <image class="list__item__avatar" :src="item1.url"></image>
+                            <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>
@@ -119,7 +120,7 @@
             &__avatar {
                 height: 35px;
                 width: 35px;
-                border-radius: 3px;
+                border-radius: 50%;
             }
 
             &__user-name {
diff --git a/pages/im/index.vue b/pages/im/index.vue
index 93f4792..2bd1233 100644
--- a/pages/im/index.vue
+++ b/pages/im/index.vue
@@ -1,43 +1,76 @@
-<template>
-    <div>
-        <div v-if="$store.state.token != ''">
-            <div class="container">
-                <div class="msg-item u-border-bottom" v-for="(item, index) in conversations" @click="toDetail(item)">
-                    <div class="avatar">
-                        <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-7, -7]"
-                            :value="item.unreadMessageCount" />
-                        <u-avatar shape="square" :src="friend(item.targetId).portraitUrl"></u-avatar>
-                    </div>
-                    <div class="content ">
-                        <div class="name">
-                            <h3>{{ friend(item.targetId).name }}</h3>
-                            <span class="time">{{ item.sentTime|timeCustomCN }}</span>
-                        </div>
-                        <div class="u-line-1">{{ item.latestMessage.content }}</div>
-                    </div>
-                </div>
-            </div>
-            <u-loadmore status="nomore" />
-        </div>
-        <div v-else>
-            <u-button @click="toLogin">去登录</u-button>
-        </div>
-    </div>
+<template>
+	<view class="content">
+		<view v-if="$store.state.token != ''">
+			<block v-if="conversations.length < 1">
+				<view class="vertical null-list">
+					<u-empty
+						icon="http://cdn.uviewui.com/uview/empty/message.png"
+						textColor="#999"
+						text="暂无好友消息"
+					>
+						<template>
+							<view class="null-list-btn">开启聊天</view>
+						</template>
+					</u-empty>
+				</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>
+						</view>
+					</view>
+				</view>
+			</block>
+		</view>
+		<!-- 未登录 -->
+		<view v-else class="vertical null-list">
+			<u-empty
+				icon="http://cdn.uviewui.com/uview/empty/permission.png"
+				textColor="#999"
+				text="登录后开启聊天吧~"
+			>
+				<template>
+					<view class="null-list-btn" @click="toLogin">去登录</view>
+				</template>
+			</u-empty>
+		</view>
+	</view>
 </template>
 
 <script>
     import * as RongIMLib from '@rongcloud/imlib-uni'
     import im from '@/utils/im/index.js'
     import userAuth from '@/public/userAuth'
-    import {
-        getImToken
-    } from '@/apis/interfaces/im.js'
+    import { getImToken } from '@/apis/interfaces/im.js'
 
     export default {
         data() {
             return {
                 isShown: true, // 当前页面显示状态
-                conversations: [] // 会话列表
+                conversations: [] ,// 会话列表
+				isImToken: '', // 是否已鉴权
             }
         },
         computed: {
@@ -47,30 +80,32 @@
                 }
             }
         },
-        onLoad() {
-            getImToken().then(res => {
-                im.syncFriends()
-                im.connect(res.token, res.userInfo)
-                
-                this.getConversationList()
-            })
-        },
-        onShow() {
-            this.getConversationList()
-            this.isShown = true
+        onShow() {
+			if (this.$store.state.token !== '') {
+				if(this.isImToken === ''){
+					getImToken().then(res => {
+					    im.syncFriends()
+					    im.connect(res.token, res.userInfo)
+						this.isImToken = res.token
+					    this.getConversationList()
+					})
+				}
+				this.getConversationList()
+				this.isShown = true
+			}
         },
         onHide() {
             this.isShown = false
         },
         onNavigationBarButtonTap(e) {
-            if (e.index == 0) {}
-            if (e.index == 1) {
-                uni.navigateTo({
-                    url: '/pages/im/friends/index',
-                    fail: (err) => {
-                        console.log(err);
-                    }
-                })
+            if (e.index == 0) {
+				uni.showToast({
+					title: '开发中暂未开放，敬请期待',
+					icon : 'none'
+				})
+			}
+            if (e.index == 1) {
+				this.$Router.push({name: 'imFriends'})
             }
         },
         watch: {
@@ -96,7 +131,7 @@
             getConversationList() {
                 const count = 1000
                 const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
-                RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
+                RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
                     if (res.code === 0 && res.conversations.length > 0) {
                         this.conversations = res.conversations
                     }
@@ -105,51 +140,81 @@
             // 进入聊天的详情页面，清理未读消息数量
             toDetail(item) {
                 uni.navigateTo({
-                    url: '/pages/im/private/index?targetId=' + item.targetId +
-                        '&conversationType=' + item.conversationType
+                    url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item.conversationType
                 })
             }
         }
     }
 </script>
 
-<style scoped lang="scss">
-    .container {
-        padding: 0 $uni-spacing-col-lg $uni-spacing-col-lg $uni-spacing-col-lg;
-    }
-
-    .msg-item {
-        display: flex;
-        align-items: center;
-        padding: $uni-spacing-col-lg 0;
-
-        .avatar {
-            position: relative;
-            margin-right: $uni-spacing-col-lg;
-
-            .u-badge {
-                z-index: 9;
-            }
-        }
-
-        .content {
-            flex: 1;
-
-            .name {
-                display: flex;
-                justify-content: space-between;
-                font-size: $uni-font-size-base;
-
-                .time {
-                    font-size: $uni-font-size-sm;
-                    color: $uni-text-color-grey;
-                }
-            }
-
-            .u-line-1 {
-                color: $u-info;
-                font-size: $uni-font-size-sm;
-            }
-        }
-    }
+<style lang="scss" scoped>
+	.content{
+		background-color: $window-color;
+		min-height: 100vh;
+		.null-list{
+			height: 100vh;
+			text-align: center;
+			&-btn{
+				margin-top: $margin * 2;
+				line-height: 70rpx;
+				color: $main-color;
+				border:solid 1rpx $main-color;
+				padding: 0 ($padding*3);
+				font-size: $title-size-m;
+				border-radius: 35rpx;
+				box-sizing: border-box;
+			}
+		}
+		.mssage-box{
+			background: white;
+			.mssage-action{
+				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;
+					}
+				}
+			}
+			&-item:last-child{
+				.mssage-action::after{
+					display: none;
+				}
+			}
+		}
+	}
 </style>
diff --git a/pages/im/private/index.vue b/pages/im/private/index.vue
index 6cb5d5b..988a19a 100644
--- a/pages/im/private/index.vue
+++ b/pages/im/private/index.vue
@@ -1,41 +1,33 @@
-<template>
-    <div>
-        <scroll-view ref="scrollview" :scroll-y="true" class="scroll" :scroll-into-view="scrollIntoID"
-            :scroll-with-animation="false">
-            <view v-for="(item,index) in messages" :id="'chatId_'+index">
-                <div :class="item.messageDirection == 1 ? 'right' : 'left'">
-                    <div class="avatar" v-if="item.messageDirection == 2">
-                        <u-avatar :src="userInfo.portraitUrl" @click="showFriend" shape="square" />
-                    </div>
-                    <div class="msg">
-                        {{ item.content.content }}
-                        <div class="status" v-if="item.messageDirection == 1">
-                            <u-icon v-if="item.sentStatus == 50" name="checkbox-mark" />
-                            <span v-else>未读</span>
-                        </div>
-                    </div>
-                    <div class="avatar" v-if="item.messageDirection == 1">
-                        <u-avatar text="Me" @click="showMine" shape="square" />
-                    </div>
-                </div>
-
-                <div class="time">{{ item.sentTime|timeCustomCN }}</div>
-            </view>
-        </scroll-view>
-
-        <div class="footer">
-            <div class="left">
-                <u-icon name="volume" />
-            </div>
-            <div class="middle">
-                <u--input autoBlur confirmHold confirmType="send" @confirm="send" v-model="inputTxt" />
-            </div>
-            <div class="right">
-                <u-button type="primary" v-if="showSendButton" class="custom-style" text="发送" @click="send"></u-button>
-                <u-icon v-else name="plus" />
-            </div>
-        </div>
-    </div>
+<template>
+	<view class="chat-content">
+		<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-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
+					<view class="chat-msg">
+						<view class="chat-msg-text">{{ item.content.content }}</view>
+						<!-- 预留一些图片，语音表情包等位置 -->
+					</view>
+					<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
+							text="无"
+							fontSize="14"
+							bg-color="rgba(0,0,0,.2)"
+						></u-avatar>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+		<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>
+		</view>
+	</view>
 </template>
 
 <script>
@@ -82,7 +74,7 @@
             this.getMessageList()
 
             // 监听消息回执
-            RongIMLib.addReadReceiptReceivedListener((result) => {
+            RongIMLib.addReadReceiptReceivedListener((result) => {
                 const res = result.data.message
                 if (res.targetId == this.targetId) {
                     this.getMessageList()
@@ -106,7 +98,7 @@
             }
         },
         watch: {
-            '$store.getters.newMessage': function(msg) {
+            '$store.getters.newMessage': function(msg) {
                 if (msg.targetId == this.targetId) {
                     RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
                     RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
@@ -140,7 +132,7 @@
                     ({
                         code,
                         messages
-                    }) => {
+                    }) => {
                         if (code === 0) {
                             this.messages = messages.reverse()
                             this.scrollBottom()
@@ -188,98 +180,117 @@
 </script>
 
 <style lang="scss" scoped>
-    $footer-height: 55px;
-
-    .scroll {
-        height: calc(100vh - 55px);
-        width: 100vw;
-        padding: 0 $uni-spacing-col-lg;
-    }
-
-    .footer {
-        width: 100%;
-        display: flex;
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        align-items: center;
-        height: $footer-height;
-        background-color: $uni-bg-color-grey;
-
-        .u-icon {
-            padding: $uni-spacing-col-sm;
-            border: 1px solid $u-content-color;
-            border-radius: $uni-border-radius-circle;
-        }
-
-        .left {
-            padding: 0 $uni-spacing-col-lg;
-            justify-content: center;
-        }
-
-        .middle {
-            flex: 1;
-
-            .u-input {
-                background-color: $uni-bg-color;
-            }
-        }
-
-        .right {
-            padding: 0 $uni-spacing-col-lg;
-            justify-content: center;
-        }
-    }
-
-    .custom-style {
-        height: 36px;
-    }
-
-    .time {
-        text-align: center;
-        font-size: $uni-font-size-sm;
-        color: $u-light-color;
-    }
-
-    .left,
-    .right {
-        display: flex;
-        align-items: top;
-
-        .avatar {
-            margin-top: $uni-spacing-col-base;
-        }
-
-        .msg {
-            font-size: $uni-font-size-base;
-            margin: $uni-spacing-col-base;
-            padding: $uni-spacing-col-base;
-            word-wrap: break-word;
-            width: 60%;
-            border-radius: $uni-border-radius-base;
-            position: relative;
-
-            .status {
-                position: absolute;
-                right: 8rpx;
-                bottom: 5rpx;
-                font-size: $uni-font-size-base / 1.5;
-                color: $uni-text-color-grey;
-            }
-        }
-    }
-
-    .left {
-        .msg {
-            background-color: $uni-bg-color-grey;
-        }
-    }
-
-    .right {
-        justify-content: flex-end;
-
-        .msg {
-            background-color: $u-primary-disabled;
-        }
-    }
+    .chat-content{
+		height: 100vh;
+		background: $window-color;
+		.chat-scrool{
+			height: calc(100vh - 140rpx);
+			box-sizing: border-box;
+			padding-bottom: $padding;
+			.chat-item{
+				.chat-item-time{
+					text-align: center;
+					padding: $padding/2 $padding;
+					text{
+						background: rgba($color: #000000, $alpha: .2);
+						color: white;
+						font-size: $title-size-sm - 4;
+						line-height: 40rpx;
+						padding: 0 15rpx;
+						display: inline-block;
+						border-radius: $radius-lg;
+					}
+				}
+				.chat-item-article{
+					position: relative;
+					padding: 10rpx ($padding + 110) 0;
+					overflow: hidden;
+					min-height: 40px;
+					.chat-msg{
+						overflow: hidden;
+						.chat-msg-text{
+							display: inline-block;
+							padding: ($padding - 10) $padding;
+							color: $text-color;
+							box-sizing: border-box;
+							font-size: $title-size-lg;
+						}
+					}
+					.chat-status{
+						color: $text-gray;
+						font-size: $title-size-sm;
+						text-align: right;
+						&.hide{
+							color: $text-gray-m;
+						}
+					}
+					.chat-avatar{
+						position: absolute;
+						top: 0;
+					}
+					&.left{
+						.chat-avatar{
+							left: $margin;
+						}
+						.chat-msg{
+							.chat-msg-text{
+								background-color: white;
+								border-radius: 0 $radius*2 $radius*2 $radius*2;
+							}
+						}
+					}
+					&.right{
+						.chat-avatar{
+							right: $margin;
+						}
+						.chat-msg{
+							text-align: right;
+							.chat-msg-text{
+								border-radius: $radius*2 0 $radius*2 $radius*2;
+								background: $main-color;
+								color: white;
+							}
+						}
+					}
+				}
+			}
+		}
+		.chat-footer{
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			height: 140rpx;
+			padding: 20rpx ($padding + 150rpx) 40rpx $padding;
+			background: white;
+			box-sizing: border-box;
+			z-index: 99;
+			.chat-input{
+				background: $window-color;
+				height: 80rpx;
+				border-radius: $radius-lg;
+				font-size: $title-size-m;
+				padding: 0 $padding;
+				box-sizing: border-box;
+			}
+			.chat-push[size='mini']{
+				position: absolute;
+				right: $margin;
+				top: 20rpx;
+				height: 80rpx;
+				line-height: 80rpx;
+				padding: 0;
+				margin: 0;
+				width: 120rpx;
+				background: $main-color;
+				color: white;
+				border-radius: $radius-lg;
+				font-size: $title-size-m;
+				font-weight: bold;
+				&::after{
+					display: none;
+				}
+			}
+		}
+	}
 </style>
diff --git a/pages/im/private/setting.vue b/pages/im/private/setting.vue
index 89d97db..4082d1d 100644
--- a/pages/im/private/setting.vue
+++ b/pages/im/private/setting.vue
@@ -3,7 +3,7 @@
         会话设置 {{ targetId}}
         <div @click="setStatus">免打扰开关 {{status}}</div>
         <div @click="setTop">置顶会话 {{isTop}}</div>
-        
+		
         <u-button @click="toIndex">会首页</u-button>
     </div>
 </template>
@@ -64,5 +64,6 @@
     }
 </script>
 
-<style>
+<style>
+	
 </style>