leromro-mini/pages/chat.vue

<template>
    <view class="chat-container">

        <scroll-view refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onCustomRefresh"
            class="scroll-view-class" @scrolltolower="scrolltolower" scroll-y>
            <view class="chat-main">
                <view v-if="list && list.length > 0">
                    <uni-swipe-action>
                        <uni-swipe-action-item v-for="item in list" :key="item.code" :right-options="[
                            {
                                text: '删除',
                                style: {
                                    backgroundColor: '#ff4949',
                                    width: '80px'
                                }
                            }
                        ]" @click="handleDelete(item)">
                            <template #default>
                                <view class="chat-item" @click="onClick(item)">
                                    <img v-if="item.conversationAvatar" :src="item.conversationAvatar" alt=""
                                        class="chat-img" />
                                    <img src="/static/serverImg/mine/user.png" alt="" class="chat-img" v-else />
                                    <view class="chat-box">
                                        <view class="chat-top">
                                            <text class="chat-name">{{ item.conversationType === '1' ? '系统消息' :
                                                type?item.volunteerName:item.userName }}</text>
                                            <text class="chat-time">{{ handlerData(item.newestMsgTime ||
                                                item.createTime) }}</text>
                                        </view>
                                        <view class="chat-bottom">
                                            <text class="chat-text">
                                                {{ item.msgType === '2' ? '[图片]' : item.newestMsgContent || '[暂无消息]' }}
                                            </text>
                                            <view class="chat-num"
                                                v-if="item.msgUnreadCount && item.msgUnreadCount > 0">
                                                {{ item.msgUnreadCount }}
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </template>
                        </uni-swipe-action-item>
                    </uni-swipe-action>
                </view>
                <view v-else>
                    <NoneView value="您还没有相关消息" />
                </view>
            </view>
        </scroll-view>



        <custom-tab-bar page="chat" />
    </view>

</template>

<script setup>
import CustomTabBar from '@/components/CustomTabBar/index.vue'
import { ref, computed, reactive } from 'vue'
import { getAccountChangeList, getVolunteerChangeList } from "@/api/mine";
import { onShow } from '@dcloudio/uni-app';
import { useDict } from '@/utils/dict.js';
import NoneView from '@/components/NoneView/index.vue'
import dayjs from 'dayjs/esm/index'
import { getList, conversationRemove } from '@/api/conversation.js';

const { } = useDict();
const userType = uni.getStorageSync('userType') //读取本地存储
console.log("TCL: userType", userType)
const list = ref([])


const type = computed(() => {
    return userType === 1
})
const isRefreshing = ref(false)

const loadmoreInfo = ref({
    status: 'loadmore',
    loadingText: '努力加载中...',
    loadmoreText: '点击加载更多~',
    nomoreText: '您没有更多消息～'
})
const pages = ref({
    current: 1,
    pageSize: 10,
    total: 0,
})
const isToday = (date) => {
    return dayjs(date).isSame(dayjs(), 'day');
};

const isYesterday = (date) => {
    return dayjs(date).isSame(dayjs().subtract(1, 'day'), 'day');
};
const handlerData = (dates) => {
    const date = dayjs(dates);
    if (isToday(dates)) {
        return date.format('HH:MM');;
    } else if (isYesterday(dates)) {
        return '昨天';
    } else {
        return date.format('YY/MM/DD'); // 或者其他格式如 'YYYY年MM月DD日'
    }
}

const onClick = (record) => {
    console.log("TCL: onClick -> record", record)
    uni.navigateTo({
        url: `/pages_orderuser/pages/talk/pages/index/index?conversationRecordId=${record.conversationRecordId}`
    });
}
const scrolltolower = () => {
    init('bottom')
};

const onCustomRefresh = () => {
    isRefreshing.value = true;
    pages.value.current = 1;
    init('top')
};
const handleDelete = (item) => {
    uni.showModal({
        title: '提示',
        content: '确定要删除该聊天吗？',
        success: async (res) => {
            if (res.confirm) {
                // 调用删除接口
                try {
                    await conversationRemove({
                        conversationRecordId: item.conversationRecordId,
                        system: userType === 1 ? '1' : '2'
                    }); // 替换为实际接口
                    uni.showToast({ title: '删除成功' });
                    init('top'); // 刷新列表
                } catch (err) {
                    uni.showToast({ title: '删除失败', icon: 'none' });
                }
            }
        }
    });
};

const init = async (type) => {
    try {


        if (type === 'bottom') {
            if (list.value.length < pages.value.total) {
                loadmoreInfo.value.status = 'loading';
                pages.value.current++;
            } else {
                loadmoreInfo.value.status = 'nomore';
                return;
            }
        } else {
            uni.showLoading({
                title: '数据加载中...',
            })
        }

        const res = await getList({
            // pageNum: pages.value.current,
            // pageSize: pages.value.pageSize,
            system: userType === 1 ? '1' : '2'
        });
        list.value = type === 'top' ? res.rows : [...list.value, ...res.rows];
        pages.value.total = res.total;
    } catch (error) {
        console.log('error', error);
        uni.showToast({
            title: error.msg,
            icon: 'error',
        });
    } finally {
        if (type === 'top') {
            isRefreshing.value = false;
            uni.hideLoading();
        }

        if (list.value.length === pages.value.total) {
            loadmoreInfo.value.status = 'nomore';
        }
    }
}

const totalInit = async () => {
    //  try {
    //      const listApi = userType === 1 ? getTotalMoney : getVolunteerTotalMoney;
    //      const res = await listApi({});
    //      data.value.totalEarning = res.data.totalEarning;
    //      data.value.totalExpend = res.data.totalExpend;
    //  } catch (error) {
    //      console.log('error', error);
    //      uni.showToast({
    //          title: error.msg,
    //          icon: 'error',
    //      });
    //  }
}
onShow(() => {
    init('top');
    // totalInit();
})
</script>

<style lang="scss" scoped>
.chat-container {
    height: 100vh;

    .scroll-view-class {
        height: 100vh;
        // background: rgba(245, 245, 245, 1);
    }

    .chat-item {
        padding: 16rpx;
        display: flex;
        border-bottom: 1px solid rgba(238, 238, 238, 1);

        .chat-img {
            width: 96rpx;
            height: 96rpx;
            border-radius: 16rpx;
            margin-right: 12rpx;
        }

        .chat-box {
            // border-bottom: 1px solid rgba(238, 238, 238, 1);
            flex: 1;
            // padding-bottom: 16rpx;

            .chat-top {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .chat-name {
                    font-size: 32rpx;
                    font-weight: 400;
                    line-height: 48rpx;
                    color: rgba(0, 0, 0, 1);

                }

                .chat-time {
                    font-size: 28rpx;
                    font-weight: 400;
                    line-height: 40rpx;
                    color: rgba(75, 85, 99, 1);
                }
            }

            .chat-bottom {
                display: flex;
                justify-content: space-between;

                .chat-text {
                    font-size: 28rpx;
                    font-weight: 400;
                    line-height: 40rpx;
                    color: rgba(102, 102, 102, 1);
                    width: 250px;


                    white-space: nowrap;
                    /* 禁止换行 */
                    overflow: hidden;
                    /* 隐藏溢出内容 */
                    text-overflow: ellipsis;
                    /* 溢出部分显示省略号 */
                }

                .chat-num {
                    background: rgba(239, 68, 68, 1);
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 40rpx;
                    line-height: 40rpx;
                    font-size: 24rpx;
                }
            }


        }

    }
}

.chat-item {
    transition: transform 0.2s ease;
}
</style>