Vue案例:商品购物车(三)

效果图

底部合计

合计就是把选中商品的金额全部加到一起,当然它也不止这点功能,它还可以看你选了几件商品,还有批量删除功能,最左边还有一个跟顶部一样的全选框。

批量删除功能:

        allDel() {
            this.Commodity =
                this.Commodity.filter(item => {
                    // console.log(item)
                    return item.decide === false
                });
        },

选中的商品:

settle() {
            let a = 0
            this.Commodity.forEach(item => {
                if (item.decide === true) {
                    a++
                }
            })
            return a
        }
合计

这个底部合计虽然是在底部的,但是在商品列表很长的时候,它其实是会出现在屏幕的最下方的,等到,用户到达最下方的时候会重新回归原位。

scrollToTop() {
            // 获取视窗高度
            let domHight = document.body.offsetHeight;
            // dom滚动位置
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            //   获取窗口高度
            let height = document.documentElement.clientHeight + 100
            // 元素的高度
            // let summarize = this.$refs.summarize.scrollTop
            if (domHight <= 600) {
                return
            }
            if (domHight  < scrollTop + height) {
                this.fixed = false
            } else {
                this.fixed = true
            }
        }
    },
    mounted() {
        window.addEventListener('scroll', this.scrollToTop);
    },
    destroyed() {
        // 跳页的时候销毁
        window.removeEventListener('scroll', '')
    },

好了,差不多这个案例的功能,和实现原理就讲完了,下面有这个案例的全部代码,如果有什么不好的地方,大家可以批评。

这是全部代码:





    
    
    
    商品购物车
    



    
全选
单价 数量 小计(元) {{del?'完成':'编辑'}}
  • {{item.name}}

    {{item.text}}

    {{item.money.toFixed(2)}}
    - +

    最多能只能买50件

    {{item.subtotal.toFixed(2)}}

    --

全选

删除选中的商品

一共有{{summarize}}件商品,已经选了{{settle}}

合计(不包运费):¥{{allMoney.toFixed(2)}}

body {
    margin: 0;
    padding: 0;
}

span,
p,
input,
i,
ul,
li,
input,
button,
strong {
    margin: 0;
    padding: 0;
    list-style: none;
}

.big-box {
    width: 100%;
    height: auto;
    margin: 0 auto;
    background-color: #edfcfd;
    box-shadow: 0 1px 6px #999;
    overflow: hidden;
}

.title-box {
    width: 100%;
    height: 48px;
    background-color: #f5f5f5;
    box-shadow: 0 1px 1px #d1d1d1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 10px;
    margin: 0 auto;
}

.title-box div {
    height: 100%;
    line-height: 48px;
    color: #999;
}

/* 全选 */
.checktext {
    width: 40%;
    display: flex;
    align-items: center;
}

.checktext span {
    font-size: 18px;
    color: #333;
}

/* 介绍 */
.text-box {
    width: 60%;
    text-align: center;
    overflow: hidden;
}

.text-box span {
    float: left;
    width: 25%;
    height: 100%;
    font-weight: 300;
}

.text-box span:last-child {
    color: #47e3ee;
    cursor: pointer;
}

.checkbox {
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border: 1px solid #777;
    cursor: pointer;
}

.allCheck {
    background: url('../images/yes.png') no-repeat;
    background-size: 18px;
    background-color: #47e3ee;
}

/* 商品区 */
.content-box {
    height: auto;
    width: 100%;
    background-color: #edfcfd;
}

.content-box li {
    height: 180px;
    width: 100%;
    box-shadow: 0 1px 3px #d1d1d1;
    margin: 4px 0;
    background-color: white;
}

.img-box {
    float: left;
    width: 40%;
    height: 100%;
}

.img-check {
    float: left;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
}

.img-check img {
    max-width: 140px;
    min-height: 120px;
}

