vue电商项目(四)——开发Detail页面

目录

一、页面开发初始化

1、开发前准备

 2、路由跳转

3、滚动行为

二、获取数据

1、准备好API接口

2、仓库三连环

3、发送dispatch,将数据渲染到组件

 三、完成页面渲染业务

1、通过计算属性简化数据

2、ZOOM放大镜

(1)解决数据未返回假报错

(2) 完成轮播图

(3)放大镜相关业务

3、购买产品个数业务

4、加入购物车

---

一、页面开发初始化

1、开发前准备

我们先将准备好的页面复制到pages中。由于此组件还没有配置路由，我们应该配置路由

 2、路由跳转

我们在设置路由的时候提前占位，为了传递params参数。这里我们直接点击图片即可跳转。

并在通过进行跳转的时候将产品的ID一起带过去。

3、滚动行为

页面一跳转到detail页面的时候，滚轮应该是在最顶部，但是这里却不是，我们这里就要用到路由的滚动行为，scrollBehavior。

注意：为了方便使用，我们将配置的路由单独放在一个文件夹内然后引入使用即可。

二、获取数据

1、准备好API接口

2、仓库三连环

3、发送dispatch,将数据渲染到组件

 三、完成页面渲染业务

1、通过计算属性简化数据

为了防止数据未返回前页面渲染的时候未得到数据而报错，所以我们至少要返回一个空数组

 通过mapGetters获取数据到页面

然后就是根据数据渲染放大镜上部和左边的数据，这里就不进行记录了

2、ZOOM放大镜

(1)解决数据未返回假报错

数据未返回的时候会报错。

(2) 完成轮播图

轮播图的数据是父组件给的，所以数据已经回来了，所以我们只要保证页面渲染完成就可以new Swiper了，这里依然采用watch + $nextTick

这里还需要将点击图片的时候将索引值值传递给兄弟组件，这里我么用的是全局事件总线。

兄弟组件收到index值，通过改变响应式数据从而改变大图的显示。

(3)放大镜相关业务

通过refs拿到遮罩层和大图，计算出遮罩层和大图的left和top

 js操作

这里需要注意的就是计算出来的结果需要 加上“px”,这里计算宽度右边距范围的时候记得有一个隐形的条件就是遮罩层的宽度是大盒子宽度的一半，如果不加入这个条件，则无法理解这个范围条件。

 

3、购买产品个数业务

首先产品个数是整数且大于1，初始值就是1，且必须是数字，将输入的值*1，判断是不是isNaN或者小于1,如果是我们就让其等于1，如果不是我们对其结果取整即可。

这里我只通过数据监测完成，不绑定事件了。

4、加入购物车

加入购物车要发送请求，告诉服务器你的购买信息。

这块儿的话我们肯定是要收集这个商品的数量然后后边还要显示然后计算价格啥的，所以这里的话要使用v-model收集一下子，然后点击加号就+1，点击减号就-1，但是这个数量不能<1，所以减号这里要加个判断。

 

   

     
     +
     -
   
   

     加入购物车
   
 
 
  ......
  data() {
    return {
      // 用户加入购物车的商品个数
      shopCarNum: 1
    }
  },

用户可能输入任何花里胡哨的值，所以我们要对其进行校验，首先给这个输入框绑定一个onchange事件，当加入购物车数量输入框的内容改变时离开焦点触发此函数。

 第一种：用户输入非数值字符串 ，让它乘以1，因为任何非数值字符串乘以1都会是NaN
第二种：用户输入负数，这种情况和第一种情况如果有一个出现，那么就置为默认值1
第三种：用户输入小数，直接改为取整。

 //onchange事件:加入购物车数量输入框的内容改变时离开焦点触发此函数
 changeShopCarNum() {
    //拿到用户输入的值做校验
    let value = this.shopCarNum * 1; //1.任何非数值字符串乘以1都会是NaN  
    if (isNaN(value) || value < 1) {
      this.shopCarNum = 1;  //2.如果用户输入非数值字符串或负数,那么就改成1
    }
    //3.如果用户输入正常,就向下取整(避免用户输入小数点)
    else {
      this.shopCarNum = parseInt(value);
    }
  }