好友管理的基础流程，1.0.5

App.vue

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

apis/interfaces/im.js

@@ -1,4 +1,3 @@
-
 /**
  * Web唐明明
  * 匆匆数载恍如梦，岁月迢迢华发增。
@@ -6,7 +5,9 @@
  * moduleName: 聊聊
  */
 
-import { request } from '../index'
+import {
+    request
+} from '../index'
 
 // 获取好友列表
 const getFriends = () => {
@@ -38,9 +39,40 @@ const getPedings = () => {
     })
 }
 
+const resolveFriend = (targetId) => {
+    return request({
+        method: 'POST',
+        url: 'im/friends/accept/' + targetId
+    })
+}
+
+const rejectFriend = (targetId) => {
+    return request({
+        method: 'DELETE',
+        url: 'im/friends/accept/' + targetId
+    })
+}
+
+const searchFriend = (mobile) => {
+    return request({
+        url: 'im/search?mobile=' + mobile
+    })
+}
+
+const pedingFriend = (recipient) => {
+    return request({
+        method: 'POST',
+        url: 'im/friends/' + recipient
+    })
+}
+
 export {
     getImToken,
     getFriends,
     getUserInfo,
-    getPedings
+    getPedings,
+    resolveFriend,
+    rejectFriend,
+    searchFriend,
+    pedingFriend
 }

manifest.json

@@ -2,8 +2,8 @@
     "name" : "ZH-HEALTH",
     "appid" : "__UNI__C29473D",
     "description" : "ZH-HEALTH，您手上的健康管理专家",
-    "versionName" : "1.0.2",
+    "versionName" : "1.0.5",
-    "versionCode" : 102,
+    "versionCode" : 105,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

pages.json

