vue 小案例购物车

其他 2019-02-27 03:05:15 阅读次数: 0

最终效果

HTML部分：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>shopcar.html</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="css/shopcar.css">
    <script src="js/shopcar.js"></script>
</head>
<body>
        <div class="content1" id="content1">
                <div class="con1">
                    <input type="checkbox" id="all" class="all">
                    <p>全选</p>
                    <p>商品</p>
                    <p>单价</p>
                    <p>数量</p>
                    <p>小计</p>
                    <p>操作</p>
                </div>
                <div class="con2">
                    <ul class="uls1">
                    <input type="checkbox" class="jingdong">
                    <p class="uls1p2">京东自营</p>
                    </ul>
                    <ul class="uls1a">
                        <p>满赠</p>
                        <a href="#">活动商品满19，即可领取商品一件></a>
                        <p>查看赠品</p>
                        <a href="#">去凑单</a>
                    </ul>
                    <ul class="uls2" id="box">
                        <input type="checkbox" class="all all1">
                        <a href="#">
                            <img src="img/aaa.jpg" alt="">
                            <p>OPPO R11全网通双卡双待 64G 32G<br> 手机 玫瑰金色</p>
                        </a>
                        <p class="weight"><i id="weight">￥2000</i></p>
                        <button class="min"  @click="sub(1,2000)">-</button>
                        <input ref="add1" type="text" class="txt" v-model="add1">
                        <button class="add" @click="add(1,2000)">+</button>
                        <p class="xiaoji"><i id="xiaoji1">￥{{add2}}</i></p> 
                        <p class="a666 b666">删除</p>
                        <p class="a666">移到我的关注</p>
                        <p class="a666">加到我的关注</p>
                    </ul>
                    <ul class="uls2" id="box2">
                        <input type="checkbox" class="all all2">
                        <a href="#">
                            <img src="img/bbb.jpg" alt="">
                            <p>OPPO R11全网通双卡双待 64G 32G<br> 手机 玫瑰金色</p>
                        </a>
                        <p class="weight"><i id="weight">￥3000</i></p>
                        <button class="min"  @click="numsub(1,3000)">-</button>
                        <input ref="num1" type="text" class="txt" v-model="num1">
                        <button class="add" @click="numadd(1,3000)">+</button>
                        <p class="xiaoji"><i id="xiaoji1">￥{{num2}}</i></p> 
                        <p class="a666 b666">删除</p>
                        <p class="a666">移到我的关注</p>
                        <p class="a666">加到我的关注</p> 
                    </ul>
                    <div class="uls4">
                        <div class="uls4L">
                            <input type="checkbox" class="all">
                            <a href="#" class="delete">删除选中商品</a>
                            <a href="#">移到我的关注</a>
                            <a href="#">清除下柜商品</a>
                        </div>
                        <div class="uls4R">
                            <div class="uls4a">
                                <div class="uls4a1">
                                    <div class="aaa">
                                        <p>已选择<i class="chose">0</i>件商品^</p>
                                        <p>总价：<span>￥</span><i>{{num3}}</i></p>
                                    </div>
                                    <p class="bbb">已节省：￥- 00.0</p>
                                </div>
                            </div>
                            <div class="uls4b">
                                <a href="gouwu.html">去结算</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<div class="fixed">
    <p>京东商城</p>
    <span>您确认删除吗？</span>
    <button class="sure">确认</button>
    <button class="quxiao">取消</button>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/shopcar.js"></script>
<script type="text/javascript"> 	
</script>

css部分

/* common */
body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,code,form,input,textarea,p,th,td,fieldset,legend,figure{
    margin:0;
    padding:0;
    }
    body{
        font-family:"微软雅黑",Arial;
    }
    ul,ol{
        list-style:none;
    }
    a{
        text-decoration:none;
    }
    img{
        border:0;
    }

