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

<template>
    <view class="material-wrapper">
        <view class="encyclopedia-list">
            <view class="encyclopedia-item" v-for="item in list" :key="item.productId" @click="onToDetail(item)">
                <view class="cover"><image :src="item.image"></image></view>
                <view class="content">
                    <view class="title" v-text="item.name"></view>
                    <view class="description" v-text="item.discription"></view>
                    <view class="question">
                        <template v-for="(querytion, index) in item.questionList">
                            <view class="item" v-text="querytion" :key="index"></view>
                        </template>
                    </view>
                    <view class="tag-list">
                        <view class="tag">常见问题</view>
                        <view class="tag">效果展示</view>
                        <view class="tag">技术原理</view>
                        <view class="tag">术前术后</view>
                    </view>
                    <view class="foot">
                        <text class="date">{{ item.publishTime | dateFormat }}</text>
                        <text class="view">浏览量：{{ item.pv }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    created() {
        console.log('encyclopedia-list')
    },
    methods: {
        onToDetail(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}/encyclopedia/instrument-${item.productId}.html`
            this.$api.navigateTo(`/pages/h5/activity/activity?link=${link}&title=${item.name}`)
        }
    }
}
</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;
}

.material-wrapper {
    .encyclopedia-item {
        display: flex;
        padding: 32rpx;
        border-top: 1rpx solid #e1e1e1;

        &:first-child {
            border-top: 0;
        }

        .cover {
            width: 220rpx;
            height: 220rpx;
            flex-shrink: 0;
            image {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .content {
            flex: 1;
            margin-left: 24rpx;
            .title {
                @include ellipsis(1);
                font-size: 28rpx;
                color: #333;
                line-height: 40rpx;
                height: 40rpx;
                font-weight: bold;
            }

            .description {
                @include ellipsis(2);
                font-size: 24rpx;
                color: #666666;
                margin-top: 15rpx;
                margin-bottom: 28rpx;
                line-height: 32rpx;
                height: 64rpx;
            }

            .question {
                .item {
                    @include ellipsis(1);
                    font-size: 22rpx;
                    color: #999999;
                    line-height: 30rpx;
                    height: 30rpx;
                    margin-top: 8rpx;
                }
            }

            .tag-list {
                display: flex;
                align-items: center;
                margin-top: 20rpx;
                .tag {
                    height: 40rpx;
                    padding: 0 8rpx;
                    color: #F3B574;
                    font-size: 22rpx;
                    background: #fef6f3;
                    margin-right: 8rpx;
                    line-height: 40rpx;
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }

            .foot {
                display: flex;
                justify-content: space-between;
                color: #999999;
                font-size: 22rpx;
                margin-top: 24rpx;
            }
        }
    }
}
</style>