vue 购物车实例2

<template>

  <div class="home">

    <div class="main">

      <div class="item" v-for="(item, index) in list" :key="item.id">

        <div class="item_left">

          <img :src="item.img" alt="" />

        </div>

        <div class="item_right">

          <p>{{ item.name }}</p>

          <p>售价{{ item.price }}元</p>

          <div class="step">

            <!-- 减 -->

            <button

              @click="del(num, index)"

              :disabled="item.num === 0"

              class="bt2"

            >

              -

            </button>

            <!-- 加 -->

            <button

              @click="add(num, index)"

              :disabled="item.num === 5"

              class="bt1"

            >

              +

            </button>

            <input type="text" v-model="item.num" />

            <div class="piece">

              <p>已选{{ math }}个商品,总计{{ total }}元</p>

              <!-- <p v-if="index > 0">已选{{ index.length }}个,总计元</p>

              <p v-else>已选0个,总计0元</p> -->

            </div>

          </div>

        </div>

      </div>

      <!-- <div class="piece">

        <p>已选个,总计元</p>

      </div> -->

    </div>

  </div>

</template>

<script>

export default {

  name: "Home",

  data: function () {

    return {

      num: 0,

      total: 0,

      math: 0,

      list: [

        {

          id: 1,

          name: "限定商品名称1",

          price: 999,

          img: "",

          num: 0,

        },

        {

          id: 2,

          name: "限定商品名称2",

          price: 88,

          img: "",

          num: 0,

        },

        {

          id: 3,

          name: "限定商品名称3",

          price: 941,

          img: "",

          num: 0,

        },

        {

          id: 4,

          name: "限定商品名称4",

          price: 399,

          img: "",

          num: 0,

        },

        {

          id: 5,

          name: "限定商品名称5",

          price: 959,

          img: "",

          num: 0,

        },

        {

          id: 6,

          name: "限定商品名称6",

          price: 119,

          img: "",

          num: 0,

        },

      ],

    };

  },

  created() {},

  methods: {

    add(num, index) {

      this.list[index].num = parseInt(this.list[index].num) + 1;

      console.log("num", this.list[index].num);

      console.log("index", index);

      console.log("price", this.list[index].price);

      this.totalPrice();

    },

    del(num, index) {

      this.list[index].num = parseInt(this.list[index].num) - 1;

      console.log("num", this.list[index].num);

      console.log("index", index);

      this.totalPrice();

    },

    /*

    先将数字清零在累加

    */

    totalPrice() {

      let list = this.list;

      console.log(list);

      this.total = 0;

      this.math = 0;

      list.forEach((item) => {

        if (item.num) {

          this.total += item.price * item.num;

          this.math += item.num;

        }

      });

      console.log("total", this.total);

    },

    // totalPrices() {

    //   let list = this.list;

    //   console.log(list);

    //   let total = 0;

    //   list.forEach((item) => {

    //     if (item.num) {

    //       let pricearr = item.price * item.num;

    //       this.total -= pricearr;

    //       console.log(this.total, 1111111111);

    //       let nums = item.num;

    //       this.math -= nums;

    //       console.log("pricearr", pricearr);

    //     }

    //   });

    //   console.log("total", this.total);

    // },

  },

};

</script>

<style lang="less" scoped>

.home {

  * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

  }

  *:focus {

    outline: none;

  }

  .main {

    width: 95%;

    border: 1px solid red;

    margin: 60px auto 0;

    .item {

      width: 100%;

      height: 120px;

      border: 1px solid orange;

      margin-top: 20px;

      margin-bottom: 80px;

      display: flex;

      .item_left {

        width: 30%;

        height: 100px;

        border: 1px solid;

        display: flex;

        justify-content: center;

        align-items: center;

        img {

          width: 90px;

          height: 90px;

        }

      }

      .item_right {

        width: 70%;

        margin-left: 20px;

        position: relative;

        border: 1px solid red;

        .step {

          position: absolute;

          top: 70px;

          right: 0;

          width: 80px;

          height: 30px;

          // border: 1px solid orange;

          background: #efefef;

          button {

            width: 25px;

            height: 25px;

            border: none;

          }

          .bt1 {

            position: absolute;

            top: 2px;

            left: 50px;

          }

          .bt2 {

            position: absolute;

            top: 2px;

            left: 0;

            border: 1px solid red;

          }

          input {

            position: absolute;

            top: 2px;

            left: 26px;

            width: 25px;

            height: 25px;

            display: inline-block;

            border: none;

            text-align: center;

          }

        }

      }

    }

    .piece {

      position: fixed;

      bottom: 0;

      left: 0;

      width: 100%;

      height: 80px;

      background: #efefef;

    }

  }

}

</style>