2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?

最新推荐文章于 2023-09-21 15:10:05 发布

浅浅一笑^*^

最新推荐文章于 2023-09-21 15:10:05 发布

阅读量2.1k

点赞数

分类专栏： vue路由传参 vue全家桶底部导航条的切换文章标签： vue

本文链接：https://blog.csdn.net/weixin_46409887/article/details/109745616

版权

vue路由传参同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue全家桶

2 篇文章 0 订阅

订阅专栏

底部导航条的切换

2 篇文章 0 订阅

订阅专栏

总结:之前一直未写过同时实现跳转当前页面和跳转新页面的项目,要么是当前，要么是新页面,今天更新一个两个同时实现的项目。
：相信很多人都遇到过router-link通过to跳转页面有时候会不显示内容的bug。

上传不了完整效果图视频.请见谅哈.

直接上代码:（完整代码）
效果图:（实现效果可直接复制粘贴）

主页面：
在这里插入图片描述

导航条：超级周末页面

在这里插入图片描述

购物车页面:

在这里插入图片描述

大额券页面:

在这里插入图片描述

其它我就省略了…

功能描述:
1.仿美团导航切换功能
2.淘宝购物车功能，加入购物车，加购功能,
3.轮播图效果
4.循环遍历路由导航功能，通过id跳转

1.app.vue

<template>
  <div id="app">
    <!-- <helloworld></helloworld> -->
    <router-view></router-view>
  </div>
</template>

