VUE -- 购物车功能

前言

开始我们常见的购物车之旅吧

思路梳理

购物车是我们常见的功能，思路：

1. 选中商品（多选或单选），合计显示选中商品价格
2. 全选：所有商品全部选中状态；取消全选：所有商品未选中状态
3. 手指左滑出现删除，逐个删除选中的商品

样式代码

<div class="container">
    <ul>
    	<li class="list-item" v-for="(cart,index) in cartList" :key="index" data-type="0">
    		<div class="list-box flex-align-center" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
    			<div class="check-box">
    			    <label :for="cart.cId" class="lable" :class="cart.isSelect ? 'isSelect' : ''">
    				<input :id="cart.cId" type="checkbox" :data-index="index" v-model="selectArr" @click="check(cart)">
    			    </label>
    			</div>
    			<router-link :to="{path:'/detail/'+cart.pId}" class="flex-align-center">
				    <div class="cartImg">
				        <img :src="cart.pImage" alt="">
				    </div>
    				<div class="cartDesc flex">
    					<div class="cart-top">
    						<p class="text-ellipsis">{{cart.pName}}</p>
    					</div>
    					<div class="cart-bottom flex-align-center flex-between"> 
    						<span>×{{cart.num}}</span>
    						<p class="price">￥<b>{{cart.pPrice}}</b></p>
    					</div>
    				</div>
    			</router-link>
    	    </div>
    		<div class="delete" @click="deleteItem" :data-index="index" :data-id="cart.cId">删除</div>
    	</li>
    </ul>
</div>

<div class="cartBottom-detail flex-between">
    <div class="flex">
        <div class="check-box-bottom">
            <label :class="isselectAll ? 'isSelect' : '' ">
            	<input type="checkbox" class="checkbox" @click="selectAll"/>
            </label>
        </div>
        <div class="all"> 全选</div>
    </div>
    <div class="submit-btn" >
        <div class="bottom-left">
          <p>合计: <span class="shopCoach">¥{{allCoach}}</span> </p>
        </div>
        <div class="subminCart" @click="onOrder">
          <p>提交订单</p>
        </div>
    </div>
</div>

功能代码

获取购物车部分调取后台接口，遍历购物车列表，给获取的数据增加isSelect属性

// 获取购物车信息
api.getCart()
.then((res) => {
    console.log(res)
    if (res.data.length == 0) {
        this.havePage = true;
    } else {
        this.cartList = res.data
        let that = this 
        this.cartList.forEach(function (item) {
    	    if (typeof item.isSelect == 'undefined') {
                that.$set(item, "isSelect", false)
    	    }
        })
    }
})

准备工作完成，我们开始实现功能啦~

单选

check (event) {
	const that = this
	that.radioArr = []
	event.isSelect = !event.isSelect
	that.cartList.forEach(function (item) {
	    that.radioArr.push(item.isSelect)
	})
	if (that.radioArr.indexOf(false) == -1) {
	    that.isselectAll = true;
	} else {
	    that.isselectAll = false;
	}
	this.onCalAllCoach()
},

全选

selectAll() {
    this.isselectAll = !this.isselectAll
    if (this.isselectAll) {
    	this.cartList.forEach(function (item) {
    	    item.isSelect = true
    	})
    } else {
    	this.cartList.forEach(function (item) {
    	    item.isSelect = false
    	})
    }
    this.onCalAllCoach()
},

计算价格

onCalAllCoach() {
    const that = this;
    that.allCoach = 0;
    that.cartList.forEach(function(item) {
        if(item.isSelect) {
            that.allCoach += item.num * item.pPrice;
        }
    })
},

向左滑动

//滑动开始
touchStart(e){
    // 记录初始位置
    this.startX = e.touches[0].clientX;
},

//滑动结束
touchEnd(e){
    // 当前滑动的父级元素
    let parentElement = e.currentTarget.parentElement;
    // 记录结束位置
    this.endX = e.changedTouches[0].clientX;
    // 左滑
    if( parentElement.dataset.type == 0 && this.startX - this.endX > 30 ){
        this.restSlide();
        parentElement.dataset.type = 1;
    }
    // 右滑
    if( parentElement.dataset.type == 1 && this.startX - this.endX < -30 ){
        this.restSlide();
        parentElement.dataset.type = 0;
    }
    this.startX = 0;
    this.endX = 0;
},

//判断当前是否有滑块处于滑动状态
checkSlide(){
    let listItems = document.querySelectorAll('.list-item');
    for( let i = 0 ; i < listItems.length ; i++){
    	if( listItems[i].dataset.type == 1 ) {
    	    return true;
    	}
    }
    return false;
},

//复位滑动状态
restSlide(){
    let listItems = document.querySelectorAll('.list-item');
    // 复位
    for( let i = 0 ; i < listItems.length ; i++){
        listItems[i].dataset.type = 0;
    }
},

向左滑动使用了vue-touch框架，具体内容请看：github.com/vuejs/vue-t…

删除

//删除
 deleteItem(e){
    console.log(e.currentTarget.dataset)
       // 当前索引
      let index = e.currentTarget.dataset.index;
      let id = e.currentTarget.dataset.id
      // 复位
      this.restSlide();
      // 删除,这里调用接口
	let form = this.$qs.stringify({
	    'cId': id
	})
	api.deleteCart(form)
	.then((del) => {
	    console.log(del)
  	this.cartList.splice(index,1);
    	Toast('删除成功')
    	if (this.cartList.length == 0) {
    	    this.havePage = true
    	}
    })
 },

结语

到这里基本上就完成啦~有什么问题还希望大家指正~