caimei-applets-mcare/pages/search/components/article-list.vue

<template>
    <view class="article-wrapper">
        <view class="search-sort">
            <view class="sort">
                <view class="drop-btn" @click="dropFlag = !dropFlag">
                    <text class="text" v-text="showDropText"></text>
                    <text class="iconfont" :class="dropFlag ? 'icon-xiangshang' : 'icon-xiangxia'"></text>
                </view>
                <view class="drop-select" v-show="dropFlag">
                    <template v-for="(item, index) in dropItems">
                        <view
                            class="drop-select-item"
                            :class="{ active: index === dropCurrent }"
                            :key="index"
                            v-text="item.name"
                            @click="onDropItemClick(index, item)"
                        ></view>
                    </template>
                </view>
            </view>
        </view>
        <view class="article-list">
            <view class="article-item" v-for="item in list" :key="item.articleId" @click="onToDetail(item)">
                <view class="cover"><image :src="item.image"></image></view>
                <view class="content">
                    <view class="title" v-text="item.title"></view>
                    <view class="description" v-text="item.intro"></view>
                    <view class="tag">
                        <text class="iconfont icon-biaoqian1"></text>
                        <text v-text="item.labelText"></text>
                    </view>
                    <view class="info">
                        <view class="item author">
                            <text class="iconfont icon-bianji2"></text>
                            <text v-text="item.publisher"></text>
                        </view>
                        <view class="item view">
                            <text class="iconfont icon-liulan"></text>
                            <text v-text="item.pv"></text>
                        </view>
                        <view class="item date">
                            <text class="iconfont icon-shijian2"></text>
                            <text>{{ item.publishDate | dateFormat }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="mask" v-show="dropFlag" @click="dropFlag = false"></view>
    </view>
</template>

<script>
import { debounce } from '@/common/config/common'
const myDebounce = fn => debounce(fn, 200, false)

export default {
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            dropItems: [{ name: '综合排序', status: 1 }, { name: '时间排序', status: 2 }],
            dropFlag: false,
            dropCurrent: 0
        }
    },
    computed: {
        showDropText() {
            return this.dropItems[this.dropCurrent].name
        }
    },
    created() {
        console.log('article-list')
    },
    methods: {
        onDropItemClick(index, dropItems) {
            this.dropCurrent = index
            this.dropFlag = false
            this.$emit('change', dropItems) 
        },

        onToDetail: myDebounce(function(item) {
            let URL_CONFIG = ''
            if (process.env.NODE_ENV === 'development') {
                URL_CONFIG = 'http://zzjtest.gz.aeert.com'
            } else {
                URL_CONFIG = 'https://www.caimei365.com/'
            }
            const link = `${URL_CONFIG}/info/detail-${item.articleId}-1.html`
            this.$api.navigateTo(`/pages/h5/activity/activity?link=${link}&title=${item.title}`)
        })
    }
}
</script>

<style lang="scss" scoped>
/* scss中可以用mixin来扩展 */
@mixin ellipsis($line: 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}

.article-wrapper {
    .mask {
        position: fixed;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        background: transparent;
        z-index: 9;
        left: 0;
        top: 0;
    }

    .search-sort {
        padding: 0 32rpx;
        height: 90rpx;

        .sort {
            position: relative;
            z-index: 10;
            .drop-btn {
                display: flex;
                align-items: center;
                .text {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: 500;
                    line-height: 90rpx;
                }
                .iconfont {
                    font-size: 14rpx;
                    color: #333;
                    margin-left: 20rpx;
                    line-height: 90rpx;
                }
            }
            .drop-select {
                position: absolute;
                background: #fff;
                width: 340rpx;
                left: 0;
                top: 90rpx;
                box-shadow: 0px 6rpx 16rpx 1rpx rgba(0, 0, 0, 0.1);
                .drop-select-item {
                    position: relative;
                    line-height: 90rpx;
                    height: 90rpx;
                    padding-left: 88rpx;
                    font-size: 28rpx;
                    color: #22272e;

                    &:first-child {
                        border-bottom: 1rpx solid #e1e1e1;
                    }

                    &.active {
                        color: #F3B574;

                        &::before {
                            background: #F3B574;
                            border-color: #F3B574;
                        }
                    }

                    &::before,
                    &::after {
                        content: '';
                        display: block;
                        position: absolute;
                        border-radius: 50%;
                        background: #fff;
                        box-sizing: border-box;
                    }

                    &::before {
                        width: 32rpx;
                        height: 32rpx;
                        left: 40rpx;
                        top: 29rpx;
                        border: 1rpx solid #999999;
                    }

                    &::after {
                        width: 14rpx;
                        height: 14rpx;
                        left: 49rpx;
                        top: 38rpx;
                    }
                }
            }
        }
    }

    .article-item {
        display: flex;
        padding: 32rpx;
        border-top: 1rpx solid #e1e1e1;
        .cover {
            width: 220rpx;
            height: 220rpx;
            flex-shrink: 0;
            image {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .content {
            flex: 1;
            margin-left: 24rpx;
            .title {
                @include ellipsis(2);
                font-size: 28rpx;
                color: #22272e;
                line-height: 36rpx;
                height: 72rpx;
            }
            .description {
                @include ellipsis(1);
                font-size: 22rpx;
                color: #666;
                height: 28rpx;
                margin-top: 8rpx;
            }
            .tag {
                font-size: 24rpx;
                color: #999999;
                height: 28rpx;
                margin-top: 34rpx;
                @include ellipsis(1);

                .iconfont {
                    font-size: 24rpx;
                    margin-right: 8rpx;
                }
            }
            .info {
                display: flex;
                height: 28rpx;
                margin-top: 16rpx;
                .item {
                    color: #999999;
                    font-size: 22rpx;
                    margin-right: 32rpx;

                    &.date {
                        margin-right: 0;
                    }

                    .iconfont {
                        font-size: 24rpx;
                        margin-right: 8rpx;
                    }
                }
            }
        }
    }
}
</style>