新增im聊天弹窗

App.vue

@@ -4,7 +4,7 @@
 
     export default {
         onLaunch: function() {
-            im.initIm('lmxuhwaglu76d')
+            // im.initIm('lmxuhwaglu76d')
             return
             //#ifdef APP-PLUS
             // 获取系统版本号

pages/im/components/sentPopups.nvue

@@ -0,0 +1,119 @@
+<template>
+    <view class="sent--popups" v-if="show">
+        <view class="sent--popups--item" @click="onPopupsItem('picture')">
+            <image class="sent--popups--icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image>
+            <text class="sent--popups--text">相册</text>
+        </view>
+        <view class="sent--popups--item" @click="onPopupsItem('film')">
+            <image class="sent--popups--icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
+            <text class="sent--popups--text">拍摄</text>
+        </view>
+        <view class="sent--popups--item" @click="onPopupsItem('video')">
+            <image class="sent--popups--icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
+            <text class="sent--popups--text">视频通话</text>
+        </view>
+        <view class="sent--popups--item" @click="onPopupsItem('location')">
+            <image class="sent--popups--icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image>
+            <text class="sent--popups--text">位置</text>
+        </view>
+        <view class="sent--popups--item" @click="onPopupsItem('redpacket')">
+            <image class="sent--popups--icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image>
+            <text class="sent--popups--text">红包</text>
+        </view>
+        <view class="sent--popups--item" @click="onPopupsItem('file')">
+            <image class="sent--popups--icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image>
+            <text class="sent--popups--text">文件</text>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                
+            };
+        },
+        props:{
+            show: {
+                type: Boolean,
+                default: false
+            }
+        },
+        methods:{
+            onPopupsItem(type){
+                switch (type){
+                    case 'picture':
+                        uni.chooseImage({
+                            count: 9,
+                            sourceType: ['album'],
+                            success: res => {
+                                this.onSentValue(type, res.tempFilePaths)
+                            }
+                        })
+                        break;
+                    case 'film':
+                        uni.chooseImage({
+                            sourceType: ['camera'],
+                            success: res => {
+                                this.onSentValue(type, res.tempFilePaths)
+                            }
+                        })
+                        break;
+                    case 'video':
+                        this.onSentValue(type, {})
+                        break;
+                    case 'location':
+                        uni.chooseLocation({
+                            success: res=> {
+                                this.onSentValue(type, {
+                                    address: res.address,
+                                    longitude: res.longitude,
+                                    latitude: res.latitude,
+                                    name: res.name
+                                })
+                            }
+                        })
+                        break;
+                    case 'redpacket':
+                        console.log('红包')
+                        break;
+                    case 'file':
+                        console.log('文件选择')
+                        break;
+                }
+            },
+            // 处理返回
+            onSentValue(type, value){
+                this.$emit('onVlaue', { type, value })
+                this.show = false
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .sent--popups{
+        background: white;
+        padding: 30rpx 15rpx;
+        flex-wrap: wrap;
+        flex-direction: row;
+        &--item{
+            width: 150rpx;
+            margin: 15rpx;
+        }
+        &--text{
+            text-align: center;
+            font-size: 26rpx;
+            color: #555;
+            padding-top: 15rpx;
+        }
+        &--icon{
+            width: 110rpx;
+            height: 110rpx;
+            margin: 0 20rpx;
+            border-radius: 20rpx;
+            background: #F3F6FB;
+        }
+    }
+</style>

pages/im/components/sentText.nvue

@@ -1,7 +1,7 @@
 <template>
     <view class="text">
         <input class="input" type="text" v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
-        <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button>
+        <!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> -->
     </view>
 </template>
 

pages/im/private/chat.nvue

@@ -32,18 +32,20 @@
                 <image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
                 </image>
             </view>
-            <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
+            <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId" @success="getMessageList" />
-                @success="getMessageList" />
+            <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="getMessageList" />
-            <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
+            <view class="msg-type msg-push" @click="showPopups = !showPopups">
-                @success="getMessageList" />
+                <image class="msg-type-icon" src="@/static/icon/popups-icon.png"></image>
             </view>
         </view>
+        <!-- 弹出层 -->
+        <u-line v-if="showPopups" color="#f5f5f5"></u-line>
+        <sent-popups :show="showPopups" @onVlaue="onValue"></sent-popups>
+    </view>
 </template>
 
 <script>
-    import {
+    import { timeCustomCN } from '@/utils/filters.js'
-        timeCustomCN
-    } from '@/utils/filters.js'
     import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
     import im from '@/utils/im/index.js'
     import showVoice from '../components/showVoice'
@@ -51,6 +53,7 @@
     import showText from '../components/showText'
     import sentText from '../components/sentText'
     import sentVoice from '../components/sentVoice'
+    import sentPopups from '../components/sentPopups'
 
     const ChatList = uni.requireNativePlugin('dom')
 
@@ -65,7 +68,8 @@
                     userId: '',
                     portraitUrl: ''
                 },
-                chatType: 1 // 0 语音，1 文本
+                chatType: 1 ,// 0 语音，1 文本
+                showPopups: false
             }
         },
         components: {
@@ -73,7 +77,8 @@
             showImage,
             showText,
             sentText,
-            sentVoice
+            sentVoice,
+            sentPopups
         },
         onLoad(e) {
             this.targetId = e.targetId
@@ -141,6 +146,11 @@
                         animated: false
                     })
                 }, 50)
+            },
+            // 上传文件信息
+            onValue(e){
+                this.showPopups = false
+                console.log(e)
             }
         }
     }