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

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">
-                <u-search placeholder="输入手机号码搜索" bgColor="white" @custom="search" @search="search"
-                    v-model="searchValue"></u-search>
+            <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" />
             </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>
-        <!-- 新朋友 -->
-        <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>
+        <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" />
+            <span>暂无申请记录~</span>
+        </view>
     </view>
 </template>
 
 <script>
-    import {
-        getPedings,
-        resolveFriend,
-        rejectFriend,
-        searchFriend,
-        pedingFriend
-    } from '@/apis/interfaces/im.js'
-
-    export default {
-        data() {
-            return {
-                searchResult: [],
-                searchValue: '',
-                pedings: [],
-                options: [{
-                    text: '通过',
-                    style: {
-                        backgroundColor: '#3c9cff'
+import { getPedings, resolveFriend, rejectFriend } from '@/apis/interfaces/im.js';
+import applyFriend from '@/components/friend-apply-reject-agree';
+export default {
+    components: {
+        applyFriend
+    },
+    data() {
+        return {
+            // pedings: [{userId:10990,name:'张三'}]
+            pedings: []
+        };
+    },
+    onLoad() {
+        this.getPeddingList();
+    },
+    methods: {
+        // 操作同意或拒绝
+        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 => {
-                    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
-                    })
-                })
-            }
+            });
+        },
+        getPeddingList() {
+            getPedings().then(res => {
+                this.pedings = res;
+            });
         }
     }
+};
 </script>
 
 <style lang="scss" scoped>
-    .header-search {
-        padding: $padding/2 $padding;
-        background: $window-color;
+.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>