购物车页面实现

购物车页面实现

<template>
  <el-container>
    <el-header style="margin-bottom: 10px">
      <div>
        <el-card class="cart-header" shadow="nover">我的购物袋</el-card>
      </div>
    </el-header>
    <el-main>
      <div class="cart-product">
        <el-card shadow="nover" class="cart-product-header">
          <div slot="header" class="cart-product-header-div">
            <span class="cart-product-header-name">商品</span>
            <span class="cart-product-header-price">单价</span>
            <span class="cart-product-header-num">数量</span>
            <span class="cart-product-header-operate">操作</span>
          </div>
          <div
            class="cart-product-content"
            v-for="(item, index) in carts"
            :key="item.id"
          >
            <div class="check-all">
              <!-- <el-checkbox v-for="item in carts" :label="item" :key="item"></el-checkbox> -->
              <input
                type="checkbox"
                :value="item.id"
                v-model="checkBoxModel"
                @click.stop="onlyChecked(index),checkPick()"
              />
                <!-- <input
                type="checkbox"
                @click="selectGood(item)"
              /> -->

            </div>
            <div class="cart-product-image-info">
              <div class="cart-product-image">
                <img :src="item.imgme" />
              </div>
              <div class="cart-product-info">
                <span>【{{ item.name }}】</span>
                <span class="cart-product-abs">{{
                  item.abs | handleText
                }}</span>
                <span class="cart-product-netcontent"
                  >净含量：{{ item.netcontent }}g</span
                >
              </div>
            </div>
            <div class="cart-product-price">
              <span class="cart-product-price-span">￥{{ item.price }}元</span>
            </div>
            <div class="cart-product-num">
              <span class="cart-product-num-span">
                <el-input-number
                  size="mini"
                  v-model="item.num"
                  :min="1"
                  :max="5"
                ></el-input-number>
              </span>
            </div>
            <div class="cart-product-operate">
              <span class="cart-product-operate-span">
                <el-button type="text" size="small">查看</el-button>
                <el-button type="text" size="small">删除</el-button>
              </span>
            </div>
          </div>
          <div style="float: left" >
            <input
              type="checkbox"
              @click="checkedAll(), checkModel()"
              v-model="checked"
            />
          
      
           
          </div>
        </el-card>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Cart",
  data() {
    return {
        // checkAll:false,
      carts: [
        {
          id: 1,
          image: "",
          name: "玫瑰花茶",
          abs: "玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶",
          price: "199.00",
          netcontent: "250",
          num: "1",
        },
        {
          id: 2,
          image: "",
          name: "玫瑰花茶",
          abs: "玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶",
          price: "199.00",
          netcontent: "250",
          num: "1",
        },
        {
          id: 3,
          image: "",
          name: "玫瑰花茶",
          abs: "玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶",
          price: "199.00",
          netcontent: "250",
          num: "1",
        },
        {
          id: 4,
          image: "",
          name: "玫瑰花茶",
          abs: "玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶",
          price: "199.00",
          netcontent: "250",
          num: "1",
        },
        {
          id: 5,
          image: "",
          name: "玫瑰花茶",
          abs: "玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶",
          price: "199.00",
          netcontent: "250",
          num: "1",
        },
      ],
      id: "",
      image: "",
      name: "",
      abs: "",
      price: "",
      netcontent: "",
      num: "",
    //   selectId: [],
    //   checkAllFlag: false, //是否全选
        checkBoxModel: [],
        checked: false,
    };
  },
  filters: {
    handleText(value) {
      if (!value) return "";
      if (value.length > 15) {
        return value.slice(0, 15) + "...";
      }
    },
  },

    methods: {
      //实现全选
      checkedAll: function () {
        let _this = this;
        if (_this.checked) {
          _this.checkBoxModel = [];
          _this.checked = false;
        } else {
          _this.checkBoxModel = [];
          _this.carts.forEach(function (item) {
            _this.checkBoxModel.push(item.id);
          });
          _this.checked = true;
        }
      },
      onlyChecked: function (index) {
        if (this.carts[index].checked) {
          this.carts[index].checked = false;
        } else {
          this.carts[index].checked = true;
        }
      },
      checkPick: function () {
        select = this;
        let checkedSum = 0;
        for (let i = 0; i < select.carts.length; i++) {
          if (select.carts[i].checked) {
            checkedSum++;
          }
        }
        if (checkedSum == select.carts.length) {
          select.checked = true;
        } else {
          select.checked = false;
        }
      },
    },
