vue例項-購物車功能

Joanne. ?發表於2018-07-17

以下為該購物車的效果圖，能夠對購物車中的商品進行勾選/全選、商品的自增自減、自動結算功能以及單獨刪除和批量刪除的功能。

下列為程式碼具體步驟解說（搭建完結構的基礎上）：

1.通過for迴圈輸出陣列中的物件並填充到html結構中，在迴圈的時候加入index索引為了方便刪除單條資料的時候更快的找到該條資料在陣列中對應的位置。將input繫結item.pro_num，然後自增自減只需要判斷item.pro_num--或者是item.pro_num++即可；在判斷輸入框中的數值時順帶計算該條內容的總價，即為item.pro_num*item.pro_price;

js:

2.由於後臺在給資料的時候並不會標記該條記錄是否被選中，所以我們自己在mounted中給productList加一個select屬性來表示是否勾選，每條內容則可新增@click="item.select=!item.select"來進行選中和取消選中的效果，選中的新增一個select_true類名。

3.當select屬性有了，就可以判斷全選了：

用一個isSelectAll來判斷是否全選，如果productList的長度為0的話，則返回false不全選；然後通過every來逐個判斷select是否為true，如果為true的話，則全選；

點選全選時，通過for迴圈來遍歷出所有的select，使所有的select = !isSelectAll

4.再來就是勾選的數目以及所有的總價的計算了

5.最後，剩下刪除功能，刪除單個的話，很簡單，只需要找到對應的index索引，然後通過splice（）則可輕鬆實現；批量刪除的話，則需要找到陣列中select=false的資料，然後將productList資料替換為select=false的資料即可。

