xiamen-sb-uniapp/pages/tidings/tidings.vue

<template>
    <view>
        <!--        <view class="px3 pt-1">
            <home-swipers :swipers="swipers"></home-swipers>
        </view>-->
        <template v-if="listData.length > 0">
            <view
                class="mx3 my2 p3 bg-color-white"
                v-for="(item, index) in listData"
                :key="index"
                @tap="handleDetail(item)"
                style="border-radius: 16rpx"
            >
                <view class="d-flex j-between">
                    <view class="f-size-32 f-weight-bold main-color-text">{{
                        typeDict[item.detailType]
                    }}</view>
                    <view class="f-size-26 text-color-b">{{
                        item.taskCreateTime
                    }}</view>
                </view>
                <view class="f-size-28 text-color-3 f-weight-4 mt-2 pb-2 border-bottom">
                    <rich-text :nodes="item.content"></rich-text>
                </view>
                <view class="f-size-28 text-color-3 f-weight-4 mt-2" style="text-align: right" v-if="item.status === 1">
                    未读
                </view>
                <view class="f-size-28 text-color-3 f-weight-4 mt-2 " style="text-align: right" v-if="item.status === 2">
                    已读
                </view>
            </view>
            <view class="py3">
                <u-loadmore :status="status" />
            </view>
        </template>
        <template v-else>
            <view class="empty">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>
        </template>
        <u-tabbar
            :list="tabbar"
            :mid-button="true"
            active-color="#0082ff"
        ></u-tabbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 加载更多
            status: 'loadmore',
            swipers: [
                {
                    src:
                        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1277128339,1786094255&fm=26&gp=0.jpg'
                },
                {
                    src:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607335140204&di=24940a7098585bb646fa4a1012f89c74&imgtype=0&src=http%3A%2F%2Fibw.bwnet.com.tw%2Fimage%2Fpool%2F2018%2F12%2F65faa451f9530955ae7e022c66bb5da1.jpg'
                }
            ],
            page: 1,
            limit: 10,
            type: '',
            loadMore: true,
            listData: [],
            typeDict: {},
            tabbar: [
                {
                    iconPath: '/static/tabars/home.png',
                    pagePath: '/pages/home/home',
                    selectedIconPath: '/static/tabars/home_s.png',
                    text: '首页'
                },
                {
                    iconPath: '/static/tabars/order.png',
                    pagePath: '/pages/operate/operate',
                    selectedIconPath: '/static/tabars/order_s.png',
                    text: '功能'
                },
                {
                    iconPath: '/static/tabars/publish.png',
                    pagePath: '/pages/middle/middle',
                    selectedIconPath: '/static/tabars/publish.png',
                    text: '报修',
                    midButton: true
                },
                {
                    iconPath: '/static/tabars/tiding.png',
                    pagePath: '/pages/tidings/tidings',
                    selectedIconPath: '/static/tabars/tiding_s.png',
                    text: '消息'
                },
                {
                    iconPath: '/static/tabars/mine.png',
                    pagePath: '/pages/my/my',
                    selectedIconPath: '/static/tabars/mine_s.png',
                    text: '我的'
                }
            ]
        };
    },
    onPullDownRefresh() {
        // 请求结束取消刷新
        this.page = 1;
        this.loadMore = true;
        this.listData = [];
        this.initData();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.loadMore) {
            this.page++;
            this.initData();
        }
    },
    onShow() {
        this.initData();
    },
    methods: {
        getDict() {
            this.typeDict = this.$DictCache.getLabelByValueMapByType(
                this.$DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE
            );
        },
        // 去详情
        handleDetail(detail) {
            if (detail.status === 1) {
                this.$Http
                    .updateWorkplaceBacklog({ id: detail.id })
                    .then((res) => {
                        console.log('已置为已办');
                    });
            }
            uni.navigateTo({
                url:
                    '/pages/tidings-detail/tidings-detail?detail=' +
                    JSON.stringify(detail)
            });
        },
        initData() {
            const that = this;
            that.status = 'loading';
            this.$Http
                .getWorkplaceBacklogUserPage({
                    pageNum: this.page,
                    pageSize: this.limit,
                    dataScope: {
                        sortBy: 'desc',
                        sortName: 'task_create_time'
                    }
                })
                .then((res) => {
                    that.getDict();
                    const data = res.data.rows;
                    if (data && data.length > 0 && data.length < that.limit) {
                        that.status = 'nomore';
                        that.loadMore = false;
                    } else if (data.length === that.limit) {
                        that.status = 'loadmore';
                    } else {
                        that.status = 'nomore';
                    }
                    // that.listData = [...that.listData, ...data];
                    that.listData = data;
                });
        }
    }
};
</script>

<style>
page {
    background-color: #f4f4f4 !important;
}
</style>