搜索好友，新增好友，模块好友列表

apis/interfaces/im.js

@@ -53,9 +53,12 @@ const rejectFriend = (targetId) => {
     })
 }
 
-const searchFriend = (mobile) => {
+const searchFriend = (value) => {
     return request({
-        url: 'im/search?mobile=' + mobile
+        url: 'im/search',
+        data:{
+            keyword:value
+        }
     })
 }
 

components/friend-apply-reject-agree/index.vue

@@ -0,0 +1,126 @@
+<template>
+    <view class="friend-apply">
+        <block v-for="item in lists" v-if="lists.length > 0" :key="item.userId">
+            <view class="lists">
+                <view class="" style="width: 100rpx;height: 100rpx;">
+                    <u-image class="cover" radius="4" width="100rpx" height="100rpx" :src="item.portraitUrl || require('@/static/user/cover.png')" :lazy-load="true" />
+                </view>
+                <view class="right">
+                    <view class="title">
+                        <view class="name">{{ item.name }}</view>
+                        <view class="des" v-if="isApply">{{ item.address || '这家伙很懒，什么都没有添加~' }}</view>
+                        <view class="des" v-else>{{ item.remark || '你好,听说你很优秀想认识~' }}</view>
+                    </view>
+                    <view class="agress-btn">
+                        <span v-if="isAgree" @click="action('agree', item)">通过</span>
+                        <span v-if="isAgree" @click="action('reject', item)">拒绝</span>
+                        <span v-if="isApply && !item.is_friend" @click="action('apply', item)">申请</span>
+                        <span class="isFri" v-if="isApply && item.is_friend" @click="action('isFriend', item)">已是好友</span>
+                    </view>
+                </view>
+            </view>
+        </block>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'friend-apply-reject-agree',
+    props: {
+        lists: {
+            type: Array,
+            default: []
+        },
+        isAgree: {
+            type: Boolean,
+            default: false
+        },
+        isReject: {
+            type: Boolean,
+            default: false
+        },
+        isApply: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        action(type, item) {
+            if (type === 'isFriend') {
+                // ，后期可以跳转到信息介绍页面，先留在这里
+                return uni.showToast({ title: '已是好友，无需重复添加', icon: 'none', duration:2000});
+            }
+            this.$emit('action', { type, item });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.lists {
+    padding: 0 $padding;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    font-size: $title-size;
+    color: $text-gray;
+
+    .cover {
+        background-color: #ffffff;
+    }
+    .right {
+        width: 570rpx;
+        margin-left: $margin - 10;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: $padding 0;
+        border-bottom: solid 1rpx #f9f9f9;
+        .title {
+            width: 370rpx;
+            .name {
+                width: 100%;
+                color: $text-color;
+                font-size: $title-size + 2;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            .des {
+                width: 100%;
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                font-size: $title-size-m;
+                margin-top: $margin - 10;
+                color: $text-gray-m;
+            }
+        }
+        .agress-btn {
+            display: flex;
+            color: #fff;
+            span {
+                display: inline-block;
+                padding: 6rpx 14rpx;
+                background-color: $text-price;
+                border-radius: 10rpx;
+            }
+            span:nth-child(1) {
+                background-color: $main-color;
+                margin-right: 10rpx;
+            }
+            .isFri {
+                background-color: #f9f9f9 !important;
+                color: #666;
+            }
+        }
+    }
+}
+</style>

pages.json

@@ -433,6 +433,14 @@
 				"navigationBarBackgroundColor":"#F3F6FB"
             }
         },
+        {
+            "path": "pages/im/friends/search",
+            "name": "SearchFriend",
+            "style": {
+                "navigationBarTitleText": "好友搜索",
+        		"navigationBarBackgroundColor":"#F3F6FB"
+            }
+        },
         {
             "path": "pages/im/friends/info",
             "name": "imFriendsInfo",

pages/im/friends/info.vue

@@ -2,9 +2,12 @@
     <view class="content">
         <!-- 用户信息 -->
         <view class="user-info">
-            <u-avatar :src="userInfo.portraitUrl" size="100"></u-avatar>
+            <u-avatar
+                :src="userInfo.portraitUrl"
+                size="100"
+            ></u-avatar>
 
-            <view class="nickname">{{ userInfo.name }}111</view>
+            <view class="nickname">{{ userInfo.name }}</view>
             <!-- <view class="sex">
                 <u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
                 <u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag>
@@ -12,6 +15,7 @@
             <view class="address">
                 {{ userInfo.address}}
             </view>
+            <!-- 通过/拒绝/已通过/已拒绝 -->
         </view>
         <!-- <view class="user-lists">
 			<view class="user-lists-item">
@@ -21,123 +25,126 @@
 		</view> -->
         <!-- 发送消息 -->
         <view class="info-footer">
-            <button class="open-btn" @click="toPrivate">发送消息</button>
+            <button
+                class="open-btn"
+                @click="toPrivate"
+            >发送消息</button>
         </view>
     </view>
 </template>
 
 <script>
-    import {
+import { getUserInfo } from "@/apis/interfaces/im.js";
-        getUserInfo
-    } from '@/apis/interfaces/im.js'
 
-    export default {
+export default {
-        data() {
+    data() {
-            return {
+        return {
-                targetId: '',
+            targetId: "",
-                userInfo: {}
+            userInfo: {},
-            }
+        };
+    },
+    mounted() {
+        getUserInfo(this.$Route.query.id).then((res) => {
+            this.userInfo = res;
+            uni.setNavigationBarTitle({
+                title: res.name,
+            });
+        });
+    },
+    methods: {
+        toPrivate() {
+            uni.redirectTo({
+                url:
+                    "/pages/im/private/index?conversationType=1&targetId=" +
+                    this.targetId,
+            });
         },
-		mounted() {
+    },
-			getUserInfo(this.$Route.query.id).then(res => {
+};
-			    this.userInfo = res
-			    uni.setNavigationBarTitle({
-			        title: res.name
-			    })
-			})
-		},
-        methods: {
-            toPrivate() {
-                uni.redirectTo({
-                    url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
-                })
-            }
-        }
-    }
 </script>
 
 <style lang="scss" scoped>
-    .content {
+.content {
-        min-height: 100vh;
+    min-height: 100vh;
-        background: $window-color;
+    background: $window-color;
+}
+
+// 用户信息
+.user-info {
+    padding: $padding * 3 $padding;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: white;
+
+    .nickname {
+        font-size: 42rpx;
+        padding-top: $padding;
     }
 
-    // 用户信息
+    .address {
-    .user-info {
+        line-height: 64rpx;
-        padding: $padding*3 $padding;
+        font-size: 26rpx;
-        display: flex;
+        color: $text-gray;
-        flex-direction: column;
+    }
-        justify-content: center;
-        align-items: center;
-        background: white;
 
-        .nickname {
+    .sex {
-            font-size: 42rpx;
+        padding-top: $padding/2;
-            padding-top: $padding;
+
+        text {
+            font-size: $title-size-sm;
+            background: #303133;
+            padding: 0 10rpx;
+            color: white;
+            border-radius: $radius-m;
+            line-height: 30rpx;
+            display: inline-block;
+        }
+    }
+}
+
+.user-lists {
+    margin-top: $margin;
+    background: white;
+
+    .user-lists-item {
+        padding: 0 $padding;
+        display: flex;
+        justify-content: space-between;
+        line-height: 90rpx;
+        font-size: $title-size-lg;
+
+        label {
+            color: $text-color;
         }
 
-        .address {
+        text {
-            line-height: 64rpx;
-            font-size: 26rpx;
             color: $text-gray;
         }
-
-        .sex {
-            padding-top: $padding/2;
-
-            text {
-                font-size: $title-size-sm;
-                background: #303133;
-                padding: 0 10rpx;
-                color: white;
-                border-radius: $radius-m;
-                line-height: 30rpx;
-                display: inline-block;
-            }
-        }
     }
+}
 
-    .user-lists {
+// 发送消息
-        margin-top: $margin;
+.info-footer {
-        background: white;
+    padding: $padding;
+    width: 100%;
+    box-sizing: border-box;
 
-        .user-lists-item {
+    .open-btn {
-            padding: 0 $padding;
-            display: flex;
-            justify-content: space-between;
-            line-height: 90rpx;
-            font-size: $title-size-lg;
-
-            label {
-                color: $text-color;
-            }
-
-            text {
-                color: $text-gray;
-            }
-        }
-    }
-
-    // 发送消息
-    .info-footer {
-        padding: $padding;
         width: 100%;
-        box-sizing: border-box;
+        height: 90rpx;
+        line-height: 90rpx;
+        background: $main-color;
+        border-radius: $radius-lg;
+        padding: 0;
+        margin: 0;
+        color: white;
+        font-size: $title-size;
 
-        .open-btn {
+        &::after {
-            width: 100%;
+            display: none;
-            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>
+}
+</style>

pages/im/friends/pending.vue

@@ -1,119 +1,83 @@
+<!--
+ * @Description:新朋友即新增好友申请列表  可以搜索跳转
+ * @Author: Aimee·Zhang
+ * @Date: 2022-01-24 10:49:15
+ * @LastEditors: Aimee·Zhang
+ * @LastEditTime: 2022-01-25 10:18:26
+-->
+
 <template>
-    <view>
+    <view class="pending">
-        <!-- 搜索 -->
         <u-sticky>
-            <view class="header-search">
+            <view class="header-search" @click="$Router.push({ name: 'SearchFriend' })">
-                <u-search placeholder="输入手机号码搜索" bgColor="white" @custom="search" @search="search"
+                <u-search placeholder="输入手机号码搜索" height="74" searchIcon="search" inputAlign="center" bgColor="white" :disabled="true" :show-action="false" />
-                    v-model="searchValue"></u-search>
             </view>
         </u-sticky>
-        <u-list height="auto">
+        <block v-if="pedings.length > 0"><applyFriend :lists="pedings" :isAgree="true" :isReject="false" @action="action" /></block>
-            <u-list-item v-for="(item, index) in searchResult" :key="index">
+        <view class="no-lists" v-else>
-                <u-cell :title="item.name">
+            <u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
-                    <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
+            <span>暂无申请记录~</span>
-
+        </view>
-                    <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>
-        <!-- 新朋友 -->
-        <u-divider text="好友申请"></u-divider>
-        <u-list height="auto">
-            <u-swipe-action>
-                <u-list-item v-for="(item, index) in pedings" :key="index">
-                    <u-swipe-action-item autoClose :options="options" @click="action($event, item)">
-                        <u-cell :title="item.name">
-                            <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
-                        </u-cell>
-                    </u-swipe-action-item>
-                </u-list-item>
-            </u-swipe-action>
-        </u-list>
     </view>
 </template>
 
 <script>
-    import {
+import { getPedings, resolveFriend, rejectFriend } from '@/apis/interfaces/im.js';
-        getPedings,
+import applyFriend from '@/components/friend-apply-reject-agree';
-        resolveFriend,
+export default {
-        rejectFriend,
+    components: {
-        searchFriend,
+        applyFriend
-        pedingFriend
+    },
-    } from '@/apis/interfaces/im.js'
+    data() {
-
+        return {
-    export default {
+            // pedings: [{userId:10990,name:'张三'}]
-        data() {
+            pedings: []
-            return {
+        };
-                searchResult: [],
+    },
-                searchValue: '',
+    onLoad() {
-                pedings: [],
+        this.getPeddingList();
-                options: [{
+    },
-                    text: '通过',
+    methods: {
-                    style: {
+        // 操作同意或拒绝
-                        backgroundColor: '#3c9cff'
+        action(e) {
+            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();
+                        });
                     }
-                }, {
-                    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 => {
+        getPeddingList() {
-                    this.pedings = res
+            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
-                    })
-                })
-            }
         }
     }
+};
 </script>
 
 <style lang="scss" scoped>
-    .header-search {
+.header-search {
-        padding: $padding/2 $padding;
+    padding: $padding/2 $padding;
-        background: $window-color;
+    background: $window-color;
+}
+.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>

pages/im/friends/search.vue

@@ -0,0 +1,106 @@
+<!--
+ * @Description:新朋友即新增好友申请列表  可以搜索跳转
+ * @Author: Aimee·Zhang
+ * @Date: 2022-01-24 10:49:15
+ * @LastEditors: Aimee·Zhang
+ * @LastEditTime: 2022-01-25 10:18:26
+-->
+
+<template>
+    <view class="search">
+        <!-- 搜索 、   -->
+        <u-sticky>
+            <view class="header-search">
+                <u-search
+                    placeholder="输入用户账号、手机号"
+                    height="74"
+                    searchIcon="search"
+                    @custom="search"
+                    v-model="searchValue"
+                    @search="search"
+                    inputAlign="center"
+                    bgColor="#f9f9f9"
+                />
+            </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" :src="require('@/static/imgs/no-search.png')" :lazy-load="true" />
+            <span>暂无匹配内容~</span>
+        </view>
+    </view>
+</template>
+
+<script>
+import { searchFriend, pedingFriend } from '@/apis/interfaces/im.js';
+import applyFriend from '@/components/friend-apply-reject-agree';
+export default {
+    components: {
+        applyFriend
+    },
+    data() {
+        return {
+            searchResult: [],
+            searchValue: ''
+        };
+    },
+    methods: {
+        search() {
+            searchFriend(this.searchValue)
+                .then(res => {
+                    this.searchResult = res;
+                })
+                .catch(err => {
+                    uni.showToast({
+                        title: err.message,
+                        icon: 'none'
+                    });
+                });
+        },
+        // 操作申请
+        action(e) {
+            uni.showLoading();
+            pedingFriend(e.item.userId)
+                .then(res => {
+                    uni.showToast({
+                        title: '申请成功',
+                        icon:"none",
+                        success: () => {
+                            this.searchResult.splice(this.searchResult.findIndex((it,index) => it.userId === e.item.userId),1);
+                            if(this.searchResult.length === 0){
+                                this.searchValue = ''
+                            }
+                        }
+                    });
+                })
+                .catch(err => {
+                    uni.showToast({
+                        icon: 'error',
+                        title: err.message,
+                        duration:2000
+                    });
+                });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.header-search {
+    padding: $padding/2 $padding;
+    // background: $window-color;
+}
+.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>