<script>
import helloworld from './components/HelloWorld'
export default {
  name: 'App',
  components: {
    helloworld
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
body {
  background-color: #ccc;
}
.sp2 {
  float: left;
  height: 2rem;
  line-height: 2rem;
  padding-left: 5%;
  font-size: 23px;
}
.hcc {
  display: inline-block;
  font-size: 1rem;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
</style>

2.index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>nvue</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2199259_fejd027pf36.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3.router下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import addlist from '@/components/addlist'
import qiehuan from '@/components/qiehuan'
import top from '@/components/top'
import news from '@/components/news'
import Large from '@/components/Large'
import Favorite from '@/components/Favorite'
import Hotevents from '@/components/Hotevents'
import Novice from '@/components/Novice'
import goshop from '@/components/goshop'
import More from '@/components/More'
import BaseListb from '@/components/BaseListb'
import payment from '@/components/payment'




Vue.use(Router)//全局路由

export default new Router({
  routes: [
    {path: '/',component: HelloWorld,redirect:'/HelloWorld/Guess'},
    {path: '/top',component: top},
    {path: '/news',component: news},
    {path: '/Large',component: Large},
    {path: '/Favorite',component: Favorite},
    {path: '/Novice',component: Novice},
    {path: '/Hotevents',component: Hotevents},
    {path: '/gohshop/:pid',component: goshop,name:'goshop'},
    {path: '/More/:ipid',component: More,name:'More'},
    {path: '/BaseListb',component: BaseListb,name:'BaseListb'},
    {path: '/payment',component:payment,name:'payment'},

    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      redirect:'/HelloWorld/Guess', //重定向:默认页面//这个是关键哦
      component: resolve => require(['@/components/HelloWorld'], resolve),
      children: [
        {//a
          path: 'Guess',
          component: resolve => require(['@/page/Guess'], resolve),//路由懒加载
        },
        {//b
          path: 'weekend',
          component: resolve => require(['@/page/weekend'], resolve),
        },
        {//c
          path: 'Special',
          component: resolve => require(['@/page/Special'], resolve),
        },
        {//d
          path: 'Goodshop',
          component: resolve => require(['@/page/Goodshop'], resolve),
        },
      ]
    },
    {path: '/*',component: HelloWorld},//通用符号
 
  ],
  mode:"history"

})

4.main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'


Vue.use(VueAwesomeSwiper);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({//根实例
  el: '#app',
  router,
  store,//注册
  components: { App },
  template: '<App/>'
})

5.helloworld.vue

<template>
  <div class="hello">
    <!---------------top ------------------>
    <top :flag="true">
      <i class="iconfont icon-shouyeshouye sp2"></i>
      <h3 class="hcc">我的网站</h3>
    </top>
    <!-- ----------center-------------- -->
    <!-- swiper -->
    <div class="swp">
      <Swiper :swiperImgs="bannerlist"></Swiper>
    </div>
    <!-- 导航条 -->
    <div class="fl-div">
      <ul class="uls">
        <router-link tag="li" to="/news">
          <span></span><span>今日更新</span>
        </router-link>
        <router-link tag="li" to="/Large">
          <span></span><span>大额券</span>
        </router-link>
        <router-link tag="li" to="/Favorite">
          <span></span><span>收藏夹</span>
        </router-link>
        <router-link tag="li" to="/Hotevents">
          <span></span><span>热门活动</span>
        </router-link>
        <router-link tag="li" to="/Novice">
          <span></span><span>新手上路</span>
        </router-link>
      </ul>
      <slot></slot>
    </div>
    <!-- ----------------bottom --------------------->
    <div class="h_b">
      <ul class="ull">
        <!-- 遍历导航 -->
        <!-- <router-link tag="li" :to="{name:'qiehuan',params:{id:item.id}}" active-class="active" v-for="(item,index) of ary" :key="index">
          {{item.name}}
        </router-link> -->
        <router-link to="/HelloWorld/Guess" tag="li">
          <div class="children">猜你喜欢</div>
        </router-link>
        <router-link to="/HelloWorld/weekend" tag="li">
          <div class="children">超级周末</div>
        </router-link>
        <router-link to="/HelloWorld/Special" tag="li">
          <div class="children">今日特价</div>
        </router-link>
        <router-link to="/HelloWorld/Goodshop" tag="li">
          <div class="children">发现好店</div>
        </router-link>
      </ul>
      <router-view></router-view>
    </div>

    <!--------------------jieshu  --------------------->
  </div>
</template>

<script>
import top from './top'//头部
import Swiper from '../base/Swiper'//轮播
// 因为用变量导出，所以引入的时候必须用对象来引入{导出的}地址
import { getBanner, getHotList } from '../api/index'
//引入cookie查找
import Cookies from 'js-cookie'
import Guess from '../page/Guess'
export default {
  name: 'HelloWorld',
  data () {
    return {
      bannerlist: [],//接收数据
    }
  },
  components: {
    top: top,
    Swiper, Guess
  },
  created () {
    this.getb();
  },
  methods: {
    clickltem: function (path) {
      this.$router.push(path);
    },
    getb () {
      return getBanner().then((res) => {
        this.bannerlist = res.banner;
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
  width: 100%;
  //swiper
  .swp {
    width: 100%;
    margin: 2.1rem 0 0 0;
    font-size: 0.1rem;
  }
  //导航条一
  .fl-div {
    margin-top: 0.1rem;
    ul {
      display: flex;
      display: -webkit-flex;
      background-color: white;
      height: 6rem;
      li {
        width: 25%;

        span {
          display: block;
          font-size: 12px;
        }
        span:nth-of-type(1) {
          height: 4rem;
          line-height: 4rem;
          background-color: #ccc;
          margin: 0.2rem;
          border-radius: 1rem;
        }
        span:nth-of-type(2) {
          height: 1rem;
          line-height: 1rem;
          text-align: center;
        }
      }
    }
    .router-link-exact-active {
      color: #ff5700;
    }
  }
  //导航条二
  .h_b {
    .ull {
      border-top: 0.01rem solid #000;
      list-style-type: none;
      padding: 0;
      left: 0;
      height: 44px;
      line-height: 44px;
      display: flex;
      -webkit-display: flex;
      width: 100%;
      background-color: white;
      li {
        flex: 1;
        font-size: 0.7rem;
        font-weight: 600;
        .children{
        border-bottom:.01rem solid #ccc;
       } 
      }
     
      .lis {
        border: 0.01rem solid orange;
      }
      .router-link-exact-active {
      color: red;
     } 
    }
   
  }
  //jieshu
}
</style>

6.goshop.vue

<template>
  <div class="goshop">
    <!----------------- top ----------->
    <top :flag="true" class="cc">
      <i class="iconfont icon-fanhui sp2" @click="golist"></i>
    </top>
    <!------------ center ------------->
    <div class="g_c">
      <p class="p_top"><img :src="booklist.image" :alt="booklist.image"></p>
      <!-- 女神价 -->
      <div class="uls mc">
        <p class="p1">女神价</p>
        <p class="p2"><span class="s1">{{booklist.price|sumA| sumB('￥')}}</span><span class="s2">价格{{booklist.prices| sumB('￥')}}</span></p>
        <div class="fl-p3">
          <p>淘金币可抵4.4元起</p>
          <p>查看&gt;</p>
        </div>
        <p class="p4">{{booklist.fo}}</p>
        <div class="ul_p">
          <p><i class="iconfont icon-shoucang"></i><span>推荐</span></p>
          <p><i class="iconfont icon-qicheqianlian-"></i><span>帮我选</span></p>
          <p><i class="iconfont icon-42"></i><span>分享</span></p>
        </div>
      </div>
      <div class="uls_1 mc">
        <!-- 规格 -->
        <div class="dd">
          <p class="p1"><span>选择</span><span>规格分类/大/中/小</span><span class="ct">&gt;</span></p>
          <!-- 图片 -->
          <div class="p2">
            <div class="p_le"></div>
            <div class="p_tu">
              <img :src="booklist.image" :alt="booklist.image" class="tu">
              <img :src="booklist.image" :alt="booklist.image" class="tu">
              <img :src="booklist.image" :alt="booklist.image" class="tu">
              <img :src="booklist.image" :alt="booklist.image" class="tu">
            </div>
            <div class="lei_xing">共6种款式类型可选</div>
          </div>
        </div>
        <!-- 发货 -->
        <div class="dd tt">
          <p class="p1">
            <span>发货</span><span>江苏南通 |快递:快递包邮</span><span class="ct">月销{{booklist.price}}&gt;</span>
          </p>
          <div class="dt">
            <div class="t1"></div>
            <div class="t2">配送至: 北京 良乡 拱辰</div>
          </div>
        </div>
        <div class="dd">
          <p class="p1"><span>保障</span><span>付款后48小时内发货 ' 15天退货</span><span class="ct">&gt;</span></p>
        </div>
        <div class="dd">
          <p class="p1"><span>参数</span><span>品牌 材质...</span><span class="ct">&gt;</span></p>
        </div>

      </div>
      <div class="uls_2 mc">
        <p class="l1"><span>宝贝评价(196)</span><span>查看全部&gt;</span></p>
        <p class="moxing l2">
          <span>质量好({{booklist.price}})</span>
          <span>材质好({{booklist.prices}})</span>
          <span>样式好看({{booklist.price}})</span>
          <span></span>
        </p>
        <!-- 头像 -->
        <div class="tou_xiang">
          <div class="tou_left"><img :src="booklist.image" :alt="booklist.image"></div>
          <div class="tou_right">
            <p>t**5</p>
            <p>11天前</p>
          </div>
        </div>
        <p class="ping_jia">图案很好看</p>
        <!-- 头像 -->
        <div class="tou_xiang">
          <div class="tou_left"><img :src="booklist.image" :alt="booklist.image"></div>
          <div class="tou_right">
            <p>t**5</p>
            <p>19天前</p>
          </div>
        </div>
        <p class="ping_jia br">收到后就打开看看,质量很好，非常喜欢,还有再来买。</p>
        <!-- 买家秀 -->
        <div class="mai_jia moxing">
          <p>买家秀({{booklist.price}})</p>
          <p>查看全部&gt;</p>
        </div>
        <!-- 买家图片 -->
        <div class="moxing tu_pian">
          <img :src="booklist.image" :alt="booklist.image">
          <img :src="booklist.image" :alt="booklist.image">
          <img :src="booklist.image" :alt="booklist.image">
          <img :src="booklist.image" :alt="booklist.image">
        </div>
        <!-- 问大家 -->
        <div class="mai_jia moxing">
          <p>问大家</p>
          <p>查看全部&gt;</p>
        </div>
        <!-- 问大家评价 -->
        <div class="moxing ping_jia col">
          <p><span>问</span>质量会不会很差</p>
          <p>2个回答</p>
        </div>
        <div class="moxing ping_jia col">
          <p><span>问</span>会很亮吗?</p>
          <p>2个回答</p>
        </div>
      </div>
      <div class="uls_3 mc">
        <!-- 家具无忧 -->
        <div class="u3_top moxing">
          <div class="tou_left"><img :src="booklist.image" :alt="booklist.image"></div>
          <div class="tou_center">
            <p>时尚家居 品质无忧</p>
            <p><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i></p>
          </div>
          <div class="tou_right">
            <p>宝贝描述4.8<span class="ct">平</span></p>
            <p>卖家服务4.8<span class="ct">平</span></p>
            <p>物流服务4.8<span class="ct">平</span></p>
          </div>
        </div>
        <!-- 逛逛宝贝 -->
        <div class="u3_center moxing">
          <p><span>进店逛逛</span> </p>
          <p><span>全部宝贝</span></p>
        </div>
        <!-- 店铺推荐 -->
        <div class="u3_bottom">
          <div class="tp moxing">
            <p>店铺推荐</p>
            <p>查看全部&gt;</p>
          </div>
          <!-- 推荐同款 -->
          <ul class="u3_uls">
            <li v-for="(item,index) of getlist" :key="index">
              <p class="p1"><img :src="item.image" :alt="item.image"></p>
              <p class="p2">{{item.fo}}</p>
              <p class="p3">{{item.price|sumA| sumB('￥')}}</p>
            </li>
          </ul>

        </div>
      </div>
      <!-- center-bootom -->
    </div>
    <!------------ bottom ----------->
    <div class="a_bottom">
     <button class="btn btn1" @click="addshop(booklist.index)">加入购物车</button>
      <router-link to="/More/123" tag="button" class="btn btn2">
         立即购买
     </router-link>
     <router-link to="/">
       <i class="iconfont icon-kefu1 c1"><h6>客服</h6></i> 
     </router-link>
     <!-- 路由传参当无法显示页面时，必须传个参数名才可以显示 -->
      <router-link to="/More/123">
       <i class="iconfont icon-qicheqianlian- c2">    
         <p class="toying" v-show="flag">1</p>
         <h6>购物车</h6>
      </i> 
     </router-link>
     <slot></slot>
   </div>
    <!----------- jieshu ------->
  </div>
</template>

<script>
import top from '../components/top'
import { getHotList } from '../api/index.js'
import Cookies from 'js-cookie'
//js-cookie可以存数据,也可删除数据
export default {
  name: 'goshop',
  data () {
    return {
      booklist: [],//存数据1
      getlist: [],//存数据2
      flag: false//默认false
    }
  },
  filters: {
    sumA: function (value) {
      value = Number(value);
      return value.toFixed(2);
    },
    sumB: function (price, char) {
      return char + price
    }
  },
  created () {//初始之后
    this.getb();
    this.geth();//获取当前数据
  },
  methods: {//自定义方法
    golist () {//返回上一页
      this.$router.push('/HelloWorld');
    },
    getb () {
      return getHotList().then((res) => {
        this.booklist = res.hotlist[this.$route.params.pid];
        console.log(this.booklist)
      })
    },
    geth () {
      return getHotList().then((res) => {
        this.getlist = res.hotlist;
        console.log(this.getlist)
      })
    },
     //购物车用cookie获取数据，要下载npm install  js-cookie
     addshop(pid){//购物车的定义方法
        this.flag = true;
         //定义一个变量
        let shoplist=Cookies.get('shoplist');//get获取到这个方法
        let ary={};//定义对象
        if(shoplist){
            ary=JSON.parse(shoplist);//ary获取买的东西=转字符串对象
            console.log(ary);
           if(ary[pid]){//对象包括数字就成了{""}
               ary[pid]+=1;//买过了，又买了
           }else{
               ary[pid]=1;//买过了，这是第一次买
           }
        }else{//没有买
         ary[pid]=1;//当前是数组转字符串[括起来]
        }
      Cookies.set('shoplist',JSON.stringify(ary));
     }
  },
  components: {
    top
  }
}
</script>

<style scoped lang="less">
.goshop {
  width: 100%;
  .iconfint {
    color: white;
  }
  .cc {
    background-color: rgba(126, 122, 122, 0.7);
    color: whitesmoke;
  }
  .g_c {
    margin-top: 2.3rem;
    .moxing {
      display: -webkit-flex;
      display: flex;
      justify-content: space-between;
    }
    .p_top {
      height: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    //以下是公共样式mc.ct.moxing
    .mc {
      margin: 0.3rem;
      padding: 0.4rem;
      background-color: white;
      border-radius: 0.6rem;
    }
    .ct {
      color: #ccc;
    }
    //以上是公共样式
    .uls {
      .p1 {
        width: 100%;
        text-align: left;
        font-size: 0.7rem;
        color: tomato;
      }
      .p2 {
        width: 100%;
        text-align: left;
        margin-top: 0.2rem;
        .s1 {
          font-size: 1.2rem;
          color: tomato;
        }
        .s2 {
          text-decoration: line-through;
          padding-left: 0.3rem;
          font-size: 0.7rem;
        }
      }
      .fl-p3 {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
        color: tomato;
        margin-top: 0.2rem;
        p:nth-of-type(1) {
          background-color: rgba(224, 15, 15, 0.2);
          padding: 0.1rem;
          border-radius: 2%;
        }
      }

      .p4 {
        margin-top: 0.2rem;
        width: 100%;
        text-align: left;
        font-size: 0.9rem;
        font-weight: bold;
      }
      .ul_p {
        color: #ccc;
        margin-top: 0.3rem;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        p:nth-of-type(1),
        p:nth-of-type(2),
        p:nth-of-type(3) {
          width: 33.33333%;
          text-align: center;
          span {
            font-size: 0.8rem;
            padding-left: 0.2rem;
          }
        }
      }
    }
    .uls_1 {
      .dd {
        margin-top: 0.3rem;
        .p1 {
          width: 100%;
          display: -webkit-flex;
          display: flex;
          justify-content: space-between;
          font-size: 0.7rem;
          span:nth-of-type(1) {
            width: 12%;
            color: #ccc;
            text-align: left;
          }
          span:nth-of-type(2) {
            width: 68%;
            text-align: left;
          }
          span:nth-of-type(3) {
            width: 20%;
            text-align: right;
          }
        }
        .p2 {
          margin-top: 0.2rem;
          display: flex;
          display: -webkit-flex;
          justify-content: space-between;
          .p_le {
            width: 10%;
          }
          .p_tu {
            .tu {
              display: inline-block;
              width: 2rem;
              height: 2rem;
              line-height: 2rem;
            }
          }
          .lei_xing {
            width: 40%;
            height: 2rem;
            line-height: 2rem;
            font-size: 0.7rem;
            border-radius: 0.5rem;
            background-color: rgba(184, 176, 176, 0.192);
          }
        }
      }
      .tt {
        .dt {
          margin-top: 0.2rem;
          width: 100%;
          display: -webkit-flex;
          display: flex;
          justify-content: space-between;
          .t1 {
            width: 13%;
          }
          .t2 {
            width: 87%;
            text-align: left;
            font-size: 0.7rem;
            color: #ccc;
          }
        }
      }
    }
    .uls_2 {
      .l1 {
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        span:nth-of-type(1) {
          font-size: 0.9rem;
          font-weight: bold;
        }
        span:nth-of-type(2) {
          font-size: 0.7rem;
          color: tomato;
        }
      }
      .l2 {
        margin-top: 0.6rem;
        span {
          width: 25%;
          font-size: 0.5rem;
        }
        span:nth-of-type(1),
        span:nth-of-type(2),
        span:nth-of-type(3) {
          display: inline-block;
          background-color: thistle;
          margin-right: 0.1rem;
          text-align: center;
        }
      }
      .tou_xiang {
        margin-top: 0.6rem;
        display: -webkit-flex;
        display: flex;
        flex: 1;
        .tou_left {
          width: 10%;
          img {
            // display:block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .tou_right {
          width: 80%;
          p {
            width: 100%;
            padding-left: 0.3rem;
          }
          p:nth-of-type(1) {
            width: 100%;
            text-align: left;
          }
          p:nth-of-type(2) {
            margin-top: 0;
            text-align: left;
            font-size: 0.6rem;
            color: #ccc;
          }
        }
      }
      .ping_jia {
        width: 100%;
        text-align: left;
        font-size: 0.6rem;
        margin-top: 0.6rem;
      }
      .br {
        padding-bottom: 1rem;
        border-bottom: 0.01rem solid #ccc;
      }
      .mai_jia {
        padding-top: 1rem;
        p:nth-of-type(1) {
          font-size: 0.9rem;
          font-weight: bold;
        }
        p:nth-of-type(2) {
          font-size: 0.7rem;
          color: tomato;
        }
      }
      .tu_pian {
        padding-bottom: 1rem;
        border-bottom: 0.01rem solid #ccc;
        img {
          margin: 1rem 0.1rem 0 0.1rem;
          width: 24%;
          border-radius: 0.5rem;
        }
      }
      .col {
        p:nth-of-type(1) {
          span:nth-of-type(1) {
            background-color: tomato;
            color: white;
            padding: 0.1rem;
            margin-right: 0.1rem;
          }
        }
        p:nth-of-type(2) {
          color: #ccc;
        }
      }
    }
    .uls_3 {
      .u3_top {
        .tou_left {
          width: 15%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
          }
        }
        .tou_center {
          p:nth-of-type(1) {
            font-size: 0.9rem;
            font-weight: bold;
          }
          p:nth-of-type(2) {
            text-align: left;
            line-height: 2rem;
          }
        }
        .tou_right {
          p {
            font-size: 0.4rem;
            height: 1rem;
          }
        }
      }
      .u3_center {
        margin-top: 1rem;
        padding-bottom: 1rem;
        border-bottom: 0.01rem solid #ccc;
        p {
          width: 50%;
          span {
            font-size: 0.6rem;
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            color: tomato;
            border-radius: 0.6rem;
            border: 0.01rem solid tomato;
            padding: 0.1rem 0.2rem;
            margin-left: 0.4rem;
          }
        }

        p:nth-of-type(1) {
          text-align: right;
        }
        p:nth-of-type(2) {
          text-align: left;
        }
      }
      .u3_bottom {
        margin: 1rem 0;
        .tp {
          p:nth-of-type(1) {
            font-size: 0.9rem;
            font-weight: bold;
          }
          p:nth-of-type(2) {
            font-size: 0.7rem;
            color: tomato;
          }
        }
        .u3_uls {
          display: -webkit-flex;
          display: flex;
          flex-wrap: wrap;
          padding: 1rem 0 0 0;
          li {
            width: 33.333%;
            .p1 {
              padding: 0 0.1rem;
              img {
                width: 100%;
                height: 100%;
                border-radius: 0.6rem;
                border: 0.01rem solid #ccc;
              }
            }
            .p2 {
              width: 100%;
              text-align: left;
              font-size: 0.6rem;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .p3 {
              width: 100%;
              text-align: left;
              font-size: 1.1rem;
              color: tomato;
            }
          }
        }
      }
    }
  }
  //购物车
  .a_bottom{
    width: 100%;
    height: 42px;
    position: fixed;
    bottom: 0;
    display: flex;
    background-color:white;
    .btn{
    position: absolute;
    width: 35%;
    line-height: 35px;
    background: #dbe9f6;
    border: 0;
    outline: none;
    font-size: 14px;
    bottom:0;
    }
    .btn1{
      right: 35%;
      color: #4891e0;
    }
    .btn2{
      right: 0;
      color:white;
      background-color: #4891e0;
    }
    a{
      margin: 5px 0px 0px 20px;
    }
   .iconfont{
     font-size: 20px;
     color: #999;
     position: absolute;
     bottom:0;
   }
   .c1{
     left: 5%;
   }
   .c2{
    left: 17%;
    text-align: center;
   }
   .toying{
    position: absolute;
    top: 0%;
    right: 0%;
    width: 10px;
   height: 10px;
   line-height: 10px;
   border-radius: 50px;
   text-align: center;
   background: red;
   font-size: 6px;
   color: white;
   }
   h6{
    font-size: 12px;  

   }  
  } 

}
</style>

7.baselistb.vue

<template>
  <div class="baselistb">
    <ul>
      <li v-for="(items,index) in list" :key="index" class="bac" @click="golist(items)">
        <img :src="items.image" :alt="items.image">
        <div>
          <p>{{items.fo}}</p>
          <span class="nowrop">{{items.bookInfo}}</span>
          <p class="price">{{items.price |sumA | sumB('￥') }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'BaseListb',
  props: ["list"],
  filters: {
    sumA: function (value) {
      value = Number(value);
      return value.toFixed(2);//在括号内可以添加要保留的个数(n)
    },
    sumB: function (price, char) {
      return char + price
    }
  },
  methods: {
    golist (items) {
      this.$router.push({ name: 'goshop', params: { pid: items.index } })
      // this.$emit("jiagou",{
      //   ipid:items
      // })
    }
  }

}
</script>
<style scoped lang="less">
.baselistb {
  ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom:3rem;
    padding-bottom:1rem;
    li {
      margin: 0.1rem 2%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;
      width: 46%;
      img {
        margin: 10%;
        margin-bottom: 0;
        width: 80%;
      }
      p {
        margin-left: 10%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 80%;
        padding: 5px;
        color: #232326;
        font-size: 13px;
      }
      .price {
        color: red;
        font-size: 15px;
        text-align: left;
      }
    }
    .bac {
      background-color: white;
    }
  }
}
</style>

8.more.vue

<template>
  <div class="more">
    <!----------------------------- top ------------------->
    <header class="s_top">
      <p class="p1">
        <span>购物车</span>
        <span>管理</span>
      </p>
    </header>
    <!------------- center --------------------------------->
    <div class="mac"></div>
    <div class="s_center" v-if="thisnotshop">
      <ul>
        <li v-for="(items,index) in shoplist" :key="index">
          <dl>
            <dt>
              <input type="checkbox" v-model="items.ised" />
              <img :src="items.image" />
            </dt>
            <dd>
              <p class="head">{{items.fo}}</p>
              <p class="info">{{items.bookInfo}}</p>
              <div>
                <p class="price fl">{{items.price |sumA |sumB('￥') }}</p>
                <span class="const fr">X {{items.const}}</span>
              </div>
            </dd>
          </dl>
        </li>
      </ul>
      <!-------------------- bottom ------------------------>
      <div class="list">
        <p class="p1">————————更多精选商品————————</p>
        <baselistb :list="list"></baselistb>
        <!-- 多选框 -->
        <div class="shopbtn">
          <p class="all">
            <!-- v-model双向数据绑定 -->
            <input type="checkbox" v-model="checkall" /> 全选
          </p>
          <p class="sum">
            <router-link to="/payment" tag="button" class="btn">结算</router-link>
            <span class="hj">
              合计:
              <span class="price">{{sum | sumA |sumB('￥')}}</span>
              <p>不含运费</p>
            </span>
          </p>
        </div>
      </div>
    </div>
    <!-- fou 未购买 -->
    <p class="notshoplist" v-else>您还没有选择宝贝哦<span @click="golist">(去购买)</span></p>
    
    <!----------------------- jieshu -------------------------->
  </div>
</template>
<script>
import baselistb from '../components/BaseListb';
import { getHotList, getBanner } from '../api/index';
import Cookies from "js-cookie";
export default {
  name: 'More',
  data () {
    return {
      list: [],//存数据2
      shoplist: [{ getHotList }, { getBanner }],//存数据1
      thisnotshop: false//默认未购买
    }
  },
  computed: {//计算属性
    checkall: {//双向数据绑定
      get () {
        return this.shoplist.every((item, index) => {
          return item.ised;
        });
      },
      set (val) {
        this.shoplist.forEach(element => {
          element.ised = val;
        });
      }
    },

    sum: {//数量相加
      get () {
        return this.shoplist.reduce((p, n) => {//
          if (!n.ised) {
            return p;
          }
          return p + n.price * n.const;
        }, 0);
      }

    }
  },
  created () {//初始之后
   this.getl();//购物车选项
   this.getm();//购物车未购买项
  },
  methods: {//自定义方法
  jiagou(e){
    var isT=true;
    console.log(e.ipid);
    this.shoplist.forEach(a=>{
      if(a.index==e.ipid.index){
        a.const++;
        isT=false;
      }
    })
    if(isT){
      this.shoplist.push({
        ...e.ipid,
        const:1
      })
    }
  },
    getl () {
      getHotList(),
        getBanner().then(res => {
          var shopc = Cookies.get("shoplist");
          //判断是否
          if (shopc) {
            this.thisnotshop = true;
            var ary = JSON.parse(shopc);//转为json对象
            this.shoplist = res.banner.filter(item => {
              item.const = ary[item.index];
              item.ised = true;
              return ary[item.index];
            });
            return;
          }
          this.thisnotshop = false;
        });
    },
    getm () {
      getBanner().then(res => {
        this.list = res.banner;
      })
    },
    golist(){//返回上一页
      this.$router.push('/HelloWorld');
    }

  },
  filters: {//过滤器
    sumA: function (value) {
      value = Number(value);
      return value.toFixed(2);//在括号内可以添加要保留的个数(n)
    },
    sumB: function (price, char) {
      return char + price
    }
  },
  components: {//注册组件
    baselistb,
  }
}
</script>

<style scoped lang="less">
*{
  margin:0;
  padding:0;
}
.more{
  width: 100%;
  background-color: #f5f3f3e0;
  .s_top {
    position: fixed;
    top: 0;
    margin-bottom: 0px;
    width: 100%;
    height: 44px;
    line-height: 44px;
    z-index: 999;
    .p1 {
      display: flex;
      justify-content: space-between;
      background-color:tomato;
      padding: 0 5%;
      span {
        color: whitesmoke;
      }
    }
  }
  //中间
  .mac {
    height: 47px;
    background-color: #f5f3f3e0;
  }
  .s_center {
    li {
      -webkit-box-shadow: box;
      box-shadow: box;
      background: #fff;
      margin-top: 10px;
      overflow: hidden;
      margin: 10px;
      border-radius: 3%;
      padding: 10px 10px;
      dt {
        width: 35%;
        float: left;
        input {
          width: 18px;
          height: 18px;
          background: white;
          -webkit-appearance: none;
          border: 1px solid #c9c9c9;
          border-radius: 50px;
          outline: none;
          color: white;
        }
        input:checked {
          background: url('../../static/img/duigoutianchong.png') 0 0 no-repeat;
          border: none;
          background-size: 100%;
        }
      }
      img {
        margin-left: 5%;
        width: 60%;
        border-radius: 5px;
        vertical-align: middle;
        border: 1px solid #ccc;
      }
      dd {
        float: left;
        width: 65%;
        p {
          padding: 1% 0;
          text-align: left;
        }
        .fl {
          float: left;
        }
        .fr {
          float: right;
        }
        .price {
          color: tomato;
        }
        .const {
          display: block;
          border: 1px solid #ccc;
          border-radius: 10px;
          padding: 5px;
          font-size: 14px;
        }
      }
      .head {
        font-size: 1rem;
      }
      .info {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: #999;
        font-size: 14px;
      }
    }
  }
  .list {
    .p1 {
      margin: 1.2rem 0;
      color: #9999;
      font-size: 0.8rem;
      text-align: center;
    }
  }
  .shopbtn {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 50px;
    line-height: 50px;
    bottom: 0;
    background: #fff;
    padding: 0 10px;
    .all {
      text-align: left;
      input {
        margin-top: 2px;
        width: 14px;
        height: 14px;
        background: white;
        -webkit-appearance: none;
        border: 1px solid #c9c9c9;
        border-radius: 50px;
        outline: none;
        color: white;
      }
      input:checked {
        background: url(/static/img/duigoutianchong.cd604ba.png) 0 0 no-repeat;
        border: none;
        background-size: 100%;
      }
    }
    .sum {
      font-size: 0.8rem;
      -webkit-box-flex: 2;
      -ms-flex: 2;
      flex: 2;
      margin: 9px 0;
      .price {
        color: tomato;
      }
      .btn {
        width: 42%;
        height: 100%;
        line-height: 2px;
        position: relative;
        top: -4px;
        right: 15px;
        float: right;
        padding: 18px 30px;
        border: none;
        outline: none;
        background:tomato;
        color: #fff;
        font-size: 12px;
        border-radius: 15px;
      }
    }
    p {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      font-size: 12px;
      span {
        float: right;
      }
      .hj {
        line-height: 16px;
        // margin-top: 11px;
        margin-right: 20px;
        p {
          color: #999;
          font-size: 10px;
        }
      }
    }
  }
  .notshoplist {
    text-align: center;
    padding: 30px;
  }
}
</style>

9.news.vue

<template>
  <div class="news">
    <!-- top -->
    <top :flag="true" class="n_t">
      <i class="iconfont icon-fanhui sp2" @click="golist"></i>
      <h3>我的商品</h3>
    </top>
    <!-- center -->
    <div class="n_c">
      <ul>
        <!-- 图片 -->
        <li v-for="(item,index) of bannerlist" :key="index">
          <div class="box1">
            <img :src="item.image" :alt="item.image">
          </div>
          <!-- 详情 -->
          <div class="box2">
            <p>{{item.fo}}</p>
            <div class="fenbu">
              <p class="juan1"><span>券</span><span>10元</span></p>
              <p class="juan2">已售2121万</p>
            </div>
            <p class="juanh">
              券后<span class="c1">{{item.price| sumB('￥')}}</span>
            <span class="c2">{{item.yprice|sumA| sumB('￥')}}</span>
            </p>
            <p class="goumai" >
              <span @click="goback(item)">前往购买&gt;</span> 
           </p>
          </div>
        </li>
      </ul>
    </div>
    <!-- bottom -->
    <!-- jieshu -->
  </div>
</template>

<script>
import top from '../components/top'
// 1.因为用变量导出，所以引入的时候必须用对象来引入{导出的}地址
import { getBanner, getHotList } from '../api/index'
//2.引入cookie查找
import Cookies from 'js-cookie'
export default {
  name: 'news',
  data () {
    return {
      bannerlist: [],//接收数据
    }
  },
   filters:{
  sumA: function (value) {
    value = Number(value);
    return value.toFixed(2);
  },
  sumB:function(price,char){
			return char + price
    }
   },
  created () {//初始之后
    this.getb();
  },
  methods: {//自定义方法
    golist () {//返回上一页
      this.$router.push('/HelloWorld');
    },
    getb () {
      return getBanner().then((res) => {
        this.bannerlist = res.banner;
      })
    },
     goback (item) {
      this.$router.push({ name: 'goshop', params: { pid: item.index } })
      // this.$emit("jiagou",{
      //   ipid:items
      // })
    }
  },
  components: {
    top,
  }
}
</script>
<style scoped lang="less">
.news {
  .n_c {
    margin: 2.3rem 0 0 0;
    ul {
      li {
        display: -webkit-flex;
        display: flex;
        background-color: white;
        margin: 0.2rem;
        padding: 0.4rem;
        border-radius: 2%;
        div:nth-of-type(1) {
          width: 30%;
        }
         div:nth-of-type(2) {
          width: 70%;
        }

        .box1 {
          width:50%;
          text-align:center;
          img {
            width: 97%;
            height: 100%;
          }
        }
        .box2 {
          p:nth-of-type(1) {
            font-size: 10px;
            text-align: left;
            color:#000;
          }
          .fenbu {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            font-size: 0.1rem;
            margin-top: 0.5rem;
            .juan1 {
              border: 0.01rem salmon solid;
              border-radius: .2rem;
              span:nth-of-type(1) {
                display: inline-block;
                width:1rem;
                height: 1rem;
                line-height: 1rem;
                background-color: salmon;
                color: white;
              }
              span:nth-of-type(2) {
                display: inline-block;
                width: 2rem;
                height: 1rem;
                line-height: 1rem;
                color: red;
                text-align: center;
              }
            }
            .juan2{
              color:slategrey;
              font-weight: bold;
            }
          }
          .juanh{
            margin-top:.4rem;
            width: 100%;
            text-align: left;
            font-size:.7rem;
            .c1{
              display: inline-block;
              font-size: 1rem;
              padding-left:.1rem;
            }
            .c2{
              text-decoration: line-through
            }
          }
          .goumai{
            width: 100%;
            margin-top:.6rem;
            text-align: right;
            span:nth-of-type(1){
              display: inline-block;
              width:5rem;
              height: 1rem;
              line-height: 1rem;
              background-color: salmon;
              color:white;
              font-size: .8rem;
              text-align: center;
              border-radius: .3rem;
              padding:.1rem;
            }
          }
        }
      }
    }
  }
}
</style>

10.novice.vue

<template>
  <div class="novice">
    <!-- top -->
    <top :flag="true">
      <i class="iconfont icon-fanhui sp2" @click="golist"></i>
      <h3 class="hcc">新手上路</h3>
    </top>
    <!-- center -->
    <div class="n_c">
      <ul>
        <!-- <li><span>热点问题</span></li> -->
        <li v-for="(item,index) of booklist" :key="index">
          <router-link to="/">
            {{item.name}}
            {{item.fo}}
          </router-link>
        </li>
      </ul>
    </div>
    <!-- bottom -->
    <!-- jieshu -->
  </div>
</template>

<script>
import top from '../components/top'
export default {
  name: 'Novice',
  data () {
    return {
      booklist: [
        { name: '学费二三十万的幼儿园值吗？ 有幼儿园称贵在空气',fo:'>',index:'0' },
        { name: '学费二三十万的幼儿园值吗？ 有幼儿园称贵在空气',fo:'>',index:'1'  },
        { name: '学费二三十万的幼儿园值吗？ 有幼儿园称贵在空气',fo:'>',index:'2'  },
        { name: '学费二三十万的幼儿园值吗？ 有幼儿园称贵在空气',fo:'>',index:'3'  },
        { name: '学费二三十万的幼儿园值吗？ 有幼儿园称贵在空气',fo:'>',index:'4'  }
      ]

    }
  },
  created () {//初始之后
   // this.getb();
    // this.booklist;//直接获取自定义内容
  },
  methods: {//自定义方法
    golist () {
      this.$router.push('/HelloWorld');
    },
    getb () {
      // return this.function().then((res) => {
      //   this.booklist = res.booklist;
      // })
    }
  },
  components: {
    top,
  }
}
</script>

<style scoped lang="less">
.novice {
  .n_c {
    margin-top: 2.3rem;
    ul {
      li {
        display: flex;
        display: -webkit-flex;
        margin: 1%;
        background-color: white;
        border-radius: 0.1rem;
        padding: 0.5rem;
        font-size: 0.4rem;
        justify-content: space-between;
      }
    }
    .router-link-exact-active {
      background: #ff5700;
    }
  }
}
</style>

11.payment.vue

<template>
  <div class="payment">
   <!-- top -->
   <top :flag="true">
     <i class="iconfont icon-fanhui sp2" @click="prev()" ></i>
     <h3 class="hcc">支付页面</h3>
   </top>
   <!-- center -->
   <div class="p_conent">
     <p>支付成功 <span class="ment" @click="golist">(去逛逛)</span></p>
   </div>
   <!-- jieshu -->
  </div>
</template>

<script>
import top from '../components/top'
import Cookies from 'js-cookie';//第三方插件
export default {
  name:'payment',
  created(){//初始之后
  //引入cookie和支付成功删除cookie记录
  Cookies.remove('shoplist');//删除hotlist记录
 },
  methods: {
    golist(){
      this.$router.push('/HelloWorld');
    },
    prev () {
      this.$router.go(-1)
    }
  },
  components: {
   top,
  }
}
</script>

<style scoped lang="less">
.payment{
  .p_conent{
    margin-top:2.3rem;
    p{
      height: 10rem;
      line-height: 10rem;
      .ment{
        color:tomato;
      }
    }
  }
}

</style>

12.top.vue

<template>
  <div class="top">
    <span v-if="flag" class="iconfont icon-sousuo sp1" @click='goback'></span>
    <slot>默认</slot>
  </div>
</template>

<script>
export default {
  name: 'top',
  props: {
    flag: {
      type: Boolean,//类型布尔值
      default: false//默认false  
    }
  },
  methods: {
    goback () {
      this.$router.back();//返回上一页
    }
  }
}
</script>

<style scoped lang="less">
.top {
  position: fixed;
    top:0;
    right:0;
    width:100%;
    height: 2rem;
    line-height: 2rem;
  background-color: white;
  border:.01rem solid #ccc;
   color:#2c3e50;
  .sp1{
    float: right;
    height: 2rem;
    line-height: 2rem;
    padding-right: 5%;
    font-size: 23px;
  }
}
</style>

13.hotevents.vue

<template>
  <div class="hotevents">
    <!-- top -->
    <div class="h_t">
      <top :flag="true">
        <i class="iconfont icon-fanhui sp2" @click="golist"></i>
        <h3 class="hcc">热门活动</h3>
      </top>
    </div>
    <!-- center -->
    <div class="h_c">
      <ul>
        <li v-for="(item,index) of booklist" :key="index">
          <p class="p1">天猫超市降爆款天天抢,还有更多五折包邮商品呦！</p>
          <p class="p2">有效时间:<span>2019-04-01</span>至 <span>2019-04-30</span></p>
          <div class="p3"><img :src="item.image" :alt="item.image"></div>
        </li>
      </ul>
    </div>
    <!-- bottom -->
    <!-- jieshu -->
  </div>
</template>

<script>
import top from '../components/top'
//引入地址
import { getBanner } from '../api/index'
export default {
  name: 'Hotevents',
  data () {
    return {
      booklist: []//存数据
    }
  },
  created () {//初始之后
    this.getb();
  },
  methods: {//自定义方法
    golist () {//返回上一页
      this.$router.push('/HelloWorld');
    },
    getb () {
      return getBanner().then((res) => {
        this.booklist = res.banner;
      })
    }
  },
  components: {
    top,
  }
}
</script>

<style scoped lang="less">
.hotevents {
  .h_c {
    margin-top: 2.3rem;
    ul {
      li {
        background-color: white;
        margin: 0.2rem;
        padding: 0.5rem;
        border-radius: 2%;
        p {
          width: 100%;
          text-align: left;
        }
        .p1 {
          font-weight: 520;
        }
        .p2 {
          font-size: 0.7rem;
          color: slategrey;
        }
        .p3 {
          width: 100%;
          img {
            margin:1%;
            width: 97%;
            height: 150px;
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>

14.large.vue

<template>
  <div class="large">
    <!-- top -->
    <top :flag="true">
      <i class="iconfont icon-fanhui sp2" @click="golist"></i>
      <h3 class="hcc">商品列表</h3>
    </top>
    <!-- center -->
    <div class="l_c">
      <ul>
        <li v-for="(items,index) of hotlist" :key="index">
          <div class="dv1">
            <img :src="items.image" :alt="items.image">
          </div>
          <div class="dv2">
            <p><span class="tb">淘</span>{{items.fo}}</p>
            <!-- jiage -->
            <div class="jgprice">
              <p class="p1"><span>券</span><span>{{items.juan}}</span></p>
              <p class="p2">已售2121万</p>
            </div>
            <p class="coupon">
              券后<span class="s1">{{items.price| sumB('￥')}}</span>
              <span class="s2">{{items.prices|sumA| sumB('￥')}}</span>
            </p>
            <p class="goum" @click="goback"><span>前往购买&gt;</span></p>
          </div>
        </li>
      </ul>
    </div>
    <!-- bottom -->
    <!-- jieshu -->
  </div>
</template>
<script>
import top from '../components/top'
import { getHotList } from '../api/index'
//2.引入cookie查找
import Cookies from 'js-cookie'
export default {
  name: 'Large',
  data () {
    return {
      hotlist: []//存数据
    }
  },
  filters: {
    sumA: function (value) {
      value = Number(value);
      return value.toFixed(2);
    },
    sumB: function (price, char) {
      return char + price
    }
  },
  created () {//初始之后
    this.geth();//获取当前方法
  },
  methods: {//自定义方法
    golist () {//返回上一页
      this.$router.push('/HelloWorld');
    },
    geth () {
      return getHotList().then((res) => {//获取到定义的api的json数据
        this.hotlist = res.hotlist;
      })
    },
    goback(){
      alert('购买成功');
    }
  },
  components: {
    top,
  }
}
</script>
<style scoped lang="less">
.large {
  width: 100%;
  .l_c {
    margin-top: 2.3rem;
    ul {
      li {
        margin: 0.1rem;
        background-color: white;
        border-radius: 0.2rem;
        padding: 0.3rem;
        display: flex;
        display: -webkit-flex;
        .dv1 {
          width: 30%;
          img {
            width: 91%;
            height: 100%;
            border: 1px slategrey dashed;
          }
        }
        .dv2 {
          width: 70%;
          p:nth-of-type(1) {
            width: 100%;
            text-align: left;
            font-size: 0.8rem;
            color: #000;
            .tb {
              width: 1rem;
              height: 1rem;
              line-height: 1rem;
              background-color: salmon;
              padding: 0.1rem;
              color: white;
              border-radius: 0.5rem;
              font-size: 0.7rem;
              text-align: center;
            }
          }
        }
        .jgprice {
          margin-top: 0.3rem;
          display: -webkit-flex;
          display: flex;
          justify-content: space-between;
          .p1 {
            width: 100%;
            span {
              font-size: 0.6rem;
              padding: 0.1rem 0.15rem;
              border: salmon 0.01rem solid;
            }
            span:nth-of-type(1) {
              width: 2rem;
              height: 1rem;
              line-height: 1rem;
              background-color: salmon;
              color: white;
            }
            span:nth-of-type(2) {
              width: 3rem;
              height: 1rem;
              line-height: 1rem;

              color: salmon;
              font-weight: 500;
            }
          }
          .p2 {
            width: 100%;
            font-size: 0.8rem;
            text-align: right;
            color: slategray;
            font-weight: 600;
          }
        }
        .coupon {
          margin-top: 0.4rem;
          width: 100%;
          text-align: left;
          font-size: 0.7rem;
          .s1 {
            font-size: 1rem;
          }
          .s2 {
            text-decoration: line-through;
          }
        }
        .goum {
          width: 100%;
          text-align: right;
          span:nth-of-type(1) {
            display: inline-block;
            width: 4.2rem;
            height: 1rem;
            line-height: 1rem;
            background-color: salmon;
            color: white;
            font-size: 0.8rem;
            text-align: center;
            border-radius: 0.3rem;
            padding: 0.1rem;
          }
        }
      }
    }
  }
}
</style>

15.Favorite.vue

<template>
  <div class="favorite">
    <top :flag="true">
      <i class="iconfont icon-fanhui sp2" @click="golist"></i>
      <h3 class="hcc">收藏列表</h3>
    </top>
  </div>
</template>

<script>
import top from '../components/top'
export default {
  name: 'Favorite',
  data () {
    return {

    }
  },
  methods: {
    golist () {
      this.$router.push('/HelloWorld');
    }
  },
  components: {
    top,
  }
}
</script>

<style scoped lang="less">
</style>

16.page文件夹下
goodshop.vue

<template>
  <div class="goodshop">
   <ul>
        <!-- <li><span>热点问题</span></li> -->
        <li v-for="(item,index) of booklist" :key="index">
          <router-link to="/HelloWorld">
            {{item.title}}
            {{item.fo}}
          </router-link>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name:'Goodshop',
   data () {
    return {
      booklist: [
        { title: '学费二三十万的幼儿园值吗？ 有幼儿园称贵在空气',fo:'>',index:'0' },
        { title: '学费二三十万的幼儿园值吗？ 有幼儿园称贵在空气',fo:'>',index:'1'  },
        { title: '学费二三十万的幼儿园值吗？ 有幼儿园称贵在空气',fo:'>',index:'2'  },
        { title: '学费二三十万的幼儿园值吗？ 有幼儿园称贵在空气',fo:'>',index:'3'  },
        { title: '学费二三十万的幼儿园值吗？ 有幼儿园称贵在空气',fo:'>',index:'4'  }
      ]

    }
  },
  created () {//初始之后
   // this.getb();
    // this.booklist;//直接获取自定义内容
  },
  methods: {//自定义方法
    golist () {
      this.$router.push('/HelloWorld');
    },
    getb () {
      // return this.function().then((res) => {
      //   this.booklist = res.booklist;
      // })
    }
  },
  components: {

  }
}
</script>
<style scoped lang="less">
.goodshop{
  width:100%;
   ul {
      li {
        display: flex;
        display: -webkit-flex;
        margin: 1%;
        background-color: white;
        border-radius: 0.1rem;
        padding: 0.5rem;
        font-size: 0.4rem;
        justify-content: space-between;
      .router-link-exact-active {
      background: #ff5700;
      }
     
     }
    }
}
</style>

guess.vue

<template>
  <div class="guess">
    <ul class="uls">
      <router-link v-for="(item,index) of booklist" :key="index" :to="{name:'goshop',params:{pid:item.index}}" tag="li">
        <img :src="item.image" :alt="item.image">
        <p>{{item.fo}}</p>
        <div class="p2">
          <p>
            <span class="pr">{{item.price|sumA| sumB('￥')}}</span>
            <span class="pr2">{{item.prices| sumB('￥')}}</span>
          </p>
         <p><span class="pr3">首单减{{item.juan}}</span></p>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
import { getHotList } from '../api/index'
export default {
  name: 'Guess',
  data () {
    return {
      booklist: []//存数据
    }
  },
  filters: {//过滤器
    sumA: function (value) {
      value = Number(value);
      return value.toFixed(2);
    },
    sumB: function (price, char) {
      return char + price
    }
  },
  created () {//初始之后
    this.getb();
  },
  methods: {//自定义方法获取
    getb () {
      return getHotList().then((res) => {
        this.booklist = res.hotlist;
      })
    }
  }
}
</script>

<style scoped lang="less">
.guess {
  .uls {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    margin: 0.2rem;
    li {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 48%;
      background-color: white;
      border-radius: 1%;
      margin: 1%;
      img {
        width: 98%;
      }
      p:nth-of-type(1) {
        width: 100%;
        font-size: 0.8rem;
        text-align: left;
      }
      .p2 {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        justify-content:space-between;
        padding-bottom:.4rem;
        .pr {
          color: tomato;
        }
        .pr2{
          font-size:.6rem;
          text-decoration: line-through;
        }
        .pr3{
          width:3.5rem;
          display: inline-block;
          font-size: .7rem;
          color:tomato;
          border:.01rem solid tomato;
          margin-right: .25rem;
        }
      }
    }
  }
}
</style>

special.vue

<template>
  <div class="special">
       <ul>
        <li v-for="(items,index) of hotlist" :key="index">
          <div class="dv1">
            <img :src="items.image" :alt="items.image">
          </div>
          <div class="dv2">
            <p><span class="tb">淘</span>{{items.fo}}</p>
            <!-- jiage -->
            <div class="jgprice">
              <p class="p1"><span>券</span><span>{{items.juan}}</span></p>
              <p class="p2">已售2121万</p>
            </div>
            <p class="coupon">
              券后<span class="s1">{{items.price| sumB('￥')}}</span>
              <span class="s2">{{items.prices|sumA| sumB('￥')}}</span>
            </p>
            <p class="goum" @click="goback(items)"><span>前往购买&gt;</span></p>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
import { getHotList } from '../api/index'
//2.引入cookie查找
import Cookies from 'js-cookie'
export default {
  name:'Special',
  data () {
    return {
       hotlist: []//存数据
    }
  },
   filters: {
    sumA: function (value) {
      value = Number(value);
      return value.toFixed(2);
    },
    sumB: function (price, char) {
      return char + price
    }
  },
  created () {//初始之后
    this.geth();//获取当前方法
  },
  methods: {//自定义方法
    golist () {//返回上一页
      this.$router.push('/HelloWorld');
    },
    geth () {
      return getHotList().then((res) => {//获取到定义的api的json数据
        this.hotlist = res.hotlist;
      })
    },
     goback (items) {
      this.$router.push({ name: 'goshop', params: { pid: items.index } })
      // this.$emit("jiagou",{
      //   ipid:items
      // })
    }
  },
}
</script>

<style scoped lang="less">
.special{
  width:100%;
  ul {
      li {
        margin: 0.1rem;
        background-color: white;
        border-radius: 0.2rem;
        padding: 0.3rem;
        display: flex;
        display: -webkit-flex;
        .dv1 {
          width: 30%;
          img {
            width: 91%;
            height: 100%;
            border: 1px slategrey dashed;
          }
        }
        .dv2 {
          width: 70%;
          p:nth-of-type(1) {
            width: 100%;
            text-align: left;
            font-size: 0.8rem;
            color: #000;
            .tb {
              width: 1rem;
              height: 1rem;
              line-height: 1rem;
              background-color: salmon;
              padding: 0.1rem;
              color: white;
              border-radius: 0.5rem;
              font-size: 0.7rem;
              text-align: center;
            }
          }
        }
        .jgprice {
          margin-top: 0.3rem;
          display: -webkit-flex;
          display: flex;
          justify-content: space-between;
          .p1 {
            width: 100%;
            span {
              font-size: 0.6rem;
              padding: 0.1rem 0.15rem;
              border: salmon 0.01rem solid;
            }
            span:nth-of-type(1) {
              width: 2rem;
              height: 1rem;
              line-height: 1rem;
              background-color: salmon;
              color: white;
            }
            span:nth-of-type(2) {
              width: 3rem;
              height: 1rem;
              line-height: 1rem;

              color: salmon;
              font-weight: 500;
            }
          }
          .p2 {
            width: 100%;
            font-size: 0.8rem;
            text-align: right;
            color: slategray;
            font-weight: 600;
          }
        }
        .coupon {
          margin-top: 0.4rem;
          width: 100%;
          text-align: left;
          font-size: 0.7rem;
          .s1 {
            font-size: 1rem;
          }
          .s2 {
            text-decoration: line-through;
          }
        }
        .goum {
          width: 100%;
          text-align: right;
          span:nth-of-type(1) {
            display: inline-block;
            width: 4.2rem;
            height: 1rem;
            line-height: 1rem;
            background-color: salmon;
            color: white;
            font-size: 0.8rem;
            text-align: center;
            border-radius: 0.3rem;
            padding: 0.1rem;
          }
        }
      }
    }


}
</style>

weekend.vue

<template>
  <div class="weekend">
      <ul>
        <li v-for="(item,index) of booklist" :key="index">
          <p class="p1">天猫超市降爆款天天抢,还有更多五折包邮商品呦！</p>
          <p class="p2">有效时间:<span>2019-04-01</span>至 <span>2019-04-30</span></p>
          <div class="p3"><img :src="item.image" :alt="item.image"></div>
        </li>
      </ul>

  </div>
</template>

<script>
import { getBanner } from '../api/index'
export default {
  name:'weekend',
  data () {
    return {
      booklist: []//存数据
    }
  },
  created () {//初始之后
    this.getb();
  },
  methods: {//自定义方法
    golist () {//返回上一页
      this.$router.push('/HelloWorld');
    },
    getb () {
      return getBanner().then((res) => {
        this.booklist = res.banner;
      })
    }
  },
}
</script>

<style scoped lang="less">
.weekend{
  width:100%;
   ul {
      li {
        background-color: white;
        margin: 0.2rem;
        padding: 0.5rem;
        border-radius: 2%;
        p {
          width: 100%;
          text-align: left;
        }
        .p1 {
          font-weight: 520;
        }
        .p2 {
          font-size: 0.7rem;
          color: slategrey;
        }
        .p3 {
          width: 100%;
          img {
            margin:1%;
            width: 97%;
            height: 150px;
            margin-bottom: 0;
          }
        }
      }
    }
}
</style>

17.api文件夹下api自定义后台数据
api下index.js

import axios from 'axios'
// 创建公共的接口名
axios.defaults.baseURL="/static/mock/";
//请求的拦截（接口）
axios.interceptors.request.use((config)=>{//一般是加请求头参数
    //当你有共同的参数时可以用此参数来用
    config.headers.a="1234"
   console.log(config);//可以找到a的值1234
    return config
})
//每次数据拿到的值都是data，也可以创建一个公共的
//data已经拿到数据的响应
axios.interceptors.response.use((res)=>{//数据响应的拦截
 //return 啥就返回啥
 return res.data;
})
//axios是封装的promise
//导出一个axios有很多，所以必须分开用变量来接收，不用default是导出全部
export let getBanner=function (){//用get接收json数据
   return axios.get('banner.json');
}
export let getBanners=function (){//用get接收json数据
    return axios.get('banner.json');
   }
   export let getHotList=function (){//用get接收json数据
    return axios.get('hotlist.json');
   }

18.static静态文件夹下img文件夹
img图片:
在这里插入图片描述

19.static下mock文件夹
mock文件夹json数据
banner.json

{
    "banner":[
        {
       "src":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp",
       "index":"0",
       "image":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp",
       "name":"充电灯户外照明LED大功率露营帐蓬充电灯泡夜市地摊灯应急灯家用USB充电灯泡停电照明灯家用移动灯泡 58W白光（5-20小时）",
       "fo":"充电灯户外照明LED大功率露营帐蓬家用移动灯泡 58W白光（5-20小时）",
       "price":"30",
       "yprice":"40"
        },
        {
        "src":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp",
        "price":"4.90",
        "yprice":"14.90",
       "id":4.0,
       "index":"1",
       "image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp",
       "name":"荧光棒 演唱会道具儿童发光心形星星公主魔法棒玩具闪光仙女棒可爱头饰成人头饰带灯新年礼物小玩具批发 新款星星棒",
       "fo":"荧光棒 演唱会道具儿童发光心形星星公主魔法棒"
        },
        {
        "src":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp",
        "index":"2",
       "image":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp",
       "name":"加厚摆地摊货架折叠货架2米夜市摆摊架子挂衣架摆摊桌-p 加厚1米布架+背包",
       "fo":"夜市摆摊架子挂衣架摆摊桌加厚1米布架+背包",
       "price":"57",
       "yprice":"67"
        },
        {
            "src":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp",
            "index":"3",
           "image":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp",
           "name":"加厚摆地摊货架折叠货架2米夜市摆摊架子挂衣架摆摊桌-p 加厚1米布架+背包",
           "fo":"夜市摆摊架子挂衣架摆摊桌加厚1米布架+背包",
           "price":"57",
           "yprice":"67"
            },
            {
                "src":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp",
                "price":"4.90",
                "yprice":"14.90",
               "id":4.0,
               "index":"4",
               "image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp",
               "name":"荧光棒 演唱会道具儿童发光心形星星公主魔法棒玩具闪光仙女棒可爱头饰成人头饰带灯新年礼物小玩具批发 新款星星棒",
               "fo":"荧光棒 演唱会道具儿童发光心形星星公主魔法棒"
                },
                {
                    "src":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp",
                    "index":"5",
                    "image":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp",
                    "name":"充电灯户外照明LED大功率露营帐蓬充电灯泡夜市地摊灯应急灯家用USB充电灯泡停电照明灯家用移动灯泡 58W白光（5-20小时）",
                    "fo":"充电灯户外照明LED大功率露营帐蓬家用移动灯泡 58W白光（5-20小时）",
                    "price":"30",
                    "yprice":"40"
                     }


    ]
}

hotlist.json

{
   "hotlist":[
    {
       "_id":"38d78ca75edb57cb005712db480a1203",
       "id":3.0,
       "index":"0",
       "image":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp",
       "name":"充电灯户外照明LED大功率露营帐蓬充电灯泡夜市地摊灯应急灯家用USB充电灯泡停电照明灯家用移动灯泡 58W白光（5-20小时）",
       "fo":"充电灯户外照明LED大功率露营帐蓬家用移动灯泡 58W白光（5-20小时）",
       "price":"30",
       "prices":"35",
       "juan":"5元"
      },
    {
       "_id":"38d78ca75edb587a005717cf774bf64e",
       "price":"4.9",
       "prices":"11.9",
       "id":4.0,
       "index":"1",
       "image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp",
       "name":"荧光棒 演唱会道具儿童发光心形星星公主魔法棒玩具闪光仙女棒可爱头饰成人头饰带灯新年礼物小玩具批发 新款星星棒",
       "fo":"荧光棒 演唱会道具儿童发光心形星星公主魔法棒",
       "juan":"7元"
      },
    {
       "_id":"75777da85edb5696004c971f6948650c",
       "id":1.0,
       "index":"2",
       "image":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp",
       "name":"加厚摆地摊货架折叠货架2米夜市摆摊架子挂衣架摆摊桌-p 加厚1米布架+背包",
       "fo":"夜市摆摊架子挂衣架摆摊桌加厚1米布架+背包",
       "price":"57",
       "prices":"62",
       "juan":"5元"

      },
    {
       "_id":"75777da85edb5729004c9d5a02bfe036",
       "name":"地摊货架加厚摆摊货架夜市折叠架子摆地摊衣架挂衣架服装展示晾衣架 单买配套10个挂珠 我家货架通用",
       "fo":"夜市折叠架子摆地摊衣架服装展示晾衣架 我家货架通用",
       "price":"50",
       "prices":"57",
       "id":2.0,
       "index":"3",
       "juan":"7元",
       "image":"https://img10.360buyimg.com/mobilecms/s519x519_jfs/t1/108529/39/3139/75909/5e0ed815E26f9a10e/092bd6afc8bfe1da.jpg!q70.dpg.webp"
      },
    {
       "_id":"8abc3c855edb590d004054a34fe9fa98",
       "id":5.0,
       "index":"4",
       "juan":"5元",
       "image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/126122/23/4251/42604/5edb36ceEed479b2e/860aee7c95433770.jpg!q80.dpg.webp",
       "name":"猿人部落录音扩音器 手持喇叭 大功率喊话器扩音喇叭大声公导游地摊宣传叫卖录音喇叭手持喊话器喇叭 36秒录音喇叭+1个5小时锂电池",
       "fo":"猿人部落录音扩音器 手持喇叭36秒录音喇叭+1个5小时锂电池",
       "price":"28.8",
       "prices":"33.8"
      },
      {
         "_id":"38d78ca75edb57cb005712db480a1203",
         "id":3.0,
         "index":"5",
         "juan":"7元",
         "image":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp",
         "name":"充电灯户外照明LED大功率露营帐蓬充电灯泡夜市地摊灯应急灯家用USB充电灯泡停电照明灯家用移动灯泡 58W白光（5-20小时）",
         "fo":"充电灯户外照明LED大功率露营帐蓬家用移动灯泡 58W白光（5-20小时）",
         "price":"30",
         "prices":"37"
        },
      {
         "_id":"38d78ca75edb587a005717cf774bf64e",
         "price":"4.9",
         "prices":"9.9",
         "id":4.0,
         "index":"6",
         "juan":"5元",
         "image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp",
         "name":"荧光棒 演唱会道具儿童发光心形星星公主魔法棒玩具闪光仙女棒可爱头饰成人头饰带灯新年礼物小玩具批发 新款星星棒",
         "fo":"荧光棒 演唱会道具儿童发光心形星星公主魔法棒"
        },
      {
         "_id":"75777da85edb5696004c971f6948650c",
         "id":1.0,
         "index":"7",
         "juan":"7元",
         "image":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp",
         "name":"加厚摆地摊货架折叠货架2米夜市摆摊架子挂衣架摆摊桌-p 加厚1米布架+背包",
         "fo":"夜市摆摊架子挂衣架摆摊桌加厚1米布架+背包",
         "price":"57",
         "prices":"64"
        },
      {
         "_id":"75777da85edb5729004c9d5a02bfe036",
         "name":"地摊货架加厚摆摊货架夜市折叠架子摆地摊衣架挂衣架服装展示晾衣架 单买配套10个挂珠 我家货架通用",
         "fo":"夜市折叠架子摆地摊衣架服装展示晾衣架 我家货架通用",
         "price":"50",
         "prices":"55",
         "id":2.0,
         "index":"8",
         "juan":"5元",
         "image":"https://img10.360buyimg.com/mobilecms/s519x519_jfs/t1/108529/39/3139/75909/5e0ed815E26f9a10e/092bd6afc8bfe1da.jpg!q70.dpg.webp"
        },
      {
         "_id":"8abc3c855edb590d004054a34fe9fa98",
         "id":5.0,
         "index":"9",
         "juan":"7元",
         "image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/126122/23/4251/42604/5edb36ceEed479b2e/860aee7c95433770.jpg!q80.dpg.webp",
         "name":"猿人部落录音扩音器 手持喇叭 大功率喊话器扩音喇叭大声公导游地摊宣传叫卖录音喇叭手持喊话器喇叭 36秒录音喇叭+1个5小时锂电池",
         "fo":"猿人部落录音扩音器 手持喇叭36秒录音喇叭+1个5小时锂电池",
         "price":"28.8",
         "prices":"35.8"
        }

   ]
}

使用这个项目之前必须下载,各种插件:
1.npm install js-cookie
2.npm install vue-awesome-swiper@2.5.4
3.npm i less less-loader style-loader
4.npm install axios

需注意：less的版本
更改前是 “less-loader”: “^7.0.2”,
更改后是 “less-loader”: “^5.0.0”,
直接更改方法:npm install less-loader@5.0.0 --save
less如果不行：请直接看这篇介绍：
https://blog.csdn.net/weixin_46409887/article/details/109627132
4.导航的跳转有跳转当前的，有需要打开新页面的，这里都有实现呢
5.vue项目的名字有大小写限制，如果引入的name：‘名字’，大写不好使，你就改写小写。

总结:这里就不多介绍了，大家就去直接看代码吧,🤭

浅浅一笑^*^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?

总结:之前一直未写过同时实习跳转当前页面和跳转新页面的项目,要么是当前，要么是新页面,今天更新一个两个同时实现的项目。：相信很多人都遇到过router-link通过to跳转页面有时候会不显示内容的bug。上传不了完整效果图视频.请见谅哈.直接上代码:（完整代码）效果图:（实现效果可直接复制粘贴）主页面：导航条：超级周末页面购物车页面:大额券页面:其它我就省略了…功能描述:1.仿美团导航切换功能2.淘宝购物车功能，加入购物车，加购功能,3.轮播图效果4.循环遍历路由导航
复制链接

扫一扫