vue购物车的小应用

最新推荐文章于 2024-08-19 16:46:32 发布

骚年008

最新推荐文章于 2024-08-19 16:46:32 发布

阅读量186

点赞数

分类专栏： Vue 文章标签： shopCar

本文链接：https://blog.csdn.net/qq_36245035/article/details/81203819

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="warp">
        <ul>
            <li v-for="(item,index) in goodsArr">
                {{item.name}}---{{item.price}}元---
                <button @click="subtractAction(index)">➖</button>
                <input type="text" v-model="item.count" />
                <button @click="addAction(index)">➕</button>
            </li>
        </ul>
        <!--邮费:{{postage}}  应付价:{{pay}}元-->
        <h3>总价:{{total}}
            &nbsp;&nbsp;折后价:{{discount}}
            &nbsp;&nbsp;满减:{{deducePrice}}
            &nbsp;&nbsp;邮费:{{postage}}
            &nbsp;&nbsp;应付价:{{pay}}元
        </h3>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /*买2件8.8折	 买4件7.8折	500-50   700—100	
     邮费：20	满399包邮	为您优惠了：？	 求应付：？ */

    var warp = new Vue({
        el: '#warp',
        data: {
            goodsArr: [
                { 'name': '牛肉干', 'price': 88, 'count': 0 },
                { 'name': '萝卜干', 'price': 99, 'count': 0 },
                { 'name': '龙眼干', 'price': 66, 'count': 0 },
                { 'name': '青菜干', 'price': 28, 'count': 0 },
                { 'name': '番薯干', 'price': 38, 'count': 0 }
            ],
        },
        computed: {
            //			商品总数目
            countAll() {
                var count = 0;
                this.goodsArr.map((item) => {
                    count += item.count;
                })
                return count;
            },
            //			商品总价
            total() {
                var tmp = 0;
                this.goodsArr.map((item) => {
                    tmp += item.price * item.count;
                })
                return tmp;
            },
            //			折后价
            discount() {
                //				2到4件商品8.8折
                if (2 <= this.countAll && this.countAll < 4) {
                    return Math.round(this.total * 88) / 100;
                    //				4+件7.8折
                } else if (this.countAll >= 4) {
                    return Math.round(this.total * 78) / 100;
                } else {
                    return this.total;
                }
            },
            //			满减
            deducePrice() {
                var tmp = this.discount
                //				如果打完折的价格在500~700间减50
                if (tmp >= 500 && tmp < 700) {
                    return Math.round((tmp - 50) * 100) / 100;
                    //				大于700减100
                } else if (tmp >= 700) {
                    return Math.round((tmp - 100) * 100) / 100;
                } else {
                    return tmp;
                }
            },
            //			邮费
            postage() {
                var tmp = this.deducePrice;
                //				如果在1-399间20邮费
                if (tmp < 399 && tmp > 0) {
                    return 20;
                    //					超过399包邮
                } else {
                    return 0;
                }
            },
            //			应付
            pay() {
                return this.deducePrice + this.postage;
            }
        },
        methods: {
            subtractAction(index) {
                this.goodsArr[index].count--;
            },
            addAction(index) {
                this.goodsArr[index].count++;
            }
        }
    })

</script>