MTP2.0_WEB/src/views/setting/friends/index.vue

<template>
    <!-- 我的好友 -->
    <a-spin :spinning="loading">
        <div class="my-friend">
            <a-input-search
                placeholder="输入好友代码进行搜索"
                enter-button
                class="searchFriendInput"
                @search="handleSearch"
            />
            <div v-for="(item, index) in searchFriend" :key="index + '11'">
                <a-row type="flex">
                    <a-col :span="12">
                        <span>{{item.frienduserid}} {{ item.friendname }}</span>
                    </a-col>
                    <a-col :span="6" @click="operate(item)">
                        <span v-if="item.isfriend">删除</span>
                        <span v-else>添加</span>
                    </a-col>
                </a-row>
                <a-divider />
            </div>
        </div>
    </a-spin>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { initData } from '@/common/methods';
import { QueryWrFriendApplyRsp } from '@/services/go/wrtrade/interface';
import { queryQueryWrFriend } from '@/services/go/wrtrade';
import { friendOperate } from '@/services/proto/accountinfo';
import { getUsrId } from '@/services/bus/user';
import { queryResultLoadingAndInfo, requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { message } from 'ant-design-vue';
import { Modal } from 'ant-design-vue';
import { getLongTypeLoginID } from '@/services/bus/login';

export default defineComponent({
    name: 'friend',
    setup() {
        const myFriends = ref<QueryWrFriendApplyRsp[]>([]);
        const searchFriend = ref<QueryWrFriendApplyRsp[]>([]);
        const loading = ref<boolean>(false);
        // 设置 新增和删除好友 公共请求参数
        // operatetype: number; // 操作类型-1:申请 2:审核通过 3：审核拒绝 4: 删除
        function getParam(operatetype: 1 | 2 | 3 | 4, frienduserid: string) {
            return {
                operatetype,
                userid: getUsrId(),
                frienduserid,
                applysrc: 2,
                applicantid: getLongTypeLoginID(),
            };
        }
        // 删除好友
        function deleteFriend(frienduserid: string) {
            Modal.confirm({
                title: '删除好友',
                content: '确定删除好友？',
                onOk() {
                    const param = getParam(4, frienduserid);
                    requestResultLoadingAndInfo(friendOperate, param, loading, ['删除好友成功', '删除好友失败:']).then(() => {
                        queryMyFriend();
                    });
                },
            });
        }

        // 添加好友
        function addFriend(frienduserid: string) {
            const param = getParam(1, frienduserid);
            requestResultLoadingAndInfo(friendOperate, param, loading, ['添加好友成功', '添加好友失败:']).then(() => {
                queryMyFriend();
            });
        }
        function operate({ frienduserid, isfriend }: QueryWrFriendApplyRsp) {
            if (isfriend) {
                deleteFriend(frienduserid);
            } else {
                addFriend(frienduserid);
            }
        }
        // 查询好友列表
        function queryMyFriend(value?: string) {
            loading.value = true;
            queryQueryWrFriend(value)
                .then((res) => {
                    if (!value) {
                        myFriends.value = res; // 我的朋友
                    }
                    searchFriend.value = res;
                })
                .catch((err: string) => message.error(err))
                .finally(() => {
                    loading.value = false;
                });
        }
        function handleSearch(value: string) {
            const findResult = myFriends.value.find((e) => String(e.frienduserid).includes(value));
            if (findResult) {
                searchFriend.value = [findResult];
            } else {
                queryMyFriend(value);
            }
        }

        initData(() => {
            queryMyFriend();
        });
        return { operate, myFriends, loading, handleSearch, searchFriend };
    },
});
</script>

<style lang="less">
.my-friend {
    height: 340px;
    width: 260px;
}
</style
>;