高级购物车

App.vue

<template>
  <div class="a">
    <my-header title="购物车案例" background="pink"></my-header>
    <my-goods v-for="obj in list" :key="obj.id" :gObj="obj"></my-goods>
    <my-footer :arr="list" @changeAll="allFn"></my-footer>
  </div>
</template>

<script>
import MyFooter from "./components/购物车/MyFooter.vue";
import MyGoods from "./components/购物车/MyGoods.vue";
import MyHeader from "./components/购物车/MyHeader.vue";
export default {
  components: { MyHeader, MyGoods, MyFooter },
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.$axios({
      url: "/api/cart",
      method: "GET",
    }).then((res) => {
      this.list = res.data.list;
    });
  },
  methods: {
    allFn(bool) {
      this.list.forEach((obj) => (obj.goods_state = bool));
    },
  },
};
</script>

<style>
.a{
  width: 500px;
  margin: 0 auto;
}
</style>

MyHeader.vue 

<template>
  <div class="my-header" :style="{backgroundColor:background,color:color}">{{title}}</div>
</template>

<script>
export default {
  props:{
    
  },
  props: {
    background: String,
    color: {
      type: String,
      default:"#fff",//默认字体颜色
    },
    title:{
      type:String,
      required:true,//必须传入此变量
    }
  },
};
</script>

<style lang="less" scoped>
.my-header {
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: #1d7bff;
  color: #fff;
  position: fixed;
  top: 0;
  // left: 0;
  width: 500px;
  z-index: 2;
  margin: 0 auto;
}
</style>

MyGoods.vue

<template>
  <div class="my-goods-item">
    <div class="left">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="input" v-model="gObj.goods_state"/>
        <label class="custom-control-label" :for="gObj.id">
          <img
            :src="gObj.goods_img"
            alt=""
          />
        </label>
      </div>
    </div>
    <div class="right">
      <div class="top">{{gObj.goods_name}}</div>
      <div class="bottom">
        <span class="price">¥{{gObj.goods_price}}</span>
        <span> 
          <my-count :obj="gObj"></my-count>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import MyCount from "./MyCount.vue";
export default {
  components: { MyCount },
  props: {
    gObj: Object,
  },
};
</script>

<style lang="less" scoped>
.my-goods-item {
  margin: 45px 0 0 0;
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  .left {
    img {
      width: 120px;
      height: 120px;
      margin-right: 8px;
      border-radius: 10px;
    }
    .custom-control-label::before,
    .custom-control-label::after {
      top: 50px;
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      font-size: 14px;
      font-weight: 700;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      align-items: center;
      .price {
        color: red;
        font-weight: bold;
      }
    }
  }
}
</style>

 

 MyFooter.vue

<template>
  <!-- 底部 -->
  <div class="my-footer">
    <!-- 全选 -->
    <div class="custom-control custom-checkbox">
      <input
        type="checkbox"
        class="custom-control-input"
        id="footerCheck"
        v-model="isAll"
      />
      <label class="custom-control-label" for="footerCheck">全选</label>
    </div>
    <!-- 合计 -->
    <div>
      <span>合计:</span>
      <span class="price">¥ {{ allPrice }}</span>
    </div>
    <!-- 按钮 -->
    <button type="button" class="footer-btn btn btn-primary">
      结算 ( {{ allCount }} )
    </button>
  </div>
</template>

<script>
export default {
  props: {
    arr: Array,
  },
  computed: {
    isAll: {
      set(val) {
        this.$emit("changeAll", val);
      },
      get() {
        return this.arr.every((obj) => obj.goods_state === true);
      },
    },
    allCount() {
      return this.arr.reduce((sum, obj) => {
        if (obj.goods_state === true) {
          sum += obj.goods_count;
        }
        return sum;
      }, 0);
    },
    allPrice() {
      return this.arr.reduce((sum, obj) => {
        if (obj.goods_state) {
          sum += obj.goods_count * obj.goods_price;
        }
        return sum;
      }, 0);
    },
  },
};
</script>

<style lang="less" scoped>
.my-footer {
  position: fixed;
  z-index: 2;
  bottom: 0;
  width: 500px;
  height: 50px;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background: #fff;

  .price {
    color: red;
    font-weight: bold;
    font-size: 15px;
  }
  .footer-btn {
    min-width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 25px;
    padding: 0;
  }
}
</style>

MyCount.vue

<template>
  <div class="my-counter">
    <button
      type="button"
      class="btn btn-light"
      :disabled="obj.goods_count === 1"
      @click="obj.goods_count--"
    >
      -
    </button>
    <input type="number" class="form-control inp" v-model="obj.goods_count" />
    <button type="button" class="btn btn-light" @click="obj.goods_count++">
      +
    </button>
  </div>
</template>

<script>
export default {
  props: {
    obj: Object,
  },
  watch: {
    obj: {
      deep: true,
      handler() {
        if (this.obj.goods_count < 1) this.obj.goods_count = 1;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn,
  .inp {
    transform: scale(0.9);
    width: 80px;
  }
}
</style>

main.js

import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'
axios.defaults.baseURL="https://www.escook.cn"
Vue.prototype.$axios=axios
console.log(Vue.prototype);