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

Posted 2023-01-11 liu88

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

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>