其他分享
首页 > 其他分享> > vue的京东购物车/bootstrp

vue的京东购物车/bootstrp

作者:互联网

<body>
    <div id="app">
        <!-- 搜索input -->
        <input type="text" v-model="searchtext">
        <!-- 下拉框 -->
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default dropdown-toggle"
                data-toggle="dropdown">{{pleaseselect}}</button>
            <ul class="dropdown-menu">
                <li v-for="(item,index) in goodslist" @click="selectcontent(index)"><a href="#">{{item.goods_brand}}</a>
                </li>
            </ul>
        </div>
        <!-- 搜索button -->
        <button type="button" class="btn btn-danger" @click="search">搜索</button>
        <!-- 表格 -->
        <table class="table table-hover">
            <thead>
                <tr>
                    <th><input type="checkbox" :checked="isCheckAll" @click="checkall"> 全选</th>
                    <th>照片</th>
                    <th>简介</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in goodslist" :key="index">
                    <th scope="row"><input type="checkbox" :checked="item.isChecked" @click="tocheck(index)">
                        {{index+1}} </th>
                    <th><img class="img-rounded" style="width: 100px;height: 100px;" :src="item.goods_small_logo"
                            alt=""></th>
                    <th>{{item.goods_name}}</th>
                    <th>¥:{{item.goods_price}}.00</th>
                    <th>
                        <button type="button" @click="add(index,-1)" class="glyphicon glyphicon-minus"
                            v-if="item.goods_number<=1" disabled="disabled"></button>
                        <button type="button" @click="add(index,-1)" class="glyphicon glyphicon-minus" v-else></button>
                        {{item.goods_number}}
                        <button type="button" @click="add(index,1)" class="glyphicon glyphicon-plus"></button>
                    </th>
                    <th>¥{{item.goods_price*item.goods_number}}</th>
                    <th><span @click="remove(index)" class="glyphicon glyphicon-trash"></span></th>
                </tr>
            </tbody>
        </table>
        <p>已选{{num}}商品;总计¥{{totalprice}}</p>
        <!-- 添加表单 -->
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputEmail2">商品简介</label>
                <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_name"
                    placeholder="商品简介">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">价格</label>
                <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_price"
                    placeholder="价格">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">数量</label>
                <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_number"
                    placeholder="数量">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">照片链接</label>
                <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_small_logo"
                    placeholder="照片链接">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">品牌</label>
                <input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_brand"
                    placeholder="品牌">
            </div>
            <button type="button" @click="addshop" class="btn btn-default">添加</button>
        </form>
        <br /><br /><br />
    </div>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                //商品列表
                goodslist: [{
                    "goods_id": 57332,
                    "cat_id": 998,
                    "goods_name": "400毫升 海鲜食品冷藏冰包 注水冰袋医用冰袋户外冷藏保鲜熟食冷藏反复使用(10个装)",
                    "goods_price": 14,
                    "goods_number": 1,
                    "goods_weight": 100,
                    "goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_800x800.jpg",
                    "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_400x400.jpg",
                    "add_time": 1516662792,
                    "upd_time": 1516662792,
                    "hot_mumber": 0,
                    "isChecked": true,
                    "goods_brand": '海鲜'

                }, {
                    "goods_id": 57444,
                    "cat_id": 9,
                    "goods_name": "创维(Skyworth)42X6 42英寸10核智能酷开网络平板液晶电视(黑色)",
                    "goods_price": 1899,
                    "goods_number": 1,
                    "goods_weight": 100,
                    "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg",
                    "goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_400x400.jpg",
                    "add_time": 1516663280,
                    "upd_time": 1516663280,
                    "hot_mumber": 0,
                    "isChecked": false,
                    "goods_brand": '海尔'
                }, {
                    "goods_id": 57433,
                    "cat_id": 9,
                    "goods_name": "创维(skyworth) 55V8E 55英寸 4K超高清HDR纤薄全金属机身智能酷开网络液晶电视",
                    "goods_price": 3299,
                    "goods_number": 1,
                    "goods_weight": 100,
                    "goods_big_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_800x800.jpg",
                    "goods_small_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_400x400.jpg",
                    "add_time": 1516663242,
                    "upd_time": 1516663242,
                    "hot_mumber": 0,
                    "isChecked": false,
                    "goods_brand": '华为'
                }, {
                    "goods_id": 57442,
                    "cat_id": 9,
                    "goods_name": "创维彩电40G6A",
                    "goods_price": 2999,
                    "goods_number": 1,
                    "goods_weight": 100,
                    "goods_big_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_800x800.jpg",
                    "goods_small_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg",
                    "add_time": 1516663277,
                    "upd_time": 1516663277,
                    "hot_mumber": 0,
                    "isChecked": false,
                    "goods_brand": 'TCL'

                }, {
                    "goods_id": 57441,
                    "cat_id": 9,
                    "goods_name": "创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视(玫瑰金) 65G7 (65英寸)",
                    "goods_price": 9699,
                    "goods_number": 1,
                    "goods_weight": 100,
                    "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_800x800.jpg",
                    "goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_400x400.jpg",
                    "add_time": 1516663273,
                    "upd_time": 1516663273,
                    "hot_mumber": 0,
                    "isChecked": false,
                    "goods_brand": 'HDR'
                }],
                isCheckAll: false,
                searchtext: '',
                pleaseselect: "请选择",
                //添加对象
                addfrom: {
                    goods_number: 0,
                    goods_name: '',
                    goods_price: 0,
                    goods_small_logo: '',
                    isChecked: false,
                    goods_brand: ''
                }
            },
            methods: {
                //单选
                tocheck(index) {
                    this.goodslist[index].isChecked = !this.goodslist[index].isChecked
                    //全选
                    for (let item of this.goodslist) {
                        if (item.isChecked == false) {
                            this.isCheckAll = false
                            return;
                        } else {
                            this.isCheckAll = true
                        }
                    }
                },
                //全选
                checkall() {
                    this.isCheckAll = !this.isCheckAll
                    //console.log( this.isCheckAll)
                    if (this.isCheckAll == true) {
                        this.goodslist.forEach(v => v.isChecked = true)
                    }
                    if (this.isCheckAll == false) {
                        this.goodslist.forEach(v => v.isChecked = false)
                    }
                },
                //添加数量
                add(index, m) {
                    this.goodslist[index].goods_number = m + this.goodslist[index].goods_number
                },
                //删除
                remove(index) {
                    //console.log(index)
                    this.goodslist.splice(index, 1)
                },
                //search搜索
                search() {

                    let m = []
                    if (this.searchtext != "" && this.pleaseselect != "请选择") {
                        this.goodslist.forEach(v => {
                            if (v.goods_name.match(this.searchtext) != null && v.goods_brand.match(this
                                    .pleaseselect) != null) {
                                m.push(v)
                            }
                        })
                    } else {
                        if (this.searchtext != "") {
                            this.goodslist.forEach(v => {
                                if (v.goods_name.match(this.searchtext) != null) {
                                    m.push(v)
                                }
                            })
                        } else if (this.pleaseselect != "请选择") {
                            this.goodslist.forEach(v => {
                                if (v.goods_brand.match(this.pleaseselect) != null) {
                                    m.push(v)
                                }
                            })
                        }
                    }
                    this.goodslist = m;
                    console.log(this.goodslist)
                },
                //selectcontent选择的内容
                selectcontent(index) {
                    this.pleaseselect = this.goodslist[index].goods_brand
                },
                //添加商品
                addshop() {
                    this.goodslist.push(this.addfrom)
                    this.addfrom = {
                        goods_number: 0,
                        goods_name: '',
                        goods_price: 0,
                        goods_small_logo: '',
                        isChecked: false,
                        goods_brand: ''
                    }
                    console.log(this.addfrom)
                    console.log(this.goodslist)
                }
            },
            computed: {
                //被选的数量
                num() {
                    let n = 0;
                    this.goodslist.forEach(v => v.isChecked === true ? n++ : n)
                    return n
                },
                //总价
                totalprice() {
                    let n = 0;
                    this.goodslist.forEach(v => v.isChecked === true ? n = n + v.goods_number * v.goods_price :
                        n)
                    return n
                }
            }

        })
    </script>
</body>

</html>

 

标签:index,goods,vue,number,购物车,isChecked,goodslist,logo,bootstrp
来源: https://www.cnblogs.com/shuicai/p/15041572.html