选择联系人模块

pages.json

@@ -488,7 +488,7 @@
             "path": "pages/im/group/invite",
             "name": "imGroupInvite",
             "style": {
-                "navigationBarTitleText": "邀请好友"
+                "navigationBarTitleText": "选择联系人"
             }
         },
         {

pages/im/friends/search.vue

@@ -11,16 +11,14 @@
         <!-- 搜索 、   -->
         <u-sticky>
             <view class="header-search">
-                <u-search placeholder="输入用户账号、手机号" height="74" searchIcon="search" @custom="search"
+                <u-search placeholder="输入用户账号、手机号" height="74" searchIcon="search" @custom="search" v-model="searchValue" @search="search" bgColor="#f9f9f9" :focus="focused" />
-                    v-model="searchValue" @search="search" bgColor="#f9f9f9" :focus="focused" />
             </view>
         </u-sticky>
         <block v-if="searchResult.length > 0">
             <applyFriend :lists="searchResult" :isApply="true" @action="action" />
         </block>
         <view class="no-lists" v-else>
-            <u-image class="cover" radius="4" width="400rpx" height="400rpx"
+            <u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-search.png')" :lazy-load="true" />
-                :src="require('@/static/imgs/no-search.png')" :lazy-load="true" />
             <span>暂无匹配内容~</span>
         </view>
     </view>

pages/im/group/announceCreate.vue

@@ -1,8 +1,8 @@
 <template>
     <view class="create">
-        <u--textarea v-model="content" count height="200" maxlength="200" placeholder="请输入公告内容"></u--textarea>
+        <view class="create-title">公告内容</view>
-
+        <u--textarea v-model="content" count height="240" maxlength="240" placeholder="请输入公告内容" />
-        <u-button type="primary" text="发布" :disabled="disabled" @click="onCreate" color="#34CE98"></u-button>
+        <u-button type="primary" text="发布" :disabled="disabled" @click="onCreate" color="#34CE98" />
     </view>
 </template>
 
@@ -52,7 +52,23 @@
 <style lang="scss" scoped>
     .create {
         padding: $padding;
-
+        .create-title{
+            font-size: $title-size + 4;
+            padding: $padding - 10 0 $padding - 10 $padding - 10 ;
+            color: $text-color;
+            font-weight: 800;
+            position: relative;
+            
+            &::before{
+                content:"";
+                position: absolute;
+                width: 10rpx;
+                height: 34rpx;
+                background-color: $main-color;
+                left: 0;
+                top: 26rpx;
+            }
+        }
         .u-button {
             margin-top: $padding;
         }

pages/im/group/announcement.vue

@@ -1,9 +1,9 @@
 <template>
     <view class="announce">
-        <u-skeleton rows="2" :loading="loading" avatar :rows="5">
+        <u-skeleton rows="2" :loading="loading" avatar :rows="5" v-if="announcements.length>0">
-            <view v-for="(item,index) in announcements" :key="index" class="item">
+            <view v-for="(item,index) in announcements" :key="index" class="item" >
                 <view class="header">
-                    <u-avatar :src="item.user.portraitUrl"></u-avatar>
+                    <u-avatar :src="item.user.portraitUrl" />
                     <view class="user">
                         <view class="name">{{ item.user.name }}</view>
                         <view class="time">{{ item.created_at }}</view>
@@ -13,6 +13,10 @@
                 <view class="content">{{ item.content }}</view>
             </view>
         </u-skeleton>
+        <view class="no-lists" v-else>
+            <u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-level-list.png')" :lazy-load="true" />
+            <span>暂无公告内容~</span>
+        </view>
     </view>
 </template>
 
@@ -85,7 +89,20 @@
 <style lang="scss" scoped>
     .announce {
         padding: 0 $padding $padding $padding;
-
+        .no-lists {
+            padding-top: $padding * 5;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            font-size: $title-size-m;
+            color: $text-gray-m;
+        
+            span {
+                padding-top: $padding;
+            }
+        }
         .item {
             border-bottom: solid 1rpx #f9f9f9 !important;
             padding-top: $padding;
@@ -117,8 +134,10 @@
             }
 
             .content {
-                padding: $padding;
+                padding: 20rpx $padding;
-                font-size: 34rpx;
+                font-size: $title-size;
+                color: $text-gray;
+                max-width: 100%;
             }
         }
     }

pages/im/group/invite.vue

@@ -1,21 +1,197 @@
 <template>
-    <view class="">
+    <view>
-
+        <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
+            <view class="search">
+                <u--input class="search-input" placeholder="搜索" border="none" prefixIcon="search" v-model="searchTxt" :disabled="friends.length>0" disabledColor="#Fff"
+                    prefixIconStyle="font-size: 22px;color: #909399" />
+            </view>
+            <block v-if="friends.length > 0">
+                <u-index-item v-for="(item, fkey) in friends" :key="fkey">
+                    <u-index-anchor :text="indexs[fkey]" bgColor="#ededed" height="20" size="12" color="#666"
+                        style="padding:10rpx 30rpx" />
+                    <view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
+                        @click="toFriend(friendItem.targetId)">
+                        <u-avatar class="avatar-img" size="40" shape="square"
+                            :src="contact(friendItem.targetId).portraitUrl" />
+                        <view class="info">
+                            <view class="name">{{ contact(friendItem.targetId).name }}</view>
+                        </view>
+                    </view>
+                </u-index-item>
+            </block>
+            <view class="no-lists" v-else>
+                <u-image class="cover" radius="4" width="400rpx" height="400rpx"
+                    :src="searchTxt=== '' ? require('@/static/imgs/no-friend.png') :require('@/static/imgs/no-search.png')"
+                    :lazy-load="true" />
+                <span>{{searchTxt=== ''?'暂无好友列表~':'暂无搜索内容~'}}</span>
+            </view>
+        </u-index-list>
     </view>
 </template>
 
 <script>
+    import {
+        getFriendsLetter
+    } from '@/apis/interfaces/im';
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+
     export default {
         data() {
             return {
-                targetId: ''
+                indexs: [],
+                friends: [],
+                pendingCount: 0,
+                searchTxt: ''
+            };
+        },
+        computed: {
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
             }
         },
-        onLoad(e) {
+        onLoad() {
-            this.targetId = e.targetId
+            this.getFriendList()
+            this.checkNewFriendPending()
+            uni.$on('onContactNotification', this.checkNewFriendPending)
+        },
+        methods: {
+            getFriendList() {
+                getFriendsLetter().then(res => {
+                    this.indexs = res.indexList
+                    this.friends = res.itemArr
+                })
+            },
+            checkNewFriendPending() {
+                // 获取是否有新的好友申请
+                RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
+                    if (res.code === 0) {
+                        this.pendingCount = res.conversations.filter((item) => {
+                            return item.objectName == RongIMLib.ObjectName.ContactNotification
+                        }).length
+                    }
+                })
+            },
+            toGroup() {
+                uni.navigateTo({
+                    url: '/pages/im/group/index',
+                    fail(err) {
+                        console.log(err);
+                    }
+                })
+            },
+            toFriend(targetId) {
+                // uni.navigateTo({
+                //     url: '/pages/im/friends/info?targetId=' + targetId
+                // })
+                console.log('奥克兰打开')
+            },
+            // 新朋友
+            toPending() {
+                if (this.pendingCount > 0) {
+                    uni.navigateTo({
+                        url: '/pages/im/friends/pending'
+                    });
+                } else {
+                    uni.showToast({
+                        title: ` 暂无好友申请 ~ `,
+                        icon: "none",
+                        mask: true,
+                        duration: 3000
+                    })
+                }
+            }
+        },
+        onNavigationBarButtonTap(e) {
+            uni.navigateTo({
+                url: '/pages/im/friends/search'
+            });
         }
