zhishifufei_uniapp/pages/store/goodsList.vue

<template>
	<BaseContainer class="search-page goods-list">
		<NavBar title="商品列表" />
		<view class="form">
			<view class="left flex-center-x">
				<i class="iconfont2 iconsousuo"></i>
				<input v-model.trim="search" confirm-type="search" @confirm="onSearch(search)" placeholder="搜索商品" />
				<i v-show="search" class="iconfont iconguanbi2" @click="search = ''"></i>
			</view>
			<view class="right flex flex-center" @click="onSearch(search)">搜索</view>
		</view>
		<view class="filter-box flex">
			<view class="filter-item flex">综合</view>
			<view class="filter-item flex">
				型号 
				<text class="down"></text>
			</view>
			<view class="filter-item flex">
				价格
				<text class="down" style="top: 22rpx;"></text>
				<text class="up"></text>
			</view>
			<view class="filter-item flex">
				筛选
				<image src="@/static/images/filter.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="list">
		  <navigator hover-class="none" v-for="item in goodsList" :key="item.id" class="item"
		    :url="'/pages/store/detail?id=' + item.id">
		    <view class="image">
		      <image mode="aspectFit" class="img" :src="item.image" alt="" />
		    </view>
		    <view class="text">
		      <view class="title">{{ item.name }}</view>
					<view class="label flex">
						<view v-for="(label, k) in item.label">{{ label }}</view>
					</view>
		      <view class="group">
		        <view class="price">
		          ￥<span class="num">{{ item.price }}</span>
		        </view>
		        <image src="@/static/images/store/cart.png" mode="aspectFill" class="cart-image"></image>
		      </view>
		    </view>
		  </navigator>
		</view>
		<view v-if="goodsList.length && !loading" class="finished">{{ loadTitle }}</view>
		<view v-if="finished && !goodsList.length" class="empty">
		  <image mode="aspectFill" :src="getImgPath('/wap/first/zsff/images/empty.png')" alt="暂无商品" />
		  <view>暂无商品</view>
		</view>
	</BaseContainer>
</template>

<script>
	export default {
		data() {
			return {
				activeFilter: '',
				goodsList: [
					{
						name: '毕淑敏作品精选(名家作品精选)毕 淑敏作品精选',
						label: ['7天无理由退货', '极速发货'],
						price: '359.0',
						count: 100,
					},
					{
						name: '毕淑敏作品精选(名家作品精选)毕 淑敏作品精选',
						label: ['7天无理由退货', '极速发货'],
						price: '359.0',
						count: 200,
					},
					{
						name: '毕淑敏作品精选(名家作品精选)毕 淑敏作品精选',
						label: ['7天无理由退货', '极速发货'],
						price: '359.0',
						count: 300,
					}
				],
			};
		},
	};
</script>

<style lang="scss" scoped>
	.goods-list {
		background: #f6f6f6;
		padding: 0 30rpx 40rpx;
		.form {
			.left {
				background: #fff;
			}
		}
	}
	.filter-box {
		height: 88rpx;
		padding: 0 30rpx;
		align-items: center;
		.filter-item {
			flex: 1;
			color: #333;
			font-size: 28rpx;
			position: relative;
			&:not(:last-child) {
				padding-left: 28rpx;
			}
			&:last-child {
				justify-content: center;
				&:before {
					content: '';
					width: 1rpx;
					height: 31rpx;
					background: #333;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
				}
			}
			image {
				width: 38rpx;
				height: 38rpx;
			}
			text {
				width: 0;
				height: 0;
				border: 10rpx solid;
				border-color: #000 transparent transparent transparent;
				vertical-align: top;
				position: absolute;
				left: 90rpx;
				top: 15rpx;
				&.up {
					border-color: transparent transparent #000 transparent;
					top: -1rpx;
				}
			}
		}
	}
	.list {
		width: 690rpx;
		margin: 0 auto;
	}
	
	.list .item {
	  margin-bottom: 30rpx;
	  padding: 26rpx 24rpx;
		background: #fff;
		display: flex;
	}
	
	.list .image {
		width: 156rpx;
	  height: 184rpx;
		margin-right: 52rpx;
		flex-shrink: 0;;
	}
	
	.list .image .img {
	  width: 100%;
	  height: 100%;
	}
	
	.list .text {
	  display: flex;
	  flex-direction: column;
	  padding-top: 13rpx;
	}
	
	.list .title {
	  overflow: hidden;
	  font-size: 28rpx;
	  line-height: 35rpx;
		height: 70rpx;
	  color: #333;
	  -webkit-line-clamp: 2;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
		margin-bottom: 13rpx;
	}
	
	.list .label view {
		height: 38rpx;
		line-height: 38rpx;
		background: #e1feee;
		padding: 0 15rpx;
		margin-right: 10rpx;
		color: #28ce8f;
		font-size: 20rpx;
		&:nth-child(2) {
			color: #ff5c6b;
			background: #fee1e1;
		}
	}
	
	.list .group {
		margin-top: auto;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0 6rpx;
	}
	
	.list .price {
	  font-size: 32rpx;
	  color: #f8473e;
	  font-weight: 600;
	}
	
	.list .price .num {
	  font-size: 32rpx;
	}
	
	.list .cart-image {
	  width: 52rpx;
		height: 52rpx;
	}
</style>