资讯项 -组件封装

1.效果图

2.代码

<template>
    <view class="p-20">
        <!-- 头像 -->
        <view class="flex align-center  justify-between">
            <view class="flex align-center justify-start">
                <image class="border-radius-100" :src="item.userPic" style="height: 65rpx; width: 65rpx;" lazy-load @click.stop="openMy"></image>
                <view class="flex-column justify-between ml-20">
                    <view class="font" style=" line-height: 1.5;" @click.stop="openMy">{{ item.userName }}</view>
                    <view class="font-small text-gray">{{ item.pushDate }}</view>
                </view>
            </view>
            <view
                class="flex align-center justify-center rounded bu-bg-color text-white font animated faster "
                style="width: 90rpx; height: 50rpx;"
                hover-class="rubberBand"
                @click="followOhter"
                v-if="item.hasFollow != true"
            >
                关注
            </view>
        </view>

        <view @click="openInfoDetail">
            <slot>
                <!-- 标题+略所文 -->
                <view class="font">{{ item.infoContent }}</view>
                <!-- 图片 -->
                <image class="rounded w-100" v-show="item.infoPreviewPic" :src="item.infoPreviewPic" style="height: 350rpx;" @click.stop="preViewPic(item.infoPreviewPic)"></image>
            </slot>
        </view>

        <!-- 功能栏 -->
        <view class="flex align-center" v-if="showOperationButton">
            <view class="flex justify-center align-center flex-1" hover-class="select-color-little" @click="infoShare">
                <text class="iconfont icon-fenxiang mr-10"></text>
                <text>{{ item.shareCount ? item.shareCount : '分享' }}</text>
            </view>

            <view class="flex justify-center align-center flex-1" hover-class="select-color-little" @click="clickComment">
                <text class="iconfont icon-pinglun2 mr-10"></text>
                <text>{{ item.commentCount ? item.commentCount : '评论' }}</text>
            </view>

            <view class="flex justify-center align-center flex-1" :class="item.hasLike == true ? 'select-color-little' : ''" @click="infoLike">
                <text class="iconfont icon-dianzan2 mr-10"></text>
                <text>{{ item.likeCount ? item.likeCount : '点赞' }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        item: Object,
        index: Number,
        pageInfo: {
            type: Object,
            default: () => ({
                lastPage: 'info-list',
                currPage: 'info-list'
            })
        },
        showOperationButton: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        //打开个人空间
        openMy: function() {
            console.log('点击头像进入个人空间');
        },
        followOhter: function() {
            console.log('关注这个人哦');
            console.log(this.item);
            console.log(this.item.hasFollow != true);
            //通知父组件
            this.$emit('followOhter', this.index);
        },
        infoLike: function() {
            console.log('点赞');
            this.$emit('infoLike', this.index);
        },
        clickComment: function() {
            if (this.pageInfo.currPage == 'info-detail') {
                //唤醒输入键盘
                this.$emit('clickInfoCommentButton', this.item.infoId);
            } else {
                uni.navigateTo({
                    url: '/pages/info-detail/info-detail?info=' + JSON.stringify(this.item) + '&lastPageInfo=' + JSON.stringify(this.pageInfo) + '&initType=toComment'
                });
            }
        },
        infoShare: function() {
            this.$emit('shareInfo', this.item.infoId);
        },
        openInfoDetail: function() {
            console.log('打开资讯详情');
        },
        //点击图片预览事件
        preViewPic(picUrl) {
            this.$emit('preViewPic', picUrl);
        }
    },
    onLaunch() {
        let page = this.$scope.$getAppWebview();
        console.log(page);
    }
};
</script>

<style></style>