基于vue仿京东第三方购物车PC端

仿京东PC端，全选反选，选择店铺，选择商品，计算总价

HTML

<div class="tree1">
    <div class="tree">
      <div class="tree-title">
        <input type="checkbox" ref="businessInp" @click="getBusinessWhole" />
        全选
        <div class="shangpin">商品</div>
        <div class="danjia">单价</div>
        <div class="shuliang">数量</div>
        <div class="xiaoji">小计</div>
        <div class="caozuo">操作</div>
      </div>
      <!-- 列表 -->
        <div class="tree-merchant" v-for="(item, index) of data" :key="index">
          <!-- 店铺名称 -->
          <div class="tree-merchant-name">
            <input
              type="checkbox"
              ref="business"
              v-model="business"
              :value="item.storeId"
              @click="getBusinessId(item, index)"
            />
            <div class="name">{{ item.storeName }}</div>
          </div>
          <!-- 商品信息 -->
          <div
            class="tree-goods"
            v-for="(goods, indexs) of item.cartJoinList"
            :key="indexs"
          >
            <input
              type="checkbox"
              :ref="`goods${goods.cartSkuId}`"
              v-model="goodsInp"
              :value="goods.cartSkuId"
              @click="getGoodsDetails(item, index, goods, indexs)"
            />
            <!-- 图片 -->
            <div class="goods-pic">
              <Uimage :src="goods.defaultImg" alt="" />
            </div>
            <!-- 介绍 -->
            <div class="goods-jieshao">
              <div class="goods-jieshao1">{{ goods.name }}</div>
            </div>
            <!-- 单价、数量、小计 -->
            <div class="goods-xinghao">{{ goods.decript }}</div>
            <div class="goods-danjia1">￥{{ goods.oldPrice }}</div>
            <div class="goods-shuliang1">
              <div class="goods-shuliang1-num">
                <div class="L" @click="reduce(goods, index, indexs)">
                  <i class="el-icon-minus"></i>
                </div>
                <div class="C">
                  <input
                    type="value"
                    :value="goods.skuCount"
                    disabled="false"
                    name="goodRadio"
                  />
                </div>
                <div class="R" @click="add(goods, index, indexs)">
                  <i class="el-icon-plus"></i>
                </div>
              </div>
            </div>
            <div class="goods-xiaoji1">
              ￥{{ goods.skuCount * goods.oldPrice }}
            </div>
            <div class="goods-caozuo1">
              <div class="shan" @click="del(goods)">删除</div>
              <div class="yiru" @click="guanzhu(goods)">移入关注</div>
            </div>
          </div>
        </div>
      </div>
    <div class="jiesuan w-1920">
      <div class="tree-bottom_C w-1200">
        <div class="jiesuan_L">
          <input type="checkbox" v-model="whole" @click="getBusinessWhole" />
          <div class="quanxuan">全选</div>
          <div class="shanchu" @click="delall">删除选中的商品</div>
        </div>
        <div class="jiesuan_R">
          <div class="yixuanze">
            已选择<span class="shu">{{ allnum }}</span
            >件商品
          </div>
          
          <div class="zongjia">
            总价：<span class="money">￥{{ allprice }}</span>
          </div>
          <div class="tijiao">去结算</div>
        </div>
      </div>
    </div>
  </div>

** CSS**

