vue京东案例 （搜索、详情、购物车、导航栏）

1.nav导航组件

nav导航组件`template`中

<template >
  <div>
    <div class="header">
      <van-search show-action placeholder="请输入搜索关键词" @click="gotosearch">
        <template #action>
          <div class="iconfont icon-gouwuche1-copy-copy" @click="gotogou"></div>
        </template>
      </van-search>
    </div>

    <div class="box">
      <van-row>
        <van-col span="6">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              v-for="item  in nav1"
              :key="item.cid"
              :title="item.cname"
              @click="gotoNav2(item)"
            />
          </van-sidebar>
        </van-col>
        <van-col span="18">
          <van-grid :column-num="3">
            <van-grid-item
              v-for="item in nav2"
              :key="item.subcid"
              :icon="item.scpic"
              :text="item.subcname"
              @click="gotoList(item.subcid)"
            />
          </van-grid>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

nav导航组件`script`中

<script>
export default {
   
  data() {
   
    return {
   
      activeKey: 0,
      nav1: [],
      nav2: [],
    };
  },
  created() {
   
    this.$axios.get(" http://api.kudesoft.cn/tdk/category", {
   }).then((res) => {
   
      this.nav1 = res.data.data.data;
      this.nav1.sort((a, b) => {
   
        return a.cid - b.cid;
      });
      console.log(res.data.data.data);
      this.nav2 = this.nav1[0].subcategories;
    });
  },
  methods: {
   
    gotoNav2(item) {
   
      this.nav2 = item.subcategories;
      this.activeKey = item.cid;
    },
    
    gotoList(id) {
   
      this.$router.push({
   
        path: "/list2",
        query: {
   
          id,
        },
      });
    },
    gotosearch() {
   
      this.$router.push({
   
        path: "/search",
      });
    },
    gotogou() {
   
      this.$router.push({
   
        path: "/cart",
      });
    },
  },
};
</script>

nav导航组件`style`中

<style scoped>
.van-search {
   
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
}
.box {
   
  margin-top: 50px;
}
</style>

2.商品列表页

商品列表页`template`中

<template>
  <div>
    <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="box">
      <div @click="zonghepx" :class="{'active':isActive==1}">综合排序</div>
      <div @click="xiaoliang" :class="{'active':isActive==2}">销量</div>
      <div class="box-span" @click="jiage">
        <span class="red">价格</span>
        <span class="box-iconfont">
          <span class="iconfont icon-order-asce" :class="{'active':isActive==3}"></span>
          <span class="iconfont icon-paixu-shengxu" :class="{'active':isActive==4}"></span>
        </span>
      </div>
      <div>
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" @change="shopType" />
        </van-dropdown-menu>
      </div>
    </div>

    <ul>
      <li v-for="(item, index) in list" :key="index" @click="gotodetails(item.id)">
        <img :src="item.mainPic" width="100%" />
        <p>{
   {
   item.title}}</p>
        <span style="color:red">
          ￥
          <span class="list-jiage">{
   {
   item.actualPrice}}</span>
        </span>
        <span class="list-yishou">已售:{
   {
   item.monthSales}}</span>
        <span>
          <van-tag mark type="danger" style="margin-left:10px">{
   {
   item.shopType == 1 ? '天猫':'淘宝'}}</van-tag>
        </span>
      </li>
    </ul>
  </div>
</template>

商品列表页`script`中