IM的链接和断开时机调整，APP打开自动判断登录，链接。退出登录后断开链接

新朋友数量提醒
2022-01-28 11:24:10 +08:00
parent 8e047408e2
commit f9e2819cc7
7 changed files with 728 additions and 615 deletions
--- a/apis/interfaces/im.js
+++ b/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
 }
--- a/manifest.json
+++ b/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\"/>",
--- a/pages/im/friends/index.vue
+++ b/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.friends = res.itemArr;
-            });
+                this.indexs = res.indexList
+                this.friends = res.itemArr
+            })
+            getPendingCount().then(res => {
+                console.log(res);
+                this.pendingCount = res
+            })
        },
-        computed: {},
        methods: {
-            // 扫码提示
            showToast() {
                uni.showToast({
                    title: '群聊功能暂未开放，敬请期待',
--- a/pages/im/index.vue
+++ b/pages/im/index.vue
@@ -103,11 +103,7 @@
        },
        onShow() {
            if (this.$store.state.token !== '') {
-                getImToken().then(res => {
-                    im.connect(res.token, res.userInfo, () => {
                this.getConversationList()
-                    })
-                })
            }
            this.isShown = true
        },
--- a/pages/user/index.vue
+++ b/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' });
-                else this.$Router.push({ name: 'WalletAdd' });
+                    if (this.userInfo.is_wallet) this.$Router.push({
+                        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;
--- a/public/userAuth.js
+++ b/public/userAuth.js
@@ -5,9 +5,17 @@
 * moduleName: 登录
 */

-import { router } from '../router'
-import { keyAuth } from '../apis/interfaces/auth'
+import {
+    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
                    }
                }
--- a/utils/im/index.js
+++ b/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,
@@ -31,6 +41,7 @@ const setNotifyBadge = () => {
            }
        }
    })
+
 }

 /**
@@ -60,6 +71,13 @@ const connect = (token, userInfo, callback) => {

 const disconnect = () => {
    RongIMLib.disconnect()
+    // 移除提醒数量
+    // #ifdef APP-PLUS
+    plus.runtime.setBadgeNumber(0)
+    // #endif
+    uni.removeTabBarBadge({
+        index: 3
+    })
 }

 // 允许通知的消息类型，触发更新消息列表操作