/* content1 */
.content1{
    width: 100%;
}
.con1{
    width:952px; 
    height: 36px;
    margin:0 auto;
    background: #f3f3f3;
}
.con1 input{
    float: left;
    margin-top: 10px;
}
.con1 p{
    float: left;
    font-size: 12px;
    line-height: 36px;
}
.con1 p:nth-child(3){
    margin-left: 60px;
}
.con1 p:nth-child(4){
    margin-left: 300px;
}
.con1 p:nth-child(5){
    margin-left: 93px;
}
.con1 p:nth-child(6){
    margin-left: 93px;
}
.con1 p:nth-child(7){
    margin-left: 93px;
}
.con1 p:nth-child(8){
    margin-left: 93px;
}
.con2{
    width: 952px;
    height: 364px;
    margin:0 auto;
    margin-top: 15px;
}
.con2 ul:first-child{
    width: 100%;
    height: 36px;
    border-bottom: 1px solid #ececec;
}
.uls1 input, .uls1 p, .uls1 img{
    float: left;
    margin-top: 10px;
}
.uls1{
    background: white;
}
.uls1 p{
    font-size: 12px;
}
.all{
    margin-right: 10px;
    margin-left: 20px;
}
.uls1p1{
    margin-right: 20px;
    font-weight: 600;
}
.jingdong{
    margin-left: 20px;
}
.uls1a{
    width: 100%;
    height:37px;
    border-top: 2px solid #aaaaaa;
}
.uls1a p,.uls1a a{
    float: left;
}
.uls1a p:nth-child(1){
    font-size: 14px;
    width: 35px;
    height: 20px;
    border: 1px solid #f5993c;
    text-align: center;
    line-height: 20px;
    color: #ff9933;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 5px;
}
.uls1a a:nth-child(2){
    font-size: 12px;
    margin-top: 10px;
    margin-right: 20px;
    color: #999999;
}
.uls1a p:nth-child(3){
    width: 60px;
    height: 20px;
    background:red;
    text-align: center;
    line-height: 20px;
    color: white;
    font-size: 14px;
    margin-top: 5px;
}
.uls1a a:nth-child(4){
    font-size: 12px;
    margin-top: 10px;
    margin-left: 10px;
    color: #666666;
}
.uls1p2{
    margin-left: 10px;
    color: white;
    width: 55px;
    height: 17px;
    background: #e4393b;
    text-align: center;
}
.uls2{
    width: 100%;
    height: 98px;
    border-bottom:1px dashed #ececec;
    background: white;
}
.uls2 input,.uls2 a,.uls2 img,.uls2 li,.weight,button{
    float: left;
}
.uls2 a img{
    width: 60px;
    border: 1px solid #ececec;
    margin-top: 17px;
}
.uls2 p,.uls2 span{
    font-size: 12px;
}
.uls2 a p{
    font-size: 12px;
    color: #666666;
    margin-top: 16px;
    float: left;
    margin-left: 10px;
}
.uls2 input{
    margin-top: 40px;
}
.uls2 li span{
    display: block;
}
.uls2 .txt{
    width: 32px;
    height: 19px;
    border: 1px solid #cccccc;
    border-left: none;
    border-right: none;
    outline:none; 
    text-indent: 10px;
    margin-top: 20px;
    font-weight: 600;
    font-size: 12px;
}
.weight{
    margin-left: 150px;
    margin-top: 19px;
}
.uls2 li{
    margin-top: 19px;
    margin-left: 66px;
    margin-right: 37px;
}
.uls2 button{
    width: 20px;
    height: 21px;
    border: none;
    border: 1px solid #cccccc;
    background: white;
    margin-top: 20px;
    outline:none; 
    cursor: pointer;
}
.uls2 li p{
    color: #999999;
    text-decoration: line-through;
}
.uls2 a .laji{
    width: 18px;
    float: left;
    margin-left: 60px;
    margin-top: 20px;
}
.xiaoji{
    float: left;
    margin-left: 47px;
    margin-top: 20px;
    margin-right: 80px;
}
.content1 i{
    font-style: normal;
}
.uls3{
    width: 100%;
    height: 36px;
    border-bottom: 1px dashed #cccccc;
    background: white;
}
.heji{
    float: right;
    margin-right: 20px;
}
.heji p,.heji span{
    float: left;
    font-size: 12px;
    line-height: 36px;
}
.heji span{
    color: #999999;
}
.heji p:nth-child(2),.heji p:nth-child(4){
    margin-right: 44px;
}
.uls4{
    width: 100%;
    height: 60px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    margin-top: 15px;
    background: white;
}
.uls4L{
    float: left;
    margin-left: 10px;
}
.uls4R{
    float: right;
}
.uls4L p{
    float: left;
    line-height: 60px;
    font-size: 12px;
    color: #999999;
    margin-right: 10px;
}
.uls4L input{
    float: left;
    margin-top: 25px;
    margin-right: 10px;
}
.uls4L a{
    font-size: 12px;
    color: #999999;
    line-height: 60px;
}
.uls4L a:first-child{
    margin-right: 5px;
}
.uls4a,.uls4b{
    float: left;
}
.uls4a1 p{
    float: left;
    font-size: 12px;
}
.uls4a2 p ,.uls4a2 span{
    float: left;
    font-size: 12px;
    margin-top: 10px;
}
.uls4a{
    margin-right: 20px;
}
.aaa p{
    font-size: 12px;
    color: #999999;
}
.aaa p:first-child{
    margin-right: 20px;
    margin-top: 20px;
}
.aaa p:last-child{
    margin-top: 20px;
}
.aaa span,.aaa i{
    color: red;
    font-weight: 600;
}
.bbb{
    float: left;
    color: #999999;
}
.shopnum{
    color: #ff9933;
    font-weight: 600;
}
.uls4b a{
    width: 70px;
    height: 61px;
    display: block;
    background: red;
    font-size: 14px;
    color: white;
    font-weight: 600;
    text-align: center;
    line-height: 60px;
}
.weight{
    margin-right: 60px;
}
.a666{
    cursor: pointer;
}
.fixed{
    position: fixed;
    width: 400px;
    height: 200px;
    background: white;
    z-index: 200;
    top:40%;
    left: 30%;
    border: 1px solid red;
    display: none;
}
.fixed p{
    width: 380px;
    height: 30px;
    background: red;
    font-size: 12px;
    color: white;
    line-height: 30px;
    padding-left: 20px;
}
.fixed span{
    display: block;
    color: #666666;
    margin-top: 20px;
    text-align: center;
}
.fixed button:nth-child(3){
   margin-left: 140px;
}
.fixed button{
    margin-right: 20px;
    border: none;
    width: 50px;
    height: 30px;
    margin-top: 50px;
    border: 1px solid red;
    color: red;
    background: white;
}

