• 實現單選時的價格，全選時價格
• 單選效果圖

• 全選效果圖

html

<template>
<!-- 淘寶結算購物車 -->
<div class="settlement-bill"> 
    <div class="settlement-group">
        <div class="settlement-item" v-for="(item,index) in items" :key="item.id">
            <i  class="iconfont" 
               @click="radioCheck(item,index)"
               :class=" item.isChecked ? 'icon-yuanyixuan' : 'icon-yuanweixuan'" ></i>
            <img :src="item.imgUrl" alt="">
            <div class="item-right">
                <p>{{item.content}}</p>
                <span class="item-money">${{item.money}}</span>
                <div class="item-num">
                    <span @click="reduce(index)">-</span>
                    <span>{{item.num}}</span>
                    <span @click="add(index)">+</span>
                </div>
            </div>
        </div>
    </div>
    <div class="settlement-bottom">
        <div class="bottom-left">
            <i @click="allCheck" class="iconfont " :class="checked ? 'icon-yuanyixuan' : 'icon-yuanweixuan' "></i>
             <p>全選</p>
        </div>
        <div class="bottom-right">
            <p>合計<span class="total-money">{{total}}</span></p>
            <div class="bottom-total">結算({{num}})</div>
        </div>
        <div class="clear"></div>
    </div>
</div>
</template>
 

js

<script>
export default {
    data(){
        return {
            checked: false,
            items: [
                {
                    id: 0,
                    imgUrl: '../../static/timg.jpg',
                    content: '雲南白藥牙膏家用去黃去口臭美白口氣清新585g牙膏牙刷套裝',
                    money: 99,
                    num: 1,
                },
                {
                    id: 1,
                    imgUrl: '../../static/maiguo.jpg',
                    content: '湖南小臺芒果帶箱10斤小臺芒果新鮮水果包郵',
                    money: 39.9,
                    num: 1
                },
                {
                    id: 2,
                    imgUrl: '../../static/baixiangguo.jpg',
                    content: '廣西新鮮熱帶水果百香果西番蓮雞蛋果10斤中果酸爽香甜',
                    money: 69.8,
                    num: 1
                }
            ]
        }
    },
    computed: {
        total(){
            let sum = 0;
            this.items.forEach(item=>{
                if(item.isChecked == true)sum += (item.money*item.num)
            })
            return Math.round(sum*100)/100;
        },
        num() {
            let num = 0;
            this.items.forEach(item=>{
                if(item.isChecked == true)num += item.num
            })
            return num;
        }
    },
    methods: {
        // 減少寶貝
        reduce(index) {
            if(this.items[index].num === 1) return 
            this.items[index].num--
        },
        // 增加寶貝
        add(index) {
            this.items[index].num++;

        },
        radioCheck(item,index) {
            let tmpState = !item.isChecked
            //改變單個狀態
            this.$set(item,'isChecked',tmpState)
            //檢測選擇狀態
            if(tmpState){
                let n = 0;
                this.items.forEach(itemu => {
                    if(itemu.isChecked) n++;
                })
                if(n == this.items.length)this.checked = true;

            }else {
                this.checked = false;
            }
        },
        allCheck(){
            this.checked = !this.checked;
            for(let i = 0,len = this.items;i < len.length;i++){
                this.$set(this.items[i],'isChecked',this.checked)
            }
        }
    }
    
}
</script>
 

css

<style lang="less">
* {
    padding: 0;
    margin: 0;
}
html,body,#app {
    height: 100%;
}
.settlement-bill {
    width: 100%;
    height: 100%;
    background:#e9eaeb;
    .settlement-group {
        padding: 20px;
        box-sizing: border-box;
        .settlement-item {
            position: relative;
            width: 100%;
            padding: 10px 5px;
            margin-bottom: 15px;
            box-sizing: border-box;
            background: #fff;
            .iconfont {
                position: absolute;
                top: 50%;
                left: 10px;
                margin-top: -10px;
                font-size: 20px;
                &.icon-yuanyixuan {
                    color: orangered;
                }
            }
            img {
                display: inline-block;
                width: 100px;
                height: 100px;
                margin-left: 25px;
            }
            .item-right {
                display: inline-block;
                vertical-align: top;
                width: calc(100% - 130px);
                p {
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/
                    -webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 **/
                    -webkit-line-clamp: 2; /** 顯示的行數 **/
                    overflow: hidden;  /** 隱藏超出的內容 **/
                    margin: 0 0 15px 0;
                }
                .item-money {
                    display: inline-block;
                    float: left;
                    color: orangered;
                }
                .item-num {
                    display: inline-block;
                    float: right;
                    span {
                        display: inline-block;
                        width: 25px;
                        border: 1px solid #dcdfe6;
                        text-align: center;
                        &:nth-child(2){
                            width: 50px;
                        }
                    }
                }
            }
        }
    }
    .settlement-bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 60px;
        line-height: 60px;
        padding-left: 30px;
        padding-right: 25px;
        box-sizing: border-box;
        background: #fff;
        .bottom-left {
            float: left;
            display: inline-block;
            .iconfont {
                font-size: 20px;
                &.icon-yuanyixuan {
                    color: orangered;
                }
            }
            p {
                display: inline-block;
            }
        }
        .bottom-right {
            display: inline-block;
            float: right;
            p {
                display: inline-block;
                .total-money {
                    color: orangered;
                }
            }
            .bottom-total {
                display: inline-block;
                min-width: 80px;
                height: 50px;
                line-height: 50px;
                margin-top:5px;
                text-align: center;
                border-radius: 20px;
                background: orangered;
                color: #fff;
            }
        }
        .clear {
            clear: both;
        }
    }
}

</style>
 

• 想寫這個小demo好久啦，終於寫好。

vue實現結算淘寶購物車效果