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

目录结构：

commodityList.vue

<template>
        <view class="commodity-list">
                <!-- 商品列表 -->
                <commodity :dataList="commodityList"></commodity>
        </view>
</template>

<script>
        import commodity from './commodity.vue'
        export default {
                components:{
                        commodity
                },
                data(){
                        return {
                                commodityList:[
                                        {
                                                id:1,
                                                img:'../../static/img/commondity.png',
                                                name:'爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice:'299',
                                                oprice:'699',
                                                discount:'5.5'
                                        },
                                        {
                                                id:2,
                                                img:'../../static/img/commondity.png',
                                                name:'爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice:'269',
                                                oprice:'699',
                                                discount:'5.5'
                                        },
                                        {
                                                id:3,
                                                img:'../../static/img/commondity.png',
                                                name:'爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice:'289',
                                                oprice:'688',
                                                discount:'5.5'
                                        }
                                ]
                        }
                }
        }
</script>

<style>
</style>

commodity.vue

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

        </view>
</template>

<script>
        export default{
                props:{
                        dataList:{
                                type: Array
                        }
                }
        }
</script>

<style scoped>
        .commodity{
                display: flex;
                flex-wrap: wrap;
        }
        .commodity-item{
                display: flex;
                flex-direction: column;
                text-align: center;
                justify-content: center;
                align-items: center;
        }
        .commodity-img{
                width: 375rpx;
        }
        .commodity-name{
                 width: 375rpx;
                 text-overflow: -o-ellipsis-lastline;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  line-clamp: 2;
                  -webkit-box-orient: vertical;

        }
        .oprice{
                text-decoration: line-through;
                font-size: 24rpx;
                color: #999999;
        }
        .discount{
                border: 1px solid red;
                color: red;
                width: 150rpx;
                height: 50rpx;
                border-radius: 20rpx;
        }
</style>