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">
        <template #prefix>
          <SearchOutlined />
        </template>
      </a-input-search>
      <div class="mt10">
        <div class="item"
             v-for="(item, index) in searchFriend"
             :key="index + '11'">
          <div class="left">
            <span>{{item.frienduserid}} {{ item.friendname }}</span>
          </div>
          <div class="right"
               @click="operate(item)">
            <span v-if="item.isfriend">
              <svg class="icon svg-icon"
                   aria-hidden="true">
                <use xlink:href="#icon-shanchu" />
              </svg>
            </span>
            <span v-else
                  class="addFriBtn">加为好友</span>
          </div>
        </div>
      </div>
    </div>
  </a-spin>
</template>

<script lang="ts">
import { SearchOutlined } from '@ant-design/icons-vue';
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 { geLoginID_number } from '@/services/bus/login';

export default defineComponent({
    name: 'friend',
    components: { SearchOutlined },
    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: geLoginID_number(),
            };
        }
        // 删除好友
        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) {
            const id = frienduserid.toString();
            if (isfriend) {
                deleteFriend(id);
            } else {
                addFriend(id);
            }
        }
        // 查询好友列表
        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) {
            if (value) {
                const findResult = myFriends.value.filter((e) => String(e.frienduserid).includes(value));
                if (findResult.length) {
                    searchFriend.value = findResult;
                } else {
                    queryMyFriend(value);
                }
            } else {
                searchFriend.value = myFriends.value;
            }
        }

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

<style lang="less">
.my-friend {
    height: 340px;
    width: 260px;
    padding: 10px 9px 0 11px;
    background: @m-grey22;
    border: 1px solid @m-grey23;
    box-shadow: 0px 10px 10px 0px @m-black18;
    .rounded-corners(5px);
    .item {
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: @m-grey57;
        font-size: 14px;
        border-bottom: 1px solid @m-grey58;
        .flex;
        justify-content: space-between;
        .left {
            span:last-child {
                margin-left: 10px;
            }
        }
        .right {
            padding-right: 10px;
            .icon {
                color: @m-yellow7;
                font-size: 16px;
                height: 40px;
                line-height: 40px;
                display: none;
            }
            .addFriBtn {
                display: inline-block;
                cursor: pointer;
                width: 80px;
                height: 26px;
                border: 1px solid @m-blue0;
                .rounded-corners(13px);
                color: @m-blue0;
                font-size: 14px;
                line-height: 24px;
                text-align: center;
            }
        }
    }
    .item:hover {
        background: @m-grey56;
        .rounded-corners(5px);
        color: @m-white0;
        .addFriBtn {
            border: 1px solid @m-blue33;
            color: @m-blue33;
        }
        .right {
            .icon {
                display: block;
            }
        }
    }
    .searchFriendInput {
        border: 1px solid @m-grey59;
        .ant-input-wrapper .searchFriendInput {
            border: none;
            height: 28px;
            box-shadow: none !important;
        }
    }
}
</style
>;