Vue复选功能实现

vue实现商品购物车全选与全不选

实现一个购物车

• 全选框实现对商家和商品的全选
• 商家全选框实现对当前商家所有商品的全选
• 取消其中一个商品则取消对应商家全选和全选框
• 选中一个商家下的所有商品则勾选对应商家的全选框，不勾选全选框
• 选中所有商品则勾选所有商家全选框和全选框

加入购物车 vue.js前端

methods:{
    // 加入购物车
        addCart() {
            if(this.token) {
                // 登录成功，继续进行添加到购物车
                let form_data = new FormData()
                form_data.append('token', this.token)
                form_data.append('sku_id', this.sku_id)
                form_data.append('sku_num', this.sku_num)
                axios({
                    url: this.base_url + '/cart/add_cart/',
                    method: 'post',
                    data: form_data
                }).then(res => {
                    console.log(res.data)
                })
            }else{
                // 没登陆，跳转到登录页页面，登录成功后，跳到本页面
                this.$router.push({
                    name: 'Login',
                    query: {
                        redirect: this.$route.fullPath
                    }
                })
            }
        },
}

后端加入购物车，使用redis实现

from rest_framework.views import APIView
from rest_framework.response import Response
import redis
from goods.models import SKU
from myuilts.user_util import check_token

cart_redis = redis.Redis(db=7)

class AddCart(APIView):
	# 添加购物车
    def post(self, request):
        token = request.data.get('token')
        sku_id = request.data.get('sku_id')
        sku_num = request.data.get('sku_num')
        # 解析
        user_info = check_token(token)
        if user_info:
            user_id = user_info.get('user_id')
            cart_redis.hincrby(user_id, sku_id, sku_num)
            return Response({'msg': '加入购物车成功', 'code': 200})
        else:
            return Response({'msg': '已过期，请重新登录', 'code': 400})

获取购物车信息

class ShowCart(APIView):
    """
    获取购物车信息
    """
    def get(self, request):
        token = request.query_params.get('token')
        user_info = check_token(token)
        if user_info:
            user_id = user_info.get('user_id')
            cart_dict = cart_redis.hgetall(user_id)
            cart_list = []
            for k, v in cart_dict.items():
                sku_obj = SKU.objects.get(pk=k.decode())
                cart_list.append({
                    'id': sku_obj.pk,
                    'name': sku_obj.title,
                    'price': sku_obj.price,
                    'img': sku_obj.img.url,
                    'sku_num': v.decode()
                })
            return Response({'msg': 'ok', 'code': 200, 'data': cart_list})
        else:
            return Response({'msg': '登录已过期，请重新登录', 'code': 400})

前端购物车页面 vue.js

<template>
	<div>
        <div class="total_count">全部商品<em>{{cart_list.length}}</em>件</div>
            <ul class="cart_list_th clearfix">
                <li class="col01">商品名称</li>
                <li class="col03">商品价格</li>
                <li class="col04">数量</li>
                <li class="col05">小计</li>
                <li class="col06">操作</li>
            </ul>
            <ul class="cart_list_td clearfix" v-for="sku in cart_list" :key="sku.id">
                <li class="col01"><input type="checkbox" name="" v-model="checkBox" :value="sku.id" @click="multipleSelect(sku.id, sku.price, sku.sku_num)"></li>
                <li class="col02"><img :src="base_url + sku.img"></li>
                <li class="col03">{{sku.name}}</li>
                <li class="col05">{{(sku.price).toFixed(2)}}元</li>
                <li class="col06">
                    <div class="num_add">
                        <a  class="add fl" @click="AddNum(sku.id)">+</a>
                        <input  type="text" class="num_show fl" :value="sku.sku_num">
                        <a  class="minus fl" @click="MinusNum(sku.id)">-</a>
                    </div>
                </li>
                <li class="col07">{{(sku.price * sku.sku_num).toFixed(2)}}元</li>
                <li class="col08"><a >删除</a></li>
            </ul>

            <ul class="settlements">
                <li class="col01"><input type="checkbox" name="" v-model="checked" @click="SelectAll"></li>
                <li class="col02">全选</li>
                <li class="col03">合计(不含运费)：<span>¥</span><em>{{(total).toFixed(2)}}</em><br>共计<b>{{skuCount}}</b>件商品</li>
                <li class="col04"><a href="" @click.prevent="toAccount">去结算</a></li>
            </ul>

    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            cart_list: [],
            base_url: 'http://127.0.0.1:8000',
            checkBox: []  // 选中的商品,
            total: 0,  // 计算总金额，
            checked： false  // 是否全选
            skuCount: 0  // 计算共多少件商品
        }
    },
    methods: {
        // 计算数量
        sumCount() {
            for(let i in this.cart_list) {
                this.skuCount += parseInt(this.cart_list[i].sku_num)
            }
            return this.skuCount
        }
        // 全选 
        SelectAll() {
            if(this.checked) {
                this.checkBox = []
                this.total = 0
                this.skuCount = 0
            }else{
                this.checkBox = []
                this.cart_list.forEach(item => {
                    this.ckeckBox.push(item.id)
                });
                this.sumTotal()
                this.sumCount()
            }
        }
        //计算金额
        sumTotal() {
            for(let i in this.cart_list) {
                this.total += this.cart_list.price * this.cart_list[i].sku_num
            }
            return this.total
        }
        // 多选
        multipleSelect(sku_id, sku_price, sku_num) {
            if(this.checkBox.includes(sku_id)) {
                // 条件成立，sku_id在checkBox中 需要删除
                this.checkBox.splice(this.checkBox.indexOf(sku_id), 1)
                this.total -= sku_price * sku_num
                this.skuCount -= parseInt(sku_num)
            }else{
                this.checkBox.push(sku_id)
                this.total += sku_price * sku_num
                this.skuCount += parseInt(sku_num)
            }
        }
    }
}
</script>