vue实现结算淘宝购物车效果

• 实现单选时的价格，全选时价格
• 单选效果图

• 全选效果图

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很久啦，终于写好。

遇到的vue3.0写法

import { Watch, Component, Vue, Emit, Prop } from "vue-class-decorator";
    // 没有组件
    @component
    
    // 有组件
    // import children from "./components/children.vue";
    // @component({ components:{children} })
    
    export class MyChildren extends Vue{
        username = ""; // 名字
        //userId 父子之间传值，必传默认是null
        @Prop({ type: String, required: true, default: null})
        userId: string;
        @Emit("changeChildren")
        changeChildren(){}
        
        created(){}
        mounted(){}
        // 方法
        cancel() {
            // 调用自定义函数
            this.changeChildren()
        }
    }