vue 简易购物车

最新推荐文章于 2023-06-29 08:41:28 发布

mongkey_king

最新推荐文章于 2023-06-29 08:41:28 发布

阅读量256

点赞数

分类专栏：前端

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

new Vue({
    el:"#app",
    data:{
       shopListArr:[],
        isSelectAll:false,
        totalPrice:0,
        isHidePanel:true,
        currentShop:{}
    },
    //组件已经加载完毕，请求网络数据和业务处理
    mounted(){
      //请求本地数据
       this.getLocalData();
    },
    filters:{
      formatPrice(money){
          return  "￥"+(money).toFixed(2);
      }
    },
    methods:{
        //请求本地数据
        getLocalData(){
            //使用箭头函数解决this指向问题
            /*axios({
                method:'get',
                url:'data/shop.json',
                }).then((response)=>{
                   this.shopListArr=response.data.allShops.shopList;
                    console.log(this.shopListArr);
                }).catch((error)=>{
                    console.log(error);
                });*/

            var _this=this;
            axios({
                method:'get',
                url:'data/shop.json',
            }).then(function(response){
                _this.shopListArr=response.data.allShops.shopList;
                console.log(this.shopListArr);
            }).catch(function(error){
                console.log(error);
            });
        },
        singlePrice(shop,flag){
            if(flag){
               shop.shopNumber+=1;
            }else{
                if(shop.shopNumber<=1) {
                    shop.shopNumber=1;
                    return;
                }
                shop.shopNumber-=1;
            }
            this.comTotalPrice();
        },
        selectAll(flag){
            var _this=this;
            this.isSelectAll=!flag;
            this.shopListArr.forEach(function(value,index){
                if(typeof value.checked=="undefined"){
                    _this.$set(value,'checked',!flag);
                }else{
                    value.checked=!flag;
                }
            });
            this.comTotalPrice();
        },
        comTotalPrice(){
            var total=0;
            this.shopListArr.forEach(function(value,index){
               if(value.checked){
                 total+=value.shopPrice*value.shopNumber;
               }
            });
            this.totalPrice=total;
        },
        singleChecked(shop){
            if(typeof shop.checked=="undefined"){
                this.$set(shop,'checked',true);
            }else{
                shop.checked=!shop.checked;
            }
            this.comTotalPrice();
            this.hasSelectedAll();


        },
        hasSelectedAll(){
            var flag=true;
            this.shopListArr.forEach(function(value,index){
                if(!value.checked){
                   flag=false;
                }
            });
            this.isSelectAll=flag;
        },
        trash(shop){
            this.isHidePanel=false;
            this.currentShop=shop;
        },
        delshop(){
            var index=this.shopListArr.indexOf(this.currentShop);
            this.shopListArr.splice(index,1);
            this.comTotalPrice();
        }
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <title>购物车</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="css/01.css">
</head>
<body>
    <div id="app">

        <!--头部区域-->
        <div class="header">
            <span>购物车</span>
        </div>
        <!--安全提示-->
        <div class="safe_tip">
            <span>您正在安全购物环境中，请放心购物</span>
        </div>
        <!--中间的列表-->
        <main class="shopCart_list">
            <section v-for="(shop,index) in shopListArr">
                <div class="shopCart_list_title">
                    <span class="cart_logo"></span>
                    <span class="cart_title">京东自营</span>
                    <span class="cart_sale">您享受满100元免运费服务</span>
                </div>
                <div class="shopCart_list_con">
                    <div class="list_con_left">
                        <a href="javascript:;" ><input type="checkbox" :checked="shop.checked" @click="singleChecked(shop)"></a>
                    </div>
                    <div class="list_con_right">
                       <div class="shop_img">
                           <img width="100" height="100" alt="shop.shopName" :src="shop.shopImage">
                       </div>
                        <div class="shop_con">
                            <a href="" v-text="shop.shopName"></a>
                        </div>
                        <div class="shop_price">
                            <div class="singer">{{shop.shopPrice|formatPrice(shop.shopPrice)}}</div>
                            <div class="total">{{shop.shopPrice*shop.shopNumber| formatPrice(shop.shopPrice*shop.Number)}}</div>
                        </div>
                        <div class="shop_deal">
                            <div class="shop_deal_left">
                                <span @click="singlePrice(shop,false)">-</span>
                                <input type="tel" v-model="shop.shopNumber" value="shop.shopNumber">
                                <span @click="singlePrice(shop,true)">+</span>
                            </div>
                            <div class="shop_deal_right" @click="trash(shop)"
                                 data-toggle="modal" data-target="#myModal">
                                <a>
                                    删除
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </main>
        <!--底部通栏-->
        <div class="tab_bar">
            <div class="tab_bar_left">
                <a href="javascript:;" ><input type="checkbox" :checked="isSelectAll" @click="selectAll(isSelectAll)"> </a>
                <span >全选</span>
                <div class="select_all">
                    合计：<span class="total_price">{{totalPrice|formatPrice(totalPrice)}}</span>
                </div>
            </div>
            <div class="tab_bar_right">
                <!--<a href="" class="pay">去结算</a>-->
                <button class="btn btn-info">去结算</button>
            </div>
            <div :class="{'panel':isHidePanel}">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid at debitis dolor dolore enim error est labore laboriosam libero molestias, nam neque non perferendis porro sed sunt tempore ullam!
            </div>
        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        <p>您确认删除这个商品吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-info" data-dismiss="modal" @click="delshop()">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</body>
<script src="lib/jquery.min.js"></script>
<script src="lib/vue.js"></script>
<script src="lib/vue-resource.js"></script>
<script src="lib/axios.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/shopCartLoop1.js"></script>

</html>

{
  "allShops":{
    "totalMoney":0,
    "shopList":[
      {
        "shopId":"1001",
        "shopName":"360智能摄像机云台版 全景监控 360全景云台1080P",
        "shopPrice":299.00,
        "shopNumber":1,
        "shopImage":"img/1.png"
      },
      {
        "shopId":"1002",
        "shopName":"尼康（Nikon) D610 单反机身",
        "shopPrice":7199.00,
        "shopNumber":2,
        "shopImage":"img/2.png"
      },
      {
        "shopId":"1003",
        "shopName":"舒肤佳 长效护肤抑菌",
        "shopPrice":29.00,
        "shopNumber":1,
        "shopImage":"img/3.jpg"
      }
    ]
  }
}

body {
  font-size: 16px;
  background-color: #f8f8f8;
}
a:hover {
  cursor: pointer;
}
.header {
  height: 40px;
  background-color: #ffffff;
  text-align: center;
  line-height: 40px;
  font-size: 24px;
  letter-spacing: 5px;
}
.safe_tip {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 30px;
}
main {
  background-color: #ffffff;
  line-height: 30px;
}
.shopCart_list_title {
  padding: 5px 10px;
  background-color: #f4f4f4;
}
.shopCart_list_title .cart_title {
  font-weight: bold;
}
.shopCart_list_title .cart_sale {
  color: #ff3300;
  float: right;
  font-size: 12px;
}
.shopCart_list_con {
  padding: 10px;
}
.shopCart_list_con .list_con_left {
  float: left;
}
.shopCart_list_con .list_con_left input {
  height: 20px;
  width: 20px;
}
.shopCart_list_con .shop_img {
  float: left;
  margin-left: 0;
}
.shopCart_list_con .shop_con {
  margin-left: 140px ;
}
.shopCart_list_con .shop_con a {
  color: #5e5e5e;
}
.shopCart_list_con .shop_price {
  height: 30px;
}
.shopCart_list_con .shop_price .singer {
  float: left;
  margin-left: 20px ;
}
.shopCart_list_con .shop_price .total {
  color: #ff3300;
  float: right;
}
.shopCart_list_con .shop_deal {
  margin-left: 140px ;
  height: 30px;
}
.shopCart_list_con .shop_deal input {
  width: 60px;
  height: 23px;
  text-align: center;
}
.shopCart_list_con .shop_deal .shop_deal_left {
  float: left;
}
.shopCart_list_con .shop_deal .shop_deal_left span:hover {
  cursor: pointer;
}
.shopCart_list_con .shop_deal .shop_deal_right {
  float: right;
}
.shopCart_list_con .shop_deal .shop_deal_right a {
  color: #2e2e2e;
}
.tab_bar {
  background-color: #ffffff;
  height: 40px;
  line-height: 40px;
  position: fixed;
  width: 100%;
  padding: 5px 10px;
  left: 0;
  right: 0;
  bottom: 0;
}
.tab_bar .tab_bar_left {
  float: left;
}
.tab_bar .tab_bar_left .select_all {
  float: right;
  margin-left: 10px;
}
.tab_bar .tab_bar_left input {
  height: 20px;
  width: 20px;
  margin-top: 10px;
}
.tab_bar .tab_bar_right {
  float: right;
}
.panel {
  display: none;
}

mongkey_king

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 简易购物车

new Vue({ el:"#app", data:{ shopListArr:[], isSelectAll:false, totalPrice:0, isHidePanel:true, currentShop:{} }, //组件已经加载完毕，请求网络数据和业务处理 mount...
复制链接

扫一扫