购物车实现

人生代码

共 8975字,需浏览 18分钟

 ·

2021-04-06 15:16

  • 选择商品

    • 单选  总金额需要计算
    • 全选  总金额需要计算
    • 取消全选 总金额需要计算
    • 删除 总金额需要计算
  • 商品数量

    • 增加 单个商品金额需要计算,总金额需要计算
    • 减少 单个商品金额需要计算,总金额需要计算

针对金额,我们需要使用到 Vue 中的 filter 过滤属性,来为金额添加单位

filters:{
    round:function (value{
      return "$"+value.toFixed(2);
    }
  },

商品表格的实现

  • 拿到商品数据,进行循环渲染
  • 处理商品金额单位
  • 处理商品数量
  • 删除操作
  • 商品单选
<table class="detial-wrap">
      <tr>
        <th>商品信息</th>
        <th>商品金额</th>
        <th>商品数量</th>
        <th>总金额</th>
        <th>编辑</th>
      </tr>
      <tr v-for="(item, cartIndex) in cartList" :key="`cart_${cartIndex}`">
        <td class="goods-detial-wrap">
          <div class="checkbox-wrap left">
            <span class="checkbox" v-bind:class="{'checked':item.checked}" @click="selectedProduct(item)" ></span>
          </div>
          <div class="goods-detial right">
            <div class="good-img left"><img :src="item.imgPic"/></div>
            <div class="good-text left">
              <div class="name">{{item.name}}</div>
              <dl class="gifts">
                <dt>赠送:</dt>
                <dd v-for="(gift, giftIndex) in item.gifts" :key="`gift_${giftIndex}`">{{gift.giftName}}</dd>
              </dl>
            </div>
          </div>
        </td>
        <td class="unitprice">{{item.price | round}}</td>
        <td class="buy-num">
          <div class="choosenum-handler">
            <i class="icon-minus" @click="changeMoney(item,-1)"></i>
            <span class="countbox">{{item.count}}</span>
            <!--<input type="text" v-model="item.count" disabled>-->
            <i class="icon-plus" @click="changeMoney(item,1)"></i>
          </div>
          <div class="stock onsell"></div>
        </td>
        <td class="amount">{{item.price * item.count | round}}</td>
        <!--<td class="icon icon-delete" @click="delFlag=true"></td>-->
        <td class="icon icon-delete" @click="delConfirm(item)"></td>

      </tr>
    </table>

全选,反选功能

<footer class="checkout-wrap">
      <div class="total-check-wrap left">
        <div class="checkbox-wrap left"><span class="checkbox " :class="{'checked':checkAllFlag}" @click="checkAll(true)"></span></div>
        <div class="check-text">
          <span class="checked-all" @click="checkAll(true)">全选</span>
          <span class="unchecked-all" @click="checkAll(false)">取消全选</span>
        </div>
      </div>
      <div class="checkout right">
        <div class="total-money"><span class="name">总金额 :</span><span class="amount">{{ totalMoney | money}}元</span></div>
        <a href="#"><input type="submit" value="结账" class="danger"/></a>

      </div>
    </footer>

给全选的商品每一个都加上 item.checked = true 给反选的商品每一个都加上 item.checked = false 然后计算总金额

checkAll:function (flag{
      this.checkAllFlag =flag;
      var _this =this;
      this.cartList.forEach(function (item,index{
        //如果第一次直接点击全选
        if(typeof item.checked =='undefined'){
          _this.$set(item,"checked",_this.checkAllFlag);
        }else {
          item.checked = _this.checkAllFlag;
        }
      });
      this.getTotalMount();
    },

删除商品

delConfirm:function (item{
      //保存对象才知道删除那个对象(用于模态框)
      this.curProduct=item;
      var index = this.cartList.indexOf(item);
      this.cartList.splice(index,1);
    }

单选商品 计算总金额

selectedProduct:function (item{
      if(typeof item.checked =='undefined'){
        this.$set(item,"checked",true);
      }else {
        item.checked = !item.checked;
      }
      this.getTotalMount();
    },

总金额方法

getTotalMount:function ({
      var _this=this;
      _this.totalMoney=0;
      this.cartList.forEach(function (item,index{
        if(item.checked){
            _this.totalMoney+=item.price*item.count;
        }
      })
    },

商品的增加与减少

changeMoney:function (product,way{
      if (way>0) {
        product.count++;
        this.$emit('change');

      }else{
          product.count--;
        this.$emit('change');
        if(product.count<1){
              product.count=1;
          }
      }
      this.getTotalMount();
    },




浏览 22
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报