.introduce {
    float: left;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.introduce p {
    color: #333;
    font-size: 18px;
    width: 100%;
    height: auto;
    margin-top: 40px;
    margin-left: 10px;
    word-wrap: break-word;
    word-break: normal;
}

.introduce p:nth-child(2) {
    margin-top: 0;
    font-size: 16px;
    color: #999;
    font-weight: 300;
}

.money {
    float: left;
    width: 60%;
    height: 100%;
    line-height: 180px;
}

.money div {
    float: left;
    width: 25%;
    height: 100%;
    text-align: center;
    font-size: 20px;
    color: #333;
}

.quantity-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.quantity-box .quantity {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 46px;
}

.quantity-box .quantity span {
    width: 24px;
    height: 26px;
    border: 1px solid #99999966;
    line-height: 26px;
    color: #777;
    user-select: none;
}

.quantity-box .quantity span:hover {
    color: #47e3ee;
}

.quantity input {
    width: 50px;
    height: 26px;
    outline: none;
    border: 0;
    border-top: 1px solid #99999966;
    border-bottom: 1px solid #99999966;
    text-align: center;
}

.quantity-box p {
    float: left;
    width: 100%;
    height: 20px;
    color: #999;
    font-size: 14px;
    line-height: 2;
}


.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

.money div .del {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('../images/del.png') no-repeat;
    background-size: 20px;
    cursor: pointer;
}

.summarize-box {
    width: 100%;
    height: 120px; 
}

.summarize {
    width: 100%;
    height: 120px;
    margin: 20px 0;
    background-color: white;
    box-shadow: 0 1px 3px rgb(153, 153, 153);
    color: #999;
}

.summarizeFixed {
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    height: 120px;
}

.summarize .summarizeLeft {
    float: left;
    width: 50%;
    height: 100%;
    line-height: 80px;
    display: flex;
    align-items: center;
}

.summarize .summarizeLeft p {
    margin-left: 20px;
    user-select: none;
}

.summarize .summarizeLeft p:first-of-type:hover {
    color: #47e3ee;
    cursor: pointer;
}

.summarizeLeft .summarizeCheck {
    width: auto;
    height: 100%;
    margin-left: 20px;
    display: flex;
    align-items: center;
}

.summarize .summarizeRight {
    float: left;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summarize .summarizeRight strong {
    font-size: 20px;
    color: red;
}

.summarize .summarizeRight button {
    width: 120px;
    height: 40px;
    background-color: #ff5f5f;
    color: white;
    border: 0;
    font-size: 16px;
    box-shadow: 0 1px 1px #999;
    margin-left: 20px;
    border-radius: 5px;
    cursor: pointer;
}
Vue.config.productionTip = false

new Vue({
    el: '#app',
    data: {
        Commodity: [{
            name: '相机',
            text: '一亿像素,画面更清晰',
            src: './images/camera.jpeg',
            // 数量
            quantity: 1,
            // 单价
            money: 99.10,
            // 小计
            subtotal: 0,
            decide: false
        }, {
            name: '毛绒衬衫',
            text: '最新推出,八折优惠',
            src: './images/clothes1.jpeg',
            quantity: 1,
            money: 128.88,
            subtotal: 0,
            decide: false
        }, {
            name: '保暖大衣',
            text: '冬季的必备物品',
            src: './images/clothes2.jpeg',
            quantity: 1,
            money: 246.9,
            subtotal: 0,
            decide: false
        }, {
            name: 'vivo X70 Pro',
            text: '最新推出的vivo手机',
            src: './images/mobile.jpg',
            quantity: 1,
            money: 3999,
            subtotal: 0,
            decide: false
        }, {
            name: '电动牙刷',
            text: '一次充电,超长续航',
            src: './images/toothbrush.jpg',
            quantity: 1,
            money: 399,
            subtotal: 0,
            decide: false
        }, {
            name: '儿童玩具一',
            text: '一个普普通通的玩具小船',
            src: './images/toy1.jpeg',
            quantity: 1,
            money: 60.99,
            subtotal: 0,
            decide: false
        }, {
            name: '儿童玩具二',
            text: '可爱的毛绒玩具',
            src: './images/toy2.jpeg',
            quantity: 1,
            money: 58,
            subtotal: 0,
            decide: false
        }, {
            name: '儿童玩具三',
            text: '趣味玩具',
            src: './images/toy3.jpeg',
            quantity: 1,
            money: 89,
            subtotal: 0,
            decide: false
        }],
        del: false,
        all: false,
        fixed: false
    },
    methods: {
        last(i) {
            this.del = !this.del
        },
        add(i) {
            if (this.Commodity[i].quantity >= 50) return
            this.Commodity[i].quantity++
        },
        minus(i) {
            if (this.Commodity[i].quantity <= 1) return
            this.Commodity[i].quantity--
        },
        lose(i) {
            if (this.Commodity[i].quantity > 50 || this.Commodity[i].quantity < 0 || this.Commodity[i].quantity === '') {
                alert('数量不正确')
                this.Commodity[i].quantity = 1
            }
        },
        deleteLi(i) {
            this.Commodity.splice(i, 1)
            this.decideCheck('')
        },
        allCheck() {
            this.all = !this.all
            this.Commodity.forEach(p => {
                p.decide = this.all
            })
        },
        decideCheck(i) {
            if (i !== '') {
                this.Commodity[i].decide = !this.Commodity[i].decide
            }
            for (let index = 0; index < this.Commodity.length; index++) {
                if (this.Commodity[index].decide === false) {
                    this.all = false
                    return
                }
            }
            this.all = true
        },
        allDel() {
            this.Commodity =
                this.Commodity.filter(item => {
                    // console.log(item)
                    return item.decide === false
                });
        },
        scrollToTop() {
            // 获取视窗高度
            let domHight = document.body.offsetHeight;
            // dom滚动位置
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            //   获取窗口高度
            let height = document.documentElement.clientHeight + 100
            // 元素的高度
            // let summarize = this.$refs.summarize.scrollTop
            if (domHight <= 600) {
                return
            }
            if (domHight  < scrollTop + height) {
                this.fixed = false
            } else {
                this.fixed = true
            }
        }
    },
    mounted() {
        window.addEventListener('scroll', this.scrollToTop);
    },
    destroyed() {
        // 跳页的时候销毁
        window.removeEventListener('scroll', '')
    },
    computed: {
        summarize() {
            return this.Commodity.length
        },
        settle() {
            let a = 0
            this.Commodity.forEach(item => {
                if (item.decide === true) {
                    a++
                }
            })
            return a
        },
        allMoney() {
            let money = 0
            this.Commodity.forEach(item => {
                if (item.decide === true) {
                    money = money + item.subtotal
                }
            })
            return money
        }
    },
    watch: {
        Commodity: {
            handler(newvalue, oldvalue) {
                // console.log(newvalue)
                if (newvalue.length > 0) {
                    for (let index = 0; index < newvalue.length; index++) {
                        newvalue[index].subtotal = newvalue[index].quantity * newvalue[index].money
                    }
                }
            },
            deep: true,
            immediate: true
        }
    }
})

你可能感兴趣的:(Vue案例:商品购物车(三))