Vue實現(xiàn)購物車詳情頁面的方法

更新時間：2019年08月20日 09:58:38 作者：前端大彬哥

這篇文章主要介紹了Vue實戰(zhàn)之購物車詳情頁面的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

上次我們?yōu)樯唐贩诸惒藛翁砑恿孙@示購物數(shù)量，這篇我們繼續(xù)推進項目，來實現(xiàn)購物車的詳情頁面，在開始之前我們先看它在頁面中的樣子：

如上所示，此頁面包含了購物列表，而它由商品名稱，單價，增減商品功能構(gòu)成，增減商品功能我們在商品列表中實現(xiàn)過，那么我們現(xiàn)在可以進行復(fù)用。

搭出購物車結(jié)構(gòu)

我們將購物車底部構(gòu)建出來，

<templete>
<div class="shopcart" :class="{'highligh':totalCount>0}">
    <div class="shopcart-wrapper">
      
    </div>
</div>
</templete>

老情況，在templete模板下的shopcart-wrapper內(nèi)完成底部購物車一欄：

1 count大于0.讓它打開

<!-- 左=>內(nèi)容包含購物車icon 金額 配送費 -->
      <div class="content-left">
        <div class="logo-wrapper" :class="{'highligh':totalCount>0}" @click="toggleList">
          <span class="icon-shopping_cart logo" :class="{'highligh':totalCount>0}"></span>
          <i class="num" v-show="totalCount">{{totalCount}}</i>
        </div>
        <div class="desc-wrapper">
          <p class="total-price" v-show="totalPrice">￥{{totalPrice}}</p>
          <p class="tip" :class="{'highligh':totalCount>0}">另需{{poiInfo.shipping_fee_tip}}</p>
        </div>
      </div>
      <!-- 去結(jié)算 -->
      <div class="content-right" :class="{'highligh':totalCount>0}">
        {{payStr}}
      </div>

搭建所選商品列表

如圖所示，我們分好結(jié)構(gòu)，緊接著搭建所選商品的列表

所選商品的列表 shopcart-list默認隱藏的，也就是說我們在沒有選擇食品的時候，點擊購物車它不會展開。

1.list-hearder，左右結(jié)構(gòu)包括1號口袋與清空購物車

2.list-content 列表，存放我們選擇的食物

2.1左邊是我們的食物名字，商品描述；右側(cè)是數(shù)量，加減商品的組件。

<div class="shopcart-list" v-show="listShow" :class="{'show':listShow}">
        <!--列表頂部滿減信息-->
        <div class="list-top" v-if="poiInfo.discounts2">
          {{poiInfo.discounts2[0].info}}
        </div>
        <!--1號口袋 清空功能-->
        <div class="list-header">
          <h3 class="title">1號口袋</h3>
          <div class="empty" @click="emptyFn">
            <img src="./ash_bin.png" />
            <span>清空購物車</span>
          </div>
        </div>
        <!--所選商品列表-->
        <div class="list-content" ref='listContent'>
          <ul>
            <li class="food-item" v-for="food in selectFoods">
              <div class="desc-wrapper">
                <!--左側(cè)-->
                <div class="desc-left">
                  <!--所選商品名字-->
                  <p class="name">{{food.name}}</p>
                  <!--所選商品描述 unit 例 des 霆鋒苦辣雞腿堡1個-->
                  <p class="unit" v-show="!food.description">{{food.unit}}</p>
                  <p class="description" v-show="food.description">{{food.description}}</p>
                </div>
                <!--商品單價-->
                <div class="desc-right">
                  <span class="price">￥{{food.min_price}}</span>
                </div>
              </div>
              <!--復(fù)用商品增減組件 Cartcontrol-->
              <div class="cartcontrol-wrapper">
                <Cartcontrol :food='food'></Cartcontrol>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-bottom"></div>
      </div>

加入遮罩層

<!-- 遮罩層 -->
    <div class="shopcart-mask" v-show="listShow" @click="hideMask()"></div>

到這里，結(jié)構(gòu)咱們就搭好了。

注冊組件，添加功能

我們通過props為購物車組件傳入所需要的數(shù)據(jù)；

計算屬性：

通過totalCount計算所選的商品數(shù)量；
通過totalPrice計算所選商品的總價；
通過payStr控制去結(jié)算；

listShow是我們控制購物車詳情頁展示的要點，依據(jù)totalCount所選商品數(shù)量對fold折疊進行控制，fold為true，商品數(shù)量為0.購物車詳情頁為折疊狀態(tài)。

接著我們將狀態(tài)取反賦值到show，并且依據(jù)show，來控制商品詳情頁面商品一定多時，可以進行鼠標滾動。

方法:

通過toggleList點擊購物車logo時候，進行判斷，如果沒有選擇商品那么我們什么也不做。如果我們選擇了商品，那么將fold取反。因為我們在計算屬性listShow中設(shè)置過實例中的fold屬性為true，所有它是折疊的。在我們?nèi)》春?，它就會展開。

emptyFn清空購物車

最后我們點擊遮罩層的時候，讓遮罩層隱藏，也就是fold為true。

