wallet_app/src/views/im/detail/chatLog/index.vue

<template>
    <div class="container">
        <div class="content">
            <div class="tab-box">
                <div
                    v-for="(item, i) in tabList"
                    :key="i"
                    class="tab-text"
                    :class="type == i ? 'active-color' : ''"
                    @click="changeTab(i)"
                >
                    {{ item }}
                </div>
            </div>

            <div class="list-box">
                <!-- 加载中 -->
                <van-loading v-if="loading" class="load-box" size="24px">
                    加载中...
                </van-loading>

                <!-- 消息列表 -->
                <div
                    class="box-item"
                    v-for="(item, i) in msgList"
                    :key="i"
                    v-else
                >
                    <van-image
                        class="box-img"
                        round
                        :src="formatAvatarUrl(item)"
                    />
                    <div class="list-cont">
                        <div class="box-name">
                            {{
                                item.sender
                                    ? item.sender.nickname
                                    : item.nickname ||
                                      item.fromUsername ||
                                      '匿名用户'
                            }}
                            <span class="ml12">{{ item.createDate }}</span>
                        </div>

                        <!-- 文本信息 -->
                        <div
                            class="box-content"
                            v-if="item.contentType === MsgType.MSG_TYPE.TEXT"
                        >
                            {{ item.content }}
                        </div>

                        <!-- 图片消息 -->
                        <div
                            class="img-message"
                            v-else-if="
                                item.contentType === MsgType.MSG_TYPE.IMAGE
                            "
                        >
                            <van-image
                                :src="item?.localUrl || IM_PATH + item.url"
                                style="max-width: 120px; border-radius: 8px"
                                @click="previewImage(item)"
                            />
                        </div>

                        <!-- 录音消息 -->
                        <div
                            class="audio-message"
                            v-else-if="
                                item.contentType === MsgType.MSG_TYPE.AUDIO
                            "
                        >
                            <messageAudio
                                :src="item?.localUrl || IM_PATH + item.url"
                            />
                        </div>

                        <!-- 视频消息 -->
                        <video
                            class="video-message"
                            controls
                            v-else-if="
                                item.contentType === MsgType.MSG_TYPE.VIDEO
                            "
                            :src="item?.localUrl || IM_PATH + item.url"
                        ></video>
                    </div>
                </div>

                <!-- 暂无数据 -->
                <template v-if="!loading && msgList && msgList.length === 0">
                    <div class="no-more">
                        <svg-icon class="no-more-img" name="no-more" />
                        <div>暂无数据</div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getMessageApi } from '@/api/path/im.api';
import messageAudio from '@/views/im/components/messageAudio/index.vue';
import { useWebSocketStore } from '@/stores/modules/webSocketStore.js';
import { useWalletStore } from '@/stores/modules/walletStore.js';
import * as MsgType from '@/common/constant/msgType';
import { showImagePreview } from 'vant';

const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
const walletStore = useWalletStore();
const wsStore = useWebSocketStore();

const type = ref(0);
const tabList = ['全部', '文本', '图片', '视频'];
const loading = ref(false); // 👈 新增 loading
const msgList = ref([]);

const contentTypeMap = {
    0: -1,
    1: MsgType.MSG_TYPE.TEXT,
    2: MsgType.MSG_TYPE.IMAGE,
    3: MsgType.MSG_TYPE.VIDEO
};

const getMessage = async () => {
    msgList.value = [];
    loading.value = true; // 👈 请求前显示 loading

    let params = {
        uuid: wsStore.toUserInfo.uuid,
        messageType: wsStore.toUserInfo.type == 'user' ? 1 : 2,
        friendUsername: walletStore.account,
        contentType: contentTypeMap[type.value] ?? ''
    };

    try {
        const res = await getMessageApi(params);
        if (res.code == 200) {
            msgList.value = res.data || [];
        }
    } catch (error) {
        console.error(error);
    } finally {
        loading.value = false; // 👈 请求结束隐藏 loading
    }
};

const changeTab = i => {
    type.value = i;
    getMessage();
};

const formatAvatarUrl = item => {
    const url = item?.sender?.avatar || item?.fromAvatar || '';
    if (/^https?:\/\//.test(url)) {
        return url;
    }
    return IM_PATH + url;
};

// 预览图片
const previewImage = item => {
    const imageList = msgList.value
        .filter(m => m.contentType === MsgType.MSG_TYPE.IMAGE)
        .map(m => m.localUrl || IM_PATH + m.url);

    const index = imageList.findIndex(
        url => url === (item.localUrl || IM_PATH + item.url)
    );

    showImagePreview({
        images: imageList,
        startPosition: index
    });
};

onMounted(() => {
    getMessage();
});
</script>

<style lang="less" scoped>
.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: 25%;
                text-align: center;
            }
            .active-color {
                font-weight: 500;
                color: #4765dd;
            }
        }
        .list-box {
            margin: 16px;
            flex: 1;
            overflow: auto;
            .load-box{
                text-align: center;
            }
            .box-item {
                display: flex;
                margin-bottom: 16px;
                font-family:
                    PingFang SC,
                    PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #8d8d8d;
                .list-cont {
                    font-family:
                        PingFang SC,
                        PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #8d8d8d;
                    max-width: 70%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                }
                .box-img {
                    width: 44px;
                    height: 44px;
                    margin-right: 12px;
                    flex-shrink: 0;
                }
                .box-name {
                    margin-bottom: 8px;
                    .ml12 {
                        margin-left: 12px;
                    }
                }
                .business-card {
                    width: 199px;
                    height: 93px;
                    background: #ffffff;
                    border-radius: 10px;
                    margin-top: 8px;
                    padding: 10px;
                    box-sizing: border-box;
                    .business-card-cont {
                        display: flex;
                        align-items: center;
                        font-family:
                            PingFang SC,
                            PingFang SC;
                        font-weight: 400;
                        font-size: 15px;
                        color: #000000;
                    }
                    .list-img {
                        width: 44px;
                        height: 44px;
                        flex-shrink: 0;
                        margin-right: 12px;
                    }
                    .line {
                        height: 1px;
                        background: #f2f2f2;
                        margin: 10px 0 6px;
                    }
                    .business-card-text {
                        font-family:
                            PingFang SC,
                            PingFang SC;
                        font-weight: 400;
                        font-size: 10px;
                        color: #8d8d8d;
                    }
                }
                .box-content {
                    background: #ffffff;
                    color: #000;
                    border-radius: 10px;
                    margin-top: 8px;
                    padding: 8px 17px;
                    word-break: break-word;
                    white-space: pre-wrap;
                    max-width: 100%;
                    font-family:
                        PingFang SC,
                        PingFang SC;
                    font-weight: 400;
                    font-size: 15px;
                }
                .img-message {
                    margin-top: 8px;
                }
                .video-message {
                    // margin-top: 8px;
                    // width: 200px;
                    height: 200px;
                }
            }
            .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;
                }
            }
        }
        .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;
            }
        }
    }
}
</style>