UNIAPP实战项目笔记6 商品列表和单个商品组件封装

冷不防 2024-04-06 12:53 37阅读 0赞

#### 推荐: ####

1.  顶部滑动导航
2.  swiper
    
     *  名称: IndexSwiper
     *  封装: 是
3.  推荐商品
    
     *  名称: Recommend
     *  封装: 是
4.  卡片
    
     *  名称: card
     *  封装: 是
     *  公用: 是
5.  商品列表 (猜你喜欢的 )
    
     *  名称: CommodityList
     *  封装: 是
     *  调用公共的 CommodityList组件 (CommodityList 要调用 Commodity)

### 商品列表和单个商品组件封装 ###

#### CommodityList组件 ####

*  CommodityList.vue

<template>
            <view class="commodity-list">
                
                
                <Commodity :dataList='commdityList'></Commodity>
            </view>
        </template>
    
        <script>
            import Commodity from './Commodity.vue'
            export default {
        
                data(){
        
                    return{
        
                        commdityList:[ //示例数据
                            {
        
                                id:1,
                                imgUrl:"../../static/logo.png",
                                name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                                pprice:"299",
                                oprice:"659",
                                discount:"5.2"
                            },
                            {
        
                                id:2,
                                imgUrl:"../../static/logo.png",
                                name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                                pprice:"299",
                                oprice:"659",
                                discount:"5.2"
                            },{
        
                                id:3,
                                imgUrl:"../../static/logo.png",
                                name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                                pprice:"299",
                                oprice:"659",
                                discount:"5.2"
                            },
                            {
        
                                id:4,
                                imgUrl:"../../static/logo.png",
                                name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                                pprice:"299",
                                oprice:"659",
                                discount:"5.2"
                            },
                        ]
                    
                    }
                },
                components:{
        
                    Commodity
                }
            }
        </script>
    
        <style>
        </style>

#### Commodity组件 ####

*  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 class="">
                            <text class="pprice">${
        {
        item.pprice}}</text>
                            <text class="oprice">${
        {
        item.oprice}}</text>
                        </view>
                        <text class="discount">{
        {
        item.discount}}折</text>
                    </view>
                </view>
                
            </view>
        </template>
    
        <script>
            /* 接受数据  dataList*/
            export default {
        
                props:{
        
                    dataList:Array
                }
            }
        </script>
    
        <style lang="scss">
        .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: #333;
            word-break: break-all;
            padding: 6rpx 20rpx;
        }
        .oprice{
        
            text-decoration: line-through;
            font-size: 24rpx;
            color: #999;
        }
        .discount{
        
            border-radius: 4rpx;
            border: 1px solid #FF3333;
            padding: 2rpx 10rpx;
            font-size: 20rpx;
            color: #FF3333;
        }
    
        </style>

#### 首页 ####

*  index.vue

<template>
            <view class="content">
                <view class="index">
                    <IndexSwiper></IndexSwiper>
                    <Recommend></Recommend>
                    <Card cardTitle='猜你喜欢'></Card>
                    <CommodityList></CommodityList>
                    <Card cardTitle='商品店铺'></Card>
                    <Card cardTitle='运动户外'></Card>
                </view>
                
                <view class="f-active-color">
                    文字
                </view>
                <view class="iconfont icon-xiaoxi"></view>
                <view class="text-area">
                    <text class="title">{
        {
        title}}</text>
                </view>
            </view>
        </template>
    
        <script>
            import IndexSwiper from '@/components/index/indexSwiper.vue';//引入
            import Recommend from '@/components/index/Recommend.vue';//引入
            import Card from '@/components/common/Card.vue';//引入
            import CommodityList from '@/components/common/CommodityList.vue';//引入
            export default {
        
                data() {
        
                    return {
        
                        title: 'Hello'
                    }
                },
                components:{
        
                    IndexSwiper, //注册
                    Recommend,
                    Card,
                    CommodityList
                    
                },
                onLoad() {
        
    
                },
                methods: {
        
    
                }
            }
        </script>
    
        <style>
            .content {
        
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
    
            .logo {
        
                height: 200rpx;
                width: 200rpx;
                margin-top: 200rpx;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 50rpx;
            }
    
            .text-area {
        
                display: flex;
                justify-content: center;
            }
    
            .title {
        
                font-size: 36rpx;
                color: #8f8f94;
            }
        </style>

##### 实例图片 #####

![在这里插入图片描述][5e33579d32644d32aeaabac2238b9437.png]

[5e33579d32644d32aeaabac2238b9437.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6b2cf432428e4f659f917760ef5960ae.png