功能的解說已經完成了，最後貼上詳細程式碼~

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="../js/vue.min.js"></script>
    </head>
    <body>
        <!-- 購物車自增自減、價格統計、全選 -->
        <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;
                background: url("shopping_cart.png") no-repeat 0 0; 
            }
            .page-shopping-cart .check-span.check-true {
                background: url("shopping_cart.png") no-repeat 0 -22px; 
            }
            .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; 
            }
            .page-shopping-cart .cart-product-title {
                text-align: center;
                height: 38px;
                line-height: 38px;
                padding: 0 20px;
                background: #f7f7f7;
                border-top: 1px solid #e3e3e3;
                border-bottom: 1px solid #e3e3e3; 
            }
            .page-shopping-cart .cart-product-title .td-product {
                text-align: center;
                font-size: 14px; 
            }
            .page-shopping-cart .cart-product-title .td-check {
                text-align: left; 
            }
            .page-shopping-cart .cart-product-title .td-check .check-span {
                margin: 9px 6px 0 0; 
            }
            .page-shopping-cart .cart-product {
                padding: 0 20px;
                text-align: center; 
            }
            .page-shopping-cart .cart-product table {
                width: 100%;
                text-align: center;
                font-size: 14px; 
            }
            .page-shopping-cart .cart-product table td {
                padding: 20px 0; 
            }
            .page-shopping-cart .cart-product table tr {
                border-bottom: 1px dashed #e3e3e3; 
            }
            .page-shopping-cart .cart-product table tr:last-child {
                border-bottom: none; 
            }
            .page-shopping-cart .cart-product table .product-num {
                border: 1px solid #e3e3e3;
                display: inline-block;
                text-align: center; 
            }
            .page-shopping-cart .cart-product table .product-num .num-do {
                width: 24px;
                height: 28px;
                display: block;
                background: #f7f7f7; 
            }
            .page-shopping-cart .cart-product table .product-num .num-reduce span {
                background: url("shopping_cart.png") no-repeat -40px -22px;
                display: block;
                width: 6px;
                height: 2px;
                margin: 13px auto 0 auto; 
            }
            .page-shopping-cart .cart-product table .product-num .num-add span {
                background: url("shopping_cart.png") no-repeat -60px -22px;
                display: block;
                width: 8px;
                height: 8px;
                margin: 10px auto 0 auto;
            }
            .page-shopping-cart .cart-product table .product-num .num-input {
                width: 42px;
                height: 28px;
                line-height: 28px;
                border: none;
                text-align: center; 
            }
            .page-shopping-cart .cart-product table .td-product {
                text-align: left;
                font-size: 12px;
                line-height: 20px; 
            }
            .page-shopping-cart .cart-product table .td-product img {
                border: 1px solid #e3e3e3;
                margin-right: 10px; 
            }
            .page-shopping-cart .cart-product table .td-product .product-info {
                display: inline-block;
                vertical-align: middle; 
            }
            .page-shopping-cart .cart-product table .td-do {
                font-size: 12px; 
            }
            .page-shopping-cart .cart-product-info {
                height: 50px;
                line-height: 50px;
                background: #f7f7f7;
                padding-left: 20px; 
            }
            .page-shopping-cart .cart-product-info .delect-product {
                color: #666; 
            }
            .page-shopping-cart .cart-product-info .delect-product span {
                display: inline-block;
                vertical-align: top;
                margin: 18px 8px 0 0;
                width: 13px;
                height: 15px;
                background: url("shopping_cart.png") no-repeat -60px 0; 
            }
            .page-shopping-cart .cart-product-info .product-total {
                font-size: 14px;
                color: #e94826; 
            }
            .page-shopping-cart .cart-product-info .product-total span {
                font-size: 20px; 
            }
            .page-shopping-cart .cart-product-info .check-num {
                color: #333; 
            }
            .page-shopping-cart .cart-product-info .check-num span {
                color: #e94826; 
            }
            .page-shopping-cart .cart-product-info .keep-shopping {
                color: #666;
                margin-left: 40px; 
            }
            .page-shopping-cart .cart-product-info .keep-shopping span {
                display: inline-block;
                vertical-align: top;
                margin: 18px 8px 0 0;
                width: 15px;
                height: 15px;
                background: url("shopping_cart.png") no-repeat -40px 0; 
            }
            .page-shopping-cart .cart-product-info .btn-buy {
                height: 50px;
                color: #fff;
                font-size: 20px;
                display: block;
                width: 110px;
                background: #ff7700;
                text-align: center;
                margin-left: 30px; 
            }
            .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("shopping_cart.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>
        <div class="page-shopping-cart" id="shopping-cart">
            <h4 class="cart-title">購物清單</h4>
            <div class="cart-product-title clearfix">
                <div class="td-check fl"><span class="check-span fl check-all" :class="{'check-true':isSelectAll}" @click="selectOrNot(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>
                        <!-- 加入index用於刪除的時候判斷索引 -->
                        <tr v-for="(item,index) in productList">
                            <td class="td-check"><span class="check-span" :class="{'check-true':item.select}" @click="item.select=!item.select"></span></td>
                            <td class="td-product"><img src="../images/1.png" width="98" height="98">
                                <div class="product-info">
                                    <h6>{{item.pro_name}}</h6>
                                    <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>0?item.pro_num--:''"><span></span></a>
                                    <input type="text" class="num-input" value="3" 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">800</span>.00</p>
                            </td>
                            <td class="td-total">
                                <p class="red-text">￥<span class="total-text">{{item.pro_num*item.pro_price}}</span>.00</p>
                            </td>
                            <td class="td-do"><a href="javascript:;" class="product-delect" @click="deleteOne(index)">刪除</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="cart-product-info">
                <a class="delect-product" href="javascript:;" @click="deleteSome"><span></span>刪除所選商品</a>
                <a class="keep-shopping" href="#"><span></span>繼續購物</a>
                <a class="btn-buy fr" href="javascript:;">去結算</a>
                <p class="fr product-total">￥<span>{{total.totalPrice}}</span></p>
                <p class="fr check-num"><span>{{total.totalNum}}</span>件商品總計（不含運費）：</p>
            </div>
            <div class="cart-worder clearfix">
                <a href="javascript:;" class="choose-worder fl"><span></span>繫結跟單員</a>
                <div class="worker-info fl">
                </div>
            </div>
        </div>
        <script>
            new Vue({
                el:'#shopping-cart',
                data:{
                    productList: [
                        {
                            'pro_name': '【斯文】甘油 | 丙三醇',//產品名稱
                            'pro_brand': 'skc',//品牌名稱
                            'pro_place': '韓國',//產地
                            'pro_purity': '99.7%',//規格
                            'pro_min': "215千克",//最小起訂量
                            'pro_depot': '上海倉海倉儲',//所在倉庫
                            'pro_num': 3,//數量
                            'pro_img': '../../images/ucenter/../images/1.png',//圖片連結
                            'pro_price': 800//單價
                        },
                        {
                            'pro_name': '【斯文】甘油 | 丙三醇',//產品名稱
                            'pro_brand': 'skc',//品牌名稱
                            'pro_place': '韓國',//產地
                            'pro_purity': '99.7%',//規格
                            'pro_min': "215千克",//最小起訂量
                            'pro_depot': '上海倉海倉儲',//所在倉庫
                            'pro_num': 3,//數量
                            'pro_img': '../../images/ucenter/../images/1.png',//圖片連結
                            'pro_price': 800//單價
                        },
                        {
                            'pro_name': '【斯文】甘油 | 丙三醇',//產品名稱
                            'pro_brand': 'skc',//品牌名稱
                            'pro_place': '韓國',//產地
                            'pro_purity': '99.7%',//規格
                            'pro_min': "215千克",//最小起訂量
                            'pro_depot': '上海倉海倉儲',//所在倉庫
                            'pro_num': 3,//數量
                            'pro_img': '../../images/ucenter/../images/1.png',//圖片連結
                            'pro_price': 800//單價
                        }
                    ]
                },
                computed: {
                    // 檢測是否全選
                    isSelectAll:function(){
                        if(this.productList.length <= 0){
                            return false;
                        }
                        return this.productList.every(function(val){
                            return val.select;
                        })
                    },
                    total: function(){
                        var _pro = this.productList.filter(function(val){return val.select});
                        var totalPrice = 0;
                        for(var i = 0; i < _pro.length; i++){
                            totalPrice += _pro[i].pro_num * _pro[i].pro_price;
                        }
                        return {totalNum:_pro.length,totalPrice:totalPrice}
                    }
                },
                methods:{
                    // 全選與取消全選
                    selectOrNot:function(_select){
                        for(var i = 0; i < this.productList.length; i++){
                            this.productList[i].select = !_select;
                        }
                    },
                    // 單個刪除
                    deleteOne:function(index){
                        this.productList.splice(index,1);
                    },
                    // 批量刪除
                    deleteSome: function(){
                        this.productList = this.productList.filter(function(val){
                            return !val.select
                        })
                    }
                },
                mounted: function(){
                    var _this = this;
                    this.productList.map(function(item){
                        _this.$set(item,'select',true);
                    })
                }
            })
        </script>
    </body>
</html>複製程式碼

vue2.0實現購物車功能
2018-06-26
Vue
Vue實現簡單的購物車功能
2019-07-06
Vue
flutter 購物車功能
2019-01-25
Flutter
jquery簡單購物車功能
2017-04-15
jQuery
React實現購物車功能
2016-11-01
React
Vue實現購物車效果
2020-10-12
Vue
說說如何使用 Vue.js 開發購物車功能
2018-11-24
Vue.js
angularjs實現的購物車效果程式碼例項
2017-04-17
AngularJS
微信小程式的購物車功能
2021-01-04
微信小程式
微信小程式之購物車功能
2017-05-10
微信小程式
使用Vue做一個購物車
2019-03-03
Vue
VUE-書籍購物車案例
2020-11-13
Vue
Android實現商城購物車功能
2019-06-19
Android
angular實現購物車自動計算價格程式碼例項
2017-04-17
Angular
通過拖動將商品新增到購物車效果程式碼例項
2017-04-16
購物車模組
2020-12-06
Python Django實現簡單購物車功能
2017-06-26
PythonDjango
我的Vue之旅 11 Vuex 實現購物車
2022-11-24
Vue
iOS 購物車動畫
2017-02-25
iOS動畫
JavaScript商城購物車價格自動計算功能
2018-07-12
JavaScript
自學Vue的第06天：實戰之購物車
2019-06-13
Vue
淘寶買家授權API系列：新增購物車商品、刪除購物車商品、獲取購物車商品列表
2023-03-13
API
SAP Commerce Cloud Spartacus UI 的購物車 Cart 功能
2021-09-25
CloudUI
直播app原始碼，map實現購物車選擇功能
2022-07-04
APP原始碼
完善購物車系統
2017-07-14
[Vue2.0]手擼手淘H5購物車
2018-11-24
VueH5
直播商城原始碼，vue製作簡易的購物車
2022-07-01
原始碼Vue
Java中的策略模式，完成一個簡單地購物車，兩種付款策略例項教程
2020-08-14
Java模式
app直播原始碼，vue2 實現簡易購物車
2023-03-10
APP原始碼Vue
購物車的實現原理
2019-03-10
python之購物車程式
2021-09-09
Python
購物車原理以及實現
2018-08-19
jQuery 加入購物車彈窗
2019-01-20
jQuery
iOS加入購物車動畫效果
2017-12-13
iOS動畫
直播網站程式原始碼，採用Redis實現購物車功能
2023-03-17
網站原始碼Redis
改版後前端購物車系統
2021-09-09
前端
加入購物車動畫效果實現
2018-08-15
動畫
【jquery】實現購物車加減
2020-11-30
jQuery

vue例項-購物車功能

相關文章