Vue實(shí)現(xiàn)購物車詳情頁面的方法
上次我們?yōu)樯唐贩诸惒藛翁砑恿孙@示購物數(shù)量,這篇我們繼續(xù)推進(jìn)項(xiàng)目,來實(shí)現(xiàn)購物車的詳情頁面,在開始之前我們先看它在頁面中的樣子:
如上所示,此頁面包含了購物列表,而它由商品名稱,單價(jià),增減商品功能構(gòu)成,增減商品功能我們?cè)谏唐妨斜碇袑?shí)現(xiàn)過,那么我們現(xiàn)在可以進(jì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 金額 配送費(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)隱藏的,也就是說我們?cè)跊]有選擇食品的時(shí)候,點(diǎn)擊購物車它不會(huì)展開。
1.list-hearder,左右結(jié)構(gòu)包括1號(hào)口袋與清空購物車
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>清空購物車</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è)組件,添加功能
我們通過props為購物車組件傳入所需要的數(shù)據(jù);
計(jì)算屬性:
- 通過totalCount計(jì)算所選的商品數(shù)量;
- 通過totalPrice計(jì)算所選商品的總價(jià);
- 通過payStr控制去結(jié)算;
listShow是我們控制購物車詳情頁展示的要點(diǎn),依據(jù)totalCount所選商品數(shù)量對(duì)fold折疊進(jìn)行控制,fold為true,商品數(shù)量為0.購物車詳情頁為折疊狀態(tài)。
接著我們將狀態(tài)取反賦值到show,并且依據(jù)show,來控制商品詳情頁面商品一定多時(shí),可以進(jìn)行鼠標(biāo)滾動(dòng)。
方法:
通過toggleList點(diǎn)擊購物車logo時(shí)候,進(jìn)行判斷,如果沒有選擇商品那么我們什么也不做。如果我們選擇了商品,那么將fold取反。因?yàn)槲覀冊(cè)谟?jì)算屬性listShow中設(shè)置過實(shí)例中的fold屬性為true,所有它是折疊的。在我們?nèi)》春?,它就?huì)展開。
emptyFn清空購物車
最后我們點(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é)
我們從搭購物車結(jié)構(gòu),到所選商品列表細(xì)化,這里我們復(fù)用了增減商品的組件,然后加入遮罩層。通過計(jì)算屬性與方法,加入控制邏輯完成了購物車的詳情頁面。
以上所述實(shí)小編給大家介紹的Vue實(shí)現(xiàn)購物車詳情頁面的方法,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
Vue實(shí)現(xiàn)固定定位圖標(biāo)滑動(dòng)隱藏效果
移動(dòng)端頁面,有時(shí)候會(huì)出現(xiàn)一些固定定位在底部圖標(biāo),比如購物車等。這篇文章主要介紹了Vue制作固定定位圖標(biāo)滑動(dòng)隱藏效果,需要的朋友可以參考下2019-05-05vue.config.js中配置分包策略及常見的配置選項(xiàng)
在Vue.js中分包(Code Splitting)是一種將應(yīng)用程序代碼拆分為不同的塊或包的技術(shù),從而在需要時(shí)按需加載這些包,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中配置分包策略及常見的配置選項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-02-02vue 自動(dòng)化路由實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 自動(dòng)化路由實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09vue中使用file-saver導(dǎo)出文件的全過程記錄
這篇文章主要給大家介紹了關(guān)于vue中使用file-saver導(dǎo)出文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02基于VUE.JS的移動(dòng)端框架Mint UI的使用
本篇文章主要介紹了基于VUE.JS的移動(dòng)端框架Mint UI的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10Flutter部件內(nèi)部狀態(tài)管理小結(jié)之實(shí)現(xiàn)Vue的v-model功能
本文是 Flutter 部件內(nèi)部狀態(tài)管理的小結(jié),從部件的基礎(chǔ)開始,到部件的狀態(tài)管理,并且在過程中實(shí)現(xiàn)一個(gè)類似 Vue 的 v-model 的功能,感興趣的朋友跟隨小編一起看看吧2019-06-06vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問題及解決
這篇文章主要介紹了vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04