vue实现多店铺购物车的操作

终于把购物车的大致效果做完了

第一步，先模拟json数据，

模拟后台数据的目录，具体的数据在data文件夹下的shopcar.json中

json数据的模拟（自己胡乱写的一些数据，能说明问题级就行）

{
  "userid" : 1.0,
  "totalPrice" : 0.0,
  "goodsInfo" : true,
  "checked" : true,
  "shops" : [
    {
      "shopName" : "shop1",
      "degree" : "10",
      "shoptotal" : 0.0,
      "checked" : true,
      "totalmonney":1000,
      "products" : [
        {
          "title" : "goods1",
          "goodsname":"手机",
          "pic" : "../../../static/images/mcbook.png",
          "goodsweight" : 10.0,
          "qua" : 1.0,
          "goodscolor" : "红色",
          "price" : 1000.0,
          "checked" : true
        },
        {
          "title" : "goods2",
          "pic" : "../../../static/images/mcbook.png",
          "weight" : 10.0,
          "goodsname":"手机",
          "qua" : 1.0,
          "goodscolor" : "蓝色",
          "price" : 2000.0,
          "checked" : true
        }
      ]
    },
    {
      "shopName" : "shop2",
      "degree" : "10",
      "shoptotal" : 0.0,
      "totalmonney":1000,
      "checked" : true,
      "products" : [
        {
          "title" : "goods3",
          "pic" : "../../../static/images/mcbook.png",
          "weight" : 10.0,
          "qua" : 1.0,
          "goodsname":"手机",
          "goodscolor" : "绿色",
          "price" : 1200.0,
          "checked" : true
        },
        {
          "title" : "goods4",
          "pic" : "../../../static/images/mcbook.png",
          "weight" : 10.0,
          "qua" : 1.0,
          "goodsname":"手机",
          "goodscolor" : "粉色",
          "price" : 2200.0,
          "checked" : true
        }
      ]
    }
  ]
}

 

 

vue组件拆分的目录

shopcar.vue的代码

<template>
  <div>
    <mz-cars-header></mz-cars-header>
    <mz-carts-shoplist :minGoods="minGoods" :addGoods="addGoods" :productCheckchange="productCheckchange" @shopCheck="shopCheck" :data="goodsInfo"></mz-carts-shoplist>
    <mz-cars-footer @shopCheckedAll="shopCheckedAll"  :data="goodsInfo"></mz-cars-footer>
  </div>
</template>
<script>
   import  basicCss from  '../assets/car/basic.css'
   import  cartsCss from '../assets/car/carts.css'
    import MzCarsHeader from "../components/shopcar/MzCarsHeader";
    import MzCarsFooter from "../components/shopcar/Mz-CarsFooter";
    import MzCartsShoplist from "../components/shopcar/MzCartsShoplist";
    export default {
        name: "shopcar",
      components: {MzCartsShoplist, MzCarsFooter, MzCarsHeader,basicCss,cartsCss},
      data(){
          return{
              goodsInfo:[],
          }
      },
      created(){
       this._initData()
      },
      methods:{
        //实现初始化的操作
          _initData(){
            fetch("http://localhost:3000/shopcar").then((res)=>{
              res.json().then((data)=>{
                this.goodsInfo=data;
              })
            })
          },
        //实现全选
        shopCheckedAll(){
            let allChecked=this.goodsInfo.checked;
            this.goodsInfo.shops.forEach((shop,sid)=>{
              shop.checked=allChecked
              shop.products.forEach((product,pid)=>{
                product.checked=allChecked
              })
            })
        },

        //店铺的状态控制全选的状态
        // 需要注意店铺的ID值
        shopCheck(i){
          //获取当前店铺的选中的状态
          let shopChecked=this.goodsInfo.shops[i].checked
          //根据当前店铺的状态控制店铺商品的状态的值
          this.goodsInfo.shops[i].products.forEach((product,pid)=>{
            product.checked=shopChecked
          })

          //更具店铺的状态控制全选的状态的值

          let allChecked=true;

          //循环当前的店铺的值
          this.goodsInfo.shops.forEach((shop,pid)=>{
            shop.products.forEach((product,sid)=>{
              if(!product.checked){
                allChecked=false;
              }
            })
          })
          this.goodsInfo.checked=allChecked;
        },
        //商品的状态控制店铺的状态与全选的状态
        //首先要注意店铺与商品的ID的值
        productCheckchange(sid,pid){
          let isChecked=true;
         //循环店铺的商品
          this.goodsInfo.shops[sid].products.forEach((product,pid)=>{
            if(!product.checked){
              isChecked=false;
            }
          })
          this.goodsInfo.shops[sid].chekced=isChecked;
          //根据商品的状态改变全选反选的状态

          let isAllChecked=true;

          this.goodsInfo.shops.forEach((shop,sid)=>{
            shop.products.forEach((product,pid)=>{
              if(!product.checked){
                isAllChecked=false;
              }
            })
          })
          this.goodsInfo.checked=isAllChecked;
        },

        //实现商品加减的操作

        //首先是商品加的操作
        //要注意店铺与商品的ID
        addGoods(sid,pid){
         this.goodsInfo.shops[sid].products[pid].qua++;
        },
        //进行商品减的操作
        minGoods(sid,pid){
          if(this.goodsInfo.shops[sid].products[pid].qua>1){
            this.goodsInfo.shops[sid].products[pid].qua--;
          }
        }

      }
    }
