使用vue做一个“淘宝“项目(显示商品栏)

曼陀罗.feng

已于 2022-05-10 11:47:57 修改

阅读量4k

点赞数 3

分类专栏： vue 文章标签： vue.js vue

于 2022-04-19 17:00:38 首次发布

本文链接：https://blog.csdn.net/weixin_48462447/article/details/124139311

版权

vue 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

显示商品栏

前言：完成上一篇文章——做出首页点击跳转

一、做出宫格

每次做一个新东西的时候要找到我们的Vant 2文档去查询，这里我们用的是——Vant 2文档中的宫格(Gird)——自定义列数，然后我们看一下项目结构，轮播图的下面就是宫格型的商品栏，所以我们要在轮播图代码下面添加宫格代码。
在这里插入图片描述

首先打开之后找到Home.vue页面，找到轮播图，在轮播图组件下面添加宫格，这里展示了两种代码的写法，看哪个顺眼写那个就行（注意第一种一定不要落下空格）
代码截图如下：
在这里插入图片描述
代码如下：

<van-grid :column-num="6">
    <van-grid-item v-for="(chan,index) in homeinfos.channel"
                   :key="index"
                   :icon="chan.iconUrl"
                   :text="chan.name">
    </van-grid-item>
</van-grid>

代码解释截图如下：
在这里插入图片描述
运行结果如下：

二、做出商品专区

下面进行专区的编写，在宫格下面进行
参考vant 2文档——cell单元格、vant 2文档——Card商品卡片
代码截图如下：
在这里插入图片描述
代码如下：（若直接赋值的话先将注释删除）

        <van-cell title="团购专区" value="更多团购商品" is-link></van-cell>
        <van-card
                v-for="(gr,index) in homeinfos.grouponList"
                :key="index"
                :thumb="gr.picUrl"		<!--照片-->
                :title="gr.name"		<!--名称-->
                :desc="gr.brief"		<!--介绍-->
                :price="gr.grouponPrice"	<!--价格-->
                :origin-price="gr.retailPrice"		<!--删除线-->
                style="background-color: #fff"		<!--背景颜色-->
        >
            <template #tags>			<!--标签-->
                <van-tag plain type="primary">{{gr.grouponMember}}人成团</van-tag>
                <van-tag plain type="danger">{{gr.grouponDiscount}}元再减</van-tag>

            </template>
        </van-card>			<!--进行列表渲染  v-for="() in homeinfos.grouponList"-->

运行结果如下：
在这里插入图片描述
我们的商品栏与宫格栏有点突兀，所以我们在前面加一个分割线（用样式写出来的）
代码截图如下：

代码如下：

        <div class="sep"></div>
        <van-cell title="团购专区" value="更多团购商品" is-link></van-cell>
        <van-card
                v-for="(gr,index) in homeinfos.grouponList"
                :key="index"
                :thumb="gr.picUrl"
                :title="gr.name"
                :desc="gr.brief"
                :price="gr.grouponPrice|priceFormat"
                :origin-price="gr.retailPrice"
                style="background-color: #fff"
        >
            <template #tags>
                <van-tag plain type="primary">{{gr.grouponMember}}人成团</van-tag>
                <van-tag plain type="danger">{{gr.grouponDiscount}}元再减</van-tag>

            </template>
        </van-card>

<style scoped>
    .sep{
        height: 23px;
        background-color: #F2F2F2;
    }
</style>

下面要写出小数点之后的数（全局过滤器的方法）
参考文章：js四舍五入保留两位小数的方法
先在src下创建filters文件夹，再创建 custom.js 文件
在文件中编写代码，代码如下：

//价格格式化 priceFormat
let priceFormat= price=>{
    return price.toFixed(2);
}//导出
export {priceFormat}

然后在main.js中进行导入
代码如下：

import * as custom from '@/filters/custom.js';

Object.keys(custom).forEach(key=>{
  Vue.filter(key,custom[key]);
})

截图如下：
在这里插入图片描述
main.js导入完成之后在home.vue页面要进行引用，在price一行加入 |priceFormat 即可截图如下：

运行完成之后效果如下：

这篇文章完成了这四步骤，做完之后我发现，下面的一个商品被盖住了，现在我想让他显示出来
那我们就在最顶端的div中添加样式，代码截图如下：
在这里插入图片描述
在sep样式后面再写一个container样式，代码截图如下：

这样我们就能滑动以显示页面了，最终效果如下：

添加完一个团购专区之后，后面的照猫画虎，这里就不做讲解了，整个Home.vue页面代码如下：

