重构聊天页面

components/im/imAUDIO.vue

@@ -0,0 +1,20 @@
+<template>
+    <view>
+        语音消息
+    </view>
+</template>
+
+<script>
+    export default {
+        name:"im",
+        data() {
+            return {
+                
+            };
+        }
+    }
+</script>
+
+<style lang="scss">
+
+</style>

components/im/imIMG.vue

@@ -0,0 +1,20 @@
+<template>
+    <view>
+        图片消息
+    </view>
+</template>
+
+<script>
+    export default {
+        name:"im",
+        data() {
+            return {
+                
+            };
+        }
+    }
+</script>
+
+<style lang="scss">
+
+</style>

components/im/imTXT.vue

@@ -0,0 +1,20 @@
+<template>
+    <view>
+        文字消息
+    </view>
+</template>
+
+<script>
+    export default {
+        name:"im",
+        data() {
+            return {
+                
+            };
+        }
+    }
+</script>
+
+<style lang="scss">
+
+</style>

pages.json

@@ -574,10 +574,12 @@
                 "navigationBarTextStyle": "white"
             }
         },{
-            "path" : "pages/im/chat/chat",
+            "path" : "pages/im/private/chat",
             "style" : {
-                "navigationBarTitleText": "chat",
+                "disableScroll": true,
-                "enablePullDownRefresh": false
+                "navigationBarTitleText": "聊天",
+                "enablePullDownRefresh": false,
+                "navigationBarBackgroundColor":"#F3F6FB"
             }
         }
     ],

pages/im/friends/group/index.vue

@@ -1,20 +0,0 @@
-<template>
-    <div>
-        <u-button @click="toIndex">会首页</u-button>
-    </div>
-</template>
-
-<script>
-    export default {
-        methods: {
-            toIndex() {
-                uni.switchTab({
-                    url: '/pages/im/index'
-                })
-            }
-        }
-    }
-</script>
-
-<style>
-</style>

pages/im/index.vue

@@ -57,8 +57,6 @@
                         </view>
                     </view>
                 </view>
-                <!-- navNvue -->
-                <navigator url="./chat/chat">进入NVUE</navigator>
             </block>
         </view>
         <!-- 未登录 -->

pages/im/private/chat.nvue

@@ -0,0 +1,112 @@
+<template>
+    <view class="chat">
+        <!-- chat -->
+        <scroll-view class="chat-scroll" scroll-y="true" :scroll-into-view="toMsg" scroll-with-animation>
+            <view v-for="(item, index) in msgArr" :key="index" :id="'msg'+index">{{toMsg || '-'}} / msg{{item}} - {{index}}</view>
+        </scroll-view>
+        <!-- chat-footer -->
+        <view class="chat-footer">
+            <view class="msg-type" @click="msgType">
+                <image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix"></image>
+                <image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix"></image>
+            </view>
+            <block v-if="importTabs === 0">
+                <view class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio">
+                    <text class="chat-mp3-text">按住说话</text>
+                </view>
+            </block>
+            <block v-if="importTabs === 1">
+                <input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10" />
+            </block>
+            <text class="chat-push" :disabled="disabled" size="mini" @click="send">发送</text>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                toMsg   : '',
+                msgArr  : [
+                    "NVUE界面信息"
+                ],
+                importTabs: 1
+            }
+        },
+        
+        created() {
+            
+        },
+        methods: {
+            send(){
+                this.msgArr.push("新消息NVUE")
+                this.toMsg = 'msg' + (this.msgArr.length - 1)
+            },
+            msgType(){
+                this.importTabs = this.importTabs === 1 ? 0 : 1
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    /* 窗口 */
+    .chat{
+        background: #F3F6FB;
+        flex: 1;
+    }
+    .chat-scroll{
+        flex: 1;
+    }
+    /* footer */
+    .chat-footer{
+        background: white;
+        padding: 20upx 30upx;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: row;
+        
+    }
+    .msg-type{
+        width: 70upx;
+        height: 70upx;
+    }
+    .msg-type > .msg-type-icon{
+        margin: 5upx;
+        width: 60upx;
+        height: 60upx;
+    }
+    .chat-mp3{
+        background: #F3F6FB;
+        height: 70upx;
+        line-height: 70upx;
+        justify-content: center;
+        align-items: center;
+        width: 460upx;
+        border-radius: 10upx;
+        margin-right: 15upx;
+    }
+    .chat-mp3-text{
+        font-size: 30upx;
+        color: #333;
+    }
+    .chat-input{
+        background: #F3F6FB;
+        height: 70upx;
+        width: 460upx;
+        border-radius: 10upx;
+        margin-right: 15upx;
+        padding: 0 20upx;
+    }
+    .chat-push{
+        background: #34CE98;
+        color: white;
+        width: 120upx;
+        line-height: 70upx;
+        text-align: center;
+        border-radius: 10upx;
+        font-size: 30upx;
+        font-weight: bold;
+    }
+</style>