From b0f2a8f1ab69b6d47cd1e5ca050d62ae68931360 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E6=98=8E=E6=98=8E?= <970899069@qq.com>
Date: Fri, 28 Jan 2022 13:18:44 +0800
Subject: [PATCH] =?UTF-8?q?nvue=E8=81=8A=E5=A4=A9=E7=AA=97=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .DS_Store                                     | Bin 12292 -> 12292 bytes
 components/im/imAUDIO.vue                     |  61 +++++++++--
 components/im/imIMG.vue                       |  43 ++++++--
 components/im/imTXT.vue                       |  36 ++++++-
 pages/im/private/chat.nvue                    | 102 ++++++++++++------
 static/.DS_Store                              | Bin 10244 -> 10244 bytes
 .../{audio_ green.png => audio_green.png}     | Bin
 7 files changed, 190 insertions(+), 52 deletions(-)
 rename static/icon/{audio_ green.png => audio_green.png} (100%)

diff --git a/.DS_Store b/.DS_Store
index 5d1d9e1c4a9f6dab94f1ea676483da240df8bd4f..08094f2b1763462ed7fd3d320c3e88ed2f92a151 100644
GIT binary patch
delta 93
zcmZokXi1ph&ls~YAX<RK(9lFj!PwMr^Jakven#WXJPK!-G}suj7>XI<fjEUB+cPIW
rIVmSUiGhJZfPsNg7D(&;2Lp!9SC!tdY<{aQz`FUO$_J*&Z^gv{|7aeW

delta 65
zcmZokXi1ph&ltTiAX<RK#N13r!PLld^Jakvenz9sJPK!-HnS?fV3~YS+-)<v#y1w0
U;@o_f$^NSHn|)LlG69910j+`+NdN!<

diff --git a/components/im/imAUDIO.vue b/components/im/imAUDIO.vue
index c820dab..4f42250 100644
--- a/components/im/imAUDIO.vue
+++ b/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>
diff --git a/components/im/imIMG.vue b/components/im/imIMG.vue
index 3454b79..26f9643 100644
--- a/components/im/imIMG.vue
+++ b/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>
diff --git a/components/im/imTXT.vue b/components/im/imTXT.vue
index d3155be..fe31273 100644
--- a/components/im/imTXT.vue
+++ b/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>
diff --git a/pages/im/private/chat.nvue b/pages/im/private/chat.nvue
index 8bdedef..abfb703 100644
--- a/pages/im/private/chat.nvue
+++ b/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>
diff --git a/static/.DS_Store b/static/.DS_Store
index f3fe89aa96fad1c12215bc88e69dbec01428d1ab..7d1d99cd2a7fbfd6deda1ce385984f4fdd595fd3 100644
GIT binary patch
delta 21
ccmZn(XbITxQ;5UR&_qYU*wk<{qcF2508cmt#sB~S

delta 21
ccmZn(XbITxQ;5UF+)PKo)W~u(qcF2508i)z*Z=?k

diff --git a/static/icon/audio_ green.png b/static/icon/audio_green.png
similarity index 100%
rename from static/icon/audio_ green.png
rename to static/icon/audio_green.png