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)在可以進行復用。
搭出購物車結(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>
<!--復用商品增減組件 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>
// 導入BScroll
import BScroll from 'better-scroll'
// 導入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)，到所選商品列表細化，這里我們復用了增減商品的組件，然后加入遮罩層。通過計算屬性與方法，加入控制邏輯完成了購物車的詳情頁面。
以上所述實小編給大家介紹的Vue實現(xiàn)購物車詳情頁面的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關(guān)文章
這篇文章主要為大家介紹了Vue中使用Swiper簡單封裝組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
Vue3中toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，本文主要來給大家講解一下Vue3中的toRef和toRefs的使用，感興趣的朋友跟隨小編一起看看吧2023-01-01
移動端頁面，有時候會出現(xiàn)一些固定定位在底部圖標，比如購物車等。這篇文章主要介紹了Vue制作固定定位圖標滑動隱藏效果,需要的朋友可以參考下2019-05-05
在Vue.js中分包（Code Splitting）是一種將應(yīng)用程序代碼拆分為不同的塊或包的技術(shù),從而在需要時按需加載這些包,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中配置分包策略及常見的配置選項的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue 自動化路由實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要給大家介紹了關(guān)于vue中使用file-saver導出文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-02-02
本篇文章主要介紹了基于VUE.JS的移動端框架Mint UI的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Flutter部件內(nèi)部狀態(tài)管理小結(jié)之實現(xiàn)Vue的v-model功能
本文是 Flutter 部件內(nèi)部狀態(tài)管理的小結(jié)，從部件的基礎(chǔ)開始，到部件的狀態(tài)管理，并且在過程中實現(xiàn)一個類似 Vue 的 v-model 的功能，感興趣的朋友跟隨小編一起看看吧2019-06-06
這篇文章主要介紹了element-ui如何防止重復提交的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了vue項目打包之后接口出現(xiàn)錯誤的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04