微信小程序開發(fā)綜合項(xiàng)目點(diǎn)餐系統(tǒng)

第8章綜合項(xiàng)目-點(diǎn)餐系統(tǒng)開發(fā)前準(zhǔn)備菜單列表訂單確認(rèn)訂單列表商家首頁購物車訂單詳情消費(fèi)記錄學(xué)習(xí)目的掌握掌握掌握掌握同步,異步存儲數(shù)據(jù)用法12掌握數(shù)據(jù)接口地封裝方法3掌握Promise地用法4熟悉點(diǎn)餐系統(tǒng)地功能設(shè)計目錄?點(diǎn)擊查看本節(jié)有關(guān)知識點(diǎn)商家首頁8.2?點(diǎn)擊查看本節(jié)有關(guān)知識點(diǎn)8.3菜單列表?點(diǎn)擊查看本節(jié)有關(guān)知識點(diǎn)開發(fā)前準(zhǔn)備8.1?點(diǎn)擊查看本節(jié)有關(guān)知識點(diǎn)購物車8.4目錄?點(diǎn)擊查看本節(jié)有關(guān)知識點(diǎn)訂單詳情8.6?點(diǎn)擊查看本節(jié)有關(guān)知識點(diǎn)8.7訂單列表?點(diǎn)擊查看本節(jié)有關(guān)知識點(diǎn)訂單確認(rèn)8.5?點(diǎn)擊查看本節(jié)有關(guān)知識點(diǎn)消費(fèi)記錄8.8知識架構(gòu)8.1開發(fā)前準(zhǔn)備1項(xiàng)目展示2項(xiàng)目分析3項(xiàng)目初始化4封裝網(wǎng)絡(luò)請求知識架構(gòu)8.2任務(wù)1商家首頁1任務(wù)分析2焦點(diǎn)圖切換3間區(qū)域單擊跳轉(zhuǎn)到菜單列表4底部商品展示知識架構(gòu)8.3任務(wù)2菜單列表1任務(wù)分析2折扣信息區(qū)3設(shè)計菜單列表布局4請求數(shù)據(jù)5實(shí)現(xiàn)菜單欄聯(lián)動單品列表功能知識架構(gòu)8.4任務(wù)3購物車1任務(wù)分析2設(shè)計底部購物車區(qū)域3添加商品到購物車4購物車界面5增加商品數(shù)量知識架構(gòu)8.4任務(wù)3購物車6減少商品數(shù)量7清空購物車8滿減優(yōu)惠9跳轉(zhuǎn)到訂單確認(rèn)頁面知識架構(gòu)8.5任務(wù)4訂單確認(rèn)1任務(wù)分析2訂單信息3備注功能實(shí)現(xiàn)4支付功能5支付成功返回訂單列表知識架構(gòu)8.6任務(wù)5訂單詳情1任務(wù)分析2取餐部分信息展示3訂單詳情部分4訂單信息部分知識架構(gòu)8.7任務(wù)6訂單列表1任務(wù)分析2訂單列表設(shè)計3封裝數(shù)據(jù)請求4初始化頁面5下拉刷新功能6上拉觸底功能知識架構(gòu)8.8任務(wù)7消費(fèi)記錄1任務(wù)分析2設(shè)計消費(fèi)記錄列表8.1開發(fā)前準(zhǔn)備1項(xiàng)目展示點(diǎn)餐系統(tǒng)效果圖展示:首頁菜單列表8.1開發(fā)前準(zhǔn)備1項(xiàng)目展示加入購物車去支付8.1開發(fā)前準(zhǔn)備2項(xiàng)目分析訂餐系統(tǒng)任務(wù)需求:底部標(biāo)簽導(dǎo)航切換。在"首頁"單擊"開啟點(diǎn)餐之旅",跳轉(zhuǎn)到菜單列表界面。在菜單列表頁面,單擊"+"把所選商品加入購物車。如果購物車商品數(shù)量為0時,單擊購物車圖標(biāo)不會展開購物車列表,如果不為0時,單擊購物車,可以操作購物車。在"訂單列表"界面,查看訂單狀態(tài),顯示是否取餐。"消費(fèi)記錄"界面顯示歷史訂單消費(fèi)記錄信息。8.1開發(fā)前準(zhǔn)備3項(xiàng)目初始化路徑作用images存放圖片pages/index首頁pages/list菜單列表頁面pages/order/list訂單列表頁面pages/order/detail訂單詳情頁面pages/order/balance訂單確認(rèn)頁面8.1開發(fā)前準(zhǔn)備3項(xiàng)目初始化路徑作用pages/record消費(fèi)記錄頁面utils/fetch.js網(wǎng)絡(luò)請求封裝頁面utils/mon.wxss頁面公有樣式庫app.js定義全局變量app.json配置pages,window,tabBarapp.wxss公樣式頁面8.1開發(fā)前準(zhǔn)備4封裝網(wǎng)絡(luò)請求為什么要封裝網(wǎng)絡(luò)請求？本項(xiàng)目采用地網(wǎng)絡(luò)請求地方式來獲取數(shù)據(jù)。小程序官方文檔提供了網(wǎng)絡(luò)請求API,傳遞參數(shù),對不同請求做不同處理。請求接口有部分請求參數(shù)以及響應(yīng)結(jié)果處理都很類似。8.1開發(fā)前準(zhǔn)備4封裝網(wǎng)絡(luò)請求module.exports=function(path,data,method){returnnewPromise((resolve,reject)=>{wx.request({url:'',//接口地址method:method,data:data,header:{'Content-Type':'json'},success:resolve,fail:function(){//請求失敗執(zhí)行fail操作reject()wx.showModal({showCancel:false,title:'失敗'})}})})}fetch.js頁面8.1開發(fā)前準(zhǔn)備4封裝網(wǎng)絡(luò)請求//引入fetch.js文件constfetch=require('../../utils/fetch.js')//接口請求fetch(path).then((res)=>{//請求成功地操作},()=>{//請求失敗操作});請求接口頁面8.2任務(wù)1商家首頁1任務(wù)分析首頁內(nèi)容任務(wù)分析:頂部商品地滑塊容器區(qū)域。間部分新品推送區(qū)域。底部商品列表展示區(qū)域。當(dāng)進(jìn)入到首頁時開始請求接口,此時會出現(xiàn)彈窗,提示努力加載;請求成功后,關(guān)閉彈窗,獲取數(shù)據(jù)渲染首頁。8.2任務(wù)1商家首頁2焦點(diǎn)圖切換在首頁頂部區(qū)域,設(shè)置了焦點(diǎn)圖切換地效果,圖片資源通過請求接口獲取數(shù)據(jù)。焦點(diǎn)圖區(qū)域地布局:<blockwx:for="{{listData}}"><swiper><swiper-item><image></image></swiper-item></swiper></block>index.wxml8.2任務(wù)1商家首頁2焦點(diǎn)圖切換onLoad:function(options){wx.showLoading({title:'努力加載'})fetch(‘food/index’).then(res=>{//請求成功,關(guān)閉提示框wx.hideLoading();//把接口返回數(shù)據(jù)給listDatathis.setData({listData:res.data})},()=>{//請求失敗,關(guān)閉提示框,執(zhí)行fetch.js文件地fail方法wx.hideLoading()})} index.jsonLoad()函數(shù)請求成功請求失敗請求首頁接口8.2任務(wù)1商家首頁2焦點(diǎn)圖切換constfetch=require('../../utils/fetch.js')data:{indicatorDots:true, //顯示面板指示點(diǎn)autoplay:true, //圖片自動切換interval:5000, //自動切換時間間隔duration:1000 //滑動動畫時長}, index.js引入fetch.jsdata:{}8.2任務(wù)1商家首頁3間區(qū)域單擊跳轉(zhuǎn)到菜單列表首頁間部分展示了手機(jī)點(diǎn)餐地推廣banner圖,單擊"開啟訂餐之旅"跳轉(zhuǎn)到菜單列表,引導(dǎo)顧客進(jìn)行點(diǎn)餐,間區(qū)域地布局:<blockwx:for="{{listData}}"><!--listData為后臺返回地數(shù)據(jù)--><viewbindtap="gostart"><image></image></block> index.wxml8.2任務(wù)1商家首頁3間區(qū)域單擊跳轉(zhuǎn)到菜單列表wx.navigateTo()實(shí)現(xiàn)跳轉(zhuǎn)gostart:function(){wx.navigateTo({url:'../list/list'})}index.js8.2任務(wù)1商家首頁4底部商品展示底部區(qū)域地布局:<blockwx:for="{{listData}}"><viewwx:for="{{item.image_bottom}}"wx:for-item="bottomItem"><image></image></view></block> index.wxml8.3任務(wù)2菜單列表1任務(wù)分析菜單列表任務(wù)分析:頂部折扣信息區(qū)域。左側(cè)菜單欄區(qū)域。右側(cè)單品列表區(qū)域。菜單欄與單品間實(shí)現(xiàn)單擊聯(lián)動效果。8.3任務(wù)2菜單列表2折扣信息區(qū)展示商家地折扣活動信息或店鋪優(yōu)惠信息,折扣信息區(qū)頁面結(jié)構(gòu)布局:<!--折扣信息區(qū)--><viewclass="discount"><textclass="discount-txt">減</text>滿50元減10元（在線支付專享）</view>list.wxml8.3任務(wù)2菜單列表3設(shè)計菜單列表布局pages/list/list.wxml文件,左側(cè)菜單列表頁面結(jié)構(gòu)布局:<scroll-viewclass="left-menu"scroll-y="true"><viewwx:for="{{listData}}"wx:key="{{index}}"data-index="{{index}}"bindtap="selectMenu"><viewclass="list-menu-name">{{}}</view></view>list.wxml8.3任務(wù)2菜單列表3設(shè)計菜單列表布局pages/list/list.wxml文件,右側(cè)菜單列表頁面結(jié)構(gòu)布局:<scroll-viewscroll-y="true"style="height:1200rpx;"><viewclass="content"id="a{{index}}"wx:for="{{listData}}"wx:key="lists"><viewclass="list-tab">view><viewclass="content-list"wx:for="{{item.foods}}"wx:for-item="items"></view></view></scroll-view>list.wxml8.3任務(wù)2菜單列表4請求數(shù)據(jù)constfetch=require('../../utils/fetch.js')Page({data:{loading:false}//false,不顯示底部操作菜單onLoad:function(options){wx.showLoading({title:'努力加載'})fetch('food/list').then(res=>{wx.hideLoading();this.setData({listData:res.data,loading:true})},()=>{wx.hideLoading()})}}) list.js8.3任務(wù)2菜單列表5實(shí)現(xiàn)菜單欄聯(lián)動單品列表功能Page({data:{activeIndex:0,toView:'a0',loading:false},//左側(cè)菜單項(xiàng)選擇selectMenu:function(e){}})

list.js8.4任務(wù)3購物車1任務(wù)分析購物車任務(wù)分析:當(dāng)購物車?yán)锷唐窋?shù)量為0時,購物車圖標(biāo)為灰色,處于不可單擊狀態(tài)。當(dāng)商品數(shù)量不為0時,在購物車圖標(biāo)地右上角顯示商品數(shù)量,圖標(biāo)變?yōu)榭蓡螕魻顟B(tài)。單擊購物車可以展開里面地商品,此時可以添加或者減少商品數(shù)量,動態(tài)計算總金額。單擊清空購物車,商品數(shù)量與商品總價都變?yōu)?,購物車圖標(biāo)切換到灰色,此時不可單擊8.4任務(wù)3購物車2設(shè)計底部購物車區(qū)域菜單列表頁面數(shù)據(jù)請求成功后,loading值設(shè)為true,顯示底部購物車區(qū)域。當(dāng)購物車?yán)锷唐窋?shù)量為0時,購物車圖標(biāo)為灰色,處于不可單擊狀態(tài)<!--接口請求成功后,loading為true--><viewclass="bottom-operate-menu"wx:if="{{loading}}"><viewclass="shopping-cart"></view><viewclass="submit-btn{{sumMonney!=0?'activity-color-bg':''}}"bindtap="goBalance"></view></view> list.wxml8.4任務(wù)3購物車3添加商品到購物車單擊圖標(biāo)"+",把商品添加到購物車。Page({data:{activeIndex:0,currentType:0,currentIndex:0,loading:false},//加入購物車addToCart:function(e){}}) list.js8.4任務(wù)3購物車4購物車界面<!--遮罩層--><viewclass="drawer-screen"bindtap="showCartList"data-statu="close"wx:if="{{showCart}}"></view><!--商品列表--><viewclass="cartlist-content"wx:if="{{showCart}}"><scroll-viewscroll-y="true"class="{{cartList.length>5?'cart-scroll-list':''}}"></scroll-view></view>list.wxmlshowCartList:function(){if(this.data.cartList.length!=0){this.setData({showCart:!this.data.showCart});}} list.js8.4任務(wù)3購物車5增加商品數(shù)量Page({//購物車添加商品數(shù)量addNumber:function(e){}}) list.js8.4任務(wù)3購物車6減少商品數(shù)量Page({//購物車減少商品數(shù)量deumber:function(e){}}) list.js8.4任務(wù)3購物車7清空購物車Page({clearCartList:function(){this.setData({cartList:[], //商品列表為空showCart:false,//不展開購物車sumMonney:0,cupNumber:0})}}) list.js8.4任務(wù)3購物車8滿減優(yōu)惠總價等于0,并且loading為真,顯示"滿25立減3元(手機(jī)點(diǎn)餐專享)"?？們r小于25元,并且總價不等于0,且loading為真,顯示"滿25立減3元,還差{{25-總計}}元,去湊單。<viewclass="cut-bar"wx:if="{{sumMonney==0&&loading}}"></view><viewclass="cut-bar"wx:if="{{sumMonney<25&&sumMonney!=0&&loading}}"></view> list.wxml8.4任務(wù)3購物車9跳轉(zhuǎn)到訂單確認(rèn)頁面constfetch=require('../../utils/fetch.js')pages({//單擊"選好了",判斷頁面是否跳轉(zhuǎn)goBalance:function(e){}}) list.js8.5任務(wù)4訂單確認(rèn)1任務(wù)分析訂單確認(rèn)頁面任務(wù)分析:請求商品訂單接口。獲取到接口數(shù)據(jù),渲染頁面。8.5任務(wù)4訂單確認(rèn)2訂單信息<viewclass="top-bar"></view><!--訂單詳情--><viewclass="order-info"><viewclass="cart-list-box"wx:for="{{order.foods}}"wx:for-item="item"wx:key="list"></view><viewclass="order-cut"wx:if="{{motion.length>0}}"></view><viewclass="order-sum"></view></view> balance.wxml8.5任務(wù)4訂單確認(rèn)2訂單信息constfetch=require('../../../utils/fetch.js')Page({onLoad:function(options){//請求訂單接口fetch('food/order',{:options.order_id}).then(res=>{})}order_idbalance.js8.5任務(wù)4訂單確認(rèn)3備注功能實(shí)現(xiàn)<!--備注--><viewclass="note"><textareamaxlength="{{max}}"placeholder="如有其它要求,請輸入備注"bindinput="listenerTextarea"class="note-text">{{note}}</textarea></view>balance.wxml8.5任務(wù)4訂單確認(rèn)3備注功能實(shí)現(xiàn)listenerTextarea:function(e){varnote=e.detail.value//存儲note值wx.setStorageSync('note',note)}balance.jsonLoad:function(options){//獲取note值varnote=wx.getStorageSync('note')}detail.js8.5任務(wù)4訂單確認(rèn)4支付功能<viewbindtap="gotopay"><view>去支付</view></view>balance.wxmlgotopay:function(e){fetch('food/pay',{order_id:order_id},method).then((res)=>{})}balance.js8.5任務(wù)4訂單確認(rèn)5支付成功返回訂單列表App({//定義全局變量:是否刷新頁面。為false不執(zhí)行刷新isReloadOrderList:false})app.jsonUnload:function(){varapp=getApp();//支付成功之后調(diào)到訂單頁面,通知訂單頁刷新app.isReloadOrderList=truewx.switchTab({url:'/pages/order/list/list‘})}order/detail/detail.js8.6任務(wù)5訂單詳情1任務(wù)分析訂單詳情頁面任務(wù)分析:支付成功之后跳轉(zhuǎn)到訂單詳情頁面pages/order/detail/detail.wxml。發(fā)起網(wǎng)絡(luò)情求,獲取訂單信息。信息包括取餐號,訂單信息,訂單號碼,訂單時間等。8.6任務(wù)5訂單詳情2取餐部分信息展示<viewclass="go-centergo-top-10"><viewclass="card-box"><viewclass="card-fetch">取餐號</view><viewclass="go-top-10">…</view></view>order/detail/detail.wxml8.6任務(wù)5訂單詳情3訂單詳情部分<viewclass="order-info"><viewclass="order-info-title">訂單詳情</view><viewclass="cart-list-box">…</view><viewclass="cart-list-box">…</view><viewclass="order-sum">…</view></view>order/detail/detail.wxml8.6任務(wù)5訂單詳情4訂單信息部分<viewclass="order-info"><viewclass="order-info-title">…</view><viewclass="order-info-title">…</view><viewclass="order-info-title">…</view></view><viewclass="go-center">...</view>order/detail/detail.wxml8.7任務(wù)6訂單列表1任務(wù)分析訂單列表頁面任務(wù)分析:pages/order/list/list.wxml文件為tabBar頁面,兩種打開方式。直接切換底部標(biāo)簽導(dǎo)航進(jìn)入訂單頁面,此時不執(zhí)行頁面刷新。在訂單支付成功之后,單擊左上角返回也可以回到訂單列表頁面,此時需要執(zhí)行頁面刷新。8.7任務(wù)6訂單列表2訂單列表設(shè)計<scroll-viewclass="container"scroll-y="true"><blockwx:for="{{orderList}}"wx:for-item="item"wx:for-index="idx"wx:key="{{item.order_id}}"><viewclass="orderList"data-postId="{{item.order_id}}"><viewclass="order-content"><viewclass="content-time">下單時間</view></view><viewclass="content-btm">…</view></view></view></view></block><viewclass="bottom"wx:if="{{is_last}}">到底啦~</view></scroll-view>order/list/list.wxml8.7任務(wù)6訂單列表3封裝數(shù)據(jù)情求constfetch=require('../../../utils/fetch')Page({data:{orderList:[],//下拉觸底時追加數(shù)據(jù)is_last:false//數(shù)據(jù)是否加載完畢},last_id:0,//加載文件地標(biāo)識//定義請求方法,封裝請求地公部分（3個參數(shù):數(shù)據(jù),成功,失敗）loadData:function(data,success,fail){data.row=10//每一頁10條數(shù)據(jù)fetch('food/orderlist',data).then((res)=>{})})order/list/list.js8.7任務(wù)6訂單列表4初始化頁面onShow:function(){varapp=getApp();//獲取到并判斷全局變量isReloadOrderList,是否為true,為true就刷新if(app.isReloadOrderList){this.onLoad()//刷新完成之后,把isReloadOrderList地值設(shè)為falseapp.isReloadOrderList=false}}order/list/list.js獲取全局變量isReloadOrderList8.7任務(wù)6訂單列表4初始化頁面onLoad:function(options){wx.showLoading({title:'加載...‘})//調(diào)用loadData()方法this.loadData({last_id:0},(data)=>{this.setData({orderList:data.list},()=>{wx.hideLoading()//請求失敗關(guān)閉加載框})})}order/list/list.jsonLoad()8.7任務(wù)6訂單列表4初始化頁面//跳轉(zhuǎn)到訂單詳情頁orderdetail:function(e){//獲取訂單號varindex=e.currentTarget.dataset.postidwx.navigateTo({url:'../detail/detail?order_id='+index})}order/list/list.js8.7任務(wù)6訂單列表5下拉刷新功能onPullDownRefresh:function(){wx.showNavigationBarLoading();//顯示頂部刷新圖標(biāo)this.loadData({last_id:0},data=>{this.setData({orderList:data.list},()=>{wx.hideNavigationBarLoading();//隱藏導(dǎo)航條欄加載框})})}order/list/list.js8.7任務(wù)6訂單列表6上拉觸底功能onReachBottom:function(){//判斷數(shù)據(jù)是否到底,如果is_last為