//   methods: {
//     // (单选)选择商品
//     selectGoods(item) {
//       //判断是否未定义，如果没点击过按钮是没有注册的，则需要先注册checked属性
//       if (typeof item.checked == "undefined") {
//         this.$set(item, "checked", true);
//         this.checkNum++;
//         //结算需要显示的数量
//       } else {
//         //  如果已经注册，则设置checked否(这里不能设置为false,因为当已经注册过之后再点击为flase，那么再点击一次则为true)
//         item.checked = !item.checked;
//         item.checked ? this.checkNum++ : this.checkNum--;
//       }
//     },
//     // 全选与取消全选，点击全选时flag为true,取消时为false
//     checkAll(flag) {
//       this.checkAllFlag = flag;
//       var _this = this;
//       flag ? (this.checkNum = this.carts.length) : (this.checkNum = 0);
//       this.carts.forEach(function (item, index) {
//         if (typeof item.checked == "undefined") {
//           //也要防止未定义
//           _this.$set(item, "checked", _this.checkAllFlag);
//           //通过set来给item添加属性checked
//         } else {
//           item.checked = _this.checkAllFlag;
//         }
//       });
//     //   this.totalPrice();
//     },
//   },
};
</script>

<style scoped>
.cart-product {
  width: 90%;
  margin-left: 60px;
  /* background-color: lightblue; */
}
.cart-product-header-div {
  float: left;
}
.cart-product-header-name {
  display: inline-block;
  width: 450px;
  background-color: lightblue;
}
.cart-product-header-price {
  display: inline-block;
  width: 170px;
  background-color: lightgreen;
}
.cart-product-header-num {
  display: inline-block;
  width: 170px;
  background-color: lightcyan;
}
.cart-product-header-operate {
  display: inline-block;
  width: 170px;
  background-color: lightsteelblue;
}

.cart-product-content {
  width: 100%;
  height: 90px;
  background-color: linen;
}
.cart-product-content div {
  float: left;
}
.check-all {
  width: 20px;
  height: 20px;
}
.cart-product-image-info {
  width: 430px;
  height: 80px;
  background-color: moccasin;
}
.cart-product-image-info div {
  float: left;
}
.cart-product-image {
  width: 70px;
  height: 70px;
  margin-left: 10px;
  margin-bottom: 2px;
  background-color: mediumpurple;
}
.cart-product-info {
  width: 290px;
  height: 60px;
  background-color: mediumseagreen;
  text-align: left;
  margin-left: 4px;
}
.cart-product-abs {
  display: block;
  width: 200px;
  font-size: 9px;
  color: rgb(73, 71, 71);
}
.cart-product-netcontent {
  display: block;
  width: 200px;
  padding-top: 5px;
  font-size: 12px;
}

.cart-product-price {
  width: 175px;
  height: 80px;
  background-color: olive;
}
.cart-product-price-span {
  display: block;
  width: 175px;
  /* height: 30px; */
  padding-top: 20px;
  background-color: palevioletred;
}

.cart-product-num {
  width: 175px;
  height: 80px;
  background-color: orchid;
}
.cart-product-num-span {
  display: block;
  width: 175px;
  /* height: 30px; */
  padding-top: 20px;
  padding-left: 25px;
  background-color: rgb(204, 214, 60);
}

.cart-product-operate {
  width: 175px;
  height: 80px;
  background-color: paleturquoise;
}
.cart-product-operate-span {
  display: block;
  width: 175px;
  margin-top: 20px;
}
</style>