微信小程序综合训练--花店商城小程序购物车、我的、鲜花列表、商品查询...笔记（2）

目录

一、购物车页面

1.购物车列表结构：

2.购物车列表项结构

3.购物车为空的情况

 4.底部提交订单栏

二、我的页面

1.顶部背景图

2.未登录面板

3.订单面板

4.商品售后面板

三、商品订单页

1.结构代码：

2.样式代码 

a.总背景：

b.订单列表项

四、鲜花列表页

五、商品详情页

1.页面布局

2.底部导航栏和商品操作按钮

3.自定义弹出面板

a.自定义面板的显示与关闭

b.商品信息展示

c.购买数量选择：

d.祝福语输入和确定按钮

---

一、购物车页面

在cart.xwml中完成购物车页面，展示购物车列表，其中包括购物车列表、购物车为空时的提示、以及底部的提交订单栏。

1.购物车列表结构：

• wx:if="{{cartList.length}}"：只有当 cartList 数组有长度（即非空）时，才显示购物车列表。
• wx：for="{{cartList}}" 、 wx:key="index"：用于遍历 cartList 数组，为每个列表项生成一个视图。