購(gòu)物車實(shí)現(xiàn)

• 選擇商品

• 單選  總金額需要計(jì)算
• 全選  總金額需要計(jì)算
• 取消全選 總金額需要計(jì)算
• 刪除 總金額需要計(jì)算

• 商品數(shù)量

• 增加 單個(gè)商品金額需要計(jì)算，總金額需要計(jì)算
• 減少 單個(gè)商品金額需要計(jì)算，總金額需要計(jì)算

針對(duì)金額，我們需要使用到 Vue 中的 filter 過(guò)濾屬性，來(lái)為金額添加單位

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

商品表格的實(shí)現(xiàn)

• 拿到商品數(shù)據(jù)，進(jìn)行循環(huán)渲染
• 處理商品金額單位
• 處理商品數(shù)量
• 刪除操作
• 商品單選

<table class="detial-wrap">
      <tr>
        <th>商品信息</th>
        <th>商品金額</th>
        <th>商品數(shù)量</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>贈(zèng)送：</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="結(jié)賬" class="danger"/></a>

      </div>
    </footer>

給全選的商品每一個(gè)都加上 item.checked = true 給反選的商品每一個(gè)都加上 item.checked = false 然后計(jì)算總金額

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

刪除商品

delConfirm:function (item) {
      //保存對(duì)象才知道刪除那個(gè)對(duì)象(用于模態(tài)框)
      this.curProduct=item;
      var index = this.cartList.indexOf(item);
      this.cartList.splice(index,1);
    }

單選商品 計(jì)算總金額

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();
    },