购物车页面实现

忘是亡心i 2021-09-07 06:13 465阅读 0赞

### 购物车页面实现 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70]

<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">
                  
                  <input
                    type="checkbox"
                    :value="item.id"
                    v-model="checkBoxModel"
                    @click.stop="onlyChecked(index),checkPick()"
                  />
                    
    
                </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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70]: /images/20210813/a5aaabd94d564856a860f0d0e96ff407.png