nvue聊天窗口

components/im/imAUDIO.vue

@@ -1,20 +1,65 @@
 <template>
-    <view>
-        语音消息
+    <view class="im--audio" :class="guest ? 'right': 'left'">
+        <image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+        <text class="audio-text">"60"</text>
+        <image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
     </view>
 </template>
 
 <script>
     export default {
         name:"im",
-        data() {
-            return {
-                
-            };
+        props:{
+            msg : {
+                type   : String,
+                default: 'https://images.pexels.com/photos/10266655/pexels-photo-10266655.jpeg'
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            }
+        },
+        methods:{
+            openImg(){
+                uni.previewImage({
+                    urls    : [this.msg],
+                    current : 1
+                })
+            }
         }
     }
 </script>
 
-<style lang="scss">
+<style scoped>
+    .im--audio{
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        height: 79rpx;
+        width: 170rpx;
+        padding: 0 20rpx;
+        box-sizing: border-box;
+    },
+    .im--audio.left{
+        border-radius: 0 20rpx 20rpx 20rpx;
+        background: white;
+    }
     
+    .im--audio.right{
+        border-radius: 20rpx 0 20rpx 20rpx;
+        background: #34CE98;
+    }
+    .audio-mp3{
+        width: 38rpx;
+        height: 38rpx;
+    }
+    .audio-text{
+        font-size: 30rpx;
+    }
+    .im--audio.left .audio-text{
+        color: #333;
+    }
+    .im--audio.right .audio-text{
+        color: white;
+    }
 </style>

components/im/imIMG.vue

@@ -1,20 +1,47 @@
 <template>
-    <view>
-        图片消息
+    <view class="im--img" :class="guest ? 'right': 'left'">
+        <image class="src" :src="msg" @click="openImg" mode="widthFix"></image>
     </view>
 </template>
 
 <script>
     export default {
         name:"im",
-        data() {
-            return {
-                
-            };
+        props:{
+            msg : {
+                type   : String,
+                default: 'https://images.pexels.com/photos/9024609/pexels-photo-9024609.jpeg'
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            }
+        },
+        methods:{
+            openImg(){
+                uni.previewImage({
+                    urls    : [this.msg],
+                    current : 1
+                })
+            }
         }
     }
 </script>
 
-<style lang="scss">
+<style scoped>
+    .im--img{
+        padding: 19rpx;
+    }
+    .im--img.left{
+        border-radius: 0 20rpx 20rpx 20rpx;
+        background: white;
+    }
     
+    .im--img.right{
+        border-radius: 20rpx 0 20rpx 20rpx;
+        background: #34CE98;
+    }
+    .src{
+        width: 240rpx;
+    }
 </style>

components/im/imTXT.vue

@@ -1,6 +1,6 @@
 <template>
-    <view>
-        文字消息
+    <view class="im--box">
+        <text class="im--text" :class="guest ? 'right': 'left'">{{msg}}</text>
     </view>
 </template>
 
@@ -11,10 +11,38 @@
             return {
                 
             };
+        },
+        props:{
+            msg : {
+                type   : String,
+                default: '文字消息'
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            }
         }
     }
 </script>
 
-<style lang="scss">
+<style scoped>
+    .im--text{
+        max-width: 400rpx;
+        padding: 20rpx;
+        font-size: 28rpx;
+        line-height: 40rpx;
+        min-height: 40rpx;
+        min-width: 50rpx;
+    }
     
+    .im--text.left{
+        border-radius: 0 20rpx 20rpx 20rpx;
+        background: white;
+    }
+    
+    .im--text.right{
+        border-radius: 20rpx 0 20rpx 20rpx;
+        background: #34CE98;
+        color: white;
+    }
 </style>

pages/im/private/chat.nvue

@@ -1,10 +1,18 @@
 <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 -->