js部分

//基础加减
new Vue({
    el:"#content1",
    data:{
        add1:1,
        add2:2000,
        num1:1,
        num2:3000,
        num3:5000, //设置总价的最小值
    },
    methods:{
        add:function(inc,inc2,inc3){
            this.add1 += inc;
            this.add2 += inc2;
            this.num3 = this.add2 +this.num2;
        },
        sub:function(dec,dec2,dec3){
            this.add1 -= dec;
            this.add2 -= dec2;
            this.num3 = this.add2 +this.num2;
            if(this.add1 <= 1){
                this.add1 =1;
            }
            if(this.add2 <= 2000){
                this.add2 =2000;
            }
            if(this.num3 <= 5000){
                this.num3 =5000;
            }
        },
        numadd:function(mun1,mun2,mun3){
            this.num1 += mun1;
            this.num2 += mun2;
            this.num3 = this.add2 +this.num2;
            this.num3 = this.add2 +this.num2;
        },
        numsub:function(mun1,mun2,mun3){
            this.num1 -= mun1;
            this.num2 -= mun2;
            this.num3 = this.add2 +this.num2;
            if(this.num1 <= 1){
                this.num1 =1;
            }
            if(this.num2 <= 3000){
                this.num2 =3000;
            }
            if(this.num3 <= 5000){
                this.num3 =5000;
            }
        }, 
    }
});


$(function(){
    $(".b666").click(function(){
        var $this = $(this);
        $(".fixed").css("display","block");
        $(".sure").click(function(){
            $this.parent().css("display","none");
            $(this).parent().css("display","none");
        });
        $(".quxiao").click(function(){
            $(this).parent().css("display","none");
        });
    });
});

//全选
$("#all").click(function(){
    if($("#all[type='checkbox']").prop("checked") == true){ 
        $(".all").attr('checked', true);
        $(".chose").html(2);
        }else{
            $(".all").attr('checked', false); 
            $(".chose").html(0); 
        }
    });
$(".all1").click(function(){
    if($(".all1[type='checkbox']").prop("checked") == true){ 
            $(".chose").html(1);
            }else{
                $(".chose").html(0); 
            } 
});
$(".all2").click(function(){
    if($(".all2[type='checkbox']").prop("checked") == true){ 
            $(".chose").html(1);
            }else{
                $(".chose").html(0); 
            } 
});  

$(".delete").click(function(){
    if($(".all[type='checkbox']").prop("checked") == false){
        return;
    }
    if($("#all[type='checkbox']").prop("checked") == true){
        $(".uls2").css("display","none");
        $(".chose").html(0);
    } 
});

猜你喜欢

转载自blog.csdn.net/weixin_38404899/article/details/87939949
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022