.tree1 {
  width: 100%;
  background: #f5f5f5;
  .tree {
    width: 1236px;
    margin: 0 auto;
    background: #fff;
    padding: 50px 40px 70px 35px;
    .tree-title {
      display: flex;
      align-items: center;
      padding: 10px 0 10px 10px;
      background: #f3f3f3;
      border: 1px solid #e9e9e9;
      .shangpin {
        width: 310px;
        margin-left: 140px;
      }
      .danjia {
        width: 107px;
        text-align: center;
      }
      .shuliang {
        width: 190px;
        text-align: center;
      }
      .xiaoji {
        text-align: center;
        width: 170px;
      }
      .caozuo {
        text-align: center;
        flex: 1;
      }
    }
    .tree-merchant {
      margin: 10px 0px;
      .tree-merchant-name {
        display: flex;
        align-items: center;
        padding: 5px 10px;
        border-bottom: 2px solid #999;
      }
      .tree-goods {
        font-size: 14px;
        color: #4c4c4c;
        display: flex;
        padding-top: 10px;
        height: 140px;
        border: 1px solid #e4e4e4;
        padding-left: 10px;
        .goods-pic {
          width: 126px;
          height: 126px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .goods-jieshao {
          width: 213px;
          padding: 20px 10px 0 10px;
          margin-left: 10px;
          .goods-jieshao1 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -moz-box;
            -moz-line-clamp: 2;
            -moz-box-orient: vertical;
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal;
            height: 40px;
          }
          .goods-jieshao2 {
            color: #999;
            margin-top: 10px;
          }
        }
        .goods-xinghao {
          width: 100px;
          padding-top: 20px;
          margin-left: 20px;
        }
        .goods-danjia1 {
          width: 100px;
          padding-top: 20px;
          text-align: center;
        }
        .goods-shuliang1 {
          width: 166px;
          padding-top: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 20px;
          .youhuo {
            color: #a8a8a8;
            margin-top: 10px;
          }
          .wuhuo {
            color: #e83f38;
          }
          &-num {
            display: flex;
            align-items: center;
            .L {
              cursor: pointer;
            }
            .R {
              cursor: pointer;
              margin-left: 10px;
            }
            .C {
              width: 50px;
              margin-left: 10px;
              input {
                width: 20px;
                border: none;
                outline: none;
                text-align: center;
                padding: 0 10px;
                margin-bottom: 10px;
                background: #fff;
              }
            }
          }
        }
        .goods-xiaoji1 {
          width: 195px;
          padding-top: 20px;
          text-align: center;
        }
        .goods-caozuo1 {
          width: 120px;
          padding-top: 20px;
          text-align: center;
          color: #343434;
          .shan {
            cursor: pointer;
          }
          .yiru {
            cursor: pointer;
            margin-top: 10px;
          }
        }
      }
    }
  }
  .jiesuan {
    width: 100%;
    height: 100px;
    background: #fff;
    .tree-bottom_C {
      width: 1150px;
      height: 80px;
      margin: 10px auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .jiesuan_L {
        display: flex;
        align-items: center;
        .quanxuan {
          padding-top: 5px;
          color: #343434;
        }
        .shanchu {
          margin-left: 20px;
          color: #484848;
          padding-top: 5px;
          cursor: pointer;
        }
        .shanchu:hover {
          color: red;
          border-bottom: 1px solid red;
        }
        .yiru {
          margin-left: 20px;
          color: #484848;
          padding-top: 5px;
          cursor: pointer;
        }
        .yiru:hover {
          border-bottom: 1px solid #484848;
        }
      }
      .jiesuan_R {
        font-size: 14px;
        color: #989898;
        display: flex;
        align-items: center;
        .yixuanze {
          .spen {
            color: #1a50fb;
          }
        }
        .img {
          width: 15px;
          height: 9px;
          margin-left: 10px;
        }
        .zongjia {
          margin-left: 40px;
          .money {
            color: #1b50fe;
          }
        }
        .tijiao {
          width: 84px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          background: #1850ff;
          color: #fff;
          border-radius: 5px;
          margin-left: 17px;
          cursor: pointer;
        }
      }
    }
  }
  input {
    appearance: none;
    outline: none;
    margin-top: 10px;
    padding: 0;
    margin-right: 10px;
  }
  input[type='checkbox'] {
    position: relative;
    width: 20px;
    height: 20px;
    background: #d5d5d5;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    &:checked::after {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      color: #333;
      text-align: center;
      line-height: 18px;
      background: url('https://static.98ep.com/img/BigCompany/a.png') no-repeat
        center;
    }
  }

  input[type='checkbox']:checked::after {
    content: '';
    background-color: #037df3;
    border-color: #037df3;
    background-color: #037df3;
  }
  input[type='checkbox']:checked::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    z-index: 1;
  }
  button {
    margin-top: 20px;
  }
}

JS