+        <list class="chat-scroll">
+            <cell class="cell" :class="{'left': index%2 == 0, 'right': index%2 == 1}" v-for="(item, index) in msgArr" :key="index">
+                <image class="active" src="" mode="aspectFill"></image>
+                <view class="msg">
+                    <imAUDIO :guest="index%2 == 1"></imAUDIO>
+                    <imIMG :guest="index%2 == 1"></imIMG>
+                    <imTXT :guest="index%2 == 1"></imTXT>
+                </view>
+            </cell>
+            <cell class="cell-footer" ref="chatBottom"></cell>
+        </list>
+        <!-- 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>
@@ -24,24 +32,31 @@
 </template>
 
 <script>
+    const ChatList = uni.requireNativePlugin('dom')
+    import imAUDIO from '@/components/im/imAUDIO'
+    import imIMG from '@/components/im/imIMG'
+    import imTXT from '@/components/im/imTXT'
     export default {
         data() {
             return {
                 toMsg   : '',
                 msgArr  : [
-                    "NVUE界面信息"
+                    "NVUE界面信息界面信息界面信息界面信息界面信息界面信息界面信息界面信息界面信息"
                 ],
                 importTabs: 1
             }
         },
-        
-        created() {
-            
-        },
+        components:{ imAUDIO, imIMG, imTXT },
         methods: {
             send(){
                 this.msgArr.push("新消息NVUE")
-                this.toMsg = 'msg' + (this.msgArr.length - 1)
+                // 此处等待数据渲染完成后滚动至底部
+                setTimeout(() => {
+                    let el  = this.$refs.chatBottom
+                    ChatList.scrollToElement(el, {
+                        animated: true
+                    })
+                },50)
             },
             msgType(){
                 this.importTabs = this.importTabs === 1 ? 0 : 1
@@ -59,54 +74,77 @@
     .chat-scroll{
         flex: 1;
     }
+    .cell{
+        width: 690rpx;
+        margin: 0 30rpx;
+        padding:10rpx 0;
+        justify-content: flex-start;
+    }
+    .cell-footer{
+        height: 20rpx;
+    }
+    .active{
+        width: 78rpx;
+        height: 78rpx;
+        background-color: white;
+        border-radius: 10rpx;
+    }
+    .msg{
+        margin: 0 20rpx;
+    }
+    .cell.left{
+        flex-direction: row;
+    }
+    .cell.right{
+        flex-direction: row-reverse;
+    }
     /* footer */
     .chat-footer{
         background: white;
-        padding: 20upx 30upx;
+        padding: 20rpx 30rpx;
         display: flex;
         justify-content: space-between;
         flex-direction: row;
-        
     }
     .msg-type{
-        width: 70upx;
-        height: 70upx;
+        width: 70rpx;
+        height: 70rpx;
     }
     .msg-type > .msg-type-icon{
-        margin: 5upx;
-        width: 60upx;
-        height: 60upx;
+        margin: 5rpx;
+        width: 60rpx;
+        height: 60rpx;
     }
     .chat-mp3{
         background: #F3F6FB;
-        height: 70upx;
-        line-height: 70upx;
+        height: 70rpx;
+        line-height: 70rpx;
         justify-content: center;
         align-items: center;
-        width: 460upx;
-        border-radius: 10upx;
-        margin-right: 15upx;
+        width: 460rpx;
+        border-radius: 10rpx;
+        margin-right: 15rpx;
     }
     .chat-mp3-text{
-        font-size: 30upx;
+        font-size: 30rpx;
         color: #333;
     }
     .chat-input{
         background: #F3F6FB;
-        height: 70upx;
-        width: 460upx;
-        border-radius: 10upx;
-        margin-right: 15upx;
-        padding: 0 20upx;
+        height: 70rpx;
+        width: 460rpx;
+        border-radius: 10rpx;
+        margin-right: 15rpx;
+        padding: 0 20rpx;
     }
     .chat-push{
         background: #34CE98;
         color: white;
-        width: 120upx;
-        line-height: 70upx;
+        width: 120rpx;
+        line-height: 70rpx;
         text-align: center;
-        border-radius: 10upx;
-        font-size: 30upx;
+        border-radius: 10rpx;
+        font-size: 30rpx;
         font-weight: bold;
     }
 </style>