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

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>