群聊的基础页面

pages/im/private/chat.nvue

@@ -24,25 +24,7 @@
             </cell>
             <cell class="cell-footer" ref="chatBottom"></cell>
         </list>
-        <!-- footer -->
-        <view class="footer">
-            <view class="msg-type" @click="changeMessageType">
-                <image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
-                </image>
-                <image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
-                </image>
-            </view>
-            <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
-                @success="getMessageList" />
-            <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
-                @success="getMessageList" />
-            <view class="msg-type msg-popups" @click="scrollBottom('msgPopups')">
-                <image class="icon" src="@/static/icon/popups-icon.png"></image>
-            </view>
-        </view>
-        <!-- 弹出层 -->
-        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
-            @success="() => {showPopups = false, getMessageList()}"></sent-popups>
+        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getMessageList()" />
     </view>
 </template>
 
@@ -55,9 +37,7 @@
     import showVoice from '../components/showVoice'
     import showImage from '../components/showImage'
     import showText from '../components/showText'
-    import sentText from '../components/sentText'
-    import sentVoice from '../components/sentVoice'
-    import sentPopups from '../components/sentPopups'
+    import sentMessageBar from '../components/sentMessageBar'
 
     const ChatList = uni.requireNativePlugin('dom')
 
@@ -71,19 +51,14 @@
                     name: '',
                     userId: '',
                     portraitUrl: ''
-                },
-                chatType: 1, // 0 语音，1 文本
-                showPopups: false,
-                inputFocus: false // 输入框是否获得了焦点
+                }
             }
         },
-        components: {
+        components: {
+            sentMessageBar,
             showVoice,
             showImage,
-            showText,
-            sentText,
-            sentVoice,
-            sentPopups
+            showText
         },
         onLoad(e) {
             this.targetId = e.targetId
@@ -100,7 +75,7 @@
                 }
             })
             // 监听收到新消息，判断是否是当前会话，更新会话内容
-            uni.$on('onReceiveMessage', (msg) => {
+            uni.$on('onReceivePrivateMessage', (msg) => {
                 if (msg.targetId == this.targetId) {
                     this.initMessageList()
                 }
@@ -119,10 +94,6 @@
             customCN(val) {
                 return timeCustomCN(val)
             },
-            // 切换聊天类型，语音/文本
-            changeMessageType() {
-                this.chatType = this.chatType === 1 ? 0 : 1
-            },
             // 获取消息列表
             getMessageList() {
                 im.getMessageList(
@@ -232,24 +203,5 @@
                 }
             }
         }
-
-        .footer {
-            background: white;
-            padding: 20rpx 30rpx;
-            display: flex;
-            justify-content: space-between;
-            flex-direction: row;
-
-            .msg-type {
-                width: 70rpx;
-                height: 70rpx;
-
-                .icon {
-                    margin: 5rpx;
-                    width: 60rpx;
-                    height: 60rpx;
-                }
-            }
-        }
     }
 </style>