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>