当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    基于vue.js实现购物车

    栏目:代码类 时间:2020-01-15 15:09

    本文实例为大家分享了vue.js实现购物车的具体代码,供大家参考,具体内容如下

    template

    <template>
    <div class="all">
    <div class="head">
    <span>购物车</span>
    </div>
    <ul class="menu">
    <li class="li">
    <input type="checkbox"  v-model="checkedAll" @change="checkedAllChange()">
    <label for="all"></label>
    全选
    </li>
    <li class="li">商品代码</li>
    <li class="li">商品名称</li>
    <li class="li">商品单价</li>
    <li class="li">商品数量</li>
    <li class="li">商品库存</li>
    <li class="li">商品小计</li>
    </ul>
    <div>
    <ul v-for="data in data" :key="data.code" class="menu">
    <li class="li">
    <input type="checkbox" name="commodity" v-model="checked" :value="data" @change="changeAll()" >
    </li>
    <li class="li">{{data.code}}</li>
    <li class="li">{{data.name}}</li>
    <li class="li">¥{{data.price}}</li>
    <li class="li">
    <div @click="SubNum(data)">-</div>
    <input type="number" v-model.lazy="data.number" @change="numberChange(data)" >
    <div @click="AddNum(data)">+</div>
    </li>
    <li class="li">{{data.stock}}</li>
    <li class="li">¥{{data.number*data.price}}</li>
    </ul>
    </div>
    <div class="info">
    <p>{{commodityNumber}}件商品</p>
    <p>总计:<span>¥{{numberAll}}</span></p>
    </div>
    </div>
    </template>

    script

    <script>
    export default {
    data() {
    return {
    checkedAll: false,
    checked: [],
    totalPrice: 0,
    data: {
    one: {
    code: 10001,
    name: "商品一",
    price: 26,
    number: 1,
    stock: 6
    },
    two: {
    code: 10002,
    name: "商品二",
    price: 34,
    number: 1,
    stock: 14
    },
    three: {
    code: 10003,
    name: "商品三",
    price: 48,
    number: 1,
    stock: 2
    },
    four: {
    code: 10004,
    name: "商品四",
    price: 63,
    number: 1,
    stock: 12
    },
    five: {
    code: 10005,
    name: "商品五",
    price: 50,
    number: 1,
    stock: 92
    }
    }
    };
    },
    mounted() {},
    methods: {
    //判断全选事件
    checkedAllChange() {
    if (this.checkedAll) {
    for (let i in this.data) {
    this.checked.push(this.data[i]);
    }
    } else {
    this.checked = [];
    }
    },
    changeAll() {
    if (this.checked.length == Object.keys(this.data).length) {
    this.checkedAll = true;
    } else {
    this.checkedAll = false;
    }
    },
    // 加减
    SubNum(data) {
    data.number--;
    if (data.number < 1) {
    data.number = 1;
    }
    },
    AddNum(data) {
    data.number++;
    if (data.number > data.stock) {
    data.number = data.stock;
    }
    },
    //输入
    numberChange(data) {
    if (data.number > data.stock) {
    data.number = data.stock;
    }
    }
    },
    computed: {
    //商品数量
    commodityNumber() {
    return this.checked.length;
    },
    //总价
    numberAll() {
    var numberAll = 0;
    for (let i in this.checked) {
    numberAll += this.checked[i].number * this.checked[i].price;
    }
    return numberAll;
    }
    }
    };
    </script>

    css

    <style lang="scss" scoped type="text/css">
    ul,
    li {
    list-style: none;
    }
    .all {
    width: 800px;
    height: 500px;
    background: #fff;
    border: 1px solid #177ecb;
    margin-left: 300px;
    .head {
    background: #177ecb;
    height: 36px;
    line-height: 36px;
    color: #fff;
    padding-left: 15px;
    }
    .menu {
    height: 32px;
    width: 100%;
    border-bottom: 1px solid #d4d4d4;
    padding: 0 15px;
    display: flex;
    .li {
    line-height: 32px;
    flex: 1;
    border-right: 1px solid #d4d4d4;
    text-align: center;
    input[type="number"] {
    width: 40px;
    display: inline-block;
    height: 20px;
    }
    div {
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-block;
    background: #333;
    color: #fff;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    }
    div:active {
    background: #999;
    }
    }
    .li:nth-of-type(3) {
    flex: 2;
    }
    .li:last-child {
    border: 0;
    }
    }
    .menu + div {
    height: 350px;
    margin-bottom: 20px;
    border-bottom: 1px solid #177ecb;
    }
    .info {
    text-align: right;
    margin-right: 20px;
    span {
    color: #f00;
    font-size: 20px;
    font-weight: 900;
    }
    }
    }
    </style>
    
    下一篇:没有了