4.3制作“購物車”頁面主講人：譚麗君微信小程序開發(fā)

4.3.1“購物車”頁面wxml文件

購物車”頁面包括右上角編輯、中間的商品信息和下面的結(jié)算。

4.3.1“購物車”頁面wxml文件

1.“編輯/完成”框架②text組件內(nèi)容為三元運(yùn)算表達(dá)式，adminShow值為真時(shí)，顯示“完成”，adminShow值為假時(shí)，顯示“編輯”。①text組件，綁定了點(diǎn)擊事件adminTap。

4.3.1“購物車”頁面wxml文件

2.“購物車”頁面會(huì)有以下兩種情況：購物車是空的和購物車有商品購物車是空的購物車有商品

4.3.1“購物車”頁面wxml文件

3.每個(gè)商品信息效果和框架結(jié)構(gòu)如下圖，

4.3.1“購物車”頁面wxml文件

4.“購物車”中底部結(jié)算效果和框架結(jié)構(gòu)，

4.3.2“購物車”頁面wxss文件

1.“編輯/完成”效果和框架結(jié)構(gòu)，序號(hào)選擇器樣式內(nèi)容①.edit寬度、高度、背景顏色、行高、固定定位、頂上位置為0、彈性布局、右對齊②.edit>text右外邊距、字顏色、字大小、“編輯/完成”wxss樣式設(shè)置“編輯/完成”wxss樣式代碼

4.3.2“購物車”頁面wxss文件

2.每個(gè)商品信息的效果和框架，wxss樣式設(shè)置序號(hào)選擇器樣式內(nèi)容1.shop寬度、頂上內(nèi)邊距、底下內(nèi)容邊距、自適應(yīng)居中、底下外邊距2.empty文本水平居中、內(nèi)邊距、字顏色3.shop-content底下外邊距、溢出隱藏、彈性布局4.shop_check_box頂上外邊距、左邊外邊距5.check_img寬度、高度、頂上外邊距、左邊外邊距6.shop_img寬度、高度、外邊距7.shop_detail該元素flex為1即填滿剩下的寬，右外邊距8.shop_name字大小、行高9.shop_detail_bottom彈性布局、頂上外邊距10.shop_price行高、本元素flex為1即填滿剩下的寬，11.num_change彈性布局、頂上內(nèi)邊距12.minus_icon寬度、高度13.shop_num行高、高度、寬度、文本居中、字大小14.add_icon寬度、高度

4.3.2“購物車”頁面wxss文件

3.結(jié)算框架效果和框架結(jié)構(gòu)，wxss樣式設(shè)置序號(hào)選擇器樣式內(nèi)容1.footer

寬度、高度、固定定位、底下0px、背景色、彈性布局2.check_box該元素flex為1即填滿剩下的寬，彈性布局、行高、字大小3.check_img寬度、高度、頂上外邊距、左邊外邊距4.check_text左外邊距、行高5.footer_total_text字顏色、行高、該元素flex為1即填滿剩下的寬6.footer_tatal_price字顏色7.footer_total,.deleteshop寬度、高度、背景色、字大小、字顏色、文本水平居中、行高

4.3.3“購物車”頁面js文件

1.顯示“購物車”頁面時(shí)，會(huì)運(yùn)行cart.js文件中onShow函數(shù)，并發(fā)送網(wǎng)絡(luò)請求給后臺(tái)接口cartList，前后端數(shù)據(jù)交互，接口地址

4.3.3“購物車”頁面js文件

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

4.3.3“購物車”頁面js文件

2.在購物車頁面，單擊“加號(hào)”或“減號(hào)”時(shí)，會(huì)運(yùn)行cart.js文件中numchangeTap事件函數(shù)，并發(fā)送網(wǎng)絡(luò)請求給后臺(tái)接口syncNum，前后端數(shù)據(jù)交互如下圖，

4.3.3“購物車”頁面js文件

在導(dǎo)入的點(diǎn)餐小程序項(xiàng)目中，在購物車頁面，單擊思戀絲娃娃“加號(hào)”，在調(diào)試器中，單擊syncNum接口，單擊Headers，可以查看接口地址和網(wǎng)絡(luò)請求方式RequestMethod的值。如左下圖

。還可以查看接口從前端接收的數(shù)據(jù)，如右下圖。，

4.3.3“購物車”頁面js文件

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

4.3.3“購物車”頁面js文件

3.在購物車頁面，選擇商品，單擊右下角刪除時(shí)，會(huì)運(yùn)行cart.js文件中delete事件函數(shù)，并發(fā)送網(wǎng)絡(luò)請求給后臺(tái)接口syncDelete，前后端數(shù)據(jù)交互如下圖，

4.3.3“購物車”頁面js文件

在導(dǎo)入的點(diǎn)餐小程序項(xiàng)目中，在購物車頁面，點(diǎn)擊“編輯”，選擇“紅湯羊肉火鍋”，點(diǎn)擊刪除，在調(diào)試器中，單擊syncDelete接口，單擊Headers，可以查看接口地址和網(wǎng)絡(luò)請求方式RequestMethod的值。如左下圖。還可以查看接口接收的前端數(shù)據(jù)，如右下圖。，

4.3.3“購物車”頁面js文件

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

4.3.3“購物車”頁面js文件

4.在購物車頁面，選擇商品后，單擊結(jié)算按鈕，會(huì)運(yùn)行cart.js文件中g(shù)oClearing事件函數(shù)，跳轉(zhuǎn)到確認(rèn)訂單頁面，如下圖，

4.3.3“購物車”頁面js文件

在導(dǎo)入的點(diǎn)餐小程序項(xiàng)目中，在購物車頁面，選擇思戀絲娃娃，單擊結(jié)算按鈕，打開調(diào)試器，單擊Headers，可以查看跳轉(zhuǎn)地址，如左下圖。還可以查看跳轉(zhuǎn)頁面時(shí)傳遞的參數(shù)，如右下圖，

4.3.3“購物車”頁面js文件

，單擊Preview，可以查看“確認(rèn)訂單”頁面中，發(fā)送網(wǎng)絡(luò)請求給confirm接口，返回給前端的數(shù)據(jù)

4.3.3“購物車”頁面js文件

，序號(hào)代碼劃分說明①constutils=require('../../utils/util.js');引入utils.js文件②Page

初始數(shù)據(jù)data初始化以下數(shù)據(jù)：adminShow:false,//編輯items:[],//購物車數(shù)據(jù)total:0,//總金額checkedAll:false,//全選checkedGoods:[],//已選擇的商品

函數(shù)onShow功能：調(diào)用getList。getList功能：utils._get函數(shù)，發(fā)送網(wǎng)絡(luò)請求給后臺(tái)接口cartList，并返回購物車表中商品數(shù)據(jù)信息到前端。adminTap功能：切換顯示“編輯”或“完成”checkTap功能：點(diǎn)擊單個(gè)復(fù)選框,如果選中了該商品，則計(jì)算商品價(jià)格。judgmentAll功能：判斷是否為全選numchangeTap功能：調(diào)用syncNum函數(shù)syncNum功能：調(diào)用utils._post函數(shù)，發(fā)送網(wǎng)絡(luò)請求給后臺(tái)接口syncNum。對選中的商品進(jìn)行數(shù)量修改。allcheckTap功能：實(shí)現(xiàn)全選或全部未選中g(shù)oClearing功能：結(jié)算已