master

分支 (1)

管理

管理

master

wxPhone
/
me-cart.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/same-css.css">
    <link rel="stylesheet" href="./css/me-cart-css.css">
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app" class="list need-scroll">
        <div v-if="list.message == ''" class="hold">
            <div v-if="list.invalid == ''">
                <img src="./images/empty.png" alt="">
                <p>这里什么都没有</p>
                <button @click="goBuy()">立即选购</button>
            </div>
        </div>
        <div v-if="list.message != ''" class="list-message">
            <div class="header">
                <span>购物车</span>
                <div @click="edit()" class="edit">
                    <span v-if="!editing">编辑</span><span v-if="editing">完成</span>
                </div>
            </div>
            <div v-show="sum < 60" v-if="!editing" class="hint" v-bind:class="{hintHide: hintHide}" @click="freeMail()">
                <div>包邮要不要？满￥60包邮哦，还差￥<span>{{extra}}</span></div>
                <i></i>
            </div>
            <!--购物车中商品-->
            <ul>
                <li v-for="(item,index) in list.message">
                    <div class="goods">
                        <div class="select" @click="select(item)"><i v-bind:class="{selected: item.selected}"></i></div>
                        <img class="goods-img" v-bind:src="item.src" alt="">
                        <div class="goods-intro">
                            <p class="goods-name">{{item.name}}</p>
                            <p class="goods-price"><span>￥{{item.price}}</span></p>
                        </div>
                        <div v-if="!editing" class="goods-type">
                            <span>{{item.type}}</span> × <span>{{item.num}}</span>
                        </div>
                        <div v-if="editing" class="edit-main">
                            <div>
                                <button class="edit-type" @click="type(item)">{{item.type}}</button>
                                <button class="sub" @click="subb(item, index)">-</button>
                                <input class="input" type="number" v-model="item.num">
                                <button class="add" @click="addd(item,index)">+</button>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div v-if="list.invalid != ''">
            <div class="no-use">
                <div>失效商品</div>
                <div>
                    <button @click="cleanInvalid()">清除失效商品</button>
                </div>
            </div>
            <!--失效商品-->
            <ul class="invalid">
                <li v-for="(item,index) in list.invalid">
                    <div class="goods">
                        <!--<div class="select"  @click.stop.prevent="select(item,index)"><i v-bind:class="{selected: item.selected}"></i></div>-->
                        <div class="select"><i v-bind:class="{selected: item.selected}"></i></div>
                        <img class="goods-img" v-bind:src="item.src" alt="">
                        <div class="invalid-word">已失效</div>
                        <div class="goods-intro">
                            <p class="goods-name">{{item.name}}</p>
                            <p class="goods-price"><span>￥{{item.price}}</span></p>
                        </div>
                        <div class="goods-type">
                            <span>{{item.type}}</span> X <span>{{item.num}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!--商品总记-->
        <div v-if="list.message != ''">
            <div class="all">
                <div class="number">
                    <span class="circle" v-bind:class="{checked: checked}" @click="total()"></span>
                    <span>已选（{{num}}）</span>
                </div>
                <div class="summary"><span>￥{{sum}}</span></div>
                <div v-if="!editing" class="done" @click="goToPay()" v-bind:class="{over: isOver}">选好了</div>
                <div v-if="editing" class="done" @click="removeSelect()" v-bind:class="{over: isOver}">清除已选内容</div>
            </div>
        </div>
        <div class="bottom_box">
            <ul>
                <li @click="goTo(0)"><img src="./images/shouye3.png" alt="">首页</li>
                <li @click="goTo(1)"><img src="./images/category.png" alt="">分类</li>
                <li @click="goTo(2)" class="active"><img src="./images/shopcart2.png" alt="">购物车</li>
                <li @click="goTo(3)"><img src="./images/wode.png" alt="">我的</li>
            </ul>
        </div>
        <a @click="hideMask()" class="mask" :class="{maskHide: isMaskHide}" href="javascript: void(0)"></a>
        <div class="pop" :class="{popHide: isPopHide}">
            <p>确定删除？</p>
            <span class="qvxiao" @click="hideMask()">取消</span>
            <span class="queding" @click="yes()">确定</span>
        </div>
    </div>
    <script>
    var vm = new Vue({
        el: "#app",
        data: {
            num: 0,
            sum: 0,
            checked: false,
            extra: 60,
            editing: false,
            isOver: true,
            isPopHide: true,
            isMaskHide: true,
            hintHide: true,
            typeFlag: 0, // 用来确定删除方式， 0：减号删除； 1：清除已选按钮； 2： 清除失效按钮
            list: {
                message: [{
                    selected: false,
                    src: './images/goods7.jpg',
                    name: '泰国电话卡就是牛，信号就是好泰国电话卡就是牛，信号就是好',
                    price: 19.91,
                    type: '邮寄',
                    num: 1
                }, {
                    selected: false,
                    src: './images/goods-1.png',
                    name: '泰国电话卡就是牛，信号就是好',
                    price: 29.91,
                    type: '自取',
                    num: 2
                }, {
                    selected: false,
                    src: './images/goods-1.png',
                    name: '泰国电话卡就是牛，信号就是好',
                    price: 39.91,
                    type: '邮寄',
                    num: 3
                }],
                invalid: [{
                    src: './images/goods-1.png',
                    name: '泰国电话卡就是牛，信号就是好泰国电话卡就是牛，信号就是好',
                    price: 19.91,
                    type: '邮寄',
                    num: 1
                }]
            }
        },
        methods: {
            edit: function() {
                this.editing === true ? this.editing = false : this.editing = true;
            },
            hideMask: function() {
                this.isPopHide = true;
                this.isMaskHide = true;
                if (this.typeFlag === 0) {
                    var goods = this.list.message;
                    for (var i = 0; i < goods.length; i++) {
                        if (goods[i].num <= 0) {
                            goods[i].num = 1;
                        }
                    }
                }
            },
            yes: function() {
                var goods = this.list.message;
                /*用this.typeFlag判断删除选项来自于哪一个按钮*/
                if (this.typeFlag === 0) {
                    for (var i = 0; i < goods.length; i++) {
                        if (goods[i].num <= 0) {
                            goods.splice(i, 1);
                        }
                    }
                } else if (this.typeFlag === 1) {
                    for (var j = 0; j < goods.length; j++) {
                        if (goods[j].selected === true) {
                            goods.splice(j, 1);
                            j = j - 1;
                        }
                    }
                    this.checked = false;
                    this.num = 0;
                    this.sum = 0;
                } else if (this.typeFlag === 2) {
                    this.list.invalid.splice(0, this.list.invalid.length);
                }
                this.isPopHide = true;
                this.isMaskHide = true;
            },
            removeSelect: function() {
                for (var i = 0; i < this.list.message.length; i++) {
                    if (this.list.message[i].selected === true) {
                        this.list.message.splice(i, 1);
                        i = i - 1;
                    }
                }
                this.checked = false;
                this.num = 0;
                this.sum = 0;
            },
            cleanInvalid: function() {
                this.isMaskHide = false;
                this.isPopHide = false;
                this.typeFlag = 2;
            },
            goTo: function(a) {
                console.log(a);
                if (a === 0) {
                    window.location.href = 'me-shop-index.html';
                } else if (a === 1) {
                    window.location.href = 'me-shop-fenLei.html';
                } else if (a === 2) {
                    window.location.href = 'me-cart.html';
                } else if (a === 3) {
                    window.location.href = 'me-shop.html';
                }
            },
            freeMail: function() {
                window.location.href = 'me-freemail.html';
            },
            goBuy: function() {
                window.location.href = 'me-shop-index.html';
            },
            goToPay: function() {
                if (this.checked === true) {
                    window.location.href = 'me-shop-orderconfirm.html';
                }
            },
            type: function(item) {
                window.location.href = 'me-cart-type.html';
            },
            subb: function(item, index) {
                var vm = this;
                vm.list.message[index].num--;
                if (item.num <= 0) {
                    this.isMaskHide = false;
                    this.isPopHide = false;
                    this.typeFlag = 0;
                    //DONE 使用遮罩弹出层优化提示
                }
            },
            addd: function(item, index) {
                var vm = this;
                vm.list.message[index].num++;
            },
            select: function(item) {
                var extra = 60;
                var goods = this.list.message;
                item.selected === true ? item.selected = false : item.selected = true;
                if (item.selected === true) {
                    this.num = this.num + 1;
                    this.sum = add(this.sum, mul(item.price, item.num));
                    if (this.sum < extra) {
                        this.extra = sub(extra, this.sum);
                        this.hintHide = false; //显示包邮提示
                    }
                } else {
                    this.num = this.num - 1;
                    this.sum = sub(this.sum, mul(item.price, item.num));
                    this.extra = extra;
                    this.hintHide = true; //隐藏包邮提示
                }
                /*点击其中任何一个item，就将下面的全选选中*/
                for (var i = 0; i < goods.length; i++) {
                    if (goods[i].selected === true) {
                        this.checked = true;
                        this.isOver = true;
                    }
                }
                /*全部未选中时，下面也取消选中*/
                if (this.num === 0) {
                    this.checked = false;
                }
                /*选中任意一个元素，即将清除按钮启用*/
                this.checked === true ? this.isOver = false : this.isOver = true;
            },
            total: function() {
                var goods = this.list.message;
                if (this.checked === false) {
                    this.checked = true;
                    for (var i = 0; i < goods.length; i++) {
                        goods[i].selected = true;
                        this.num = goods.length;
                        this.sum = add(this.sum, mul(goods[i].price, goods[i].num));
                    }
                } else {
                    this.checked = false;
                    for (var i = 0; i < goods.length; i++) {
                        goods[i].selected = false;
                        this.num = 0;
                        this.sum = 0;
                    }
                }
                /*选中即将清除按钮启用*/
                this.checked === true ? this.isOver = false : this.isOver = true;
            }
        }
    });

    /*数字运算bug修正*/
    function add(a, b) {
        var c, d, e;
        try {
            c = a.toString().split(".")[1].length;
        } catch (f) {
            c = 0;
        }
        try {
            d = b.toString().split(".")[1].length;
        } catch (f) {
            d = 0;
        }
        return e = Math.pow(10, Math.max(c, d)), (mul(a, e) + mul(b, e)) / e;
    }

    function sub(a, b) {
        var c, d, e;
        try {
            c = a.toString().split(".")[1].length;
        } catch (f) {
            c = 0;
        }
        try {
            d = b.toString().split(".")[1].length;
        } catch (f) {
            d = 0;
        }
        return e = Math.pow(10, Math.max(c, d)), (mul(a, e) - mul(b, e)) / e;
    }

    function mul(a, b) {
        var c = 0,
            d = a.toString(),
            e = b.toString();
        try {
            c += d.split(".")[1].length;
        } catch (f) {}
        try {
            c += e.split(".")[1].length;
        } catch (f) {}
        return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c);
    }

    function div(a, b) {
        var c, d, e = 0,
            f = 0;
        try {
            e = a.toString().split(".")[1].length;
        } catch (g) {}
        try {
            f = b.toString().split(".")[1].length;
        } catch (g) {}
        return c = Number(a.toString().replace(".", "")), d = Number(b.toString().replace(".", "")), mul(c / d, Math.pow(10, f - e));
    }
    </script>
</body>

</html>