wallet_app/src/views/im/contactList/invitation/index.vue

<template>
    <div class="container">
        <div class="content">
            <div class="tab-box">
                <div class="tab-text" :class="type == 1?'active-color':''" @click="changeTab(1)">我收到的</div>
                <div class="tab-text" :class="type == 2?'active-color':''" @click="changeTab(2)">我发起的</div>
            </div>
            <div class="list-box">
                <van-loading class="load-box" size="24px" v-if="loading">加载中...</van-loading>
                <template v-else-if="list.length > 0">
                    <div class="box-item" :class="{ 'no-border': i === 9 }" v-for="(item,i) in list">
                        <van-image class="item-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
                        <div class="item-ri-cont">
                            <div>
                                <div v-if="type == 1">
                                    <span class="name">{{ item.nickname }}</span>申请添加您为好友
                                </div>
                                <div v-else-if="type == 2">
                                    请求添加<span class="name">{{ item.nickname }}</span>为好友
                                </div>
                            </div>

                            <!-- 左边操作按钮或文字 -->
                            <div v-if="type == 1 && item.status == 1" class="item-btn" @click="changeBtn(item)">同意</div>
                            <div v-else-if="type == 2 && item.status == 1" class="fs12 fs90">待同意</div>

                            <!-- 右边状态展示（仅 status ≠ 1 时） -->
                            <div
                                v-if="item.status !== 1"
                                class="fs12"
                                :class="item.status == 2 ? '' : 'fscolor'"
                            >
                                {{ item.status == 2 ? '已添加' : '已拒绝' }}
                            </div>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="no-more">
                        <svg-icon class="no-more-img" name="no-more" />
                        <div>暂无数据</div>
                    </div>
                </template>
            </div>
           <!-- <div class="foot-page">
                <van-button class="foot-btn" size="mini">上一页</van-button>
                <div class="foot-total">1/1</div>
                <van-button class="foot-btn" size="mini">下一页</van-button>
           </div> -->
        </div>
        <!-- 同意好友弹框 -->
        <van-popup v-model:show="showAgree" :style="{ borderRadius:'25px' }">
            <div class="pop-content-password">
                <div class="pop-title-password">你确定同意该好友的请求吗?</div>
                <div class="pop-btn-password" style="margin-top: 50px;">
                    <van-button type="default" class="btn-password cancel" @click="changeFun(3)">拒绝</van-button>
                    <van-button type="default" class="btn-password confirm" @click="changeFun(2)">同意</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { friendRequest,friendAudit } from "@/api/path/im.api";
import { showToast } from 'vant';
import { useWalletStore } from "@/stores/modules/walletStore";
const walletStore = useWalletStore();


const type = ref(1);
const showAgree = ref(false);
const list = ref([]);
const activeItem = ref({});
const loading = ref(false);

const getfriendRequest = async () => {
    loading.value = true;
    try {
        const res = await friendRequest({ uuid: walletStore.account, status: type.value });
        list.value = res.data || [];
    } finally {
        loading.value = false;
    }
}
const changeBtn = (item) => {
    showAgree.value = true;
    activeItem.value = item;
}
const changeTab = (val) => {
    type.value = val;
    list.value = [];
    getfriendRequest();
}
//他弹框是否同意
const changeFun = async (val) => {
    const res = await friendAudit({uuid:walletStore.account,status:val,friendUsername:activeItem.value.uuid});
    if(res.code == 200){
        let text = val == 2?'添加成功':'已拒绝'
        showToast(text);
        list.value = [];
        getfriendRequest();
    }
    showAgree.value = false;
}
onMounted(()=>{
    getfriendRequest();
})
</script>

<style lang="less" scoped>
.load-box{
  text-align: center !important;
  margin-top: 50px !important;
}
.container{
    height: 100%;
    display: flex;
    flex-direction: column;
    .content{
        display: flex;
        flex-direction: column;
        height: 100%;
        .tab-box{
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #4F4F4F;
            height: 42px;
            line-height: 42px;
            background-color: #fff;
            .tab-text{
                width: 50%;
                text-align: center;
            }
            .active-color{
                font-weight: 500;
                color: #4765DD;
            }
        }
        .list-box{
            background: #fff;
            margin: 8px 16px;
            border-radius: 12px;
            padding: 0 16px;
            flex: 1;
            overflow: auto;
            .box-item{
                padding: 12px 0 10px;
                border-bottom: 1px solid #F2F2F2;
                display: flex;
                align-items: center;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                color: #8D8D8D;
                .item-img{
                    width: 32px;
                    height: 32px;
                    flex-shrink: 0;
                    margin-right: 12px;
                }
                .item-ri-cont{
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .name{
                        color: #4765DD;
                    }
                    .item-btn{
                        background: #4765DD;
                        border-radius: 6px;
                        padding: 4px 8px;
                        box-sizing: border-box;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #FFFFFF;
                    }
                    .fs12{
                        font-size: 12px;
                    }
                    .fscolor{
                        color: #FF0000;
                    }
                    .fs90{
                        color: #FF9000;
                    }
                }
            }
            .no-border{
                border-bottom: none;
            }
        }
        .list-box::-webkit-scrollbar{
            width: 0;
        }
        .foot-page{
            display: flex;
            align-items: center;
            height: 44px;
            background: #FFFFFF;
            padding: 10px 16px;
            box-sizing: border-box;
            .foot-btn{
                box-sizing: border-box;
                width: 50px;
                border-radius: 4px;
                padding: 4px 6px;
                background: #F2F2F2;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #4F4F4F;
            }
            .foot-total{
                flex: 1;
                text-align: center;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #4F4F4F;
            }
        }
    }
    .pop-content-password{
        padding: 27px 35px 25px 34px;
        .pop-title-password{
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 17px;
            color: #000000;
            text-align: center;
        }
        .pop-input{
            background: #F2F2F2;
            border-radius: 8px;
            height: 40px;
            margin: 21px 0 31px;
        }
        .pop-btn-password{
            display: flex;
            justify-content: center;
            .btn-password{
                width: 83px;
                height: 29px;
                line-height: 29px;
                padding: 5px 0 !important;
                border-radius: 6px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                box-sizing:border-box;
            }
            .cancel{
                margin-right: 17px !important;
                border: 1px solid #D8D8D8;
                color: #000 !important;
            }
            .confirm{
                background: @theme-color1;
                color: #FFF;
                font-weight: 500;
                border: none !important;
            }
        }
    }
    :deep(.van-popup--center) {
        margin: 0 40px !important;
        width: auto !important;
    }
    .no-more{
        margin-top: 178px;
        text-align: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #8D8D8D;
        .no-more-img{
            width: 302px;
            height: 222px;
        }
    }
}
</style>