-    }
+    };
 </script>
 
-<style>
+<style lang="scss" scoped>
+    // 页面空
+    .pages-null {
+        height: 70vh;
+    }
+
+    // 好友列表
+    .friend-flex {
+        position: relative;
+        padding: 0 $padding 0 $padding;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        box-sizing: border-box;
+
+        .avatar-img {
+            box-shadow: 0 0 20rpx rgba($color: $main-color, $alpha: 0.2);
+        }
+
+        .info {
+            flex: 1;
+            margin-left: $padding;
+            border-bottom: solid 1rpx #f9f9f9;
+            height: 120rpx;
+            line-height: 120rpx;
+
+            .name {
+                font-size: $title-size;
+                color: #454545 !important;
+                @extend .nowrap;
+            }
+
+            .address {
+                color: $text-gray-m;
+                font-size: $title-size-m - 3;
+                padding-top: 10rpx;
+                word-break: break-word;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                width: 600rpx;
+            }
+        }
+    }
+
+    .list-cell {
+        display: flex;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 10px 24rpx;
+        overflow: hidden;
+        color: #323233;
+        font-size: 14px;
+        line-height: 24px;
+        background-color: #fff;
+    }
+
+    .search {
+        background-color: #fff;
+        padding: 30rpx;
+
+        .search-input {
+            padding: 10rpx $padding;
+            width: 100%;
+        }
+
+        .searchTxt {}
+    }
+
+    .no-lists {
+        padding-top: $padding * 3;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        font-size: $title-size-m;
+        color: $text-gray-m;
+
+        span {
+            padding-top: $padding;
+        }
+    }
 </style>