项目开发（4）-CSDN博客

本文链接：https://blog.csdn.net/Rashu99/article/details/115742884

详情页

在goodsItem里加上@click=“itemClick”
在这里插入图片描述
在route文件夹index.js里和之前写的一样复制粘贴path component
这样点击图片时就会跳转到新的页面详情页之前views只有四个新增一个Detail.vue

使用push可以点击浏览器back 回到首页

获取到商品id
在这里插入图片描述

导航栏

也封装一下 childComps
在这里插入图片描述

在这里插入图片描述

接着就要请求

图片轮播展示

所以在network文件夹下新建detail.js 和home.js 一样都需要引入request.js
然后写上url和参数

import {request} from "./request"

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

然后在Detatil里就要面向刚才封装的函数getDetail 所以就导入，然后在created里因为刚才保存了传入的iid，现在就根据iid请求详情数据
和之前一样写个空数组保存数据
在这里插入图片描述
因为这些图片也是要用轮播图而且swiper就是公共组件但是还是封装下 DetatilSwiper
这样比较好找在这里导入swiper,swiperItem 之前这两个组件又封装在index.js里这样就更方便一点
然后用props 传轮播图的数据因为是数组所以v-for遍历数组在图片里动态绑定item
在这里插入图片描述
ps:如果报错什么node before whice a new node 就是类名重复了虽然style 是scoped属性但是如果在swiper里使用的是querySelector的话那就不知道选择哪个类就会冲突

在这里插入图片描述
点返回重新点击图片发现详情页没变 iid还是原来的是因为之前在App.vue里使用了keep-alive 这样created只会调用一次 iid没变需要每次返回时都重新created 所以在keep-alive 后 exclude="Detail"就好

接着商品标题价格之类的

商品信息

因为有很多信息所以从服务器返回的这么多东西应该先封装到一个类里面
然后再创建类对应的对象用这个对象传到组件里这个组件再显示
在这里插入图片描述
然后导入Goods

然后根据实际数据名称写
然后使用它这里绑定goods 是在DetailBaseInfo.vue里的props

样式都在DetailBaseInfo
columns包括销量、收藏

商家信息

如上差不多的

滚动也使用bs
导入注册
然后因为在scroll组件里是使用了slot插槽所以这些 detail就是替换插槽的位置
在这里插入图片描述
但scroll 要设置固定高度才能滚动所以加个类content
有两种方法一种是定位一种是calc
这里用calc（100% - 44px） -10px感觉一样
在他的父级元素#detail要设置高度100vh 这样calc的100%才能实现
同时在滚动是导航栏要显示出来的话也是用相对定位比较好因为占位置不会脱标
在这里插入图片描述

详情图片

展示DetailGoodsInfo
和之前一样的图片加载完再发生一次imageLoad 不过这里不是用防抖而是判断图片的个数

在这里插入图片描述

评论展示

将时间戳（秒）转为时间格式化字符串

Date对象
在这里插入图片描述

export function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
}

function padLeftZero (str) {
  return ('00' + str).substr(str.length);
}