jobslink-user-clent/pages/news/newsList.vue

<template>
    <view>
        <view :key="group" v-for="(item,group) in list">
            <m-slide-list :prop="prop" :key="value.id" v-for="(value,index) in item" :value="value" :button="buttonList"
                @remove="click(value,group,index)" @controller-reg="controller.reg"
                @controller-moving="controller.moving" @controller-opened="controller.opened"
                @controller-closed="controller.closed">
                <view class="news-item">
                    <view class="now-message-info" hover-class="uni-item--hover" @click="clickMethod(value)"
                        :style="{width:windowWidth}">
                        <view class="list-right">
                            <view v-if="value[prop.isRead] === 0" class="point"></view>
                            <view class="list-title">{{ value[prop.title] }}</view>
                            <view class="list-detail">{{ value[prop.listDesc] }}</view>
                        </view>
                        <view class="list-right-1" v-if="value[prop.time]">{{ value[prop.time] }}</view>
                    </view>
                    <view style="clear:both"></view>
                </view>
            </m-slide-list>
            <!-- <view class="news-loading">
				加载中...
			</view> -->
        </view>
    </view>
</template>

<script>
    import mSlideList from '../../components/mark-slide-list/mark-slide-list.vue';
    import controller from '../../components/mark-slide-list/controller';
    import {
        mapGetters
    } from 'vuex'

    export default {
        components: {
            mSlideList
        },
        data() {
            return {
                loading: false,
                id: '',
                controller: new controller(),
                buttonList: [{
                    title: '删除',
                    background: '#ff3b32',
                    clickName: 'remove'
                }]
            };
        },
        onLoad({
            type
        }) {
            this.id = type
            uni.setNavigationBarTitle({
                title: this.news.data[type].title
            });
        },
        onPullDownRefresh() {
            this.loading = true
            this.$store.dispatch("newsReload", this.id).then(() => {
                this.loading = false
                uni.stopPullDownRefresh();
            }).catch(() => {
                this.loading = false
                uni.stopPullDownRefresh();
            })
        },
        // onPageScroll(obj) {},
        onReachBottom() {
            if (!this.loading) {
                this.loading = true
                this.$store.dispatch("newsGetNextPage", this.id).then(() => {
                    this.loading = false
                })
            }
        },
        methods: {
            //查看详情
            clickMethod(data) {
                this.news.data[this.id].navigateTo(data, this.$store.dispatch)
            },
            click(value, group, index) {
                this.$store.dispatch('removeNew', {
                    id: value.id,
                    key: this.id,
                    group,
                    index
                })
            }
        },
        computed: {
            ...mapGetters(['news']),
            list() {
                if (this.id) {
                    return this.news.data[this.id].data
                }
            },
            prop() {
                if (this.id) {
                    return this.news.data[this.id].prop
                }
            },
            windowWidth() {
                return uni.getSystemInfoSync().windowWidth + 'px';
            }
        }

    };
</script>

<style lang="scss" scoped>
    .uni-item--hover {
        background-color: #f1f1f1 !important;
    }

    .news-item {
        height: 160rpx;
    }

    .now-message-info {
        position: relative;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
        font-size: 16px;
        clear: both;
        height: 160rpx;
        padding: 0 30rpx;
        // margin-bottom: 20rpx;
        background: #ffffff;
        float: left;
        border-bottom: 1px solid #f2f2f2;

        .icon-image {
            border-radius: 10rpx;
            width: 100rpx;
            height: 100rpx;
            float: left;
        }

        .icon-circle {
            background: #3396fb;
            border-radius: 100%;
            width: 100rpx;
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            color: #ffffff;
            font-weight: bold;
            font-size: 20px;
            float: left;
        }

        .list-right {
            position: relative;
            float: left;
            margin-left: 25rpx;
            margin-right: 30rpx;

            .point {
                position: absolute;
                top: 15rpx;
                left: -25rpx;
                width: 20rpx;
                height: 20rpx;
                background: red;
                border-radius: 50%;
            }

            .list-title {
                width: 350rpx;
                line-height: 1.5;
                overflow: hidden;
                margin-bottom: 10rpx;
                color: #333;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }

            .list-detail {
                width: 350rpx;
                font-size: 14px;
                color: #a9a9a9;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
        }

        .list-right-1 {
            position: absolute;
            right: 30rpx;
            color: #a9a9a9;
            font-size: 24rpx;
        }
    }

    .news-loading {}
</style>