@@ -364,7 +364,7 @@
             "name": "IM",
             "style": {
                 "navigationBarTitleText": "聊聊",
-                "navigationBarBackgroundColor": "#FFFFFF",
+                "navigationBarBackgroundColor": "#F3F6FB",
                 "app-plus": {
                     "titleNView": {
                         "buttons": [
@@ -392,7 +392,7 @@
             "name": "imPrivate",
             "style": {
                 "navigationBarTitleText": "聊天",
-                "navigationBarBackgroundColor": "#FFFFFF",
+                "navigationBarBackgroundColor": "#F3F6FB",
                 "disableScroll": true,
                 "app-plus": {
                     "titleNView": {
@@ -440,8 +440,8 @@
             "path": "pages/im/friends/pending",
             "name": "imFriendsPending",
             "style": {
-                "navigationBarTitleText": "新的朋友",
+                "navigationBarTitleText": "新朋友",
-				"navigationBarBackgroundColor":"#FFFFFF"
+				"navigationBarBackgroundColor":"#F3F6FB"
             }
         },
         {
@@ -449,7 +449,7 @@
             "name": "imFriendsInfo",
             "style": {
                 "navigationBarTitleText": "好友资料",
-				"navigationBarBackgroundColor":"#FFFFFF"
+				"navigationBarBackgroundColor":"#F3F6FB"
             }
         },
         {

pages/im/friends/index.vue

@@ -12,55 +12,35 @@
             </view>
             <u-line></u-line>
         </view>
-		<block v-if="friendsArr.length > 0">
+        <block v-if="friends.length > 0">
-			<u-index-list activeColor="#34CE98">
+            <u-list height="auto">
-				<template v-for="(item, index) in friendsArr">
+                <u-list-item v-for="(item, index) in friends" :key="index">
-					<!-- #ifdef APP-NVUE -->
+                    <u-cell :title="item.name + item.userId" @click="toInfo(item.userId)">
-					<u-index-anchor bgColor="#F3F6FB" color="#666" :text="indexList[index]" :key="index"></u-index-anchor>
+                        <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
-					<!-- #endif -->
+                    </u-cell>
-					<u-index-item :key="index">
+                </u-list-item>
-						<!-- #ifndef APP-NVUE -->
+            </u-list>
-						<u-index-anchor :text="indexList[index]" bgColor="#F3F6FB" color="#666"></u-index-anchor>
-						<!-- #endif -->
-						<view class="list" v-for="(item1, index1) in item" :key="index1">
-							<view class="list__item" @click="toInfo(10047)">
-								<image class="list__item__avatar" :src="item1.url"></image>
-								<!-- <u-avatar  size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar> -->
-								<text class="list__item__user-name">{{item1.name}}</text>
-							</view>
-							<u-line></u-line>
-						</view>
-					</u-index-item>
-				</template>
-				<view slot="footer" class="u-safe-area-inset--bottom">
-					<text class="list__footer">共305位好友</text>
-				</view>
-			</u-index-list>
         </block>
         <block v-else>
-			<u-empty
+            <u-empty class="pages-null" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无好友">
-				class="pages-null"
-				mode="data"
-				icon="http://cdn.uviewui.com/uview/empty/data.png"
-				text="暂未添加好友"
-			>
             </u-empty>
         </block>
     </view>
 </template>
 
 <script>
-	import { getFriends } from '@/apis/interfaces/im'
+    import {
+        getFriends
+    } from '@/apis/interfaces/im'
     export default {
         data() {
             return {
-                friendsArr: []
+                friends: []
             }
         },
         onShow() {
             getFriends().then(res => {
-				this.friendsArr = res
+                this.friends = res
-				console.log(res)
             })
         },
         computed: {
@@ -83,7 +63,7 @@
             // 用户资料
             toInfo(targetId) {
                 uni.navigateTo({
-                    url: '/pages/im/friends/info?targeId=' + targetId
+                    url: '/pages/im/friends/info?targetId=' + targetId
                 })
             }
         },
@@ -99,17 +79,20 @@
             @include flex;
             padding: 6px 12px;
             align-items: center;
+
             &__avatar {
                 height: 35px;
                 width: 35px;
                 border-radius: 50%;
             }
+
             &__user-name {
                 font-size: 16px;
                 margin-left: 10px;
                 color: $u-main-color;
             }
         }
+
         &__footer {
             color: $u-tips-color;
             font-size: 14px;

pages/im/friends/info.vue

@@ -40,9 +40,10 @@
         },
         onLoad(e) {
             this.targetId = e.targetId
+            console.log('获取资料',e.targetId);
             getUserInfo(e.targetId).then(res => {
                 this.userInfo = res
-
+                console.log('获取资料', res);
                 uni.setNavigationBarTitle({
                     title: res.name
                 })
@@ -50,7 +51,7 @@
         },
         methods: {
             toPrivate() {
-                uni.navigateTo({
+                uni.redirectTo({
                     url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
                 })
             }

pages/im/friends/pending.vue

@@ -1,33 +1,111 @@
 <template>
     <view>
         <!-- 搜索 -->
+        <u-sticky>
             <view class="header-search">
-			<u-search placeholder="输入手机号码搜索" v-model="searchValue"></u-search>
+                <u-search placeholder="输入手机号码搜索" bgColor="white" @custom="search" @search="search"
+                    v-model="searchValue"></u-search>
             </view>
+        </u-sticky>
+        <u-list height="auto">
+            <u-list-item v-for="(item, index) in searchResult" :key="index">
+                <u-cell :title="item.name">
+                    <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
+
+                    <div style="width: 50px;" slot="value">
+                        <u-button type="success" size="small" @click="pending(item.userId)">申请</u-button>
+                    </div>
+                </u-cell>
+            </u-list-item>
+        </u-list>
         <!-- 新朋友 -->
-		<view class="lists">
+        <u-divider text="好友申请"></u-divider>
-			<view class="lists-item" v-for="(item, index) in 10" :key="index">
+        <u-list height="auto">
-				<image class="lists-item-cover" src="" mode="aspectFill"></image>
+            <u-swipe-action>
-				<view class="">好友</view>
+                <u-list-item v-for="(item, index) in pedings" :key="index">
-				<view class="">
+                    <u-swipe-action-item autoClose :options="options" @click="action($event, item)">
-					<text>通过</text>
+                        <u-cell :title="item.name">
-					<text>拒绝</text>
+                            <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
-				</view>
+                        </u-cell>
-			</view>
+                    </u-swipe-action-item>
-		</view>
+                </u-list-item>
-		<!-- 空列表 -->
+            </u-swipe-action>
-		<view class="">
+        </u-list>
-			空列表
-		</view>
     </view>
 </template>
 
 <script>
+    import {
+        getPedings,
+        resolveFriend,
+        rejectFriend,
+        searchFriend,
+        pedingFriend
+    } from '@/apis/interfaces/im.js'
+
     export default {
         data() {
             return {
-				searchValue: "",
+                searchResult: [],
-				listsArr: []
+                searchValue: '',
+                pedings: [],
+                options: [{
+                    text: '通过',
+                    style: {
+                        backgroundColor: '#3c9cff'
+                    }
+                }, {
+                    text: '拒绝',
+                    style: {
+                        backgroundColor: '#f56c6c'
+                    }
+                }]
+            }
+        },
+        onLoad() {
+            this.getPeddingList()
+        },
+        methods: {
+            search() {
+                console.log('sousuo');
+                searchFriend(this.searchValue).then(res => {
+                    console.log(res);
+                    this.searchResult = res
+                }).catch(err => {
+                    console.log('err', err);
+                })
+            },
+            action(e, item) {
+                if (e.index == 0) {
+                    resolveFriend(item.userId).then(res => {
+                        this.getPeddingList()
+                    })
+                } else {
+                    rejectFriend(item.userId).then(res => {
+                        this.getPeddingList()
+                    })
+                }
+            },
+            getPeddingList() {
+                getPedings().then(res => {
+                    this.pedings = res
+                })
+            },
+            pending(userId) {
+                uni.showLoading()
+                pedingFriend(userId).then(res => {
+                    uni.showToast({
+                        title: '申请成功',
+                        success: () => {
+                            this.searchResult = []
+                        }
+                    })
+                }).catch(err => {
+                    uni.showToast({
+                        icon: 'error',
+                        title: err.message
+                    })
+                })
             }
         }
     }
@@ -36,34 +114,6 @@
 <style lang="scss" scoped>
     .header-search {
         padding: $padding/2 $padding;
-		background: white;
-	}
-	// 好友列表
-	.lists{
-		.lists-item{
-			padding: 20rpx $padding;
-			position: relative;
-			display: flex;
-			align-items: center;
-
-			&::after{
-				content: " ";
-				position: absolute;
-				left: $margin;
-				right: 0;
-				bottom: 0;
-				height: 1rpx;
-				background-color: $border-color;
-			}
-			&:last-child::after{
-				display: none;
-			}
-			.lists-item-cover{
-				width: 98rpx;
-				height: 98rpx;
-				border-radius: 50%;
         background: $window-color;
     }
-		}
-	}
 </style>

pages/im/index.vue

@@ -13,7 +13,8 @@
             <block v-else>
                 <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
 
-                <view v-for="(item, index) in conversations" :key="index" class="message" @click="toDetail(item)">
+                <view v-for="(item, index) in conversations" :key="index" :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" />
@@ -27,11 +28,19 @@
                     <view class="content">
                         <view class="header">
                             <view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
-                            <view class="time">{{ item.targetId }} | {{ item.sentTime|timeCustomCN }}</view>
+                            <view class="time">{{ item.sentTime|timeCustomCN }}</view>
                         </view>
                         <view class="preview">{{ item.latestMessage.content || '&nbsp;' }}</view>
                     </view>
                 </view>
+
+                <view class="shade" @tap="hidePop">
+                    <view class="pop" :style="popStyle" :class="{'show':showPop}">
+                        <view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
+                            {{item}}
+                        </view>
+                    </view>
+                </view>
             </block>
         </view>
         <!-- 未登录 -->
@@ -59,7 +68,16 @@
                 isShown: true, // 当前页面显示状态
                 conversations: [], // 会话列表
                 isImToken: '', // 是否已鉴权
-                connection: 0
+                connection: 0,
+                /* 窗口尺寸 */
+                winSize: {},
+                /* 显示操作弹窗 */
+                showPop: false,
+                /* 弹窗按钮列表 */
+                popButton: ['置顶聊天', '删除该聊天'],
+                /* 弹窗定位样式 */
+                popStyle: "",
+                pickedItem: {}
             }
         },
         computed: {
@@ -111,6 +129,48 @@
             }
         },
         methods: {
+            hidePop() {
+                this.showPop = false
+                this.pickedItem = {}
+                setTimeout(() => {
+                    this.showShade = false
+                }, 250)
+            },
+            pickerMenu(e) {
+                const index = Number(e.currentTarget.dataset.index)
+
+                if (index == 0) {
+                    RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
+                        .pickedItem.isTop)
+                } else {
+                    RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
+                }
+                this.getConversationList()
+                this.hidePop()
+            },
+            onLongPress(e) {
+                let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
+
+                if (touches.clientY > (this.winSize.height / 2)) {
+                    style = `bottom:${this.winSize.height-touches.clientY}px;`
+                } else {
+                    style = `top:${touches.clientY}px;`
+                }
+                if (touches.clientX > (this.winSize.witdh / 2)) {
+                    style += `right:${this.winSize.witdh-touches.clientX}px`
+                } else {
+                    style += `left:${touches.clientX}px`
+                }
+
+                this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
+                this.popStyle = style
+                this.pickedItem = item
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        this.showPop = true;
+                    }, 10)
+                })
+            },
             // 检查登录
             toLogin() {
                 if (this.$store.state.token === '') {
@@ -120,21 +180,18 @@
                 }
                 return true
             },
-            getFriend(targetId) {
-                return this.$store.getters.userInfo(targetId)
-            },
             getConversationList() {
                 const count = 1000
                 const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
                 RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
                     if (res.code === 0 && res.conversations.length > 0) {
                         this.conversations = res.conversations
-                        console.log(this.conversations);
                     }
                 })
             },
             // 进入聊天的详情页面，清理未读消息数量
             toDetail(item) {
+                this.hidePop()
                 uni.navigateTo({
                     url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
                         .conversationType
@@ -148,7 +205,6 @@
     .container {
         background-color: $window-color;
         min-height: 100vh;
-        padding-bottom: 200px;
 
         .null-list {
             height: 100vh;
@@ -172,6 +228,10 @@
             background: white;
             padding: 24rpx 24rpx 20rpx 24rpx;
 
+            &.is-top {
+                background: $window-color;
+            }
+
             .avatar {
                 position: relative;
 
@@ -290,4 +350,42 @@
         //     }
         // }
     }
+
+    /* 遮罩 */
+    .shade {
+
+        .pop {
+            position: fixed;
+            z-index: 101;
+            width: 200rpx;
+            box-sizing: border-box;
+            font-size: 28rpx;
+            text-align: left;
+            color: #333;
+            background-color: #fff;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+            line-height: 80rpx;
+            transition: transform 0.15s ease-in-out 0s;
+            user-select: none;
+            -webkit-touch-callout: none;
+            transform: scale(0, 0);
+
+            &.show {
+                transform: scale(1, 1);
+            }
+
+            &>view {
+                padding: 0 20rpx;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                user-select: none;
+                -webkit-touch-callout: none;
+
+                &:active {
+                    background-color: #f3f3f3;
+                }
+            }
+        }
+    }
 </style>

pages/im/private/index.vue

@@ -99,7 +99,13 @@
             if (e.index == 0) {
                 uni.navigateTo({
                     url: '/pages/im/private/setting?targetId=' + this.targetId +
-                        '&conversationType=' + this.conversationType
+                        '&conversationType=' + this.conversationType,
+                    events: {
+                        messageClear: () => {
+                            this.getMessageList()
+                            console.log('聊天消息被清空');
+                        }
+                    }
                 })
             }
         },

pages/im/private/setting.vue

@@ -2,18 +2,18 @@
     <view class="content">
         <!-- 聊天信息 -->
         <view class="set-user" @click="showFriend">
-            <u-avatar :src="userInfo.portraitUrl" size="48"></u-avatar>
+            <u-avatar :src="friend(targetId).portraitUrl" size="48"></u-avatar>
-            <view class="set-user-nickname">{{ userInfo.name }}</view>
+            <view class="set-user-nickname">{{ friend(targetId).name }}</view>
         </view>
         <!-- 聊天设置 -->
         <view class="set-group">
             <view class="group-flex">
                 <label>消息免打扰</label>
-                <u-switch activeColor="#34CE98" size="22"></u-switch>
+                <u-switch v-model="status" activeColor="#34CE98" size="22" @change="setStatus"></u-switch>
             </view>
             <view class="group-flex">
-                <label>置顶会话</label>
+                <label>消息置顶</label>
-                <u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch>
+                <u-switch v-model="isTop" activeColor="#34CE98" size="22" @change="setTop"></u-switch>
             </view>
         </view>
         <view class="set-group">
@@ -35,22 +35,26 @@
     export default {
         data() {
             return {
-                userInfo: {},
+                eventChannel: null,
                 targetId: '',
                 conversationType: 1,
                 isTop: false,
-                status: 0 // 0 是免打扰，1是正常通知
+                status: false // 0 是免打扰，1是正常通知
+            }
+        },
+        computed: {
+            friend() {
+                return function(targetId) {
+                    return this.$store.getters.userInfo(targetId)
+                }
             }
         },
         onLoad(e) {
+            this.eventChannel = this.$scope.eventChannel
+
             this.targetId = e.targetId
             this.conversationType = e.conversationType
 
-            getUserInfo(e.targetId).then(res => {
-                console.log(res);
-                this.userInfo = res
-            })
-
             RongIMLib.getConversation(this.conversationType, this.targetId, ({
                 conversation
             }) => {
@@ -60,7 +64,7 @@
             RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
                 status
             }) => {
-                this.status = status
+                this.status = !Boolean(status)
             })
         },
         methods: {
@@ -73,16 +77,14 @@
                 RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
                     status
                 }) => {
-                    this.status = status
+                    this.status = !Boolean(status)
                 })
             },
             setTop() {
-                RongIMLib.setConversationToTop(this.conversationType, this.targetId, !this.isTop, (res) => {
+                RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
-                    console.log(res);
                     RongIMLib.getConversation(this.conversationType, this.targetId, ({
                         conversation
                     }) => {
-                        console.log(conversation.isTop);
                         this.isTop = conversation.isTop
                     })
                 })
@@ -97,6 +99,7 @@
                                 code
                             }) => {
                                 if (code === 0) {
+                                    this.eventChannel.emit('messageClear')
                                     uni.showToast({
                                         title: '聊天记录已清空'
                                     })