好友资料页面

pages.json

@@ -1,6 +1,5 @@
 {
-    "pages": [
+    "pages": [{
-        {
             "path": "pages/index/index",
             "name": "Index",
             "style": {
@@ -158,15 +157,13 @@
                 "app-plus": {
                     "titleNView": {
                         "backgroundColor": "#FFFFFF",
-                        "buttons": [
+                        "buttons": [{
-                            {
                             "float": "right",
                             "text": "\ue603",
                             "fontSrc": "/static/iconfont.ttf",
                             "color": "#000",
                             "fontSize": "20px"
-                            }
+                        }]
-                        ]
                     }
                 }
             }
@@ -373,7 +370,7 @@
             "name": "IM",
             "style": {
                 "navigationBarBackgroundColor": "#FFFFFF",
-				"navigationStyle":"custom"
+                "navigationStyle": "custom"
             }
         },
         {
@@ -386,14 +383,12 @@
                 "app-plus": {
                     "titleNView": {
                         "type": "default",
-                        "buttons": [
+                        "buttons": [{
-                            {
                             "float": "right",
                             "fontSrc": "/static/iconfont.ttf",
                             "text": "\ue607",
                             "fontSize": "20px"
-                            }
+                        }]
-                        ]
                     }
                 }
             }
@@ -413,14 +408,12 @@
                 "app-plus": {
                     "titleNView": {
                         "type": "default",
-				        "buttons": [
+                        "buttons": [{
-				            {
                             "float": "right",
                             "fontSrc": "/static/iconfont.ttf",
                             "text": "\ue603",
                             "fontSize": "20px"
-				            }
+                        }]
-				        ]
                     }
                 }
             }
@@ -430,7 +423,7 @@
             "name": "imFriendsPending",
             "style": {
                 "navigationBarTitleText": "新朋友",
-				"navigationBarBackgroundColor":"#F3F6FB"
+                "navigationBarBackgroundColor": "#F3F6FB"
             }
         },
         {
@@ -438,7 +431,7 @@
             "name": "SearchFriend",
             "style": {
                 "navigationBarTitleText": "好友搜索",
-        		"navigationBarBackgroundColor":"#F3F6FB"
+                "navigationBarBackgroundColor": "#F3F6FB"
             }
         },
         {
@@ -446,7 +439,7 @@
             "name": "imFriendsInfo",
             "style": {
                 "navigationBarTitleText": "好友资料",
-				"navigationBarBackgroundColor":"#F3F6FB"
+                "navigationBarBackgroundColor": "#FFFFFF"
             }
         },
         {
@@ -509,16 +502,14 @@
                     "titleNView": {
                         "backgroundImage": "linear-gradient(to right, #34ce98, #22aa98)",
                         "type": "transparent",
-                        "buttons": [
+                        "buttons": [{
-                            {
                             "float": "right",
                             "text": "\ue607",
                             "fontSrc": "/static/iconfont.ttf",
                             "color": "#FFF",
                             "fontSize": "20px",
                             "background": "rgba(0,0,0,0)"
-                            }
+                        }],
-                        ],
                         "backButton": {
                             "background": "rgba(0,0,0,0)"
                         }
@@ -580,8 +571,7 @@
     "tabBar": {
         "borderStyle": "white",
         "selectedColor": "#34CE98",
-        "list": [
+        "list": [{
-            {
                 "iconPath": "static/tabBar/tabBar_00.png",
                 "selectedIconPath": "static/tabBar/tabBar_show_00.png",
                 "pagePath": "pages/index/index",

pages/im/friends/info.vue

@@ -4,62 +4,148 @@
         <view class="user-info">
             <u-avatar :src="userInfo.portraitUrl" size="100" />
 
-            <view class="nickname">{{ userInfo.name }}</view>
+            <view class="nickname">{{ userInfo.username }}</view>
-            <!-- <view class="sex">
+            <view class="gender">
-                <u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
+                <u-tag text="保密" v-if="userInfo.gender === 0" color="#fff" borderColor="#999" size="mini"
-                <u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag>
+                    bgColor="#999"></u-tag>
-            </view> -->
+                <u-tag text="男" v-if="userInfo.gender === 1" color="#fff" borderColor="#5db6ee" size="mini" icon="man"
+                    bgColor="#5db6ee"></u-tag>
+                <u-tag text="女" v-if="userInfo.gender === 2" color="#fff" borderColor="#e4867a" size="mini" icon="woman"
+                    bgColor="#e4867a"></u-tag>
+            </view>
             <view class="address">{{ userInfo.address }}</view>
-            <!-- 通过/拒绝/已通过/已拒绝 -->
         </view>
-        <!-- <view class="user-lists">
+
-			<view class="user-lists-item">
+        <view class="actions">
-				<label>地区</label>
+            <u-cell-group>
-				<text>黑龙江 哈尔滨</text>
+                <u-cell isLink title="设置备注" @click="setRemark"></u-cell>
+                <u-cell isLink title="设置标签" @click="setRemark"></u-cell>
+                <u-cell title="聊天免打扰">
+                    <u-switch slot="value" size="18" v-model="status" activeColor="#34CE98" @change="setStatus">
+                    </u-switch>
+                </u-cell>
+                <u-cell title="聊天置顶">
+                    <u-switch slot="value" size="18" v-model="isTop" activeColor="#34CE98" @change="setTop">
+                    </u-switch>
+                </u-cell>
+                <!--        <u-cell title="加入黑名单">
+                    <u-switch slot="value" size="18" v-model="block" activeColor="#34CE98" @change="setBlock"></u-switch>
+                </u-cell> -->
+                <u-cell isLink titleStyle="color: red" title="删除好友" @click="deleteFriend"></u-cell>
+            </u-cell-group>
+        </view>
+
+        <view class="footer">
+            <u-button @click="toPrivate()">
+                <u-icon name="chat" size="20" /> 发送消息
+            </u-button>
+            <u-button @click="toPrivate()">
+                <u-icon name="mic" size="20" /> 音视频通话
+            </u-button>
         </view>
-		</view> -->
-        <!-- 发送消息 -->
-        <view class="info-footer"><button class="open-btn" @click="toPrivate">发送消息</button></view>
     </view>
 </template>
 
 <script>
-import { getUserInfo } from '@/apis/interfaces/im.js';
+    import {
+        getUserInfo
+    } from '@/apis/interfaces/im.js'
+    import * as RongIMLib from '@rongcloud/imlib-uni'
 
-export default {
+    export default {
         data() {
             return {
                 targetId: '',
-            userInfo: {}
+                userInfo: {},
+                status: false, // 0 是免打扰，1是正常通知
+                isTop: false,
+                block: false,
+                conversationType: 1
             };
         },
-    mounted() {
+        onLoad(e) {
-        getUserInfo(this.$Route.query.id).then(res => {
+            this.targetId = e.targetId
-            this.userInfo = res;
+            getUserInfo(e.targetId).then(res => {
+                console.log(res);
+                this.userInfo = res
                 uni.setNavigationBarTitle({
                     title: res.name
-            });
+                })
-        });
+            })
+            RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
+                status
+            }) => {
+                this.status = !Boolean(status)
+            })
+            RongIMLib.getConversation(this.conversationType, this.targetId, ({
+                conversation
+            }) => {
+                this.isTop = conversation.isTop
+            })
         },
         methods: {
             toPrivate() {
                 uni.redirectTo({
                     url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
-            });
+                })
+            },
+            setRemark() {
+                uni.showToast({
+                    icon: 'none',
+                    title: '开发中'
+                })
+            },
+            deleteFriend() {
+                uni.showModal({
+                    title: '删除确认',
+                    content: '确认删除后不可恢复',
+                    success: (e) => {
+                        if (e.confirm) {
+                            uni.showToast({
+                                icon: 'none',
+                                title: '开发中'
+                            })
                         }
                     }
-};
+                })
+            },
+            setStatus() {
+                RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
+                    status
+                }) => {
+                    this.status = !Boolean(status)
+                })
+            },
+            setTop() {
+                RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
+                    RongIMLib.getConversation(this.conversationType, this.targetId, ({
+                        conversation
+                    }) => {
+                        this.isTop = conversation.isTop
+                    })
+                })
+            },
+            setBlock() {
+
+            }
+        }
+    };
 </script>
 
 <style lang="scss" scoped>
