【首页】商品列表和单个商品组件封装

一、【首页】商品列表和单个商品组件封装

1.1 完成效果为：

1.2 组件再次说明

       commodityList.vue组件为：商品列表组件

       commodity.vue      组件为：单个商品组件

1.3 创建文件：在components/common中创建CommodityList.vue和Commodity.vue

1.4 CommodityList.vue组件传入数据给Commodity.vue作为展示。

1.5 CommodityList.vue代码为：

<template>
	<view class='commodity-list'>
		<!--商品列表组件-->
		<commodity :datalist='commoditylist'></commodity>
	</view>
</template>

<script>
	import commodity from './commodity.vue'
	export default{
		data (){
			return {
				commoditylist:[
					{
						id:1,
						imUrl:"../../static/image/commodity1.jpg",
						name:"大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008",
						pprice:"299",
						oprice:"659",
						discount:"5.2"
					},
					{
						id:2,
						imUrl:"../../static/image/commodity2.jpg",
						name:"大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008",
						pprice:"299",
						oprice:"659",
						discount:"5.2"
					},
					{
						id:3,
						imUrl:"../../static/image/commodity3.jpg",
						name:"大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008",
						pprice:"299",
						oprice:"659",
						discount:"5.2"
					},
					{
						id:4,
						imUrl:"../../static/image/commodity4.jpg",
						name:"大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008大姨绒毛大款2020年必须买，不买你就不行了，爆款疯狂GG008",
						pprice:"299",
						oprice:"659",
						discount:"5.2"
					}
				]
			}
		},
		components:{
			commodity
		}
	}
</script>

<style>
</style>

1.5 Commodity.vue代码为：

<template>
	<view class='commodity'>
		<!--单个商品组件-->
		<view class='commodity-item' v-for="(item,index) in datalist" :key="index">
			<image class='commodity-img' src="item.imgUrl" mode=""></image>
			<view class='commodity-content'>
				<text class='commodity-name'>{{item.name}}</text>
				<view>
					<text class='pprice'>￥{{item.pprice}}</text>
					<text class='oprice'>￥{{item.oprice}}</text>
				</view>
				<text class='discount'>{{item.discount}}折</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props:{
			datalist:Array
		}
	}
</script>

<style scoped>
	.commodity{
		display: flex;
		flex-wrap: wrap;
	}
	.commodity-item{
		width: 375rpx;
		padding-bottom: 20rpx;
	}
	.commodity-img{
		width: 100%;
		height: 375rpx;
	}
	.commodity-content{
		text-align: center;
	}
	.commodity-name{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: black;
		word-break: break-all;
		padding: 6rpx 20rpx;
	}
	.oprice{
		text-decoration: line-through;
		font-size: 24rpx;
		color: #999999;
	}
	.discount{
		border-radius: 4rpx;
		border: 1px solid #ff0000;
		padding: 2rpx 10rpx;
		font-size: 20rpx;
		color: #ff0000;
	}
</style>