vue手机商城项目实战（6）-首页商品列表组件实现

本文接：vue手机商城项目实战（5）-首页类型组件实现

一、素材准备

1、从网上下载一些商品图片，我这里准备了6个商品的图片

2、将其解压后存放到assets\\img目录下，以便测试使用

二、实现商品列表组件

1、在views目录下新建Goods.vue，代码如下：

注意：商品详情和添加到购物车暂时不实现，只是写了个方法

<template>
    <div id="goods">
        <div class="goods-item" v-for="(item1,index1) in goodsList" :key="index1">
            <h4>
                {{item1.type}}
            </h4>
            <ul class="clearfix">
                <!-- 商品详情方法暂不实现 -->
                <li v-for="(item2,index2) in item1.products" :key="index2" @click="goodsDetail(item2)">
                    <img :src="item2.img[0]"></img>
                    <span class="price">¥{{item2.price}}</span>
                    <span class="name">{{item2.name}}</span>
                    <!-- 添加购物车方法暂不实现 -->
                    <span class="shop-car" @click.stop="addToCart(item2)">
                        <icon name="cart-plus" scale="1.2"></icon>
                    </span>
                </li>
            </ul>
        </div>
    </div> 
</template>

<script>
    export default {
        data(){
            // 模拟商品数据
            return{
                goodsList:[
                    {
                            "type":"女装",
                            "products":[
                            {"id":1,"name":"气质长裙","price":599,"img":[require("../assets/img/nz1-1.jpg"),require("../assets/img/nz1-2.jpg")],"explain":"春秋装2020年新款大码女装胖mm洋气贵夫人妈妈连衣裙秋冬气质长裙"},
                            {"id":2,"name":"礼服旗袍","price":699,"img":[require("../assets/img/nz2-1.jpg"),require("../assets/img/nz2-2.jpg")],"explain":"春秋年会礼服旗袍改良款婚礼妈妈喜宴装中年婆婆女长袖连衣裙高贵"}
                            ]
                        },
                    {
                            "type":"T恤",
                            "products":[
                            {"id":3,"name":"短袖T恤","price":119,"img":[require("../assets/img/tx1-1.jpg"),require("../assets/img/tx1-2.jpg")]},
                            {"id":4,"name":"情侣装","price":299,"img":[require("../assets/img/tx2-1.jpg"),require("../assets/img/tx2-2.jpg")]}
                            ]
                        },
                    {
                            "type":"鞋子",
                            "products":[
                            {"id":5,"name":"老爹鞋","price":189,"img":[require("../assets/img/xz1-1.jpg"),require("../assets/img/xz1-2.jpg")],"explain":"2020年新款秋季休闲运动鞋小白鞋女鞋子秋冬爆款百搭ins潮老爹鞋"},
                            {"id":6,"name":"运动鞋","price":219,"img":[require("../assets/img/xz2-1.jpg"),require("../assets/img/xz2-2.jpg")]}
                            ]
                    }
                  ]
            }
        }
    }
</script>

<style scoped>
    #goods {
        background-color: #f6f6f6;
    }
    h4 {
        padding: 0 10px;
        line-height: 36px;
        font-size: 14px;
        background-color: #fff;
    }
    h4:before {
        content: "";
        display: inline-block;
        margin-right: 6px;
        width: 4px;
        height: 12px;
        background-color: #e8380d;
    }
    ul {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    li {
        position: relative;
        float: left;
        margin: 0 1px;
        display: flex;
        flex-direction: column;
        width: 49%;
        border-right: 1px solid #ddd;
    }
    .goods-item:last-child {
        margin-bottom: 55px;
    }
    img {
        margin: 10px 0;
        width: 100%;
        height: 100%;
    }
    .price {
        padding-left: 10px;
        font-size: 14px;
        color: #e8380d;
    }
    .name {
        padding-left: 10px;
    }
    .shop-car {
        position: absolute;
        right: 10px;
        bottom: 4px;
        color: #1296db;
        cursor: pointer;
        color: #F06431
    }
    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
    .clearfix {
        zoom: 1;
    }
</style>

2、修改Home.vue，代码如下：

<template>
    <div id="home">
        <!-- 顶部导航栏 -->
        <mt-header fixed title="首页">
            <mt-button icon="search" slot="right" @click="search"></mt-button>
        </mt-header>
        <!-- 由于顶部导航栏固定，所以轮播图要上边距占据其高度 -->
        <div style="height: 40px;"></div>
        <!-- 轮播图 -->
        <Banner></Banner>
        <!-- 类型列表 -->
        <Type></Type>
        <!-- 商品类别 -->
        <Goods></Goods>
    </div>
</template>

<script>
    // 导入轮播图组件
    import Banner from './Banner.vue'
    import Type from './Type.vue'
    import Goods from './Goods.vue'
    export default {
        methods:{
            // 点击搜索按钮，跳转到搜索组件
            search(){
                this.$router.push({name:"Search"});
            }
        },
        // 注册组件
        components:{
            Banner,
            Type,
            Goods
        }
    }
</script>

<style scoped>
</style>

三、测试效果