调整聊天窗口

apis/interfaces/im.js

@@ -85,6 +85,15 @@ const pedingFriend = (recipient) => {
     })
 }
 
+/**
+ * 好友申请数量
+ */
+const getPendingCount = () => {
+    return request({
+        url: 'im/friends/pending/count'
+    })
+}
+
 export {
     getImToken,
     deleteFriend,
@@ -95,5 +104,6 @@ export {
     resolveFriend,
     rejectFriend,
     searchFriend,
-    pedingFriend
+    pedingFriend,
+    getPendingCount
 }

components/im/imAUDIO.vue

@@ -1,9 +1,11 @@
 <template>
-    <view class="im--audio" :class="guest ? 'right': 'left'">
+    <view>
+        <view class="im--audio" :class="guest ? 'right': 'left'" @click="onPlayMsg">
             <image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image>
-        <text class="audio-text">"60"</text>
+            <text class="audio-text">"{{msg.time}}"</text>
             <image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
         </view>
+    </view>
 </template>
 
 <script>
@@ -11,8 +13,13 @@
         name:"im",
         props:{
             msg : {
-                type   : String,
+                type   : Object,
-                default: 'https://images.pexels.com/photos/10266655/pexels-photo-10266655.jpeg'
+                default: () => {
+                    return {
+                        src: "",
+                        time: "20"
+                    }
+                }
             },
             guest: {
                 type: Boolean,
@@ -20,10 +27,18 @@
             }
         },
         methods:{
-            openImg(){
+            // 播放语音消息
-                uni.previewImage({
+            onPlayMsg() {
-                    urls    : [this.msg],
+                let innerAudioContext = uni.createInnerAudioContext()
-                    current : 1
+                innerAudioContext.src = this.audioSrc
+                if (this.audioContextPaused) {
+                    innerAudioContext.play()
+                    this.audioContextPaused = false
+                    return
+                }
+                innerAudioContext.stop()
+                innerAudioContext.onStop(resStop => {
+                    this.audioContextPaused = true
                 })
             }
         }

components/im/imTXT.vue

@@ -15,7 +15,7 @@
         props:{
             msg : {
                 type   : String,
-                default: '文字消息'
+                default: ''
             },
             guest: {
                 type: Boolean,
@@ -31,8 +31,6 @@
         padding: 20rpx;
         font-size: 28rpx;
         line-height: 40rpx;
-        min-height: 40rpx;
-        min-width: 50rpx;
     }
     
     .im--text.left{

manifest.json

@@ -32,6 +32,7 @@
                     "<uses-feature android:name=\"android.hardware.camera\"/>",
                     "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                     "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
                     "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                     "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                     "<uses-permission android:name=\"android.permission.CAMERA\"/>",

pages.json

@@ -453,7 +453,9 @@
             "path": "pages/im/friends/mine",
             "name": "imFriendsMine",
             "style": {
-                "navigationBarTitleText": "我的资料"
+                "navigationBarTitleText": "我的二维码",
+                "navigationBarBackgroundColor": "#34CE98",
+                "navigationBarTextStyle": "white"
             }
         },
         {

pages/im/friends/index.vue

@@ -4,7 +4,9 @@
             <view>
                 <view class="friend-flex u-border-bottom" @click="toPending">
                     <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
-                    <view class="name">新的朋友</view>
+                    <view class="name">
+                        新的朋友 ({{ pendingCount }})
+                    </view>
                 </view>
                 <view class="friend-flex" @click="showToast">
                     <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
@@ -22,7 +24,8 @@
                         <u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666">
                         </u-index-anchor>
                         <!-- #endif -->
-                        <view v-for="(friendItem, index) in item" :key="friendItem.userId" class="friend-flex u-border-bottom"
+                        <view v-for="(friendItem, index) in item" :key="friendItem.userId"
+                            class="friend-flex u-border-bottom"
                             @click="$Router.push({ name: 'imFriendsInfo', params: { targetId: friendItem.userId } })">
                             <block v-if="friendItem.portraitUrl != ''">
                                 <u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''"
@@ -47,24 +50,29 @@
 
 <script>
     import {
-        getFriends
+        getFriends,
+        getPendingCount
     } from '@/apis/interfaces/im';
+
     export default {
         data() {
             return {
                 indexs: [],
-                friends: []
+                friends: [],
+                pendingCount: 0
             };
         },
         onShow() {
             getFriends().then(res => {
-                this.indexs = res.indexList;
+                this.indexs = res.indexList
-                this.friends = res.itemArr;
+                this.friends = res.itemArr
-            });
+            })
+            getPendingCount().then(res => {
+                console.log(res);
+                this.pendingCount = res
+            })
         },
-        computed: {},
         methods: {
-            // 扫码提示
             showToast() {
                 uni.showToast({
                     title: '群聊功能暂未开放，敬请期待',
@@ -104,7 +112,9 @@
         .name {
             flex: 1;
             padding-left: $padding;
-            font-size: $title-size;
+            font-size: $title-size + 2;
+            font-size: $title-size + 2;
+            color: #454545 !important;
             @extend .nowrap;
         }
     }

pages/im/friends/info.vue

@@ -2,7 +2,7 @@
     <view class="content">
         <!-- 用户信息 -->
         <view class="info-flex">
-            <u-avatar :src="userInfo.portraitUrl" shape="square" size="50" bg-color="#fff"></u-avatar>
+            <u-avatar :src="userInfo.portraitUrl || require('@/static/user/cover.png')" shape="square" size="50" bg-color="#fff"></u-avatar>
             <view class="info-text">
                 <view class="nickname">{{userInfo.name}}</view>
                 <view class="address" @longpress="copyAddress">地址：{{userInfo.address}}</view>
@@ -22,11 +22,11 @@
             <view class="info-btns">
                 <view class="item u-border-bottom" @click="setRemark">
                     <label>设置备注</label>
-                    <u-icon name="arrow-right" color="#999" size="16"></u-icon>
+                    <u-icon name="arrow-right" color="#eee" size="16" />
                 </view>
                 <view class="item u-border-bottom" @click="setRemark">
                     <label>设置标签</label>
-                    <u-icon name="arrow-right" color="#999" size="16"></u-icon>
+                    <u-icon name="arrow-right" color="#eee" size="16" />
                 </view>
                 <view class="item u-border-bottom">
                     <label>聊天免打扰</label>
@@ -40,21 +40,21 @@
             <view class="footer">
                 <view class="footer-item" @click="deleteFriend">
                     <view class="icon">
-                        <u-icon class="icon-u" name="close-circle-fill" color="#fff" size="26"></u-icon>
+                        <u-icon class="icon-u" name="close-circle-fill" color="#fff" size="30" />
                     </view>
                     <view class="text">删除好友</view>
                 </view>
                 <view class="footer-item" @click="toPrivate">
                     <view class="icon ">
-                        <u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
+                        <u-icon class="icon-u" name="chat-fill" color="#fff" size="30" />
                     </view>
                     <view class="text">发送消息</view>
                 </view>
                 <view class="footer-item" @click="callShow = true">
                     <view class="icon">
-                        <u-icon class="icon-u" name="camera-fill" color="#fff" size="26"></u-icon>
+                        <u-icon class="icon-u" name="camera-fill" color="#fff" size="30" />
                     </view>
-                    <view class="text">视频通话</view>
+                    <view class="text">音/视频通话</view>
                 </view>
             </view>
         </block>
@@ -62,7 +62,7 @@
             <view class="footer">
                 <view class="footer-item" @click="toBeFriend">
                     <view class="icon">
-                        <u-icon class="icon-u" name="plus-people-fill" color="#fff" size="26"></u-icon>
+                        <u-icon class="icon-u" name="plus-people-fill" color="#fff" size="30" />
                     </view>
                     <view class="text">申请好友</view>
                 </view>
@@ -105,6 +105,7 @@
             }
         },
         onLoad(e) {
+            console.log(e);
             this.targetId = e.targetId
             getFriendInfo(e.targetId).then(res => {
                 this.userInfo = res
@@ -126,9 +127,21 @@
                 }
             });
         },
+        methods: {
+            copyAddress() {
+                uni.setClipboardData({
+                    data: this.userInfo.address,
+                    success: () => {
+                        uni.showToast({
+                            icon: 'none',
+                            title: '复制成功'
+                        })
+                    }
+                })
+            },
             toPrivate() {
                 uni.redirectTo({
-                url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
+                    url: '/pages/im/private/chat?conversationType=1&targetId=' + this.targetId
                 });
             },
             setRemark() {
@@ -147,40 +160,6 @@
                                 // 删除聊天记录
                                 RongIMLib.deleteMessages(1, this.targetId);
                                 RongIMLib.removeConversation(1, this.targetId);
-                                    uni.showToast({
-                                        icon: 'none',
-                                        title: '好友删除成功',
-                                        success() {
-                                            uni.switchTab({
-                                                url: '/pages/im/index'
-                                            });
-                                        }
-                                    });
-                                });
-                            }
-                        })
-                },
-                toPrivate() {
-                    uni.redirectTo({
-                        url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
-                    })
-                },
-                setRemark() {
-                    uni.showToast({
-                        title: '开发中',
-                        icon: 'none'
-                    })
-                },
-                deleteFriend() {
-                    uni.showModal({
-                        title: '删除确认',
-                        content: '确认删除后不可恢复',
-                        success: (e) => {
-                            if (e.confirm) {
-                                deleteFriend(this.targetId).then(res => {
-                                    // 删除聊天记录
-                                    RongIMLib.deleteMessages(1, this.targetId)
-                                    RongIMLib.removeConversation(1, this.targetId)
                                 uni.showToast({
                                     icon: 'none',
                                     title: '好友删除成功',
@@ -196,7 +175,8 @@
                 })
             },
             setStatus() {
-                    RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
+                RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status,
+                    ({
                         status
                     }) => {
                         this.status = !Boolean(status)
@@ -229,20 +209,17 @@
                     })
             },
             singleCall(e) {
-                    CallLib.startSingleCall(this.targetId, e.type, '');
+                uni.showToast({
-                    uni.redirectTo({
+                    icon: 'none',
-                        url: '/pages/im/private/call',
+                    title: '功能正在开发中'
-                        success: (err) => {
-                            console.log('跳转视频通话成功');
-                        },
-                        fail: (err) => {
-                            console.log('跳转视频页失败', err);
-                        }
                 })
-                },
+                // CallLib.startSingleCall(this.targetId, e.type, '');
+                // uni.redirectTo({
+                //     url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type
+                // })
+            }
         }
     }
-    };
 </script>
 
 <style lang="scss" scoped>
@@ -269,7 +246,7 @@
             .nickname {
                 line-height: 30px;
                 font-size: $title-size + 6;
-                color: $text-color;
+                color: #454545;
                 text-align: left;
             }
 
@@ -296,26 +273,36 @@
         .footer-item {
             margin: 0 $margin/2;
             text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
 
             .icon {
                 background: $main-color;
                 width: 88rpx;
                 height: 88rpx;
-                line-height: 88rpx;
+                // line-height: 88rpx;
-                display: inline-block;
+                // display: inline-block;
                 border-radius: 50%;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                box-sizing: border-box;
 
                 .icon-u {
-                    margin-top: calc((88rpx/2) - 13px);
+                    // margin-top: calc((88rpx/2) - 13px);
-                    margin-left: calc((88rpx/2) - 13px);
+                    // margin-left: calc((88rpx/2) - 13px);
                 }
             }
 
             .text {
                 color: $main-color;
-                font-size: $title-size-m;
+                font-size: $title-size-m - 2;
                 text-align: center;
-                padding-top: 10rpx;
+                padding-top: 16rpx;
             }
         }
     }
@@ -326,12 +313,14 @@
         background: white;
         margin: $margin;
         border-radius: $radius;
-
+        .u-border-bottom{
+            border-bottom: solid 1rpx #f9f9f9 !important;
+        }
         .item {
             line-height: 100rpx;
             display: flex;
             align-items: center;
-            padding: 0 $padding;
+            padding:10rpx $padding;
             justify-content: space-between;
             font-size: $title-size-lg;
 

pages/im/friends/mine.vue

@@ -2,12 +2,7 @@
     <view class="content">
         <!-- 用户信息 -->
         <view class="info-flex">
-            <u-avatar
+            <u-avatar :src="infoObj.portraitUrl" shape="square" size="50" bg-color="#fff"></u-avatar>
-                :src="infoObj.portraitUrl"
-                shape="square"
-                size="50"
-                bg-color="#fff"
-            ></u-avatar>
             <view class="info-text">
                 <view class="nickname">{{infoObj.name}}</view>
                 <view class="address">地址：{{infoObj.address}}</view>
@@ -28,7 +23,7 @@
         </view>
         <!-- 二维码 -->
         <view class="info-code">
-            <uqrcode class="info-code-src" :size="198" ref="uQRCode" text="qrContent" />
+            <uqrcode class="info-code-src" :size="198" ref="uQRCode" :text="qrContent" />
             <view class="info-code-text">
                 <view>ZH-HEALTH扫一扫上面的二维码</view>
                 <view>添加我的好友</view>
@@ -38,7 +33,9 @@
 </template>
 
 <script>
-	import { getUserInfo } from '@/apis/interfaces/im'
+    import {
+        getUserInfo
+    } from '@/apis/interfaces/im'
     export default {
         data() {
             return {
@@ -54,15 +51,11 @@
                 qrContent: 'ADDFRIEND|'
             }
         },
-        onLoad(e){
+        onLoad(e) {},
-            console.log(e)
-            
-        },
         mounted() {
             getUserInfo(this.$Route.query.targetId).then(res => {
                 this.infoObj = res
                 this.qrContent += res.userId
-                console.log(this.infoObj)
             })
         },
         methods: {
@@ -77,15 +70,18 @@
         min-height: 100vh;
         padding-top: $padding;
         box-sizing: border-box;
+
         .info-code {
             background: white;
             margin: 0 $margin;
             border-radius: $radius;
             padding: $padding*3 $padding $padding;
             text-align: center;
+
             &-src {
                 display: inline-block;
             }
+
             &-text {
                 text-align: center;
                 color: $text-gray;
@@ -94,6 +90,7 @@
                 padding: $padding 0;
             }
         }
+
         // 用户信息
         .info-flex {
             padding: $padding;
@@ -101,16 +98,19 @@
             display: flex;
             background: white;
             border-radius: $radius;
+
             .info-text {
                 width: calc(100% - 50px);
                 padding-left: $padding;
                 box-sizing: border-box;
+
                 .nickname {
                     line-height: 30px;
                     font-size: $title-size + 6;
                     color: $text-color;
                     text-align: left;
                 }
+
                 .address {
                     line-height: 20px;
                     font-size: $title-size-sm;
@@ -130,8 +130,10 @@
             padding: $padding*2 $padding;
             display: flex;
             justify-content: space-around;
+
             .footer-item {
                 margin: 0 $margin/2;
+
                 .icon {
                     background: $main-color;
                     width: 88rpx;
@@ -139,11 +141,13 @@
                     line-height: 88rpx;
                     display: inline-block;
                     border-radius: 50%;
+
                     .icon-u {
                         margin-top: calc((88rpx/2) - 13px);
                         margin-left: calc((88rpx/2) - 13px);
                     }
                 }
+
                 .text {
                     color: $main-color;
                     font-size: $title-size-m;
@@ -158,6 +162,7 @@
             background: white;
             margin: $margin;
             border-radius: $radius;
+
             .item {
                 line-height: 100rpx;
                 border-bottom: solid 1rpx $border-color;
@@ -165,12 +170,15 @@
                 padding: 0 $padding;
                 justify-content: space-between;
                 font-size: $title-size-lg;
+
                 &:last-child {
                     border-bottom: none;
                 }
+
                 label {
                     width: 200rpx;
                 }
+
                 .text {
                     width: calc(100% - 200rpx);
                     color: $text-gray-m;

pages/im/index.vue

@@ -29,17 +29,14 @@
                 </view>
             </block>
             <block v-else>
-                <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
+                <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true" />
                 <view v-for="(item, index) in conversations" :key="index"
-                    :class="['message', 'u-border-bottom', { 'is-top': item.isTop }]" @tap="toDetail(item)"
+                    :class="['message', { 'is-top': item.isTop }]" @tap="toDetail(item)"
                     @longpress="onLongPress" :data-item="item">
                     <view class="avatar">
                         <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
                             :value="item.unreadMessageCount" />
-                        <u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" shape="square"
+                        <u-avatar :src="friend(item.targetId).portraitUrl || require('@/static/user/cover.png')" shape="square" size="46" />
-                            :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
-                            font-size="16" randomBgColor></u-avatar>
-                        <u-avatar v-else :src="friend(item.targetId).portraitUrl" shape="square" size="44"></u-avatar>
                     </view>
                     <view class="content">
                         <view class="header">
@@ -74,7 +71,9 @@
     import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
     import im from '@/utils/im/index.js'
     import userAuth from '@/public/userAuth'
-    import { getImToken } from '@/apis/interfaces/im.js'
+    import {
+        getImToken
+    } from '@/apis/interfaces/im.js'
     export default {
         data() {
             return {
@@ -99,14 +98,21 @@
                 }
             }
         },
-        onShow() {
+        onLoad() {
-            if (this.$store.state.token !== '') {
+            if (this.isShown) {
-                getImToken().then(res => {
+                uni.$on('onReceiveMessage', (msg) => {
-                    im.connect(res.token, res.userInfo, () => {
+                    console.log(msg);
                     this.getConversationList()
                 })
+                uni.$on('onConnectionStatusChange', (status) => {
+                    this.connection = status
                 })
             }
+        },
+        onShow() {
+            if (this.$store.state.token !== '') {
+                this.getConversationList()
+            }
             this.isShown = true
         },
         onHide() {
@@ -127,16 +133,6 @@
                 }
             }
         },
-        watch: {
-            '$store.getters.newMessage': function(n, o) {
-                if (this.isShown) {
-                    this.getConversationList()
-                }
-            },
-            '$store.getters.connection': function(n, o) {
-                this.connection = n
-            }
-        },
         methods: {
             hidePop() {
                 this.showPop = false
@@ -203,9 +199,10 @@
             toDetail(item) {
                 this.hidePop()
                 uni.navigateTo({
-                    url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
+                    url: '/pages/im/private/chat?targetId=' + item.targetId + '&conversationType=' + item.conversationType
-                        .conversationType
                 })
+                
+                // url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item.conversationType
             },
             // 点击按钮
             onNav(name, params) {
@@ -226,10 +223,8 @@
             scanQrCode() {
                 uni.scanCode({
                     success: (res) => {
-                        // "result": "ADDFRIEND|10010",
                         if (res.scanType == 'QR_CODE') {
                             res.result.substr(0, 10) == 'ADDFRIEND|'
-                            // 跳转到添加好友页面
                             uni.navigateTo({
                                 url: '/pages/im/friends/info?targetId=' + res.result.substr(10)
                             })
@@ -293,7 +288,7 @@
     .contents {
         background-color: $window-color;
         min-height: 100vh;
-        padding-top: 90rpx;
+        padding-top: 90rpx + 20rpx;
         box-sizing: border-box;
 
         .null-list {
@@ -314,14 +309,15 @@
 
         .message {
             background: white;
-            padding: 20rpx 30rpx;
+            padding: 30rpx 0 0 30rpx;
             position: relative;
             display: flex;
 
-            &.u-border-bottom {}
 
             &.is-top {
                 background: $window-color;
+                border-bottom: #e8e8e8;
+                // background-color: rgba($color: $main-color, $alpha: 0.02);
             }
 
             .avatar {
@@ -333,28 +329,39 @@
             }
 
             .content {
-                padding-left: 30rpx;
+                margin-left: 30rpx;
-                width: calc(100% - 44px);
+                width: calc(100% - 46px);
                 box-sizing: border-box;
+                border-bottom: solid 1rpx #f3f3f3;
+                position: relative;
 
                 .header {
                     display: flex;
                     justify-content: space-between;
 
                     .name {
-                        font-size: $title-size + 4;
+                        font-size: $title-size + 2;
+                        color: #454545;
+                        color: #454545;
                     }
 
                     .time {
                         font-size: $title-size-sm;
-                        color: $text-gray;
+                        color: $text-gray-m;
+                        position: absolute;
+                        right: 30rpx;
                     }
                 }
 
                 .preview {
                     word-break: break-all;
-                    color: $text-gray;
+                    color: $text-gray-m;
-                    font-size: $title-size-sm;
+                    padding-top: $padding - 20;
+                    padding-bottom: $padding;
+                    font-size: $title-size-m;
+                    height: 40rpx;
+                    line-height: 40rpx;
+                    width: 500rpx;
                     @extend .nowrap;
                 }
             }
@@ -410,4 +417,7 @@
             }
         }
     }
+    .u-border-bottom{
+        border-bottom: solid 1rpx #f9f9f9 !important;
+    }
 </style>

pages/im/private/call.nvue

@@ -8,20 +8,43 @@
             </RongCloud-Call-RCUniCallView>
         </view>
 
-        <view class="status" v-if="!connected">
+        <view class="status" v-if="!connected || mediaType == 0">
             <view class="call-user">
-                <u-avatar :src="userInfo.portraitUrl" size="150" bg-color="#fff"></u-avatar>
+                <u-avatar v-if="userInfo.portraitUrl" :src="userInfo.portraitUrl" shape="square" size="96" bgColor="#fff" />
-                <view class="nickname">{{userInfo.name}}</view>
+                <u-avatar size="80" v-if="!userInfo.portraitUrl" shape="square" :text="userInfo.name ? userInfo.name.substring(0,1) : '未'" font-size="44" randomBgColor />
-                <view v-if="remoteRinging" class="mediaType">等待对方接听</view>
+                <view><text class="nickname">{{userInfo.name}}</text></view>
-                <view v-if="connected" class="mediaType">已接通 {{ connected }}</view>
+                <view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view>
-                <view v-else class="mediaType">{{ mediaType == 0 ? '邀请您语音通话' : '邀请您视频通话' }}</view>
+                <view v-if="connected"><text class="mediaType">已接通</text></view>
+                <view v-else><text class="mediaType">{{ mediaType == 0 ? '邀请您语音通话' : '邀请您视频通话' }}</text></view>
             </view>
         </view>
         <view class="buttons">
-            <view class="btn" v-if="connected" @click="changeMicrophone"><text class="white">麦克风</text></view>
+            <view class="btn" v-if="connected" @click="changeMicrophone">
-            <view class="btn hangup" @click="hangup"><text class="white">挂断</text></view>
+                <view class="icon">
-            <view class="btn" v-if="!connected" @click="accept"><text class="white">接听</text></view>
+                    <u-icon name="mic" color="#ffffff" size="30" />
-            <view class="btn" v-if="connected" @click="changeSpeaker"><text class="white">扬声器</text></view>
+                    <u-icon name="mic-off" color="#ffffff" size="30" />
+                </view>
+                <text class="text">麦克风</text>
+            </view>
+            <view class="btn" @click="hangup">
+                <view class="icon hangup">
+                    <u-icon name="close" color="#ffffff" size="25" />
+                </view>
+                <text class="text">挂断</text>
+            </view>
+            <view class="btn" v-if="!connected" @click="accept">
+                <view class="icon">
+                    <u-icon name="checkmark" color="#ffffff" size="30" />
+                </view>
+                <text class="text">接听</text>
+            </view>
+            <view class="btn" v-if="connected" @click="changeSpeaker">
+                <view class="icon">
+                    <u-icon name="volume-fill" color="#ffffff" size="27" />
+                    <u-icon name="volume-off-fill" color="#ffffff" size="27" />
+                </view>
+                <text class="text">扬声器</text>
+            </view>
         </view>
     </view>
 </template>
@@ -37,50 +60,32 @@
             return {
                 targetId: '',
                 mediaType: 0, // 0 语音  1 视频
-                users: [],
                 userInfo: {},
                 isOut: false,
                 connected: false,
                 micStatus: false,
                 speStatus: false,
                 remoteRinging: false,
-                innerAudioContext: null
+                ring: null
             }
         },
         onLoad(e) {
-            this.targetId = e.targetId || 10051
+            this.targetId = e.targetId
             this.mediaType = e.mediaType
             getFriendInfo(this.targetId).then(res => {
                 this.userInfo = res
             })
             this.startRing()
             // 监听通话链接状态
-
+            uni.$once('onCallConnected', this.onCallConnected)
-            setTimeout(() => {
+            uni.$once('onCallDisconnected', this.hangup)
-                CallLib.setVideoView(10047, this.$refs.bigVideoView.ref, 0, false)
+            uni.$once('onRemoteUserRinging', () => {
-            }, 200)
-
-            uni.$on('onCallConnected', () => {
-                console.log('OnCallConnected');
-                this.connected = true
-                this.stopRing()
-            })
-            uni.$on('onCallDisconnected', () => {
-                this.hangup()
-            })
-            uni.$on('onRemoteUserRinging', () => {
                 this.remoteRinging = true
             })
-            uni.$on('onRemoteUserJoined', () => {
+            uni.$once('onRemoteUserJoined', () => {
                 this.remoteRinging = false
             })
         },
-        beforeDestroy() {
-            uni.$off('onCallConnected')
-            uni.$off('onCallDisconnected')
-            uni.$off('onRemoteUserRinging')
-            uni.$off('onRemoteUserJoined')
-        },
         computed: {
             windowWidth() {
                 return uni.getSystemInfoSync().windowWidth
@@ -100,10 +105,15 @@
             },
             accept() {
                 CallLib.accept()
+            },
+            onCallConnected() {
+                // 关掉铃声
+                this.stopRing()
+                // 设置链接状态
+                this.connected = true
                 // 视频通话，才开摄像头
                 if (this.mediaType == 1) {
                     const session = CallLib.getCurrentCallSession()
-                    this.users = session.users
                     setTimeout(() => {
                         CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0,
                             false)
@@ -118,11 +128,10 @@
 
                 setTimeout(() => {
                     this.downRing()
-                    uni.navigateBack()
+                    uni.switchTab({
-                    // uni.redirectTo({
+                        url: '/pages/im/index'
-                    //     url: '/pages/im/private/index?targetId=' + this.targetId + '&conversationType=1'
+                    })
-                    // })
+                }, 200);
-                }, 500);
             },
             toHome() {
                 uni.switchTab({
@@ -130,24 +139,24 @@
                 })
             },
             startRing() {
-                const innerAudioContext = uni.createInnerAudioContext()
+                const ring = uni.createInnerAudioContext()
-                this.innerAudioContext = innerAudioContext
+                this.ring = ring
-                innerAudioContext.autoplay = true
+                ring.autoplay = true
-                innerAudioContext.loop = true
+                ring.loop = true
-                innerAudioContext.src = '/static/im/sounds/call-ring.mp3'
+                ring.src = '/static/im/sounds/call-ring.mp3'
-                innerAudioContext.onEnded(() => {
+                ring.onEnded(() => {
-                    innerAudioContext.destroy()
+                    ring.destroy()
                 })
             },
             stopRing() {
-                this.innerAudioContext.stop()
+                this.ring.stop()
             },
             downRing() {
-                const innerAudioContext = uni.createInnerAudioContext()
+                const ding = uni.createInnerAudioContext()
-                innerAudioContext.autoplay = true
+                ding.autoplay = true
-                innerAudioContext.src = '/static/im/sounds/call-down.mp3'
+                ding.src = '/static/im/sounds/call-down.mp3'
-                innerAudioContext.onEnded(() => {
+                ding.onEnded(() => {
-                    innerAudioContext.destroy()
+                    ding.destroy()
                 })
             }
         }
@@ -156,10 +165,10 @@
 
 <style scoped>
     .call-page {
+        display: flex;
         flex: 1;
         flex-direction: column;
         position: relative;
-        background: #666;
     }
 
     .bigVideoView {
@@ -167,6 +176,7 @@
     }
 
     .smallVideoView {
+        background: blue;
         position: absolute;
         right: 100rpx;
         top: 100rpx;
@@ -184,6 +194,10 @@
     }
 
     .btn {
+        align-items: center;
+    }
+
+    .icon {
         background: #34CE98;
         width: 132rpx;
         height: 132rpx;
@@ -193,27 +207,41 @@
         justify-content: center;
     }
 
-    .btn .white {
+    .btn .text {
+        margin-top: 16rpx;
         color: #FFFFFF;
         font-size: 32rpx;
     }
 
-    .btn.hangup {
+    .icon.hangup {
         background: #dd524d;
     }
 
+    .status {
+        flex: 1;
+        background: #666;
+        width: 750rpx;
+        position: fixed;
+        bottom: 0;
+        top: 0;
+    }
+
     .call-user {
         flex: 1;
-        position: fixed;
         width: 750rpx;
-        top: 200rpx;
-        left: 0;
         display: flex;
         align-items: center;
+        top: 300rpx;
+    }
+
+    .mediaType {
+        font-size: 32rpx;
+        color: #aaa;
     }
 
     .nickname {
         margin: 30rpx;
-        font-size: 40rpx;
+        font-size: 44rpx;
+        color: #ffffff;
     }
 </style>

pages/im/private/chat.nvue

@@ -2,12 +2,20 @@
     <view class="chat">
         <!-- chat -->
         <list class="chat-scroll">
-            <cell class="cell" :class="{'left': index%2 == 0, 'right': index%2 == 1}" v-for="(item, index) in msgArr" :key="index">
+            <cell class="cell" v-for="(item, index) in messages" :key="index">
-                <image class="active" src="" mode="aspectFill"></image>
+                <view class="cell-time">
+                    <text class="cell-time-text">{{ item.sentTime|timeCustomCN }}</text>
+                </view>
+                <view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
+                    <image class="active" :src="userInfo.portraitUrl" mode="aspectFill" @click="showFriend(targetId, item.messageDirection)"></image>
                     <view class="msg">
-                    <imAUDIO :guest="index%2 == 1"></imAUDIO>
+                        <imAUDIO v-if="item.objectName === 'RC:VcMsg'" :guest="item.messageDirection == 1" :msg="item.content.content"></imAUDIO>
-                    <imIMG :guest="index%2 == 1"></imIMG>
+                        <imIMG v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" :msg="item.content.content"></imIMG>
-                    <imTXT :guest="index%2 == 1"></imTXT>
+                        <imTXT v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" :msg="item.content.content"></imTXT>
+                        <view class="state" v-if="item.messageDirection == 1">
+                            <text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
+                        </view>
+                    </view>
                 </view>
             </cell>
             <cell class="cell-footer" ref="chatBottom"></cell>
@@ -26,46 +34,255 @@
             <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>
+            <text class="chat-push" size="mini" @click="send">发送</text>
+        </view>
+        <!-- 录音中提示 -->
+        <view class="audio-transcribe" v-if="showAudioTranscribe">
+            <image class="audio-transcribe-src" src="@/static/icon/record-icon.png" mode="widthFix"></image>
+            <text class="audio-transcribe-text">录音中 {{transcribeTime}} s</text>
         </view>
     </view>
 </template>
 
 <script>
-    const ChatList = uni.requireNativePlugin('dom')
+    import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
+    import im from '@/utils/im/index.js'
+    import permision from "@/js_sdk/wa-permission/permission.js"
     import imAUDIO from '@/components/im/imAUDIO'
     import imIMG from '@/components/im/imIMG'
     import imTXT from '@/components/im/imTXT'
+    
+    var transcribe
+    var recorderManager = uni.getRecorderManager()
+    
+    const ChatList = uni.requireNativePlugin('dom')
     export default {
         data() {
             return {
-                toMsg   : '',
+                targetId: '',
-                msgArr  : [
+                scrollIntoID: 'chatID_0',
-                    "NVUE界面信息界面信息界面信息界面信息界面信息界面信息界面信息界面信息界面信息"
+                inputTxt: '',
-                ],
+                messages: [],
-                importTabs: 1
+                conversationType: 1,
+                totalCount: 0,
+                userInfo: {
+                    name: '',
+                    userId: '',
+                    portraitUrl: ''
+                },
+                importTabs: 1,
+                showAudioTranscribe: false,
+                transcribeTime: 60,
+                audioSrc: '',
+                audioContextPaused: true
             }
         },
         components:{ imAUDIO, imIMG, imTXT },
+        onLoad(e) {
+            this.targetId = e.targetId
+            this.conversationType = e.conversationType // 会话类型
+            // 消息总数量
+            RongIMLib.getMessageCount(this.conversationType, this.targetId, ({
+                code,
+                count
+            }) => {
+                if (code == 0) {
+                    this.totalCount = count
+                }
+            })
+            this.userInfo = this.$store.getters.userInfo(this.targetId)
+            uni.setNavigationBarTitle({
+                title: this.$store.getters.userInfo(this.targetId).name
+            })
+        
+            RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
+            im.setNotifyBadge()
+            RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
+        
+            this.getMessageList()
+        
+            // 监听消息回执
+            RongIMLib.addReadReceiptReceivedListener(({
+                data
+            }) => {
+                if (data.targetId == this.targetId) {
+                    this.getMessageList()
+                }
+            })
+        
+            // 监听录音结束
+            recorderManager.onStop(res => {
+                if (res.tempFilePath) this.audioSrc = res.tempFilePath
+                console.log('------------------获取到了录音的临时路径---------------')
+                console.log(res.tempFilePath)
+            })
+            // 简童收到新消息，判断是否是当前会话，更新会话内容
+            uni.$on('onReceiveMessage', (msg) => {
+                if (msg.targetId == this.targetId) {
+                    RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
+                    RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
+                    
+                    console.log(msg)
+                    
+                    this.getMessageList()
+                    im.setNotifyBadge()
+                }
+            })
+        },
+        beforeDestroy() {
+            uni.$off('onReceiveMessage')
+        },
+        onUnload() {
+            RongIMLib.clearReadReceiptReceivedListener()
+        },
+        computed: {
+            disabled() {
+                return this.inputTxt.length == 0
+            }
+        },
+        onNavigationBarButtonTap(e) {
+            if (e.index == 0) {
+                uni.navigateTo({
+                    url: '/pages/im/private/setting?targetId=' + this.targetId +
+                        '&conversationType=' + this.conversationType,
+                    events: {
+                        messageClear: () => {
+                            this.getMessageList()
+                            console.log('聊天消息被清空');
+                        }
+                    }
+                })
+            }
+        },
         methods: {
+            // 检查安卓录制权限
+            async getAndroidPermission() {
+                return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
+            },
+            // 切换聊天信息
+            msgType() {
+                this.importTabs = this.importTabs === 1 ? 0 : 1
+            },
+            // 录制语音消息
+            startAudio(e) {
+                this.getAndroidPermission().then(code => {
+                    switch (code) {
+                        case 1:
+                            this.showAudioTranscribe = true
+                            recorderManager.start()
+                            transcribe = setInterval(() => {
+                                this.transcribeTime -= 1
+                                if (this.transcribeTime === 0) {
+                                    this.chendAudio()
+                                }
+                            }, 1000)
+                            break;
+                        case 0:
+                            uni.showToast({
+                                title: '暂无麦克风权限，请前往应用设置开启麦克风',
+                                icon: 'none'
+                            })
+                            break;
+                        case -1:
+                            uni.showToast({
+                                title: '应用权限错误',
+                                icon: 'none'
+                            })
+                            break;
+                    }
+                })
+            },
+            // 结束录音
+            chendAudio(e) {
+                if (!this.showAudioTranscribe) return
+                recorderManager.stop()
+                clearInterval(transcribe)
+                this.transcribeTime = 60
+                this.showAudioTranscribe = false
+            },
+            getMessageList() {
+                // 获取消息列表
+                const objectNames = [
+                    'RC:TxtMsg',
+                    'RC:VcMsg',
+                    'RC:HQVCMsg',
+                    'RC:ImgMsg',
+                    'RC:GIFMsg',
+                    'RC:ImgTextMsg',
+                    'RC:FileMsg',
+                    'RC:LBSMsg',
+                    'RC:SightMsg',
+                    'RC:ReferenceMsg',
+                    'RC:CombineMsg'
+                ]
+                const timeStamp = new Date().getTime()
+                const count = 20 // 获取的消息数量
+                const isForward = true // 是否向前获取
+                RongIMLib.getHistoryMessagesByTimestamp(this.conversationType, this.targetId, objectNames, timeStamp,
+                    count,
+                    isForward,
+                    ({
+                        code,
+                        messages
+                    }) => {
+                        if (code === 0) {
+                            console.log(this.messages)
+                            this.messages = messages.reverse()
+                            this.scrollBottom()
+                        }
+                    }
+                )
+            },
             send() {
-                this.msgArr.push("新消息NVUE")
+                if(this.inputTxt === '') return
-                // 此处等待数据渲染完成后滚动至底部
+                im.sendMsg(this.conversationType, this.targetId, this.inputTxt, () => {
+                    this.getMessageList()
+                    this.inputTxt = ''
+                })
+            },
+            showFriend(targetId, type) {
+                uni.navigateTo({
+                    url: type === 1 ? '/pages/im/friends/mine?targetId=' +targetId  : '/pages/im/friends/info?targetId=' +targetId
+                })
+            },
+            scrollBottom() {
                 setTimeout(() => {
                     let el  = this.$refs.chatBottom
                     ChatList.scrollToElement(el, {
                         animated: true
                     })
-                },50)
+                },100)
-            },
-            msgType(){
-                this.importTabs = this.importTabs === 1 ? 0 : 1
             }
         }
+        
     }
 </script>
 
 <style scoped>
+    .audio-transcribe {
+        background: rgba(0,0,0,.6);
+        position: fixed;
+        height: 200rpx;
+        width: 300rpx;
+        border-radius: 10rpx;
+        z-index: 99;
+        top: 550rpx;
+        left: 225rpx;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .audio-transcribe-src{
+        width: 88rpx;
+        height: 88rpx;
+    }
+    
+    .audio-transcribe-text {
+        font-size: 28rpx;
+        color: #FFFFFF;
+    }
+    
     /* 窗口 */
     .chat{
         background: #F3F6FB;
@@ -75,9 +292,23 @@
         flex: 1;
     }
     .cell{
+        padding:10rpx 30rpx;
+    }
+    .cell-time{
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 20rpx;
+    }
+    .cell-time-text{
+        background: #fff;
+        font-size: 24rpx;
+        color: #666;
+        line-height: 40rpx;
+        padding: 0 20rpx;
+        border-radius: 10rpx;
+    }
+    .cell-item{
         width: 690rpx;
-        margin: 0 30rpx;
-        padding:10rpx 0;
         justify-content: flex-start;
     }
     .cell-footer{
@@ -92,12 +323,23 @@
     .msg{
         margin: 0 20rpx;
     }
-    .cell.left{
+    .state{
+        padding-top: 10rpx;
+    }
+    .state-text{
+        font-size: 24rpx;
+        color: #666;
+    }
+    .cell-item.left{
         flex-direction: row;
     }
-    .cell.right{
+    .cell-item.right{
         flex-direction: row-reverse;
     }
+    .cell-item.right .state{
+        flex-direction: row;
+        justify-content: flex-end;
+    }
     /* footer */
     .chat-footer{
         background: white;

pages/im/private/index.vue

@@ -123,6 +123,18 @@
                 console.log('------------------获取到了录音的临时路径---------------')
                 console.log(res.tempFilePath)
             })
+            // 简童收到新消息，判断是否是当前会话，更新会话内容
+            uni.$on('onReceiveMessage', (msg) => {
+                if (msg.targetId == this.targetId) {
+                    RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
+                    RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
+                    this.getMessageList()
+                    im.setNotifyBadge()
+                }
+            })
+        },
+        beforeDestroy() {
+            uni.$off('onReceiveMessage')
         },
         onUnload() {
             RongIMLib.clearReadReceiptReceivedListener()
@@ -130,11 +142,6 @@
         computed: {
             disabled() {
                 return this.inputTxt.length == 0
-            },
-            friend() {
-                return function(targetId) {
-                    return this.$store.getters.userInfo(targetId)
-                }
             }
         },
         onNavigationBarButtonTap(e) {
@@ -151,16 +158,6 @@
                 })
             }
         },
-        watch: {
-            '$store.getters.newMessage': function(msg) {
-                if (msg.targetId == this.targetId) {
-                    RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
-                    RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
-                    this.getMessageList()
-                    im.setNotifyBadge()
-                }
-            }
-        },
         methods: {
             // 播放语音消息
             onPlayMsg() {
@@ -247,6 +244,9 @@
                         messages
                     }) => {
                         if (code === 0) {
+                            
+                            console.log(this.messages)
+                            
                             this.messages = messages.reverse()
                             this.scrollBottom()
                         }

pages/user/index.vue

@@ -4,7 +4,8 @@
         <view class="info-box">
             <image src="@/static/user/user_back.png" mode="aspectFill" />
             <view class="user-flex">
-                <image class="cover" @click="$Router.push({ name: 'Setting' })" :src="userInfo.avatar || require('@/static/user/cover.png')" mode="aspectFill" />
+                <image class="cover" @click="$Router.push({ name: 'Setting' })"
+                    :src="userInfo.avatar || require('@/static/user/cover.png')" mode="aspectFill" />
                 <view class="user-content">
                     <block v-if="$store.state.token != ''">
                         <view class="name">{{ userInfo.nickname }}</view>
@@ -21,10 +22,14 @@
                             </view>
                         </view>
                         <view class="chainAddress" v-if="userInfo.chain_address">
-                            <u-icon labelPos="left" @click="copy(userInfo.chain_address)" labelSize="14" labelColor="#fff" :label="userInfo.chain_address.substr(0, 20)+'...'" space="10" :name="require('@/static/imgs/copy.png')" size="16" />
+                            <u-icon labelPos="left" @click="copy(userInfo.chain_address)" labelSize="14"
+                                labelColor="#fff" :label="userInfo.chain_address.substr(0, 20)+'...'" space="10"
+                                :name="require('@/static/imgs/copy.png')" size="16" />
                         </view>
                     </block>
-                    <block v-else><view class="name" @click="isLogin()">未登录</view></block>
+                    <block v-else>
+                        <view class="name" @click="isLogin()">未登录</view>
+                    </block>
                 </view>
             </view>
         </view>
@@ -36,7 +41,10 @@
                 <image src="@/static/user/icon_06.png" mode="widthFix" />
                 ZH会员
             </view>
-            <view class="subtitle"><u-notice-bar :text="cardText" icon="" bgColor="" duration="3000" color="#fcc692" direction="column"></u-notice-bar></view>
+            <view class="subtitle">
+                <u-notice-bar :text="cardText" icon="" bgColor="" duration="3000" color="#fcc692" direction="column">
+                </u-notice-bar>
+            </view>
             <view class="btn" @click="openVip" v-if="userInfo.identity.length === 0">开通</view>
         </view>
 
@@ -121,8 +129,12 @@
 </template>
 
 <script>
-import { info } from '@/apis/interfaces/user';
+    import {
+        info
+    } from '@/apis/interfaces/user';
     import userAuth from '@/public/userAuth';
+    import im from '@/utils/im/index.js'
+
     export default {
         data() {
             return {
@@ -172,7 +184,9 @@ export default {
                                         cancelText: '去完成',
                                         success: res => {
                                             console.log(res);
-                                        this.$Router.pushTab({ name: 'Store' });
+                                            this.$Router.pushTab({
+                                                name: 'Store'
+                                            });
                                         }
                                     });
                                     break;
@@ -190,15 +204,21 @@ export default {
             // 开通钱包
             onWallet() {
                 if (this.isLogin()) {
-                if (this.userInfo.is_wallet) this.$Router.push({ name: 'WalletProperty' });
+                    if (this.userInfo.is_wallet) this.$Router.push({
-                else this.$Router.push({ name: 'WalletAdd' });
+                        name: 'WalletProperty'
+                    });
+                    else this.$Router.push({
+                        name: 'WalletAdd'
+                    });
                 }
             },
             // 个人档案
             onFiles() {
                 if (this.isLogin()) {
                     if (!this.userInfo.has_record) {
-                    this.$Router.push({ name: 'EssentialInfo' });
+                        this.$Router.push({
+                            name: 'EssentialInfo'
+                        });
                         return;
                     }
                     // this.$Router.push({ name: 'UserFiles',params:{id:this.userInfo.record_id} });
@@ -210,7 +230,10 @@ export default {
             // 按钮导航
             onBtn(name, params) {
                 if (this.isLogin()) {
-                this.$Router.push({ name, params });
+                    this.$Router.push({
+                        name,
+                        params
+                    });
                 }
             },
             // 检查登录
@@ -230,6 +253,8 @@ export default {
                     identity: []
                 };
                 this.$store.commit('setToken', '');
+                // 断开IM链接
+                im.disconnect()
             },
             copy(data) {
                 uni.setClipboardData({
@@ -251,6 +276,7 @@ export default {
         background: $window-color;
         min-height: 100vh;
     }
+
     // 版权信息
     .footer-text {
         text-align: center;
@@ -258,12 +284,14 @@ export default {
         padding: $padding $padding $padding * 2;
         color: $text-gray-m;
     }
+
     // 用户信息
     .info-box {
         position: relative;
         background: linear-gradient(to right, #34ce98, #22aa98);
         color: white;
         @extend .ios-top;
+
         &>image {
             position: absolute;
             top: 0;
@@ -272,10 +300,12 @@ export default {
             height: 100%;
             // z-index: 100;
         }
+
         .user-flex {
             position: relative;
             padding: $padding * 2 $padding ($padding * 2 + 60);
             height: 128rpx;
+
             .cover {
                 position: absolute;
                 width: 128rpx;
@@ -285,6 +315,7 @@ export default {
                 box-sizing: border-box;
                 z-index: 100;
             }
+
             .user-content {
                 padding-left: 158rpx;
                 height: 128rpx;
@@ -292,6 +323,7 @@ export default {
                 flex-direction: column;
                 justify-content: center;
                 position: relative;
+
                 .chainAddress {
                     overflow: hidden;
                     white-space: nowrap;
@@ -305,14 +337,17 @@ export default {
                     position: relative;
                     z-index: 200;
                 }
+
                 .name {
                     line-height: 40rpx;
                     font-weight: bold;
                     font-size: $title-size + 8;
                     @extend .nowrap;
                 }
+
                 .tabs {
                     padding-top: 10rpx;
+
                     &-item {
                         background: rgba($color: #000000, $alpha: 0.3);
                         font-size: $title-size-sm - 4;
@@ -320,6 +355,7 @@ export default {
                         line-height: 36rpx;
                         padding: 0 20rpx;
                         border-radius: 20rpx;
+
                         image {
                             width: 26rpx;
                             height: 26rpx;
@@ -332,6 +368,7 @@ export default {
             }
         }
     }
+
     // 会员卡
     .vip-card {
         position: relative;
@@ -341,10 +378,12 @@ export default {
         box-sizing: border-box;
         color: #fcc692;
         padding: $padding ($padding + 170) $padding $padding;
+
         .title {
             font-weight: bold;
             font-size: $title-size-lg;
             line-height: 40rpx;
+
             image {
                 width: 32rpx;
                 height: 32rpx;
@@ -353,13 +392,16 @@ export default {
                 margin-bottom: 4rpx;
             }
         }
+
         .subtitle {
             font-size: $title-size-sm;
             margin-top: 10rpx;
+
             .u-notice-bar {
                 padding: 0;
             }
         }
+
         .btn {
             position: absolute;
             right: $margin;
@@ -376,6 +418,7 @@ export default {
             border-radius: 30rpx;
         }
     }
+
     // 订单信息
     .order-box {
         margin: $margin;
@@ -383,25 +426,30 @@ export default {
         border-radius: $radius;
         display: flex;
         justify-content: space-between;
+
         &-item {
             width: 25%;
             padding: $padding $padding/2;
             text-align: center;
+
             .icon {
                 width: 48rpx;
                 height: 48rpx;
                 vertical-align: top;
             }
+
             .title {
                 font-size: $title-size-sm;
                 margin-top: $margin/3;
             }
         }
     }
+
     // 健康数据
     .health-flex {
         display: flex;
         margin: $margin ($margin - 10);
+
         &-item {
             margin: 0 10rpx;
             background: white;
@@ -409,8 +457,10 @@ export default {
             border-radius: $radius;
             padding: $padding;
             box-sizing: border-box;
+
             .title {
                 font-size: $title-size-lg;
+
                 .icon {
                     width: 32rpx;
                     height: 32rpx;
@@ -419,31 +469,37 @@ export default {
                     margin-bottom: 2rpx;
                 }
             }
+
             .num {
                 font-weight: bold;
                 font-size: $title-size + 10;
                 padding: $padding/3 0;
+
                 text {
                     font-size: 70%;
                     padding-left: 10rpx;
                 }
             }
+
             .hith {
                 font-size: $title-size-sm;
                 color: $text-gray;
             }
         }
     }
+
     // 模块
     .btns-box {
         background: white;
         margin: $margin;
         border-radius: $radius;
+
         &-item {
             position: relative;
             line-height: 90rpx;
             padding: $padding * 0.6 $padding;
             font-size: $title-size-lg;
+
             &::after {
                 position: absolute;
                 height: 1rpx;
@@ -453,13 +509,16 @@ export default {
                 bottom: 0;
                 background-color: #f9f9f9;
             }
+
             &:last-child::after {
                 display: none;
             }
+
             .forward {
                 position: absolute;
                 right: $margin;
             }
+
             .icon {
                 width: 44rpx;
                 height: 44rpx;

public/userAuth.js

@@ -5,9 +5,17 @@
  * moduleName: 登录
  */
 
-import { router } from '../router'
+import {
-import { keyAuth } from '../apis/interfaces/auth'
+    router
+} from '../router'
+import {
+    keyAuth
+} from '../apis/interfaces/auth'
 import store from '../store'
+import {
+    getImToken
+} from '@/apis/interfaces/im.js'
+import im from '@/utils/im/index.js'
 
 class userAuth {
     constructor() {
@@ -50,7 +58,9 @@ class userAuth {
     // 预登录
     Login() {
         //#ifdef H5
-			router.push({ name: 'Auth' })
+        router.push({
+            name: 'Auth'
+        })
         return
         //#endif
 
@@ -71,7 +81,9 @@ class userAuth {
                     })
                 },
                 fail: err => {
-					router.push({ name: 'Auth' })
+                    router.push({
+                        name: 'Auth'
+                    })
                 },
                 complete() {
                     uni.hideLoading()
@@ -94,6 +106,10 @@ class userAuth {
                     }).then(res => {
                         uni.closeAuthView()
                         store.commit('setToken', res.token_type + ' ' + res.access_token)
+                        // 在这里，登录成功，链接IM服务
+                        getImToken().then(res => {
+                            im.connect(res.token, res.userInfo)
+                        })
                         resolve()
                     }).catch(err => {
                         reject(err)
@@ -103,7 +119,12 @@ class userAuth {
                     uni.closeAuthView()
                     switch (err.code) {
                         case 30002:
-							router.push({ name: 'Auth', params: { keyPhone: 1 }})
+                            router.push({
+                                name: 'Auth',
+                                params: {
+                                    keyPhone: 1
+                                }
+                            })
                             break
                     }
                 }

router/index.js

@@ -10,6 +10,9 @@ import store from '@/store/index'
 const ROUTES = [{
     'path': '/pages/im/private/call',
     'name': 'imPrivateCall'
+},{
+    'path': '/pages/im/private/chat',
+    'name': 'imPrivateChat'
 }]
 // #endif
 

store/modules/im.js

@@ -2,19 +2,10 @@ import im from "@/utils/im/index.js"
 
 export default {
     state: {
-        newMsg: {},
         friends: {},
         sender: {},
-        // IM连接状态，0是正常
-        connection: 0
     },
     getters: {
-        newMessage(state) {
-            return state.newMsg
-        },
-        connection(state) {
-            return state.connection
-        },
         friends(state) {
             return state.friends
         },
@@ -40,28 +31,14 @@ export default {
         }
     },
     mutations: {
-        newMessage(state, msg) {
-            Vue.set(state, 'newMsg', msg)
-        },
         updateFriends(state, userInfo) {
             Vue.set(state.friends, userInfo.userId, userInfo)
         },
         SET_state_sender(state, userInfo) {
             state.sender = userInfo
-        },
-        SET_connection_status(state, status) {
-            state.connection = status
         }
     },
     actions: {
-        updateConnectionStatus({commit}, status) {
-            commit('SET_connection_status', status)
-        },
-        newMessage({
-            commit
-        }, msg) {
-            commit('newMessage', msg)
-        },
         setSenderInfo({
             commit
         }, userInfo) {

utils/im/index.js

@@ -3,13 +3,20 @@ import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
 import store from '@/store/index.js'
 import {
     getFriends,
-    getUserInfo
+    getUserInfo,
+    getImToken
 } from '@/apis/interfaces/im.js'
 
 const initIm = (KEY) => {
     RongIMLib.init(KEY)
     CallLib.init()
     addListeners()
+    // 初始化的时候 自动链接
+    if (store.getters.getToken !== '') {
+        getImToken().then(res => {
+            connect(res.token, res.userInfo, () => {})
+        })
+    }
 }
 
 const setNotifyBadge = () => {
@@ -19,6 +26,9 @@ const setNotifyBadge = () => {
         count
     }) => {
         if (code === 0) {
+            // #ifdef APP-PLUS
+            plus.runtime.setBadgeNumber(count)
+            // #endif
             if (count > 0) {
                 uni.setTabBarBadge({
                     index: 3,
@@ -52,14 +62,25 @@ const connect = (token, userInfo, callback) => {
     const model = uni.model.friendModel
 
     model.find((err, results) => {
+        console.log('好友列表', results);
         results.map(item => {
             store.dispatch('updateFriends', item)
         })
     })
 }
 
+/**
+ * 断开链接
+ */
 const disconnect = () => {
     RongIMLib.disconnect()
+    // 移除提醒数量
+    // #ifdef APP-PLUS
+    plus.runtime.setBadgeNumber(0)
+    // #endif
+    uni.removeTabBarBadge({
+        index: 3
+    })
 }
 
 // 允许通知的消息类型，触发更新消息列表操作
@@ -89,8 +110,8 @@ function inArray(search, array) {
 const addListeners = () => {
     // 添加连接状态监听函数 
     RongIMLib.addConnectionStatusListener((res) => {
-        console.log('连接状态监', res.data.status);
+        console.log('连接状态监听', res.data.status);
-        store.dispatch('updateConnectionStatus', res.data.status)
+        uni.$emit('onConnectionStatusChange', res.data.status)
     })
     // 添加消息监听函数
     RongIMLib.addReceiveMessageListener((res) => {
@@ -101,24 +122,22 @@ const addListeners = () => {
         }
     })
     // 监听通话呼入
-    CallLib.onCallReceived((res) => {
+    CallLib.onCallReceived(({
-        console.log("Engine:OnCallReceived=>" + "监听通话呼入, 目标id=>", res.data.targetId);
+        data
-        console.log('RES', res);
+    }) => {
+        console.log('onCallReceived', data)
+
         uni.navigateTo({
-            url: '/pages/im/private/call?targetId=' + res.data.targetId + '&mediaType=' +
+            url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' +
-                res.data.mediaType,
+                data.mediaType
-            success: (err) => {
-                console.log('跳转视频通话成功');
-            },
-            fail: (err) => {
-                console.log('跳转视频页失败', err);
-            }
         })
     })
 
-    CallLib.onCallConnected((res) => {
+    // 通话建立成功
+    CallLib.onCallConnected(() => {
         uni.$emit('onCallConnected');
     })
+
     CallLib.onCallOutgoing((res) => {
         uni.$emit('onCallOutgoing');
     })
@@ -129,10 +148,12 @@ const addListeners = () => {
         uni.$emit('onRemoteUserJoined');
     })
     CallLib.onCallDisconnected((res) => {
+        console.log('断开链接', res);
         uni.$emit('onCallDisconnected');
     })
     CallLib.onRemoteUserLeft((res) => {
-        uni.$emit('onCallDisconnected');
+        console.log('远端离开', res);
+        uni.$emit('onRemoteUserLeft');
     })
 }
 
@@ -155,7 +176,8 @@ const newMessage = (msg) => {
         syncUserInfo(msg.targetId)
     }
 
-    store.dispatch('newMessage', msg)
+    uni.$emit('onReceiveMessage', msg);
+    // store.dispatch('newMessage', msg)
 }
 
 function syncUserInfo(targetId) {