app-govern/pages/message/feedback.vue

<template>
    <view class="message-list">
        <view class="message-list-item" v-for="(item, index) in store.data" :key="index" @click="jump(item)">
            <view class="hide-txt message-list-item-title">{{ item.title }}</view>
            <view class="message-list-item-footer">
                <view class="mr20 message-list-item-footer-status message-list-item-footer-status-over"
                      v-if="item.status === '0'">
                    已解决
                </view>
                <view class="mr20 message-list-item-footer-status message-list-item-footer-status-processing"
                      v-else-if="item.status === '1'">
                    待处理
                </view>
                <view class="mr20 message-list-item-footer-status message-list-item-footer-status-handler"
                      v-else-if="item.status === '2'">
                    处理中
                </view>
                <view class="message-list-item-footer-time"> {{ item.createTime }}</view>
                <uni-badge class="uni-badge-left-margin" :text="item.chatCount"/>
            </view>
        </view>
        <Cn-empty v-if="store.empty"></Cn-empty>
        <uni-load-more v-if="store.data && store.data.length > 0" :status="store.status"></uni-load-more>
    </view>
</template>

<script>
import {queryFeedBackPage} from '../../common/api/feedback'
import list from '../../common/js/list'

export default {
    mixins: [list],
    data() {
        return {
            title: '灿能'
        }
    },
    onShow() {
        this.init()
    },
    methods: {
        init() {
            this.store = this.DataSource('/cs-system-boot/feedback/queryFeedBackPage')
            this.store.reload()
        },
        jump(item) {
            uni.navigateTo({url: '/pages/message/feedbackDetail?id=' + item.id + '&chatCount=' + item.chatCount})
        },
    }
}
</script>

<style lang="scss">
.message-list {
    padding-top: 20rpx;

    .message-list-item {
        padding: 28rpx;
        background: #fff;
        border-bottom: 1rpx solid #ddd;

        &-title {
            font-size: 28rpx;
            color: #3b4144;
        }

        .message-list-item-footer {
            margin-top: 8rpx;
            display: flex;
            align-items: center;

            &-time {
                margin-right: 20rpx;
                flex: 1;
                color: #999;
                font-size: 12px;
            }

            &-status {
                padding: 4rpx 12rpx;
                font-size: 24rpx;
                border-radius: 4rpx;

                &-over {
                    background-color: #f0f9eb;
                    border-color: #e1f3d8;
                    color: #67c23a;
                }

                &-close {
                    background-color: #f4f4f5;
                    border-color: #e9e9eb;
                    color: #909399;
                }

                &-processing {
                    background-color: #fdf6ec;
                    border-color: #faecd8;
                    color: #e6a23c;
                }

                &-handler {
                    background-color: #ecf5ff;
                    border-color: #d9ecff;
                    color: #409eff;
                }
            }
        }
    }
}


/deep/ .uni-list-item {
    background-color: $uni-theme-white !important;
}

.list-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &-status {
        flex: 1;
        color: #999;
        font-size: 24rpx;
    }
}

///deep/ .uni-badge {
//    background-color: unset !important;
//    color: #dd524d !important;
//    font-size: 28rpx !important;
//}
</style>