Vue3仿美团项目--第三天

3 第三天

主要任务：步进器和按钮，店铺底部导航栏，购物车部分开发

3.1 步进器和按钮

分析：当点击加号按钮的时候按钮消失，显示步进器，按钮消失可以通过改变从父组件接收的showAdd为flase或者是数组本身的add为true，showAdd是控制是从店铺来的还是从购物车来的，改变的话会是其他的也发生变化，所以通过改变add。

实现：数据是在商品列表组件里面的，所以在商品列表组件中定义这个方法，然后在商品信息组件中直接接收父组件传过来的方法，在图标上绑定。当点击子组件这个图标的时候触父组件传递的这个事件，然后从子组件把当前点击的商品的索引传递给父组件，然后在父组件中循环遍历数组，当id与传递的索引匹配上的时候，就把add改为flase，并且把num改为1（步进器数值默认为1)。

然后再定义步进器的点击事件，事件名称是根据官网来的。这样的话，当步进器的值发生改变的时候就出发事件，自动给父组件传递两个信息，父组件接收数据之后遍历数组，自动匹配与传过来的id值相等的商品，然后改变商品的num值。

事件名	说明	回调参数
change	当绑定值变化时触发的事件	value: string, detail: { name: string }

3.2 vuex

分析：点击添加商品之后需要把商品信息存到一个地方，在购物车中也需要使用。

实现：先下载vuex

npm i vuex@next -S

然后在src目录下新建一个文件store，新建index.js文件。在vuex中按需引入方法，调用createStore，导出vuex对象，定义一个数组，存放添加的商品信息。需要在main.js里面引入。

mutations赋值，actions做逻辑处理，在actions中触发mutations。

vuex在组件中的使用方法：

引入：import { useStore } from 'vuex'

定义：const store = useStore();

           return {store}

3.3 底部导航栏

3.3.1 引入到导航栏

店铺界面最下面一排的按钮，是在vant中导航组件的ActionBar动作栏，在main.js里面引入，并且use一下。然后在官网找到徽标提示组件，粘贴到店铺页面，根据自己需要进行修改。

<van-action-bar>

        <van-action-bar-icon icon="chat-o" text="客服" dot />

        <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />

        <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />

        <van-action-bar-button type="warning" text="加入购物车" />

        <van-action-bar-button type="danger" text="立即购买" />

</van-action-bar>

3.3.2 购物车上的数字

就是vuex中数组存储的信息的长度。

3.3.3 点击购物车

给导航栏绑定事件，点击购物车的时候跳转到购物车页面，编程式路由跳转。

 const toCart=()=>{

            router.push('/cart')

 }

3.3.4 加入购物车

点击加入购物车的时候，遍历数组，拿到num值，如果num大于1的时候，通过commit触发vuex里面的mutations，把商品信息传得给vuex里面的数组中。

当选中商品为0的时候，点击加入购物车需要弹出一个弹窗。使用vant组件里面的Toast请提示组件。在main.js引入Toast，然后在组件中引入showFailToast，当传递的新数组的长度为0的时候，点击加入购物车就会触发这个提示组件。

import {  showFailToast } from 'vant';

3.3.5 点击立即购买

点击立即购买需要加入购物车同时跳转到购物车界面，在点击立即购买的函数里调用加入购物车方法。传递一个type，从购物车方法里面传递一个参数过去，判断当点击的是立即购买的时候才会调用直接跳转到购物车的方法。

3.4 购物车

3.4.1 顶部

直接用公共组件里面的Header，传递一个 title="购物车" 给Header组件。

3.4.2 底部导航栏

直接引入公共组件里面的Footer。

3.4.3 空组件

当购物车中没有商品的时候显示空组件的内容，在公共组件中新建一个空组件，从阿里巴巴矢量图中引入一个空盒子的图标。图标下面有空空如也四个文字，然后设置样式。引入到购物车页面。

当购物车中有商品的时候是引入的公共组件中的商品信息组件。需要判断当vuex中传入的数组的长度为0的时候就显示空组件，当不为0的时候就显示商品信息组件。

3.4.5 购物车的子组件

vant组件里面的表单组件中Checkbox复选框的全选和反选。首先在main.js引入，并且use一下，使用官网中的自定义形状下的代码复制到要用的组件中。

在购物车目录下新建一个components文件夹存放购物车的子组件，子组件中包含选购的商品信息和底部的全选结算按钮。

1.显示选购的商品：

把从官网复制的代码的外层 van-checkbox-group 粘贴到子组件中，遍历vuex里面选购的商品的数组，引入商品信息公共组件显示的。

2.显示复选框：

把官网复制的复选框的代码的里面的 van-checkbox 粘贴到公共的商品信息组件的图片前面，需要判断是否显示，通过父组件传递一个 showCheckbox 设置为true。

3.导航栏上面的结算：

使用vant里面的 SubmitBar 提交订单栏 中的高级用法组件，去掉修改地址。

4.全选和反选：

1）判断全选：当选中项数组与vuex中存储的数组长度不一样，重新调用商品初始化的方法。

2）复选框：通过输出点击复选框时传递的参数发现，数组中包含的是所有被选中的商品，因此可以通过判断，当被选中的商品的数组的长度与购物车中的商品的数组的长度相同的话，就勾选全选，如果不同，全选就为false。还需要更新每次点击之后最新的勾选商品数组，记录下来，如果不写的话外边的数组会一直不变。

3.合计：定义一个方法，用计算属性计算总的价钱。用filter方法从vuex的数组中过滤出所有选中的商品，得到一个新数组，里面只包含选中的商品。计算商品的总价钱，定义sum，遍历过滤出的数组，将每一项的价格乘以她对应的num值，然后再相加。（总价钱在绑定的时候乘以100，因为引用的van组件默认是往前点两位小数点）

#┭┮﹏┭┮ ┭┮﹏┭┮...................