</script>

<style scoped>

</style>

 

头部的代码：

<template>
  <div class="header">
    <h1>购物车</h1>
  </div>
</template>

<script>
    export default {
        name: "MzCarsHeader"
    }
</script>

<style scoped>

</style>

 

MzCartsShoplist.vue的代码如下

<template>
  <div class="shopping">
   <mz-carts-shop :minGoods="minGoods" :addGoods="addGoods" :productCheckchange="productCheckchange" @shopChecked="shopCheck" :sid="index" :key="index" :data="value" v-for="(value,index) in data.shops" ></mz-carts-shop>
  </div>
</template>
<script>
    import MzCartsShop from "./MzCartsShop";
    export default {
        name: "MzCartsShoplist",
      components: {MzCartsShop},
      props:["data","productCheckchange","addGoods","minGoods"],
      methods:{
        shopCheck(i){
          this.$emit("shopCheck",i)
        }
      }

    }
</script>
<style scoped>

</style>

MzCartsShop.vue的代码如下

<template>
  <div>
    <div class="shop-group-item">
      <div class="shop-name">
        <input type="checkbox"
               class="check goods-check shopCheck" @change="shopChecked(sid)" v-model="data.checked" >
        <h4>
          <a href="#">{{data.shopName}}</a>
        </h4>
        <div class="coupons">
          <span>领券</span>
          <em>|</em>
          <span>编辑</span>
        </div>
      </div>
      <ul>
        <mz-carts-shop-products :minGoods="minGoods" :addGoods="addGoods" :productCheckchange="productCheckchange" :pid="index" :sid="sid" :key="index" v-for="(value,index) in data.products" :data="value" ></mz-carts-shop-products>
      </ul>
      <div class="shopPrice">
        本店总计：
        ￥<span class="shop-total-amount ShopTotal" >{{data|_shopCount}}</span>
      </div>
    </div>
  </div>

</template>

<script>
    import MzCartsShopProducts from "./MzCartsShopProducts";
    export default {
        name: "MzCartsShop",
      components: {MzCartsShopProducts},
      props:["data","sid","productCheckchange","addGoods","minGoods"],
      methods:{
        shopChecked(i){
          this.$emit("shopChecked",i);
        }
      },
      //进行店铺价钱总计的计算的操作

      filters:{
          _shopCount(data){
            let shopCount=0;
            data.products.forEach((product,inp)=>{
              if(product.checked){
                shopCount+=product.price*product.qua;
              }
            })
            return shopCount;
          }
      }




    }
</script>

<style scoped>

</style>

MzCartsShopProducts.vue的代码如下：

<template>
  <li>
    <div class="shop-info">
      <input type="checkbox"
             class="check goods-check goodsCheck" @change="productCheckchange(sid,pid)" v-model="data.checked"/>
      <div class="shop-info-img">
        <a href="#">
          <img :src="data.pic" />
        </a>
      </div>
      <div class="shop-info-text">
        <h4>{{data.goodsname}}
        </h4>
        <div class="shop-brief">
          <span>重量:{{data.qua}}kg</span>
          <span>颜色:{{data.goodscolor}}</span>
          <span>版本:13.{{data.goodscolor}}英寸</span>
        </div>
        <div class="shop-price">
          <div class="shop-pices">
            ￥<b class="price">{{data.price}}</b>
          </div>
          <div class="shop-arithmetic">
            <a class="minus" @click.prevent.stop="minGoods(sid,pid)">-</a>
            <span class="num">{{data.qua}}</span>
            <a class="plus" @click.prevent.stop="addGoods(sid,pid)">+</a>
          </div>
        </div>
      </div>
    </div>
  </li>
</template>

<script>
    import MzCartsShoplist from "./MzCartsShoplist";
    export default {
      data(){
        return{
          productsgoods:{},
        }
      },
      name: "MzCartsShopProducts",
      components: {MzCartsShoplist},
      props:["data","pid","productCheckchange","sid","addGoods","minGoods"],
    }
</script>

<style scoped>

</style>

 

页面效果如下所示：

基本的css的样式就不写了，每个人也都不一样