目录
一、购物车页面
1.购物车列表结构：
2.购物车列表项结构
3.购物车为空的情况
4.底部提交订单栏
二、我的页面
1.顶部背景图
2.未登录面板
3.订单面板
4.商品售后面板
三、商品订单页
1.结构代码：
2.样式代码
.总背景：
.订单列表项
四、鲜花列表页
五、商品详情页
1.页面布局
2.底部导航栏和商品操作按钮
3.自定义弹出面板
.自定义面板的显示与关闭
.商品信息展示
.购买数量选择：
.祝福语输入和确定按钮
在.中完成购物车页面，展示购物车列表，其中包括购物车列表、购物车为空时的提示、以及底部的提交订单栏。
：只有当 数组有长度（即非空）时，才显示购物车列表。 、 ：用于遍历 数组，为每个列表项生成一个视图。
在. 对象中，设置购物车中商品数量：
： 的滑动单元格组件，允许用户向左或向右滑动以显示额外的操作。 和 ：定义滑动时显示的内容，这里左侧为空，右侧为“删除”。 :其他视图组件：用于展示商品信息，如图片、名称、价格等。
如下图所示：
-:空状态组件，用于展示购物车为空时的提示信息。
如下图所示：
提交订单栏组件，用于展示订单总价和提交按钮。设置订单的总价为 3050。：设置提交按钮的文本是“提交订单”。：当提交按钮被点击时，触发 事件处理函数。： 的复选框组件，这里用于实现全选功能。
在.页面中完成我的页面，用于展示用户的个人信息、订单列表以及售后服务等相关信息。
顶部展示区域，用于展示背景或图。设置了 以保证图片宽度自适应，高度按比例缩放。
分为标题和内容两部分。
内容部分使用了 循环来遍历 数组，为每个订单项生成一个视图。每个订单项都包含一个图标和一个标题文本，并且是一个导航器，点击后会跳转到 页面。
是售前售后服务的展示面板。它包含一个标题和多个售后服务项目的列表。每个项目都包含一个图标和一条文本描述。
在.中编写样式，完成后如下图所示：
新建一个文件，再单击右键新建，描述订单列表页面的结构。
在.中编写结构代码：
在.中编写订单列表页面的样式，包括订单项、订单信息、商品信息和订单底部信息的显示方式，
.总背景：
设置了页面的大背景颜色为 。
.订单列表项
使用了 布局，并设置了白色背景。
是订单列表中的单个订单项，设置了上边距、内边距、背景色和圆角。对于列表中的第一个订单项，它移除了上边距。
是订单项的头部，包含订单和订单状态，使用了 布局来对齐内容。
完成样式代码效果图如下图所示：
新建文件夹，在.中配置页面文件，
1.当设置为时，自定义组件的入口配置文件。
2.:用于当前页面或组件所使用的其他自定义组件，引用一个用于展示商品卡片的组件。
在.中引入-全局组件
在.编写结构：
样式完成后效果图如下：
新建一个文件，能商品详情页面的基本布局和交互功能
在.文件中编写结构
页面整体被包在一个 标签中，设置类名为 ，作为页面的容器。页面顶部是一个图片区域（），展示商品的主图。接下来是商品的基本信息展示区域（），包括价格、标题和详细信息。紧接着是图片信息展示区域（.），展示了商品的多张图片。页面底部是底部导航栏和商品操作按钮区域，使用了 组件库的 组件。商品的基本信息（价格、标题、详细信息）分别通过嵌套的 标签来展示，
底部导航栏使用了 标签来实现页面间的跳转。导航栏包含了三个导航项：“首页”、“购物车”和“客服”，每个导航项都使用了 组件库的 组件来展示图标和文本。通过 属性，这些导航项实现了 切换的跳转方式。页面底部还有两个商品操作按钮：“加入购物车”和“立即购买”。 组件库的 组件，并绑定了 事件处理函数 。当用户点击这些按钮时，会触发 函数，用于弹出某种面板或执行相关操作。
编写完样式效果图如下：
使用了 组件库中的 组件来创建一个弹出式的操作面板。这个面板包含了商品的基本信息、祝福语输入区域以及确认按钮。
在.中继续编写弹出面板: 用于展示商品信息、选择购买数量、输入祝福语，并最终通过确定按钮完成购买或提交操作。
.自定义面板的显示与关闭
.商品信息展示
编写了一个商品信息的展示区域，分为图片区域和基本信息区域。
.购买数量选择：
.祝福语输入和确定按钮
在面板的底部，有一个确定按钮，使用了 - 组件来实现。按钮的 属性设置为，表示主要按钮样式； 属性表示按钮为圆角样式； 属性设置为 ，表示按钮为大尺寸
在.中编写逻辑：
和 是两个函数，分别用于处理点击按钮事件和面板关闭事件。这两个函数都是定义在 文件中，
与 . 文件中对应的 ="" 和 :="" 事件绑定相匹配。
效果图如下：
