1. 点击商品跳转到详情页

点击GoodsItem要跳转到详情页，我们可以给详情页配置一个对应路由
在这里插入图片描述

// index.js
const Detail = () => import('../views/detail/Detail.vue');

const routes = [
  {
    path: '/detail',
    component: Detail
  }
]

而且这里我们应该在跳转路由的时候传递一些参数，把点击的该商品的id传过去，传递参数有两种类型params和query，这里我用了params类型：

// index.js
{
  path: '/detail/:itemId',
  component: Detail
}

// GoodsItem.vue
methods: {
  itemClick() {
    // 跳转到详情页
    // 传递params类型参数
    this.$router.push("/detail/" + this.goodsItem.iid);
  }
}

在这里插入图片描述

2. 请求详情页数据

我们要在Detail.vue组件中获取到这个iid并且请求对应的数据

// Detail.vue
data() {
  return {
    iid: null
  }
},
created() {
  // 注意这里之所以是itemId，是因为我们路由配置中配的是path: '/detail/:itemId'
  this.iid = this.$route.params.itemId;
}

现在我们的iid中就保存了iid，接下来要根据这个iid发送网络请求
在这里插入图片描述

// detail.js
import {request} from  './request'

export function getDetailMessage(iid) {
  return request({
    url: '/detail',
    params: {
      iid
    }
  })
}

在Detail.vue组件中中引入并调用getDetailMessage()方法：

created() {
  this.iid = this.$route.params.itemId;
  this.getDetailMessage(this.iid);
},
methods: {
  getDetailMessage(iid) {
    getDetailMessage(iid).then(res => {
      console.log(res);
    })
  }  
}

3. 详情页导航栏使用

NavBar组件实际上前面我们已经封装好了，这里直接往插槽里插我们需要的东西就ok了

<nav-bar>
  <template #left>
    <img @click="backClick" src="../../assets/img/common/back.svg" alt="">
  </template>
  <template #center>
    <a href="javascript:;"
      v-for="(item, index) in title"
      :key="item"
      :class="{ activeTitle: currentIndex == index }"
      @click="titleClick(index)">
      {{ item }}
    </a>
  </template>
</nav-bar>

import NavBar from "../../components/common/navbar/NavBar.vue";

data() {
  return {
    title: ["商品", "参数", "评论", "推荐"],
    currentIndex: 0,
  }
},
components: {
  NavBar,
},
methods: {
  titleClick(index) {
    this.currentIndex = index;
  },  
  backClick() {
    // 点击返回
    this.$router.back();
  },
}

4. 轮播图展示

封装好的直接拿来用就行

Detail.vue：

<swiper class="detail-swiper">
  <swiper-item
    v-for="item in topImgs"
    :key="item">
    <img :src="item" alt="" />
  </swiper-item>
</swiper>

import Swiper from "../../components/common/swiper/Swiper.vue";
import SwiperItem from "../../components/common/swiper/SwiperItem.vue";

export default {
  data() {
    return {
      topImgs: [],
    }
  },
  created() {
	this.iid = this.$route.params.itemId;
	this.getDetailMessage(this.iid);
  },
  methods: {
    getDetailMessage(iid) {
      getDetailMessage(iid).then((res) => {
      this.topImgs = res.data.result.itemInfo.topImages;
    });
  },  
}
}

5. 商品详细数据的获取

我们的商品信息很复杂，我们应该整合数据到一个对象中，这里我们可以定义一个类

// detail.js
export class GoodsInfo {
  constructor(itemInfo, columns, services) {
    this.title = itemInfo.title
    this.desc = itemInfo.desc
    this.newPrice = itemInfo.price
    this.oldPrice = itemInfo.oldPrice
    this.discount = itemInfo.discountDesc
    this.columns = columns
    this.services = services
    this.realPrice = itemInfo.lowNowPrice
  }
}

import { GoodsInfo } from "../../network/detail";

data() {
  return {
    goods: {}
  }
},
methods: {
  getDetailMessage(iid) {
    getDetailMessage(iid).then((res) => {	  // new一个实例，将对应的参数传进去
      this.goods = new GoodsInfo(res.data.result.itemInfo,res.data.result.columns,res.data.result.shopInfo.services)
    });
  },
}