购物车功能

购物车功能

car页面

<template>
  <div class="car">
    <!-- 标题 -->
    <h3 class="title">购物车</h3>
    <!-- 商品 -->
    <ul class="good" v-show="carData.length===0 ?false :true">
      <li v-for="(item,index) of carData" :key="item.id">
        <div class="checkedBtn" @click="select(item.id,index)">
          <input type="checkbox" v-model="item.checked" />
        </div>
        <div class="goodInfo">
          <div class="goodInfoLeft">
            <img :src="item.img" alt />
          </div>
          <div class="goodInfoRight">
            <p class="goodTitle">{{item.title}}</p>
            <p class="price">单价:{{item.price}}元</p>
            <p class="goodCount">
              <button @click="inc(item.id,index)">+</button>
              <input type="text" v-model="item.count" @blur="change(item.id,$event)" />
              <button @click="reduce(item.id,index)">-</button>
            </p>
          </div>
        </div>
        <div class="delete">
          <button v-on:click="del(item.id)">删除</button>
        </div>
      </li>
    </ul>
    <!-- 结算-->
    <div class="foot">
      <p class="allChecked">
        <input type="checkbox" v-model="isok" />
        <span>全选</span>
      </p>
      <p class="price">总价:{{price}}元</p>
      <p class="gwc">加入购物车</p>
    </div>
  </div>
</template>

<script>
import {
  carData,
  delData,
  incDcata,
  reduceData,
  changeCount,
  dataChecked,
} from "../../api/request";
export default {
  data() {
    return {
      data: 1,
      //购物车数据
      carData: [],
      //价格
      price: 0,
    };
  },
  created() {
    this.getData();
  },
  computed: {
    // 全选按钮
    isok: {
      get() {
        return this.carData.every((ele) => ele.checked);
      },
      set(val) {
        this.carData.forEach((ele) => {
          ele.checked = val;
        });
      },
    },
  },
  watch: {
    carData: {
      deep: true,
      handler(newVal) {
        this.price = 0;
       this.allPrice(newVal);
      },
    },
  },
  methods: {
    //发请求获取数据
    async getData() {
      let data = await carData();
      if (data.msg === "success") {
        this.carData = data.data;
        this.price = 0;
        this.allPrice(this.carData);
      } else {
        this.carData = [];
      }
    },
    //删除商品
    async del(idx) {
      if (window.confirm("你确定要删除商品吗")) {
        let data = await delData(idx);
        if (data.msg === "success") {
          this.getData();
        }
      }
    },
    // 增加商品的数量
    async inc(idx, index) {
      let { count } = this.carData[index];
      if (count >= 10) {
        alert("数量达到最大");
        return;
      } else if (count < 10) {
        let data = await incDcata(idx);
        if (data.msg === "success") {
          this.getData();
        }
      }
    },
    //减少商品的数量
    async reduce(idx, index) {
      let { count } = this.carData[index];
      if (count <= 1) {
        alert("至少买一件");
        return;
      } else if (count <= 10) {
        let data = await reduceData(idx);
        if (data.msg === "success") {
          this.getData();
        }
      }
    },
    //修改数量
    async change(idx, e) {
      let count = e.target.value.trim();
      let regCount = /^\d+$/;
      if (!regCount.test(count)) {
        alert("输入有误");
        return;
      } else if (count > 10) {
        alert("最大数量为10");
        return;
      } else if (count < 1) {
        alert("最小数量为1");
        return;
      }
      let data = await changeCount(idx, count);
      if (data.msg === "success") {
        this.getData();
      }
    },
    //是否选中当前商品
    async select(id, index) {
      let flag;
      if (this.carData[index].checked) {
        this.carData[index].checked = false;
        flag = 0;
      } else {
        this.carData[index].checked = true;
        flag = 1;
      }
      let data = await dataChecked(id, flag);
    },
    //总价格
    allPrice(carData) {
      let newCarData = carData.filter((ele) => ele.checked);
      newCarData.forEach((ele) => {
        this.price += ele.count * ele.price;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
//标题
.title {
  height: 1.333333rem;
  line-height: 1.333333rem;
  text-align: center;
  font-weight: bolder;
  font-size: 0.533333rem;
  background-color: #ccc;
  margin-bottom: 0.266667rem;
}
//商品
.good {
  min-height: 4rem;
  li {
    &:last-child {
      margin-bottom: 1.466667rem;
    }
    height: 4rem;
    background-color: #888;
    padding: 0.366667rem 0 0 0.366667rem;
    display: flex;
    margin-bottom: 0.266667rem;
    .checkedBtn,
    .delete {
      width: 10%;
      height: 100%;
      position: relative;
    }
    .delete {
      button {
        width: 100%;
        height: 0.666667rem;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 0.2rem;
      }
    }
    .checkedBtn {
      input {
        position: absolute;
        width: 0.533333rem;
        height: 0.533333rem;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }
    .goodInfo {
      flex: 1;
      display: flex;
      .goodInfoLeft,
      .goodInfoRight {
        width: 50%;
        height: 100%;
      }
      .goodInfoLeft {
        img {
          width: 100%;
          height: 100%;
        }
      }
      .goodInfoRight {
        padding-top: 0.066667rem;
        padding-left: 0.133333rem;
        box-sizing: border-box;
        .goodTitle {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color: #ccc;
          font-size: 0.373333rem;
          margin-bottom: 0.666667rem;
        }
        .price {
          margin-bottom: 0.266667rem;
          color: darkred;
          font-weight: bolder;
          font-size: 0.373333rem;
        }
        .goodCount {
          overflow: hidden;
          input {
            width: 0.666667rem;
            height: 0.666667rem;
            float: left;
            padding-left: 0.133333rem;
            padding-right: 0.133333rem;
            font-size: 0.293333rem;
            font-weight: 900;
          }
          button {
            width: 0.666667rem;
            height: 0.666667rem;
            float: left;
            font-size: 0.373333rem;
            font-weight: 900;
          }
        }
      }
    }
  }
}
//结算
.foot {
  width: 100%;
  position: fixed;
  height: 1.333333rem;
  background-color: #fff;
  bottom: 0;
  left: 0;
  display: flex;
  box-shadow: 0px -0.04rem 0 0 #ccc;
  z-index: 1000;
  .allChecked {
    width: 30%;
    height: 100%;
    padding-top: 0.466667rem;
    box-sizing: border-box;
    padding-left: 0.133333rem;
    input {
      width: 0.533333rem;
      height: 0.533333rem;
      margin-right: 0.066667rem;
      vertical-align: middle;
    }
    span {
      font-size: 0.373333rem;
      vertical-align: middle;
      font-weight: 900;
    }
  }
  .price {
    width: 30%;
    height: 1.333333rem;
    text-align: center;
    line-height: 1.333333rem;
    color: red;
    font-size: 0.426667rem;
  }
  .gwc {
    flex: 1;
    text-align: center;
    line-height: 1.333333rem;
    font-size: 0.64rem;
    color: #000;
    font-weight: 900;
    background-color: red;
  }
}
</style>

具体请看githup链接：
https://github.com/await-lfq/vuePlugin.git