deming/components/index/video-item/index.vue

<template>
    <view class="video-item" v-if="item" @click="toDetailsPage">
        <image class="head" :src="item.article_pic"></image>
        <view class="title" v-if="!isguanzhu">{{ item.article_title }}</view>
        <view class="jianjie">{{ item.article_content }}</view>
        <view class="user">
            <view class="info">
                <image :src="item.member_avatar"></image>
                <text>{{ item.member_nickname }}</text>
            </view>
            <image src="/static/image/common/4.png" @click.stop="showAction"></image>
			<view class="action" v-if="show == item.article_id">
				<view class="bubble">
					<view @click="articleLike">
						<image src="/static/image/common/5.png" v-if="item.is_like == 0"></image>
						<image src="/static/image/common/8.png" v-else></image>
						<text>点赞</text>
					</view>
					<view @click="articleCollect">
						<image src="/static/image/common/6.png" v-if="item.is_collect == 0"></image>
						<image src="/static/image/common/9.png" v-else></image>
						<text>收藏</text>
					</view>
					<view @click="articleAddShield">
						<image src="/static/image/common/7.png"></image>
						<text>屏蔽用户</text>
					</view>
				</view>
			</view>
			<view class="layer" v-if="show == item.article_id" @click.stop="show=-1"></view>
        </view>
    </view>
</template>
<style lang="scss" scoped>
.video-item{
    margin-top: 20rpx;
    width: 335rpx;
    box-shadow:0 3rpx 7rpx 0 rgba(153, 153, 153, 0.35);
    padding-bottom: 20rpx;
    border-radius: 20rpx;
    overflow: hidden;
    .head{
        width: 100%;
        height: 334rpx;
    }
    .title{
        margin:0 auto;
        margin-top: 20rpx;
        font-size: 22rpx;
        color: #333;
        font-weight: 500;
        line-height: 30rpx;
        width: 300rpx;
        overflow:hidden; 
        text-overflow:ellipsis;
        display:-webkit-box; 
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
    }
    .jianjie{
        margin:0 auto;
        margin-top: 20rpx;
        font-size: 22rpx;
        color: #666;
        line-height: 30rpx;
        width: 300rpx;
        margin-left: 18rpx;
        overflow:hidden; 
        text-overflow:ellipsis;
        display:-webkit-box; 
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
    }
    .user{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin:0 auto;
        margin-top: 20rpx;
        width: 300rpx;
		position: relative;
        .info {
            display: flex;
            align-items: center;
            >image{
                width: 38rpx;
                height: 38rpx;
                border-radius: 50%;

            }
            >text{
                font-size: 20rpx;
                color:#333;
                margin-left: 9rpx;
            }
        }
        >image{
            width: 37rpx;
            height: 8rpx;
        }
		.action {
			z-index: 19;
			position: absolute;
			right: 0rpx;
			bottom: 55rpx;
			// width: 234rpx;
			background: rgba(255,255,255,1);
			box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(35,24,21,0.12);
			border-radius: 6rpx;
			.bubble {
				position: relative;
				background-color: #fff;
				&::after {
					position: absolute;
					right: 10rpx;
					bottom: 0;
					content: '';
					width: 60rpx; 
					height: 40rpx;
					background-color: inherit;
					transform: rotate(45deg);
					margin-top: -10rpx;
					z-index: -1;
					box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(35,24,21,0.12);
				}
				> view {
					padding: 9rpx 12rpx;
					display: flex;
					align-items: center;
					&:not(:last-child) {
						border-bottom: 2rpx #ECECEC solid;
					}
					@mixin image-class($width, $height, $right) {
						width: $width;
						height: $height;
						margin-right: $right;
					}
					> image {
						&:first-child {
							@include image-class($width: 21rpx, $height: 22rpx, $right: 12rpx);
						}
						&:nth-child(2) {
							@include image-class($width: 22rpx, $height: 22rpx, $right: 12rpx);
						}
						&:last-child {
							@include image-class($width: 24rpx, $height: 20rpx, $right: 9rpx);
						}
					}
					> text {
						font-size: 20rpx;
						color: rgba(51,51,51,1);
					}
				}
			}
		}
		.layer {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9;
			background-color: transparent;
		}
    }
}
</style>
<script>
export default {
    name:"index-item",
    data(){
        return {
			show: -1,
        }
    },
	props:["isguanzhu", "item"],
	mounted() {
		// console.log(this.item);
		this.show = -1;
	},
	methods: {
		showAction() {
			this.show = this.show > 0 ? -1 : this.item.article_id;
		},
		articleLike() {
			this.$u.api.articleLike({
				article_id: this.item.article_id,
			}).then(res => {
				if(res.errCode == 0) {
					this.$emit("getArticlelist");
				}
			})
		},
		articleCollect() {
			this.$u.api.articleCollect({
				article_id: this.item.article_id,
			}).then(res => {
				if(res.errCode == 0) {
					this.$emit("getArticlelist");
				}
			})
		},
		articleAddShield() {
			this.$u.api.articleAddShield({
				article_id: this.item.article_id,
				member_id: this.item.member_id,
			}).then(res => {
				if(res.errCode == 0) {
					this.$emit("getArticlelist");
				}
			})
		},
		toDetailsPage() {

		},
	},
}
</script>