shengtai_app/src/pages/message/index.vue

<!--
 * @Author: PoJun
 * @Date: 2023-09-28 10:38:11
 * @LastEditors: XuanJi
 * @LastEditTime: 2024-05-20 23:20:49
 * @Message: 消息, 认证、系统消息
-->
<template>
    <view class="message">
        <uv-empty v-if="dataList.length == 0 || !vuex_userInfo" mode="message" marginTop="200"></uv-empty>
        <view v-else>
            <view
                class="message-item"
                v-for="(item, index) in dataList"
                :key="index"
                @tap="itemClick(item)"
                hover-class="uv-hover-class"
            >
                <view class="uv-flex uv-row-between">
                    <view class="uv-font-30 uv-flex">
                        <view v-if="item.read == 0" class="uv-m-r-10">
                            <uv-badge :isDot="true" type="error"></uv-badge>
                        </view>
                        <view>{{ item.type }}</view>
                    </view>
                    <view class="uv-font-24 uv-info">{{ item.gmtCreate }}</view>
                </view>
                <view class="uv-font-32 uv-weight-700 uv-m-t-20">{{ item.title }}</view>
                <view class="uv-font-28 uv-info uv-m-t-20">{{ item.content }}</view>
            </view>
        </view>
        <!-- 加载更多 -->
        <uv-load-more v-if="dataList.length > 10" :status="status" marginTop="20" line />
        <!-- 返回顶部 -->
        <uv-back-top :scroll-top="scrollTop" :iconStyle="iconStyle" :customStyle="customStyle"></uv-back-top>
    </view>
</template>

<script>
import { getMessages, postReadAll, postReadMessage } from "@/config/http.js";
export default {
    data() {
        return {
            dataList: [],
            status: "loadmore",
            page: {
                pageSize: 10,
                pageNum: 1,
            },
            scrollTop: 0,
            iconStyle: { color: "#fff" },
            customStyle: { background: "#4076F4" },
        };
    },
    onLoad() {
        this.getDataList();
    },
    methods: {
        refreshList() {
            this.page.pageNum = 1;
            this.getDataList();
        },
        itemClick(item) {
            if (item.read == 0) {
                this.setReadState(item.id);
            }
            // uni.navigateTo("/subpkg/home/message-detail" + item.id);
            uni.navigateTo({
                url: `/subpkg/home/message-detail?id=${item.id}`,
            });
        },
        async getDataList() {
            if (!this.vuex_userInfo) {
                return;
            }
            if (this.page.pageNum == 1) {
                this.dataList = [];
            }
            this.status = "loading";
            const data = {
                params: {
                    pageSize: this.page.pageSize,
                    pageNum: this.page.pageNum,
                    query: { search: this.searchKey },
                },
            };
            try {
                const res = await getMessages(data);
                if (this.dataList.length == res.total) {
                    this.status = "nomore";
                }
                this.dataList = this.dataList.concat(res.list);
            } finally {
                uni.stopPullDownRefresh();
            }
        },
        setReadState(id) {
            if (id) {
                const item = this.dataList.find(v => v.id == id);
                this.$set(item, "read", 1);
                postReadMessage([id]);
            } else {
                this.dataList.forEach(v => {
                    this.$set(v, "read", 1);
                });
                postReadAll();
            }
        },
    },
    async onNavigationBarButtonTap() {
        uni.showLoading({ mask: true });
        this.setReadState();
        uni.hideLoading();
    },
    onPullDownRefresh() {
        if (!this.vuex_userInfo) {
            uni.stopPullDownRefresh();
            return;
        }
        this.refreshList();
    },
    onReachBottom() {
        if (this.status == "nomore") {
            return;
        }
        this.status = "loading";
        this.page.pageNum = ++this.page.pageNum;
        this.getDataList();
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    watch: {
        vuex_userInfo: {
            deep: true,
            handler: function () {
                this.getDataList();
            },
        },
    },
};
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-grey;
}
.message {
    padding: 0 25rpx 25rpx;
    &-item {
        padding: 28rpx 20rpx;
        background-color: #fff;
        border-radius: 8px;
        margin-top: 12px;
    }
}
</style>