merge

pages.json

@@ -373,10 +373,18 @@
         {
             "path": "pages/im/private/chat",
             "style": {
-                "navigationBarTitleText": "聊天",
+                "navigationBarBackgroundColor":"#FFFFFF",
-                "navigationBarBackgroundColor": "#F3F6FB",
+                "disableScroll": false,
                 "app-plus": {
-                    "bounce": "none"
+                    "titleNView": {
+                        "type": "default",
+                        "buttons": [{
+                            "float": "right",
+                            "fontSrc": "/static/iconfont.ttf",
+                            "text": "\ue607",
+                            "fontSize": "20px"
+                        }]
+                    }
                 }
             }
         },

pages/im/components/sentMessageBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="">
+    <view class="messageBar">
         <!-- footer -->
         <view class="footer">
             <view class="msg-type" @click="changeMessageType">
@@ -49,19 +49,26 @@
             },
             onSuccess() {
                 this.$emit('onSuccess')
+            },
+            // 处理弹出层
+            onHidePopus(){
+                if(this.showPopups){
+                    this.showPopups = false
+                }
             }
         }
     }
 </script>
 
 <style lang="scss" scoped>
-    .footer {
+    .messageBar{
+        border-radius: ($radius*2) ($radius*2) 0 0;
         background: white;
+        .footer {
             padding: 20rpx 30rpx;
             display: flex;
             justify-content: space-between;
             flex-direction: row;
-
             .msg-type {
                 width: 70rpx;
                 height: 70rpx;
@@ -73,4 +80,5 @@
                 }
             }
         }
+    }
 </style>

pages/im/components/sentPopups.vue

@@ -104,14 +104,14 @@
                         this.callShow = true
                         break;
                     case 'location':
-                        uni.showToast({
+                        // uni.showToast({
-                            icon: 'none',
+                        //     icon: 'none',
-                            title: '功能正在开发中'
+                        //     title: '功能正在开发中'
-                        })
+                        // })
                         // uni.chooseLocation({
                         //     success: res => {
                         //         console.log(res);
-                        //         this.success()
+                        //         // this.success()
                         //     }
                         // })
                         break;

pages/im/components/sentText.vue

@@ -1,8 +1,8 @@
 <template>
     <view class="sent--text">
-        <input class="input" type="text" @focus="focus" @blur="blur" v-model="inputTxt" confirm-type="send"
+        <input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState" v-model="inputTxt" confirm-type="send"
             @confirm="sent" cursor-spacing="10" />
-        <!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> -->
+        <!-- <button class="button" size="mini" :disabled="disabled" @click="demo">{{focusState ? '失焦': '聚焦'}}</button> -->
     </view>
 </template>
 
@@ -45,6 +45,11 @@
                 console.log('销毁组件之前，保存草稿信息，但是没有执行', res);
             })
         },
+        data() {
+            return {
+                focusState: false,
+            }
+        },
         methods: {
             // 发送文本消息
             sent() {
@@ -56,10 +61,16 @@
                     })
                 }
             },
+            demo(){
+                console.log(this.focusState)
+                
+                this.focusState = !this.focusState
+            },
             focus() {
                 this.$emit('focus')
             },
             blur() {
+                uni.hideKeyboard()
                 this.$emit('blur')
             }
         }

pages/im/components/showText.vue

@@ -1,8 +1,10 @@
 <template>
     <view class="msg--text">
         <text class="name" v-if="!guest && name">{{ name }}</text>
+        <view>
             <text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
         </view>
+    </view>
 </template>
 
 <script>
