Vue實(shí)現(xiàn)購(gòu)物車(chē)詳情頁(yè)面的方法

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

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

上次我們?yōu)樯唐贩诸?lèi)菜單添加了顯示購(gòu)物數(shù)量，這篇我們繼續(xù)推進(jìn)項(xiàng)目，來(lái)實(shí)現(xiàn)購(gòu)物車(chē)的詳情頁(yè)面，在開(kāi)始之前我們先看它在頁(yè)面中的樣子：

如上所示，此頁(yè)面包含了購(gòu)物列表，而它由商品名稱(chēng)，單價(jià)，增減商品功能構(gòu)成，增減商品功能我們?cè)谏唐妨斜碇袑?shí)現(xiàn)過(guò)，那么我們現(xiàn)在可以進(jìn)行復(fù)用。

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

我們將購(gòu)物車(chē)底部構(gòu)建出來(lái)，

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

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

1 count大于0.讓它打開(kāi)

<!-- 左=>內(nèi)容包含購(gòu)物車(chē)icon 金額 配送費(fèi) -->
      <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默認(rèn)隱藏的，也就是說(shuō)我們?cè)跊](méi)有選擇食品的時(shí)候，點(diǎn)擊購(gòu)物車(chē)它不會(huì)展開(kāi)。

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

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號(hào)口袋 清空功能-->
        <div class="list-header">
          <h3 class="title">1號(hào)口袋</h3>
          <div class="empty" @click="emptyFn">
            <img src="./ash_bin.png" />
            <span>清空購(gòu)物車(chē)</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個(gè)-->
                  <p class="unit" v-show="!food.description">{{food.unit}}</p>
                  <p class="description" v-show="food.description">{{food.description}}</p>
                </div>
                <!--商品單價(jià)-->
                <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)咱們就搭好了。

注冊(cè)組件，添加功能

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

計(jì)算屬性：

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

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

接著我們將狀態(tài)取反賦值到show，并且依據(jù)show，來(lái)控制商品詳情頁(yè)面商品一定多時(shí)，可以進(jìn)行鼠標(biāo)滾動(dòng)。

方法:

通過(guò)toggleList點(diǎn)擊購(gòu)物車(chē)logo時(shí)候，進(jìn)行判斷，如果沒(méi)有選擇商品那么我們什么也不做。如果我們選擇了商品，那么將fold取反。因?yàn)槲覀冊(cè)谟?jì)算屬性listShow中設(shè)置過(guò)實(shí)例中的fold屬性為true，所有它是折疊的。在我們?nèi)》春螅蜁?huì)展開(kāi)。

emptyFn清空購(gòu)物車(chē)

最后我們點(diǎn)擊遮罩層的時(shí)候，讓遮罩層隱藏，也就是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: {
      // 總個(gè)數(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) { // 個(gè)數(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) { // 個(gè)數(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é)

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

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

您可能感興趣的文章: