<template>
    <page title="消息" ref="pageRef" nav-color="transparent">
        <!-- <view v-if="tableData && tableData.length > 0" class="list"> -->
        <!-- <view v-for="item in tableData" class="cell">

            </view> -->
        <view v-for="(item, index) in tableData" :key="index" class="cell">
            <view class="flex-align">
                <view class="cuIcon-noticefill icon"></view>
                <view class="font4 bold color-1 flex1 marginL10">{{ item.title }}</view>
                <view class="font2 color-3">{{ item.createTime }}</view>
            </view>
            <view class="font4 paddingT8" style="color: #666666">{{ item.content }}</view>
        </view>
        <!-- </view> -->
        <empty v-if="isEmpty" :top="200" />
    </page>
</template>

<script>
    import pageMixin from './../../mixin/page'
    import empty from '@/components/empty'
    import loginMixin from '@/mixin/login'
    import resource from '@/utils/resource'

    export default {
        mixins: [pageMixin, loginMixin],
        components: { empty },
        data() {
            return { resource }
        },
        mounted() {
            this.refresh()
        },
        onPullDownRefresh() {
            this.refresh()
        },
        onReachBottom() {
            this.loadMore()
        },
        methods: {
            init() {
                this.refresh()
            },
            async loadData() {
                const res = await this.$service.base.message(this.pageNum, this.pageSize)
                return res
            }
        }
    }
</script>
<style lang="scss" scoped>
    .cell {
        margin: 20rpx 28rpx 0;
        background: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        .icon {
            font-size: 28rpx;

            background: #fec433;
            color: #000;
            padding: 8rpx;
            border-radius: 50%;
        }
    }
</style>
