deming/pageE/mine/ImageTextCollection.vue

<template>
	<view class="collection">
		<view class="container">
			<view class="item-box" v-for="(item, index) in articleList" :key="index" @click="toDetailsPage(item.article_id)">
				<view class="video-item" v-if="item">
					<image class="head" :src="item.article_pic" mode="scaleToFill" v-if="item.type == 1"></image>
					<view class="header_fist" v-else>
						<view class="backes"></view>
						<image class="head" :src="item.article_pic"></image>
					</view>
					<view class="title u-line-1">{{ item.article_title }}</view>
					<view class="jianjie u-line-1">{{ item.article_content }}</view>
					<view class="user">
						<view class="info">
							<image :src="item.member_avatar"></image>
							<text>{{ item.member_nickname }}</text>
						</view>
						<view @click.stop="delArticle(item.article_id)">
							<u-icon name="trash" color="#333" size="36"></u-icon>
						</view>
						<!-- <image src="/static/image/common/4.png" @click.stop="showAction(item)"></image> -->
						<!-- <view class="action" v-if="show == item.article_id">
							<view class="bubble">
								<view @click.stop="delArticle(item.article_id)">
									<image src="/static/image/common/8.png"></image>
									<text>删除</text>
								</view>
							</view>
						</view> -->
						<view class="layer" v-if="show == item.article_id" @click.stop="show=-1"></view>
					</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" v-if="!articleList.length" color="#000" img-width="200" font-size="30" margin-top="120"></u-empty>
	</view>
</template>
<script>
export default {
	data() {
		return {
			show: -1,
			articleList: [],
		}
	},
	onShow() {
        this.articleCollectList();
	},
	// 下拉刷新
	onPullDownRefresh() {
        this.articleCollectList();
    },
	methods: {
		showAction(item) {
			this.show = this.show > 0 ? -1 : item.article_id;
		},
		articleCollectList() {
			this.$u.api.articleCollectList().then(res => {
				uni.stopPullDownRefresh();
				if(res.errCode == 0) {
					this.articleList = res.data;
				} else {
					this.articleList = [];
				}
			})
		},
		delArticle(id) {
			this.$u.api.articleCollect({ article_id: id }).then(res => {
				if(res.errCode == 0) {
					this.articleCollectList();
				} else {
					this.$u.toast(res.message);
				}
			})
		},
		toDetailsPage(id) {
			 uni.navigateTo({
				url: '/pageB/photo/index?id=' + id
			});
		},
	}
};
</script>
<style lang="scss" scoped>
.collection {
	.container {
		border-top: 1rpx solid #ECECEC;
		padding: 21rpx 30rpx 0;
		display: flex;
		flex-wrap: wrap;
		.item-box {
			&:not(:nth-child(2n)) {
				margin-right: 20rpx;
			}
			.video-item{
				width: 330rpx;
				height: 510rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
				overflow: hidden;
				box-shadow:0 3rpx 7rpx 0 rgba(153, 153, 153, 0.35);
				.head{
					width: 330rpx;
					height: 330rpx !important;
				}
				.title{
					margin:0 auto;
					margin-top: 20rpx;
					font-size: 22rpx;
					color: #333;
					font-weight: 500;
					line-height: 30rpx;
					width: 300rpx;
				}
				.jianjie{
					// height: 60rpx;
					margin:0 auto;
					margin-top: 20rpx;
					font-size: 22rpx;
					color: #666;
					line-height: 30rpx;
					width: 300rpx;
					margin-left: 18rpx;
				}
				.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;
					}
				}
				.header_fist{
					position: relative;
					.backes{
						position: absolute;
						top: 0;
						background: rgba(0,0,0,0.6);
						width: 100%;
						height: 100%;
						color: #fff;
					}
					
				}
			}
		}
	}
}
</style>