From 2ac0add20dea5cdf163503ff8c7251e503f4599a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E6=98=8E=E6=98=8E?= <970899069@qq.com>
Date: Thu, 27 Jan 2022 17:58:33 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E8=81=8A=E5=A4=A9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/im/imAUDIO.vue        |  20 ++++++
 components/im/imIMG.vue          |  20 ++++++
 components/im/imTXT.vue          |  20 ++++++
 pages.json                       |  10 +--
 pages/im/friends/group/index.vue |  20 ------
 pages/im/index.vue               |   2 -
 pages/im/private/chat.nvue       | 112 +++++++++++++++++++++++++++++++
 7 files changed, 178 insertions(+), 26 deletions(-)
 create mode 100644 components/im/imAUDIO.vue
 create mode 100644 components/im/imIMG.vue
 create mode 100644 components/im/imTXT.vue
 delete mode 100644 pages/im/friends/group/index.vue
 create mode 100644 pages/im/private/chat.nvue

diff --git a/components/im/imAUDIO.vue b/components/im/imAUDIO.vue
new file mode 100644
index 0000000..c820dab
--- /dev/null
+++ b/components/im/imAUDIO.vue
@@ -0,0 +1,20 @@
+<template>
+    <view>
+        语音消息
+    </view>
+</template>
+
+<script>
+    export default {
+        name:"im",
+        data() {
+            return {
+                
+            };
+        }
+    }
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/components/im/imIMG.vue b/components/im/imIMG.vue
new file mode 100644
index 0000000..3454b79
--- /dev/null
+++ b/components/im/imIMG.vue
@@ -0,0 +1,20 @@
+<template>
+    <view>
+        图片消息
+    </view>
+</template>
+
+<script>
+    export default {
+        name:"im",
+        data() {
+            return {
+                
+            };
+        }
+    }
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/components/im/imTXT.vue b/components/im/imTXT.vue
new file mode 100644
index 0000000..d3155be
--- /dev/null
+++ b/components/im/imTXT.vue
@@ -0,0 +1,20 @@
+<template>
+    <view>
+        文字消息
+    </view>
+</template>
+
+<script>
+    export default {
+        name:"im",
+        data() {
+            return {
+                
+            };
+        }
+    }
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/pages.json b/pages.json
index ea02ea7..0b02e9b 100644
--- a/pages.json
+++ b/pages.json
@@ -574,10 +574,12 @@
                 "navigationBarTextStyle": "white"
             }
         },{
-            "path" : "pages/im/chat/chat",
-            "style": {
-                "navigationBarTitleText": "chat",
-                "enablePullDownRefresh": false
+            "path" : "pages/im/private/chat",
+            "style" : {
+                "disableScroll": true,
+                "navigationBarTitleText": "聊天",
+                "enablePullDownRefresh": false,
+                "navigationBarBackgroundColor":"#F3F6FB"
             }
         }
     ],
diff --git a/pages/im/friends/group/index.vue b/pages/im/friends/group/index.vue
deleted file mode 100644
index 047b2fb..0000000
--- a/pages/im/friends/group/index.vue
+++ /dev/null
@@ -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>
diff --git a/pages/im/index.vue b/pages/im/index.vue
index f1a0aad..9a40fc2 100644
--- a/pages/im/index.vue
+++ b/pages/im/index.vue
@@ -57,8 +57,6 @@
                         </view>
                     </view>
                 </view>
-                <!-- navNvue -->
-                <navigator url="./chat/chat">进入NVUE</navigator>
             </block>
         </view>
         <!-- 未登录 -->
diff --git a/pages/im/private/chat.nvue b/pages/im/private/chat.nvue
new file mode 100644
index 0000000..8bdedef
--- /dev/null
+++ b/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>