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

前言：完成上一篇文章——做出首页点击跳转目录：创建项目文件删除原有文件引用资源文件实现底部导航栏显示页面做出首页显示商品栏一、做出宫格首先

救赎

4389人浏览 · 2022-04-19 17:00:38

救赎 · 2022-04-19 17:00:38 发布

显示商品栏

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

一、做出宫格

每次做一个新东西的时候要找到我们的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>

最后的效果：（仅呈现一部分）
在这里插入图片描述

推荐BGM: *Hello*

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^