web前端进阶_vue_购物车（商品选择（全选或者单选）、增加减少商品数量、删除商品、计算商品总和、商品信息和网络绑定）-基础篇11

购物车1:购物车效果2、购物车代码：html 代码：<!DOCTYPE html><html><head><meta charset="utf-8" /><title>购物车</title><link rel="stylesheet" type="text/css" href="css/index.css"/>&l

苏格尼塞

3053人浏览 · 2020-08-30 14:38:29

苏格尼塞 · 2020-08-30 14:38:29 发布

购物车

1:购物车效果

在这里插入图片描述

2、购物车代码：

html 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>购物车</title>
        
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        
	</head>
	<body>
		<div id="box">
            <div id="goods-box">
                <!-- 第一行 -->
                <div id="navig-box">
                    <!-- 全选 -->
                    <div class="select">
                        <input @change="selecAllAction" type="checkbox" id="select-all" v-model="selectAll">
                        <label for="select-all">全选</label>
                    </div>
                    <!-- 商品 -->
                    <div class="goods-info">商品</div>
                    <!-- 单价 -->
                    <div class="price">单价</div>
                    <!-- 数量 -->
                    <div class="count">数量</div>
                    <!-- 小计 -->
                    <div class="subtotal">小计</div>
                    <!-- 操作 -->
                    <div class="delete">操作</div>
                </div>
                
                <!-- ================显示商品信息============== -->
                <div class="goods" v-for="goods in goodsList" v-if="goods.title!=undefined">
                    <!-- 选中 -->
                    <div class="select">
                        <input v-model="goods.select" type="checkbox" id="select-all">
                    </div>
                    <!-- 商品 -->
                    <div class="goods-info">
                        <img v-bind:src="goods.image" >
                        <span>{{goods.title}}</span>
                    </div>
                    <!-- 单价 -->
                    <div class="price">{{goods.price}}</div>
                    <!-- 数量 -->
                    <div class="count">
                        <button @click="reduceCount(goods);goods.select=true">-</button>
                        <input type="text" name="" id="" v-bind:value="goods.count" />
                        <button @click="goods.count++;goods.select=true">+</button>
                    </div>
                    <!-- 小计 -->
                    <!-- 数字.toFixed(小数位数) -->
                    <div class="subtotal">￥{{(goods.count*goods.price).toFixed(2)}}</div>
                    <!-- 操作 -->
                    <div class="delete">
                        <span @click="goodsList.splice(goodsList.indexOf(goods), 1)">删除</span>
                    </div>
                </div>
                
            </div>
            
            <!-- =====================结算====================== -->
            <div id="account-box">
                <button type="button">删除选中商品</button>
                <div id="">
                    总共选中了<span id="count">{{totalCount}}</span>件商品 总计: <span id="total">￥{{totalPrice.toFixed(2)}}</span>
                </div>
                <button type="button">去结算</button>
            </div>
        </div>
        
		
        <!-- ===========外部js========= -->
        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

外部css代码：

 *{
    margin: 0;
    padding: 0;
}

#goods-box{
    width: 850px;
    /* height: 300px; */
    /* background-color: yellow; */
    margin-left: auto;
    margin-right: auto;
    
    overflow: hidden;
}

#navig-box{
    height: 40px;
    background-color: lightgray;
    
    line-height: 40px;
}
#navig-box>div{
    float: left;
    
}

.select{
    width: 70px;
    text-align: center;
}

.count,.delete,.price,.subtotal{
    width: 100px;
    text-align: center;
}

.goods-info{
    width: 380px;
    text-align: center;
}

/* ========每个商品========== */
.goods>div{
    float: left;
}

/* ====== 商品详情 ======*/
.goods>.goods-info{
    text-align: left;
    position: relative;
    /* background-color: #FF0000; */
    
}

.goods-info>img{
    width: 80px;
    height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.goods-info>span{
    position: absolute; 
    left: 90px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
}

/* ======单价====== */
.goods{
    /* background-color: seagreen; */
    overflow: hidden;
}
.goods>.price,.goods>.count,.goods>.subtotal, .goods>.delete,.goods>.select{
    /* background-color: salmon; */
    height: 120px;
    line-height: 120px;
}

/* =======数量======= */
.count>input{
    width: 30px;
    height: 20px;
    text-align: center;
}
.count>button{
    width: 20px;
    height: 22px;
}

/* =======操作======== */
.delete>span{
    color: gray;
    cursor: pointer;
}

/* ==========================结算===================== */
#account-box{
    width: 850px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    /* background-color: sandybrown; */
}

#account-box button:first-child{
    color: darkgray;
    border: 0;
    outline: 0;
    background-color: rgba(0,0,0,0);
    margin-top: 15px;
    font-size: 17px;
}

#account-box button:last-child{
    color: white;
    border: 0;
    outline: 0;
    background-color: red;
    width: 120px;
    height: 45px;
    font-size: 22px;
    position: absolute;
    right: 0;
    top: 15px;
}

#account-box>div{
    position: absolute;
    right: 220px;
    top: 15px;
}

#count{
    color: red;
}

#total{
    color: red;
    font-weight: 900;
    font-size: 20px;
}

js代码

// 1. ==============创建Vue对象=============
app1 = new Vue({
    el:'#box',
    data:{
        goodsList:null,
        selectAll:false
    },
    computed:{
        totalPrice:function(){
            return this.goodsList.reduce((x, y)=>{
                return x+y.count*(y.price==undefined?0:y.price)*Number(y.select)
            },0)
        },
        // 总数量
        totalCount:function(){
            return this.goodsList.reduce((x, y)=>{
                return x+y.count*Number(y.select)
            }, 0)
        }
    },
    methods:{
        selecAllAction:function(){
            this.goodsList.forEach((item)=>{
                item.select = this.selectAll     //item是对象，slect是其中的属性
            })
        },
        // 商品数量减少
        reduceCount:(goods)=>{
            if(goods.count >=2){
                goods.count--
            }
        }
    }
})

// 2.===============请求商品数据===============
$.ajax({
    url:'http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=20&sort=0',
    type:'GET',
    success:(result)=>{
        console.log(result)
        app1.goodsList = result.data.list.map((item)=>{
            return {
                image:item.image, 
                title:item.title, 
                price:item.originPrice,
                count:1,
                select: false
                }
        })
        console.log(app1.goodsList)
        
    }
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^