尚品汇（八）

一、购物车

用户身份标识

(1).在加入购物车时，在api的request.js中设置请求拦截器

//请求拦截器:将来项目中【N个请求】，只要发请求,会触发请求拦截器!!!
requests.interceptors.request.use(config => {
    //请求拦截器:请求头【header】,请求头能否给服务器携带参数
    //请求拦截器：其实项目中还有一个重要的作用,给服务器携带请求们的公共的参数
    //进度条开始
    nprogress.start();

    if (store.state.shopcart.USER_ID) {
        config.headers.userTempId = store.state.shopcart.USER_ID;
    }

    //token[公共参数]

    if(store.state.user.token){
        // 请求头添加一个字段
        config.headers.token = store.state.user.token;
    }

    //每一次发请求,请求头携带用户临时身份
    // config.headers.userTempId = SET_USERID();
    //不管那个模块发请求,请求拦截器，都可以触发。请求拦截器可以通过请求头每一次协大公共参数给服务器【用户未登录的临时身份】
    return config;
});

(2)创建utils文件夹，存储游客信息

//利用uuid生成未登录用户临时标识符 每次执行不能发发生变化，游客身份持久存储
import { v4 as uuidv4 } from 'uuid';
//封装函数:只能生成一次用户临时身份
let userId;
export const SET_USERID = () => {
//先从本地存储中获取uuid
    userId = localStorage.getItem('USERTEMPID');
    //如果没有生成
    if (!userId) {
        userId = uuidv4();
        //生成后进行本地存储
        localStorage.setItem('USERTEMPID', userId);
    }
    return userId;
}

在加入购物车成功页面查看商品详情、跳转至购物车等操作

1.查看商品详情、去购物车结算

语法使用
使用to进行路由跳转，双引号中的是js的代码内容
加上反引号 中间就是字符串，
：to是响应式

 <div class="right-gocart">
          <router-link class="sui-btn btn-xlarge" :to="`/detail/${info.id}`">查看商品详情</router-link>
          <router-link to="/shopcart">去购物车结算 > </router-link>
        </div>

2.游客获取购物车信息

此时商品id、数量已经存入服务器，但是没有身份信息
（1）uuid临时游客身份 ，通过
（2）用户
购物车仓库shopcart.js

购物车组件挂载完毕发起请求获取数据

//组件挂载完毕,获取购物车的数据
  mounted() {
    //获取购物车的数据
    this.getData();
  },

 //获取购物车的数据请求函数
    getData() {
      this.$store.dispatch("getShopCart");
    },

购物车仓库接收请求

let actions = {
     //获取用户购物车的数据
     async getShopCart({ commit, state, dispatch }) {
     //请求api
          let result = await reqShopCart();
          if (result.code == 200) {
               commit('GETSHOPCART', result.data);
          }
     },

let mutations = {
     GETSHOPCART(state, payload) {
          state.shopCartInfo = payload;
     }
};

接口

//获取用户购物车的数据接口
export const reqShopCart = ()=>requests({url:'/cart/cartList',method:'get'});

3.购物车动态展示数据(三连环)
4.处理购物车产品数量
（1）通过输入框改变产品数量，给服务器传递的是修改前的值和修改后的值的差值
（2）判断输入框字符串是否合法 不合法不改变 合法传递产品id和改变差值给服务器，请求完毕后重新请求购物车数据
5.删除购物车产品
购物车组件中：点击删除按钮，传递商品id，调用删除函数，函数异步请求dipatch请求
仓库：接收请求，连接服务器，返回信息
购物车组件：重新获取数据

关于用户点击商品数量过快，导致商品数量失常的解决方法：

节流：一定时间内允许的请求次数，设置时间

6.修改商品选中状态
7.删除全部选中的商品
点击调用删除选中商品的函数，向仓库发送请求，deleteAllCart函数遍历商品，如果商品状态为被选中，则向deleteCartById发送请求并传递状态为被选中的商品的id

 //删除选中的商品
    async deleteAllCart(){
       try {
         //等待全部勾选商品删除以后
         await  this.$store.dispatch('deleteAllCart');
         //再次获取购物车的数据
         this.getData();
       } catch (error) {
         alert('删除失败');
       }
    }

 //删除选中的商品
     deleteAllCart({ commit, state, dispatch }) {
          let arr = [];
          //获取仓库里面购物车的数据
          state.shopCartInfo[0].cartInfoList.forEach(item => {
               //商品的勾选状态是勾选的,发请求一个一个删除
               if (item.isChecked == 1) {
                    let ps = dispatch('deleteCartById', item.skuId);
                    arr.push(ps);
               }
          })
          return Promise.all(arr);
     }

8.商品的全部勾选

 <div class="select-all">
        <input
          class="chooseAll"
          type="checkbox"
          @change="updateAllChecked($event)"
          :checked="isCartChecked && cartInfoList.length>0"
        />
        <span>全选</span>
      </div>

点击全选框，调用函数，判断全选框的选中状态。

 //全选的业务
    async updateAllChecked(e) {
      //获取全选的复选框勾选的状态,接口需要的1|0
      let isChecked = e.target.checked ? "1" : "0";
      try {
        //await等待成功:购物车全部商品勾选状态成功以后
        await this.$store.dispatch("allUpdateChecked", isChecked);
        this.getData();
      } catch (error) {
        alert('修改失败');
      }
    },

 //修改全部商品的勾选的状态
     allUpdateChecked({ commit, state, dispatch }, isChecked) {
          let arr = [];
          //获取购物车商品的个数,进行遍历
          state.shopCartInfo[0].cartInfoList.forEach(item => {
               //调用修改某一个商品的action【四次】
               let ps = dispatch("changeChecked", { skuId: item.skuId, isChecked });
               arr.push(ps);
          })
          //Promise.all():参数需要的是一个数组【数组里面需要promise】
          //Promise.all()执行一次,返回的是一个Promise对象,Promise对象状态：成功、失败取决于什么?
          //成功、还是失败取决于数组里面的promise状态:四个都成功、返回成功Promise、只要有一个失败、返回Promise失败状态！！！
          return Promise.all(arr);
     },

 //修改某一个商品勾选状态
     async changeChecked({ commit, state, dispatch }, { skuId, isChecked }) {
          let result = await reqUpdateChecked(skuId, isChecked);
          if (result.code == 200) {
               return 'ok';
          } else {
               return Promise.reject();
          }

     },