<template>
    <div class="container">
    <div>
        <!--搜索栏-->
        <van-search placeholder="点击前往搜索"></van-search>
        <!--轮播-->
        <van-swipe class="swipe" :autoplay="3000" indicator-color="red">
            <van-swipe-item v-for="(bn,index) in homeinfos.banner" :key="index">
                <!--v-bing指令 :属性名-->
                <img :src="bn.url" alt="" style="height: 230px;">
            </van-swipe-item>
        </van-swipe>
        <!--宫格 channel-->
        <van-grid :column-num="6">
            <van-grid-item v-for="(chan,index) in homeinfos.channel"
                           :key="index"
                           :icon="chan.iconUrl"
                           :text="chan.name">
            </van-grid-item>
        </van-grid>
        <div class="sep"></div><!--分割线-->
        <!--团购专区 Cell 单元格 Card-->
        <div>
        <van-cell title="团购专区" value="更多团购专区" is-link></van-cell>
        <van-card v-for="(gr,index) in homeinfos.grouponList"
                  :key="index"
                  :thumb="gr.picUrl"
                  :title="gr.name"
                  :desc="gr.brief"
                  :price="gr.grouponPrice|priceFormat"
                  :origin-price="gr.retailPrice"
                  style="background-color: #fff"
        >
            <template #tags>
                <van-tag plain type="primary">{{gr.grouponMember}}人成团</van-tag>
                <van-tag plain type="danger">{{gr.grouponDiscount}}元再减</van-tag>

            </template>
        </van-card>
            <div class="sep"></div>
            <!--品牌直供-->
        <div>
            <van-cell title="品牌直供" value="更多品牌" is-link></van-cell>
            <van-grid :column-num="2">
                <van-grid-item v-for="(bd,index) in homeinfos.brandList " :key="index">
                    <!--图片-->
                    <van-image width="140" height="70" :src="bd.picUrl"></van-image>
                    <!--文字-->
                    <div v-text="bd.name"></div>
                </van-grid-item>
            </van-grid>
        </div>

        </div>
        <div class="sep"></div><!--分割线-->
        <!--新品首发-->
        <div>
            <van-cell title="新品首发" value="更多新品首发" is-link></van-cell>
                <van-row>
                    <van-col span="12" v-for="(ng,index) in homeinfos.newGoodsList" :key="index">
                        <!--图，文字-->
                        <van-image :src="ng.picUrl"></van-image>
                        <div v-text="ng.name" style="color: #A78347;text-align: center;font-size: 12px"></div>
                        <div style="color: #A78347;text-align: center;font-size: 12px">￥{{ng.retailPrice}}</div>
                    </van-col>
                </van-row>
        </div>
        <div class="sep"></div><!--分割线-->
        <!--人气推荐-->
        <div>
        <van-cell title="人气推荐" value="更多人气推荐" is-link></van-cell>
        <van-card v-for="(hg,index) in homeinfos.hotGoodsList"
                  :key="index"
                  :thumb="hg.picUrl"
                  :title="hg.name"
                  :desc="hg.brief"
                  :price="hg.retailPrice|priceFormat"
                  :origin-price="hg.counterPrice"
                  style="background-color: #fff"
        >
        </van-card>
        </div>
        <div class="sep"></div><!--分割线-->
        <!--专题精选-->
        <div>
            <van-cell title="专题精选" value="更多专题精选" is-link></van-cell>
            <van-grid :column-num="2">
                <van-grid-item v-for="(ht,index) in homeinfos.topicList" :key="index">
                    <!--图，文字-->
                    <van-image :src="ht.picUrl"></van-image>
                    <div v-text="ht.title"
                         style="color: #A78347;text-align: center;font-size: 15px"></div>
                    <div v-text="ht.subtitle"
                         style="color: #A78347;text-align: center;font-size: 10px"></div>
                </van-grid-item>
            </van-grid>
        </div>


    </div>
    </div>
</template>
<style>
    .swipe{
        line-height: 149px;
        text-align: center;
    }
</style>

<script>
    //2：导入api getHome方法
    import {getHome} from "../api/api";

    export default {
        name: "Home",
        data(){
            return{
                homeinfos:{},
                banner:[
                    {
                        "id": 1,
                        "name": "合作 谁是你的菜",
                        "link": "",
                        "url": "http://yanxuan.nosdn.127.net/65091eebc48899298171c2eb6696fe27.jpg",
                        "position": 1,
                        "content": "合作 谁是你的菜",
                        "enabled": true,
                        "addTime": "2018-02-01 00:00:00",
                        "updateTime": "2018-02-01 00:00:00",
                        "deleted": false
                    },
                    {
                        "id": 2,
                        "name": "活动 美食节",
                        "link": "",
                        "url": "http://yanxuan.nosdn.127.net/bff2e49136fcef1fd829f5036e07f116.jpg",
                        "position": 1,
                        "content": "活动 美食节",
                        "enabled": true,
                        "addTime": "2018-02-01 00:00:00",
                        "updateTime": "2018-02-01 00:00:00",
                        "deleted": false
                    },
                    {
                        "id": 3,
                        "name": "活动 母亲节",
                        "link": "",
                        "url": "http://yanxuan.nosdn.127.net/8e50c65fda145e6dd1bf4fb7ee0fcecc.jpg",
                        "position": 1,
                        "content": "活动 母亲节5",
                        "enabled": true,
                        "addTime": "2018-02-01 00:00:00",
                        "updateTime": "2018-02-01 00:00:00",
                        "deleted": false
                    }
                ]
            }
        },
        //1.声明周期钩子（方法，函数）
        created() {
            console.info("数据初始化之后-异步请求");
            //调用首页api ES6中的保护机制Promise机制
            getHome().then(resp=>{
                console.log(resp);
                //获得homeinfos数据
                this.homeinfos=resp.data.data;
                //输出homeinfos数据
                console.info(this.homeinfos);
            });

        }
    }
</script>

<style scoped>
    .sep{
        height: 23px;
        background-color: #F2F2F2;
    }
    .container{
       margin-bottom: 100px;
    }
</style>