<script>
  // 導(dǎo)入BScroll
  import BScroll from 'better-scroll'
  // 導(dǎo)入Cartcontrol
  import Cartcontrol from 'components/Cartcontrol/Cartcontrol'

  export default {
    data() {
      return {
        fold: true
      }
    },
    props: {
      poiInfo: {
        type: Object,
        default: {}
      },
      selectFoods: {
        type: Array,
        default() {
          return [
            //            {
            //              min_price: 10,
            //              count: 3
            //            },
            //            {
            //              min_price: 7,
            //              count: 1
            //            }
          ];
        }
      }
    },
    computed: {
      // 總個數(shù)
      totalCount() {
        let num = 0;
        this.selectFoods.forEach((food) => {
          num += food.count;
        });

        return num;
      },
      // 總金額
      totalPrice() {
        let total = 0;
        this.selectFoods.forEach((food) => {
          total += food.min_price * food.count;
        });

        return total;
      },
      payStr() {
        if(this.totalCount > 0) {
          return "去結(jié)算";
        } else {
          return this.poiInfo.min_price_tip;
        }
      },
      listShow() {
        if(!this.totalCount) { // 個數(shù)為0
          this.fold = true;

          return false;
        }

        let show = !this.fold;

        // BScoll相關(guān)
        if(show) {
          this.$nextTick(() => {
            if(!this.shopScroll) {
              this.shopScroll = new BScroll(this.$refs.listContent, {
                click: true
              });
            } else {
              this.shopScroll.refresh();
            }
          });
        }

        return show;
      }
    },
    methods: {
      toggleList() {
        if(!this.totalCount) { // 個數(shù)為0
          return;
        }
        this.fold = !this.fold;
      },
      emptyFn() {
        this.selectFoods.forEach((food) => {
          food.count = 0;
        });
      },
      hideMask() {
        this.fold = true;
      }
    },
    components: {
      Cartcontrol,
      BScroll
    }
  }
</script>

樣式

<style>
.shopcart-wrapper{
  width: 100%;
  height: 51px;
  background: #514f4f;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  z-index: 99;
}
.shopcart-wrapper.highligh{
  background: #2d2b2a;
}
.shopcart-wrapper .content-left{
  flex: 1;
}
.shopcart-wrapper .content-left .logo-wrapper{
  width: 50px;
  height: 50px;
  background: #666666;
  border-radius: 50%;
  position: relative;
  top: -14px;
  left: 10px;
  text-align: center;
  float: left;
}
.shopcart-wrapper .content-left .logo-wrapper.highligh{
  background: #ffd161;
}
.shopcart-wrapper .content-left .logo-wrapper .logo{
  font-size: 28px;
  color: #c4c4c4;
  line-height: 50px;
}
.shopcart-wrapper .content-left .logo-wrapper .logo.highligh{
  color: #2D2B2A;
}
.shopcart-wrapper .content-left .logo-wrapper .num{
  width: 15px;
  height: 15px;
  line-height: 15px;
  border-radius: 50%;
  font-size: 9px;
  color: white;
  background: red;
  position: absolute;
  right: 0;
  top: 0;
}
.shopcart-wrapper .content-left .desc-wrapper{
  float: left;
  margin-left: 13px;
}
.shopcart-wrapper .content-left .desc-wrapper .total-price{
  font-size: 18px;
  line-height: 33px;
  color: white;
}
.shopcart-wrapper .content-left .desc-wrapper .tip{
  font-size: 12px;
  color: #bab9b9;
  line-height: 51px;
}
.shopcart-wrapper .content-left .desc-wrapper .tip.highligh{
  line-height: 12px;
}
.shopcart-wrapper .content-right{
  flex: 0 0 110px;
  font-size: 15px;
  color: #BAB9B9;
  line-height: 51px;
  text-align: center;
  font-weight: bold;
}
.shopcart-wrapper .content-right.highligh{
  background: #FFD161;
  color: #2D2B2A;
}
.shopcart-wrapper .shopcart-list{
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
}
.shopcart-wrapper .shopcart-list.show{
  transform: translateY(-100%);
}
.shopcart-wrapper .shopcart-list .list-top{
  height: 30px;
  text-align: center;
  font-size: 11px;
  background: #f3e6c6;
  line-height: 30px;
  color: #646158;
}
.shopcart-wrapper .shopcart-list .list-header{
  height: 30px;
  background: #F4F4F4;
}
.shopcart-wrapper .shopcart-list .list-header .title{
  float: left;
  border-left: 4px solid #53c123;
  padding-left: 6px;
  line-height: 30px;
  font-size: 12px;
}
.shopcart-wrapper .shopcart-list .list-header .empty{
  float: right;
  line-height: 30px;
  margin-right: 10px;
  font-size: 0;
}
.shopcart-wrapper .shopcart-list .list-header .empty img{
  height: 14px;
  margin-right: 9px;
  vertical-align: middle;
}
.shopcart-wrapper .shopcart-list .list-header .empty span{
  font-size: 12px;
  vertical-align: middle;
}
.shopcart-wrapper .shopcart-list .list-content{
  max-height: 360px;
  overflow: hidden;
  background: white;
}
.shopcart-wrapper .shopcart-list .list-content .food-item{
  height: 38px;
  padding: 12px 12px 10px 12px;
  border-bottom: 1px solid #F4F4F4;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper{
  float: left;
  width: 240px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left{
  float: left;
  width: 170px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .name{
  font-size: 16px;
  margin-bottom: 8px;
  /* 超出部分隱藏*/
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 16px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .unit{
  font-size: 12px;
  color: #B4B4B4;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .description{
  font-size: 12px;
  color: #B4B4B4;
  /* 超出部分隱藏*/
  overflow: hidden;
  height: 12px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-right{
  float: right;
  width: 70px;
  text-align: right;  
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-right .price{
  font-size: 12px;
  line-height: 38px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .cartcontrol-wrapper{
  float: right;
  margin-top: 6px;
}
.shopcart .shopcart-mask{
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 98;
  background: rgba(7,17,27,0.6);
}
</style>

總結(jié)

我們從搭購物車結(jié)構(gòu)，到所選商品列表細化，這里我們復(fù)用了增減商品的組件，然后加入遮罩層。通過計算屬性與方法，加入控制邏輯完成了購物車的詳情頁面。

以上所述實小編給大家介紹的Vue實現(xiàn)購物車詳情頁面的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章: