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">
                    <view class="chat-item" v-for="item in list" :key="item.code" @click="onClick(item)">
                        <img src="/static/serverImg/mine/user.png" alt="" class="chat-img" />
                        <view class="chat-box">
                            <view class="chat-top">
                                <text class="chat-name">toutou旗舰店</text>
                                <text class="chat-time">昨天</text>
                            </view>
                            <view class="chat-bottom">
                                <text class="chat-text">
                                    尊敬的会员，您行行行行行行行行行行想尊敬的会员，您行行行行行行行行行行想尊敬的会员，您行行行行行行行行行行想尊敬的会员，您行行行行行行行行行行想
                                </text>
                                <view class="chat-num">
                                    2
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- <up-loadmore style="margin-top: 40rpx;" :status="loadmoreInfo.status"
                     :loadmoreText="loadmoreInfo.loadingText" :loadingText="loadmoreInfo.loadmoreText"
                     :nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore" /> -->
                </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 } 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'
const { } = useDict();
const userType = uni.getStorageSync('userType') //读取本地存储
const list = ref([])

const isRefreshing = ref(false)


const loadmoreInfo = ref({
    status: 'loadmore',
    loadingText: '努力加载中...',
    loadmoreText: '点击加载更多~',
    nomoreText: '您没有更多消息～'
})
const pages = ref({
    current: 1,
    pageSize: 10,
    total: 0,
})
const onClick = (record) => {
	console.log("TCL: onClick -> record", record)
    uni.navigateTo({
        url: `/pages_orderuser/pages/talk/pages/index/index?orderId=${123}`
    });
}
const scrolltolower = () => {
    init('bottom')
};

const onCustomRefresh = () => {
    isRefreshing.value = true;
    pages.value.current = 1;
    init('top')
};

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 listApi = userType === 1 ? getAccountChangeList : getVolunteerChangeList;
        const res = await listApi({
            pageNum: pages.value.current,
            pageSize: pages.value.pageSize,
        });
        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;

        .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: 20px;
                    height: 20px;
                    border-radius: 20px;
                    line-height: 20px;
                }
            }


        }

    }
}
</style>