luban-mall/components/pull-list/pull-list.vue

<template>
	<!-- 套件列表 -->
	<view class="kit-list" v-if="isKit">
		<view class="kit-item" @tap.stop="toDetail(item.id)" v-for="(item,index) in list" :key="index">
			<view class="kit-title">{{item.title}}</view>
			<view class="kit-compose">
				<text>{{item.subtitle}}</text>
			</view>
			<view class="kit-img">
				<image :src="item.src" mode="widthFix"></image>
			</view>
			<view class="compose-list-bg">
				<view class="compose-list flex" v-if="item.series.length>0" :style="{width:item.series.length*270-22+'rpx'}">
					<view class="compose-item" v-for="(item1,index1) in item.series" :key="index1">
						<view class="compose-img">
							<image :src="item1.cover" mode="widthFix"></image>
						</view>
						<view class="compose-title clips1">{{item1.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 商品&文章列表 -->
	<view class="pull-list" :class="isShop?'pull-list-shop':''" v-else>
		<view class="pull-item" :class="isShop?'pull-item-shop':''" v-for="(item,index) in list" :key="index" @tap.stop="toDetail(item.id)">
			<view class="img"><image :src="item.src" mode="widthFix"></image></view>
			<view class="item-bg flex">
				<view class="time" v-if="!isShop">发布时间：{{item.time}}</view>
				<view class="title clips1">{{item.title}}</view>
			</view>
			<view class="collection-sign" v-if="collection == 1" @tap.stop="collectionEv(item.id)">
				<image src="/static/public/icon-collection.png" mode="widthFix"></image>
				<text>已收藏</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'pull-list',
		props:{
			list:{
				type:Array,
				default:()=>{
					return []
				}
			},
			collection:{
				type:Number,
				default: 0
			},
			isShop:{
				type:Boolean,
				default: false
			},
			isKit:{
				type:Boolean,
				default: false
			}
		},
		data(){
			return {
				currentIndex:0, //当前位置
			}
		},
		methods:{
			// 导航选择事件
			chooseEv(index) {
				if(this.currentIndex !== index){
					this.currentIndex = index;
					// 抛出事件
					this.$emit('chooseEv',index)
				}
			},
			// 跳转详情页
			toDetail(id) {
				// 抛出事件
				this.$emit('toDetail',{id})
			},
			//取消收藏
			collectionEv(id){
				// 抛出事件
				this.$emit('collectionEv',{id})
			}
		}
	}
</script>

<style scoped>
	/* 商品&文章列表 */
	.pull-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.pull-item {
		width: 100%;
		height: 450rpx;
		border-radius: 10rpx;
		margin-top: 25rpx;
		overflow: hidden;
		position: relative;
	}
	
	.pull-item .img>image {
		width: 100%;
		min-height: 450rpx;
	}
	
	.pull-item .item-bg {
		flex-direction: column-reverse;
		width: 100%;
		height: 450rpx;
		background-color: rgba(0, 0, 0, .3);
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.pull-item .title {
		padding: 0 30rpx;
		font-size: 30rpx;
		line-height: 1.6;
		color: #FFFFFF;
	}
	
	.pull-item .time {
		padding: 0 30rpx;
		font-size: 24rpx;
		line-height: 1.6;
		color: #c2c2c2;
		margin: 10rpx 0 18rpx;
	}
	
	.collection-sign{
		position: absolute;
		right: 22rpx;
		top: 22rpx;
	}
	.collection-sign>image{
		display: block;
		width: 45rpx;
		height: 41rpx;
		margin: 0 auto;
	}
	.collection-sign>text{
		font-size: 24rpx;
		line-height: 2;
		color: #FFFFFF;
	}
	.pull-list-shop{
		align-items: flex-start;
	}
	.pull-item-shop{
		width: calc(50% - 14rpx);
		height: auto;
	}
	.pull-item-shop .img{
		height: 215rpx;
		overflow: hidden;
	}
	.pull-item-shop .img>image {
		width: 100%;
		min-height: 215rpx;
	}
	.pull-item-shop .item-bg {
		height: auto;
		background-color: #FFFFFF;
		position: static;
	}
	.pull-item-shop .title {
		height: 78rpx;
		padding: 15rpx 20rpx 0;
		margin-bottom: 15rpx;
		font-size: 24rpx;
		line-height: 1.8;
		color: #000;
		-webkit-line-clamp: 2;
	}
	/* 套件列表 */
	.kit-list .kit-item{
		background-color: #FFFFFF;
		margin-top: 30rpx;
		padding: 25rpx 30rpx;
	}
	.kit-list .kit-item:first-child{
		margin-top: 20rpx;
	}
	.kit-item .kit-title{
		font-size: 30rpx;
		line-height: 1.8;
		color: #000000;
		margin-top: 10rpx;
		font-weight: bold;
	}
	.kit-item .kit-compose{
		font-size: 24rpx;
		line-height: 1.8;
		color: #999999;
	}
	.kit-item .kit-img{
		height: 450rpx;
		border-radius: 10rpx;
		margin: 22rpx 0;
		overflow: hidden;
	}
	.kit-item .kit-img image{
		width: 100%;
		min-height: 450rpx;
	}
	.kit-item .compose-list-bg{
		overflow-x: auto;
	}
	.kit-item .compose-list-bg::-webkit-scrollbar{
			width: 0;
			height: 0;
		}
	.kit-item .compose-list{
		width: auto;
		flex-wrap: nowrap;
	}
	.compose-list .compose-item{
		width: 270rpx;
		margin-right: 22rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.compose-list .compose-item:last-child{
		margin-right: 0;
	}
	.compose-list .compose-item .compose-img{
		width: 100%;
		height: 176rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.compose-list .compose-item image{
		width: 100%;
		min-height: 176rpx;
	}
	.compose-list .compose-item .compose-title{
		font-size: 24rpx;
		line-height: 1.8;
		margin-top: 16rpx;
		text-align: center;
	}
</style>