@@ -11,7 +13,9 @@
         props: {
             msg: {
                 type: Object,
-                default: {}
+                default: () => {
+                    return {}
+                }
             },
             name: {
                 type: String,
@@ -29,22 +33,21 @@
     .msg--text {
         .name {
             font-size: 26rpx;
-            padding-bottom: 10rpx;
             color: $text-gray-m;
+            display: inline-block;
         }
-
         .im--text {
             max-width: 508rpx;
             padding: 20rpx;
             line-height: 46rpx;
             font-size: 32rpx;
             color: $text-color;
-
+            display: inline-block;
+            word-break: break-all;
             &.left {
                 border-radius: 0 20rpx 20rpx 20rpx;
                 background: white;
             }
-
             &.right {
                 border-radius: 20rpx 0 20rpx 20rpx;
                 background: $main-color;

pages/im/group/chat.vue

@@ -102,7 +102,9 @@
             })
         },
         methods: {
-            // 转到好友资料页面
+            onScroll(e) {
+                this.$refs.messageBar.onHidePopus()
+            },
             toUser(item) {
                 if (item.senderUserId == '__system__') {
                     return

pages/im/index.vue

@@ -77,6 +77,12 @@
             uni.$off('onReceiveMessage')
         },
         methods: {
+            onDemo(){
+                console.log('1111')
+                uni.navigateTo({
+                    url: '/pages/im/chatDemo'
+                })
+            },
             checkNewFriendPending() {
                 im.getPendingList((pendings) => {
                     this.hasNewFriends = pendings.length

pages/im/private/chat.vue

@@ -1,11 +1,63 @@
+
+<style scoped lang="scss">
+    .chat {
+        height: 100vh;
+        overflow: scroll;
+        display: flex;
+        flex-direction: column;
+        .chat-scroll{
+            display: flex;
+            flex: 1;
+            flex-direction: column-reverse;
+            justify-content: flex-end;
+            .cell{
+                padding: $padding/2 $padding;
+                .time{
+                    text-align: center;
+                    text{
+                        color: $text-gray;
+                        font-size: $title-size-sm;
+                    }
+                }
+                .cell-item{
+                    display: flex;
+                    align-items: flex-start;
+                    &.left{
+                        flex-direction: row-reverse;
+                        .avatar{
+                            margin-right: 20rpx;
+                        }
+                    }
+                    &.right{
+                        flex-direction: row-reverse;
+                        .avatar{
+                            margin-left: 20rpx;
+                        }
+                        .state{
+                            text-align: right;
+                            font-size: 24rpx;
+                        }
+                    }
+                }
+            }
+        }
+        .message-bar{
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+    }
+</style>
+
 <template>
     <view class="chat">
-        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
         <!-- chat -->
-        <view class="body">
+        <view class="chat-scroll">
-            <view class="scroll">
             <view class="cell" v-for="(item, index) in messages" :key="index">
-                    <view class="time">{{ item.sentTime|timeCustomCN }}</view>
+                <view class="time">
+                    <text>{{ item.sentTime|timeCustomCN }}</text>
+                </view>
                 <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
                     <u-avatar class="avatar" size="40" shape="square"
                         @click="showUser(item.senderUserId, item.messageDirection)"
@@ -18,14 +70,15 @@
                         <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
                             :msg="item.content" />
                         <view class="state" v-if="item.messageDirection == 1">
-                                <text
+                            <text :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
-                                    :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
-                            </view>
                         </view>
                     </view>
                 </view>
             </view>
+            <view id="chatBottom"></view>
         </view>
+        <!-- footer -->
+        <sent-message-bar class="message-bar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
     </view>
 </template>
 
@@ -146,82 +199,15 @@
                     // 更新badge提醒数量
                     im.setNotifyBadge()
                 }
+                
+                setTimeout(() => {
+                    let el = this.$refs.chatBottom
+                    ChatList.scrollToElement(el, {
+                        offset: 0,
+                        animated: false
+                    })
+                }, 50)
             }
         }
     }
 </script>
-
-<style scoped lang="scss">
-    /* 窗口 */
-    .chat {
-        background: $window-color;
-        height: 100vh;
-        display: flex;
-        flex-direction: column-reverse;
-
-        .body {
-            overflow: scroll;
-            flex: 1;
-            height: 0;
-            display: flex;
-            flex-direction: column-reverse;
-
-            .scroll {
-                display: flex;
-                flex-direction: column-reverse;
-                justify-content: flex-end;
-
-                .cell {
-                    padding: 10rpx 30rpx;
-
-                    .time {
-                        text-align: center;
-                        font-size: 24rpx;
-                        color: #666;
-                    }
-
-                    .cell-item {
-                        display: flex;
-                        width: 690rpx;
-                        justify-content: flex-start;
-
-                        &.left {
-                            flex-direction: row;
-                        }
-
-                        &.right {
-                            flex-direction: row-reverse;
-
-                            .state {
-                                flex-direction: row;
-                                justify-content: flex-end;
-                            }
-                        }
-
-                        .msg {
-                            margin: 0 20rpx;
-
-                            .state {
-                                padding-top: 10rpx;
-
-                                .state-text {
-                                    font-size: $title-size-m - 2;
-                                    color: rgba($color: $main-color, $alpha: 0.3)
-                                }
-
-                                .state-text-active {
-                                    font-size: $title-size-m - 2;
-                                    color: #cecece;
-                                }
-                            }
-                        }
-                    }
-
-                    .cell-footer {
-                        height: 20rpx;
-                    }
-                }
-            }
-        }
-    }
-</style>