-.content {
+    .content {
         min-height: 100vh;
         background: $window-color;
-}
+    }
 
-// 用户信息
+    .actions {
-.user-info {
+        background: white;
-    padding: $padding * 3 $padding;
+        margin-top: $padding / 2;
+    }
+
+    // 用户信息
+    .user-info {
+        padding: $padding 0;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -77,7 +163,7 @@ export default {
             color: $text-gray;
         }
 
-    .sex {
+        .gender {
             padding-top: $padding/2;
 
             text {
@@ -90,9 +176,9 @@ export default {
                 display: inline-block;
             }
         }
-}
+    }
 
-.user-lists {
+    .user-lists {
         margin-top: $margin;
         background: white;
 
@@ -111,28 +197,13 @@ export default {
                 color: $text-gray;
             }
         }
-}
+    }
 
-// 发送消息
+    .footer {
-.info-footer {
+        padding: $padding / 2;
-    padding: $padding;
-    width: 100%;
-    box-sizing: border-box;
 
-    .open-btn {
+        .u-button {
-        width: 100%;
+            margin-top: $padding / 2;
-        height: 90rpx;
-        line-height: 90rpx;
-        background: $main-color;
-        border-radius: $radius-lg;
-        padding: 0;
-        margin: 0;
-        color: white;
-        font-size: $title-size;
-
-        &::after {
-            display: none;
         }
     }
-}
 </style>

pages/im/friends/pending.vue

@@ -10,64 +10,83 @@
     <view class="pending">
         <u-sticky>
             <view class="header-search" @click="$Router.push({ name: 'SearchFriend' })">
-                <u-search placeholder="输入手机号码搜索" height="74" searchIcon="search" inputAlign="center" bgColor="white" :disabled="true" :show-action="false" />
+                <u-search placeholder="输入手机号码搜索" height="74" searchIcon="search" inputAlign="center" bgColor="white"
+                    :disabled="true" :show-action="false" />
             </view>
         </u-sticky>
-        <block v-if="pedings.length > 0"><applyFriend :lists="pedings" :isAgree="true" :isReject="false" @action="action" /></block>
+        <block v-if="pedings.length > 0">
+            <applyFriend :lists="pedings" :isAgree="true" :isReject="false" @action="action" />
+        </block>
         <view class="no-lists" v-else>
-            <u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
+            <u-image class="cover" radius="4" width="400rpx" height="400rpx"
+                :src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
             <span>暂无申请记录~</span>
         </view>
     </view>
 </template>
 
 <script>
-import { getPedings, resolveFriend, rejectFriend } from '@/apis/interfaces/im.js';
+    import {
-import applyFriend from '@/components/friend-apply-reject-agree';
+        getPedings,
-export default {
+        resolveFriend,
+        rejectFriend
+    } from '@/apis/interfaces/im.js';
+    import * as RongIMLib from '@rongcloud/imlib-uni'
+    import applyFriend from '@/components/friend-apply-reject-agree'
+
+    export default {
         components: {
             applyFriend
         },
         data() {
             return {
-            // pedings: [{userId:10990,name:'张三'}]
                 pedings: []
-        };
+            }
         },
         onLoad() {
-        this.getPeddingList();
+            this.getPeddingList()
         },
         methods: {
             // 操作同意或拒绝
             action(e) {
-            let url = e.type === 'agree' ? resolveFriend : rejectFriend;
+                let url = e.type === 'agree' ? resolveFriend : rejectFriend
                 uni.showModal({
                     title: e.type === 'agree' ? '通过' : '拒绝',
                     content: e.type === 'agree' ? '通过后即可与该用户畅所欲言' : '拒绝后将不会收到该用户发来信息',
                     success: res => {
                         if (res.confirm) {
                             url(e.item.userId).then(res => {
-                            this.getPeddingList();
+                                this.getPeddingList()
-                        });
+                            })
                         }
                     }
-            });
+                })
             },
             getPeddingList() {
+                // 获取系统中的好友关系会话列表
+                // RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 50, 0, (res) => {
+                //     if (res.code === 0) {
+                //         this.pedings = res.conversations.filter((item) => {
+                //             return item.objectName == RongIMLib.ObjectName.ContactNotification
+                //         })
+                //     }
+                // })
                 getPedings().then(res => {
-                this.pedings = res;
+                    console.log(res)
-            });
+                    this.pedings = res
+                })
             }
         }
-};
+    };
 </script>
 
 <style lang="scss" scoped>
-.header-search {
+    .header-search {
         padding: $padding/2 $padding;
         background: $window-color;
-}
+    }
-.no-lists{
+
+    .no-lists {
         padding-top: $padding * 3;
         display: flex;
         flex-direction: column;
@@ -76,8 +95,9 @@ export default {
         box-sizing: border-box;
         font-size: $title-size-m;
         color: $text-gray-m;
-    span{
+
-        padding-top: $padding ;
+        span {
+            padding-top: $padding;
+        }
     }
-}
 </style>