《PHP程序設(shè)計(jì)與微信小程序案例教程》 課件4.4 制作“確認(rèn)訂單”頁面

4.4制作“確認(rèn)訂單”頁面主講人：譚麗君微信小程序開發(fā)

4.4.1“確認(rèn)訂單”wxml文件

在“確認(rèn)訂單”頁面，上面是訂單商品信息，底部是立即結(jié)算。

4.4.1“確認(rèn)訂單”wxml文件

1.每個(gè)訂單商品信息序號(hào)名稱組件部分屬性、內(nèi)容說明①商品列表wx:for="{{items.goods}}"列表渲染，數(shù)組名為items.goods②商品圖片src="{{item.cover}}"src屬性值綁定了數(shù)組中當(dāng)前元素的cover的值③商品標(biāo)題<viewclass="list-name">{{item.title}}</view>view內(nèi)容綁定了items.goods數(shù)組中當(dāng)前元素的title值。

④商品價(jià)格<textclass="list-detail-left">￥{{item.price}}</text>text內(nèi)容綁定了items.goods數(shù)組中當(dāng)前元素的price值。

⑤商品數(shù)量<textclass="list-detail-right">x{{item.num}}</text>text內(nèi)容綁定了items.goods數(shù)組中當(dāng)前元素的num值。商品信息框架中，數(shù)據(jù)綁定每個(gè)訂單商品信息wxml代碼

4.4.1“確認(rèn)訂單”wxml文件

2.立即結(jié)算效果和框架結(jié)構(gòu)立即結(jié)算wxml代碼序號(hào)名稱使用組件類名組件部分屬性、內(nèi)容說明①金額viewfooter-left<viewclass="footer-left">￥{{item.total_price}}</view>view內(nèi)容綁定了items中total_price值。

②立即結(jié)算viewfooter-rightbindtap="submitOrder"綁定了事件，函數(shù)名為submitOrder。立即結(jié)算中數(shù)據(jù)綁定和事件綁定4.4.2“確認(rèn)訂單”wxss文件1.每個(gè)訂單商品信息效果和框架結(jié)構(gòu)，序號(hào)選擇器樣式內(nèi)容1.nav-item寬度、高度、居中、背景色、頂上間距、邊框圓角、底下外邊距、彈性布局2.nav-item-img寬度、高度3.nav-item-img>image寬度、高度4.nav-item-text寬度、高度、字大小、文本左對(duì)齊5.list-name字顏色、溢出隱藏、頂上外邊距、右外邊距6.list-detail彈性布局、頂上外邊距、

space-between兩端對(duì)齊，項(xiàng)目之間的間隔都相等，7.list-detail-left字顏色8list-detail-right字顏色、右外邊距wxss樣式設(shè)置

4.4.2“確認(rèn)訂單”wxss文件

2.立即結(jié)算效果和框架結(jié)構(gòu)，wxss樣式設(shè)置序號(hào)選擇器樣式內(nèi)容1.footer-buy寬度、高度、固定定位、底下10px、自適應(yīng)居中、彈性布局、space-between兩端對(duì)齊，項(xiàng)目之間的間隔都相等，2.footer-left字大小、顏色、加粗、左內(nèi)邊距3.footer-right寬度、高度、背景色、文本水平居中、行高、字大小、字顏色、倒圓角邊框

4.4.3“確認(rèn)訂單”js文件

，1.在“購物車”頁面點(diǎn)擊“結(jié)算”時(shí)，才能跳轉(zhuǎn)到“確認(rèn)訂單”頁面，加載“確認(rèn)訂單”頁面，運(yùn)行confirm-order.js文件中onLoad函數(shù)，并發(fā)送網(wǎng)絡(luò)請(qǐng)求給后臺(tái)接口confirm，前后端數(shù)據(jù)交互如下圖。

4.4.3“確認(rèn)訂單”js文件

，在4.3.3.節(jié)中“購物車”頁面點(diǎn)擊“結(jié)算”時(shí)，已經(jīng)跳轉(zhuǎn)到“確認(rèn)訂單”頁面，并加載“確認(rèn)訂單”頁面，單擊Preview，可以查看confirm接口返回給前端的數(shù)據(jù)

4.4.3“確認(rèn)訂單”js文件

，2.在“確認(rèn)訂單”頁面單擊立即結(jié)算時(shí)，會(huì)運(yùn)行confirm-order.js文件中submitOrder事件函數(shù)，并發(fā)送網(wǎng)絡(luò)請(qǐng)求給后臺(tái)接口submitOrder，前后端數(shù)據(jù)交互如下圖

4.4.3“確認(rèn)訂單”js文件

在導(dǎo)入的點(diǎn)餐小程序項(xiàng)目中，在“確認(rèn)訂單”頁面單擊“立即結(jié)算”，打開調(diào)試器，單擊submitOrder接口，單擊Headers，可以查看接口地址和網(wǎng)絡(luò)請(qǐng)求方式RequestMethod的值。如左下圖。還可以查看接口接收的前端數(shù)據(jù)，如右下圖。

4.4.3“確認(rèn)訂單”js文件

，單擊Preview，可以查看submitOrder接口返回給前端的數(shù)據(jù)

4.4.3“確認(rèn)訂單”js文件

，confirm-order.js文件代碼模塊如下序號(hào)代碼劃分說明①constutils=require('../../utils/util.js');引入utils.js文件②Page初始數(shù)據(jù)data初始化以下數(shù)據(jù)：items:{},//商品信息goodsData:[],//要購買的商品信息cartIds:'',//購物車id函數(shù)onLoad功能：調(diào)用getL