vue实现购物车+-计算价格删除当前选中商品,全选全不选

最新推荐文章于 2024-05-11 17:09:17 发布

沐辞糖

最新推荐文章于 2024-05-11 17:09:17 发布

阅读量949

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/yangwang666/article/details/119903426

版权

参考链接

基础学习vue

实例:

一丶引入vue.js

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>

二丶设计购物车样式

<style>
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, img, input, li, ol, p, table, td, textarea, th, ul {
            margin: 0;
            padding: 0;
        }
        .clearfix{
            zoom: 1;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix:after {
            content: '.';
            display: block;
            overflow: hidden;
            visibility: hidden;
            font-size: 0;
            line-height: 0;
            width: 0;
            height: 0;
        }
        a{
            text-decoration: none;
            color: #333;
        }
        img{vertical-align: middle;}
        .page-shopping-cart{
            width: 1200px;
            margin:50px auto;
            font-size: 14px;
            border:1px solid #e3e3e3;
            border-top:2px solid #317ee7;
        }
        .page-shopping-cart .cart-title{
            color:#317ee7;
            font-size: 16px;
            text-align: left;
            padding-left: 20px;
            line-height: 68px;
        }
        .page-shopping-cart .red-text {
            color: #e94826;
        }
        .page-shopping-cart .check-span{
            display: block;
            width: 24px;
            height: 20px;
            margin-top: 9px;
            background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F02%2F92%2F79%2F5abe0fbccf890_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632444069&t=36659734fa1c54d4f8dea4ee9a438d87") no-repeat 0 0;
        }

        /* 点击时改变勾选 */
        .page-shopping-cart .check-span.check-true{
            /*background: url('') no-repeat 0 -22px;*/
            background-color: #0C0C0C;
        }
        .page-shopping-cart .td-check{
            width:70px;
        }
        .page-shopping-cart .td-product{
            width:460px;
        }
        .page-shopping-cart .td-num, .page-shopping-cart .td-price, .page-shopping-cart .td-total{
            width:160px;
        }
        .page-shopping-cart .td-do{
            width:150px;
        }
        .cart-product-title{
            text-align: center;
            height: 38px;
            line-height: 38px;
            padding: 0 20px;
            background-color: #f7f7f7;
            border-top: 1px solid #e3e3e3;
            border-bottom: 1px solid #e3e3e3;
        }
        .cart-product-title .td-product{
            text-align: center;
            font-size: 14px;
        }
        .cart-product-title .td-check{
            text-align: left;
        }
        .cart-product-title .td-check .check-span .check-span{
            margin:9px 6px 0 0;
        }

        /* 内容开始 */
        .cart-product{
            padding: 0 20px;
            text-align: center;
        }
        .cart-product table{
            width: 100%;
            text-align: center;
            font-size: 14px;
        }
        .cart-product table td{
            padding: 20px 0;
        }
        .cart-product table tr{
            border-bottom:1px dashed #e3e3e3;
        }
        .cart-product table tr:last-child{
            border-bottom:none;
        }
        .cart-product table .product-num{
            border: 1px solid #e3e3e3;
            display: inline-block;
            text-align: center;
        }
        .cart-product table .product-num .num-do{
            width: 24px;
            height: 28px;
            background: #f7f7f7;
            display: block;
        }
        .cart-product table .product-num .num-reduce span{
            display: block;
            width: 6px;
            height: 2px;
            margin:13px auto 0 auto;
            background: url("cartBg.png") no-repeat -40px -22px;
        }
        .cart-product table .product-num .num-add span{
            display: block;
            width: 8px;
            height: 8px;
            margin:10px auto 0 auto;
            background: url("cartBg.png") no-repeat -60px -22px;
        }
        .cart-product table .product-num .num-input{
            width: 42px;
            height: 28px;
            line-height:28px;
            border:none;
            text-align: center;
        }
        .cart-product table .td-product{
            text-align: center;
            font-size: 12px;
            line-height: 20px;
        }
        .cart-product table .td-product img{
            border:1px solid #e3e3e3;
            margin-right: 10px;
        }
        .cart-product table .td-product .product-info{
            display: inline-block;
            vertical-align: middle;
            text-align: left;
        }
        .cart-product table .td-do{
            font-size: 12px;
        }

        /* 最后一行统计 */

        .cart-product-info{
            height:50px;
            line-height: 50px;
            background: #f7f7f7;
            padding-left: 20px;
        }
        .cart-product-info .delete-product{
            color:#666;
        }
        .cart-product-info .delete-product span{
            display: inline-block;
            vertical-align: top;
            margin:18px 8px 0 0;
            width:13px;
            height: 15px;
            background: url("cartBg.png") no-repeat -60px 0;
        }
        .cart-product-info .product-total{
            font-size: 14px;
            color:#e94826;
        }
        .cart-product-info .product-total span{
            font-size: 20px;
        }
        .cart-product-info .check-num{
            color:#333;
        }
        .cart-product-info .check-num span{
            color: #e94826;
        }
        .cart-product-info .keep-shopping{
            color: #666;
            margin-left: 40px;
        }
        .cart-product-info .keep-shopping span{
            display: inline-block;
            vertical-align: top;
            margin:18px 8px 0 0;
            width: 15px;
            height: 15px;
            background: url("cartBg.png") no-repeat -40px 0;
        }
        .cart-product-info .btn-buy{
            height: 50px;
            color: #fff;
            font-size: 20px;
            display: block;
            width: 110px;
            background: #ff7700;
            text-align: center;
            margin-left: 30px;
        }



        /* cart-worder */

        .page-shopping-cart .cart-worder {
            padding: 20px; }
        .page-shopping-cart .cart-worder .choose-worder {
            color: #fff;
            display: block;
            background: #39e;
            width: 140px;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            text-align: center;
            margin-right: 20px; }
        .page-shopping-cart .cart-worder .choose-worder span {
            display: inline-block;
            vertical-align: top;
            margin: 9px 10px 0 0;
            width: 22px;
            height: 22px;
            background: url("cartBg.png") no-repeat -92px 0; }
        .page-shopping-cart .cart-worder .worker-info {
            color: #666; }
        .page-shopping-cart .cart-worder .worker-info img {
            border-radius: 100%;
            margin-right: 10px; }
        .page-shopping-cart .cart-worder .worker-info span {
            color: #000; }

        .choose-worker-box {
            width: 620px;
            background: #fff; }
        .choose-worker-box .box-title {
            height: 40px;
            line-height: 40px;
            background: #F7F7F7;
            text-align: center;
            position: relative;
            font-size: 14px; }
        .choose-worker-box .box-title a {
            display: block;
            position: absolute;
            top: 15px;
            right: 16px;
            width: 10px;
            height: 10px;
            background: url("shopping_cart.png") no-repeat -80px 0; }
        .choose-worker-box .box-title a:hover {
            background: url("shopping_cart.png") no-repeat -80px -22px; }
        .choose-worker-box .worker-list {
            padding-top: 30px;
            height: 134px;
            overflow-y: auto; }
        .choose-worker-box .worker-list li {
            float: left;
            width: 25%;
            text-align: center;
            margin-bottom: 30px; }
        .choose-worker-box .worker-list li p {
            margin-top: 8px; }
        .choose-worker-box .worker-list li.cur a {
            color: #f70; }
        .choose-worker-box .worker-list li.cur a img {
            border: 1px solid #f70; }
        .choose-worker-box .worker-list li a:hover {
            color: #f70; }
        .choose-worker-box .worker-list li a:hover img {
            border: 1px solid #f70; }
        .choose-worker-box .worker-list li img {
            border: 1px solid #fff;
            border-radius: 100%; }
    </style>

三丶设置vue实例化内容

<div id="shopping-cart" class="page-shopping-cart">
    <h4 class="cart-title">购物清单</h4>
    <!-- 标题 -->
    <div class="cart-product-title clearfix">
        <div class="td-check fl">
            <!-- 当切换到check-true类名时就调用全选函数 -->
            <span class="check-span fl check-all" :class="{'check-true':isSelectAll}"
                  @click="selectProduct(isSelectAll)"></span>  <!-- 选择框 -->
            全选
        </div>
        <div class="td-product fl">商品</div>
        <div class="td-num fl">数量</div>
        <div class="td-price fl">单价(元)</div>
        <div class="td-total fl">金额(元)</div>
        <div class="td-do fl">操作</div>
    </div>

    <!-- 内容 -->
    <div class="cart-product clearfix">
        <table>
            <tbody>
            <tr v-for='(item,index) in productList'>
                <td class="td-check">
                    <span class="check-span" @click='item.select=!item.select' :class="{'check-true':item.select}">
                    </span>
                </td>
                <td class="td-product">
                    <img :src="item.pro_img" width="98" height="98" alt="">
                    <div class="product-info">
                        <h2>{{item.pro_name}}</h2>
<!--                        <p>品牌：{{item.pro_brand}}&nbsp;&nbsp;{{item.pro_place}}</p>-->
<!--                        <p>规格/纯度:{{item.pro_purity}}&nbsp;&nbsp;起定量：{{item.pro_min}}</p>-->
<!--                        <p>配送仓储：{{item.pro_depot}}</p>-->
                    </div>
                    <div class="clearfix"></div>
                </td>
                <td class="td-num">
                    <div class="product-num">
                        <a href="javascript:;" class="num-reduce num-do fl" @click='item.pro_num--'><span></span></a>
                        <input type="text" class="num-input" v-model='item.pro_num'>
                        <a href="javascript:;" class="num-add num-do fr" @click='item.pro_num++'><span></span></a>
                    </div>
                </td>
                <td class="td-price">
                    <p class="red-text">￥<span class="price-text">{{item.pro_price.toFixed(2)}}</span></p>
                </td>
                <td class="td-total">
                    <p class="red-text">￥<span class="price-text">{{item.pro_price*item.pro_num}}</span></p>
                </td>
                <td class="td-do">
                    <a href="javascript:;" class="product-delete" @click='deleteOneProduct(index)'>删除</a>
                </td>
            </tr>

            </tbody>
        </table>
    </div>

    <!-- 最后一行统计 -->
    <div class="cart-product-info">
        <a href="javascript:;" class="delete-product" @click='deleteProduct'><span></span>删除所选商品</a>
        <a href="#" class="keep-shopping"><span></span>继续购物</a>
        <a href="javascript:;" class="fr btn-buy">去结算</a>
        <a href="javascript:;" class="fr product-total">￥<span>{{getTotal.totalPrice}}</span></a>
        <a href="javascript:;" class="fr check-num"><span>{{getTotal.totalNum}}</span>件商品总计（不含运费）:</a>
    </div>

<!--    <div class="cart-worder clearfix">-->
<!--        <a href="javascript:;" class="choose-worder fl"><span></span>绑定跟单员</a>-->
<!--        <div class="worker-info fl">-->
<!--        </div>-->
<!--    </div>-->
</div>

四丶实例化vue对象内容JS

<script>
    new Vue({
        el:'#shopping-cart',
        data:{
            productList:[
                {
                    'pro_name':'小米电视大师至尊纪念版',
                    'pro_num':1,
                    'pro_img':'https://img0.baidu.com/it/u=3612597965,1770541226&fm=26&fmt=auto&gp=0.jpg',
                    'pro_price': 2000
                },
                {
                    'pro_name':'新款27英寸iMac',
                    'pro_num':1,
                    'pro_img':'https://img0.baidu.com/it/u=1641353646,126669045&fm=26&fmt=auto&gp=0.jpg',
                    'pro_price': 700
                },
                
            ]
        },
        computed:{
            // 检测是否全选
            isSelectAll:function(){
                //如果productList中每一条数据的select都为true,就返回true,否则返回false
                return this.productList.every(function(val){return  val.select})
            },

            // 获取总价和产品总数
            getTotal:function(){
                // 获取list中select为true的数据
                var _proList = this.productList.filter(function(val){return val.select}),
                    totalPrice = 0;
                for (var i = 0; i < _proList.length; i++) {
                    // 总价累加
                    totalPrice += _proList[i].pro_num * _proList[i].pro_price;
                }
                // 选择产品的件数就是_proList.lenth，总价就是totalPrice
                return{totalNum:_proList.length,totalPrice:totalPrice}
            }

        },
        methods:{
            // 全选与取消全选
            selectProduct:function(_isSelect){
                //遍历productList,全部取反
                for (var i = 0; i < this.productList.length; i++) {
                    this.productList[i].select = !_isSelect
                }
            },

            //删除选中的产品
            deleteProduct:function(){
                this.productList =this.productList.filter(function(item){return !item.select})
            },

            //删除单条产品
            deleteOneProduct:function(index){
                //根据索引删除productList的记录
                this.productList.splice(index,1);
            },
        },
        mounted:function(){
            //为productList添加select（是否选中字段，初始值为true）
            var _this=this;
            this.productList.map(function(item){    //map:'键值对'
                _this.$set(item,'select',true)      //往item添加select属性，默认为true
            })
        }
    })
</script>

五丶复选框需要自己给定图片显示

沐辞糖

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue实现购物车+-计算价格删除当前选中商品,全选全不选

参考链接基础学习vue实例:一丶引入vue.js对于制作原型或学习，你可以这样使用最新版本：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"&gt.
复制链接

扫一扫