export default {
 
  data() {
    return {
      num: 1,
      allnum: 0,
      allprice: 0.0,
      data: [
	      {
	      cartJoinList:[
		      cartSkuId: 60,
		      decript: "4322qweq",
			  defaultImg: "http://39.106.100.127:8080/file/pic.jpg",
	      	  name: "二氯甲烷气体标准物质",
			  oldPrice: 350,
			  skuCount: 1
	      ],
	      storeId: 2
	      storeName: "店铺2"
	      }
      ],
      // 存储商家的id
      business: [],
      // 购物车id
      goodsInp: [],
      // 用作全选的状态
      whole: false,
    };
  },
  created() {
    this.getlist();
  },
  computed: {
    getDataLength() {
      return this.data.length;
    },

    getBusinessLength() {
      return this.business.length;
    },

    getGoodsInpLength() {
      return this.goodsInp.length;
    },
  },

  methods: {
    //增加
    add(e, index, indexs) {
      this.data[index].cartJoinList[indexs].skuCount++;
      this.sum();
    },
    //减少
    reduce(e, index, indexs) {
      this.data[index].cartJoinList[indexs].skuCount--;
      if (this.data[index].cartJoinList[indexs].skuCount <= 1) {
        this.data[index].cartJoinList[indexs].skuCount = 1;
      }
      this.sum();
    },
    //合计
    sum() {
      let len = this.data.length;
      let len1 = this.business.length;
      let newArr = [];
      for (let i = 0; i < len; i++) {
        for (let j = 0; j < len1; j++) {
          if (this.data[i].storeId == this.business[j]) {
            this.data[i].cartJoinList.forEach((w) => {
              newArr.push(w);
            });
          }
        }
        this.data[i].cartJoinList.forEach((res) => {
          this.goodsInp.forEach((req) => {
            if (res.cartSkuId == req) {
              newArr.push(res);
            }
          });
        });
      }
      this.allprice = 0;
      newArr = Array.from(new Set(newArr));
      this.allnum = newArr.length;
      newArr.forEach((res) => {
        this.allprice += res.oldPrice * res.skuCount;
      });
    },

    //删除单个
    del(e) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let len = this.data.length;
        for (let i = 0; i < len; i++) {
          let len1 = this.data[i].cartJoinList.length;
          for (let j = 0; j < len1; j++) {
            if (e.cartSkuId == this.data[i].cartJoinList[j].cartSkuId) {
              this.data[i].cartJoinList.splice(j, 1);
            }
          }
          if (this.data[i].cartJoinList.length == 0) {
            this.data.splice(i, 1);
          }
        }
      });
    },

    // 获取全部商家和全部商品
    getBusiness() {
      if (this.$refs.businessInp.checked) {
        this.data.forEach((res, index) => {
          this.business.push(res.storeId);
          this.duplicateRemoval();
          res.cartJoinList.forEach((req, index) => {
            this.goodsInp.push(req.cartSkuId);
            this.duplicateRemovalGoodsId();
          });
        });
      } else {
        this.business = [];
        this.goodsInp = [];
      }
      this.sum();
    },

    // 点击全选时获取全部的商家和商品
    getBusinessWhole() {
      if (!this.whole) {
        this.$refs.businessInp.checked = true;
        this.whole = true;
        this.getBusiness();
      } else {
        this.$refs.businessInp.checked = false;
        this.whole = false;
        this.getBusiness();
      }
    },

    // 当前商家选中时，获取商家下的子商品
    // 当前商家取消选中时，取消全选，删除取消选中的商品
    getBusinessId(item, index) {
      if (this.$refs.business[index].checked) {
        // console.log(`选中了第${item.id}个商品`)
        this.business.push(item.storeId);
        this.duplicateRemoval();
        // console.log(JSON.stringify(this.business))
        // console.log('this.getDatLength', this.getDatLength)
        // console.log('this.getBusinessLength', this.getBusinessLength)
        // 所有的商家选中时，全选按钮选中
        let isShole = this.getBusinessLength === this.getDataLength;
        // console.log('isShole', isShole)
        if (isShole) {
          this.whole = false;
          this.getBusinessWhole();
        }
        this.getGoodsId(item);
        // console.log('选中的商家', this.business)
        this.duplicateRemovalGoodsId();
      } else {
        // console.log(`取消选中第${item.id}个商家`)
        this.duplicateRemovalGoodsId();
        this.removeGoodsId(item);
        this.filterBusiness(item.storeId);
        this.$refs.businessInp.checked = false;
        this.whole = false;
        console.log('取消选中', this.business);
      }
      this.sum();
    },

    // 去掉重复的商家
    duplicateRemoval() {
      if (this.getBusinessLength !== 0) {
        this.business = Array.from(new Set(this.business));
      }
      // console.log(this.business)
    },

    // 商家未选中时删除商家
    filterBusiness(id) {
      this.business = this.business.filter((item) => {
        return item !== id;
      });
    },

    // 选中当前商品
    getGoodsDetails(item, indexs, good, index) {
      console.log(this.$refs[`goods${good.cartSkuId}`][0].checked);
      console.log(good);
      console.log(`第${good.cartSkuId}个商品`);
      // console.log(this.$refs[`goods${good.id}`][0].checked)
      // console.log(this.$refs[`goods${good.id}`][0].value)
      if (this.$refs[`goods${good.cartSkuId}`][0].checked) {
        this.goodsInp.push(good.cartSkuId);
        this.duplicateRemovalGoodsId();
        console.log(JSON.stringify(this.goodsInp));
        if (this.getBusinessGoodsLength(item)) {
          this.$refs.business[indexs].checked = true;
          this.getBusinessId(item, indexs);
        } else {
          this.$refs.business[indexs].checked = false;
        }
      } else {
        //this.allprice -= good.skuCount * good.oldPrice;
        this.duplicateRemovalGoodsId();
        this.filterGetGoodsId(good.cartSkuId);
        this.$refs.business[indexs].checked = false;
        this.$refs.businessInp.checked = false;
        this.whole = false;
        if (!this.getBusinessGoodsLength(item)) {
          this.business.forEach((res, index) => {
            if (res === item.storeId) {
              this.business.splice(index, 1);
            }
          });
        }
      }
      this.sum();
    },

    // 获取当前商家下的所有商品
    getGoodsId(item) {
      console.log('选中全部商品', item.cartJoinList);
      console.log(item);
      item.cartJoinList.forEach((res, index) => {
        this.goodsInp.push(res.cartSkuId);
      });
      this.sum();
    },

    // 清空当前商家下的所有商品
    removeGoodsId(item) {
      item.cartJoinList.forEach((res, index) => {
        this.goodsInp.forEach((req, index) => {
          if (res.cartSkuId === req) {
            this.goodsInp.splice(index, 1);
          }
        });
      });
      this.sum();
    },

    // 商品未选中时删除该商品
    filterGetGoodsId(id) {
      console.log('要删除的商品id', id);
      console.log('没有删除之前', JSON.stringify(this.goodsInp));
      this.goodsInp = this.goodsInp.filter((item) => {
        return item !== id;
      });
      console.log('已经过滤好的', JSON.stringify(this.goodsInp));
      this.sum();
    },

    // 去掉重复的商品
    duplicateRemovalGoodsId() {
      if (this.getGoodsInpLength !== 0) {
        this.goodsInp = Array.from(new Set(this.goodsInp));
      }
    },

    // 判断当前商品是否全部选中
    getBusinessGoodsLength(item) {
      let totalCount = 0;
      let isLen = false;
      console.log('已经选中的商品', this.goodsInp);
      item.cartJoinList.forEach((res, index) => {
        this.goodsInp.forEach((req, index) => {
          if (res.cartSkuId === req) {
            totalCount = totalCount + 1;
          }
        });
      });

      if (item.cartJoinList.length === totalCount) {
        isLen = true;
      }
      this.sum();

      console.log('当前商家下的所有商品已经选中了', isLen);
      return isLen;
    },

    getGoodsCart() {
      console.log('选中的商品', this.goodsInp);
      console.log('选中的商家', this.business);
      console.log('是否全选', this.whole);
    },
  },
};