目录

一、购物车页面

（1）、qxc-address（收货地址）

2、qxc-goods（购物车显示商品信息）

3、qxc-settle（购物车结算页面）

4、购物车页面

---

前言：由于uniapp拥有高效开发，性能优秀，功能扩展灵活等优点，吸引了无数电商企业使用uniapp一次开发多个平台应用和部署，而今天要讲的，就是多渠道经营的卖家要开发商城中不可或缺的功能：购物车

那么首先，我们需要写出地址框，购物车标题，购物车统计，以及购物车为空时的页面

一、购物车页面

以上代码是一个 UniApp 页面的模板代码，使用了条件渲染来展示购物车的内容。根据 `cart` 数组的长度，当购物车不为空时，会渲染购物车的地址框、标题、列表和统计部分；当购物车为空时，会显示一个空购物车的提示信息。

具体来看：

`：根据 `cart` 数组的长度判断购物车是否为空，如果不为空，则渲染下面的内容。
`：展示购物车的地址框，通过 address="address"` 将 `address` 对象传递给 `qxc-address` 组件。
`：购物车的标题部分，包括一个文字标题和一个购物车图标。
：购物车的列表部分，使用 `v-for` 循环遍历 `cart` 数组中的每个商品，将商品数据传递给 `qxc-goods` 组件进行渲染。
 ``：购物车的结算部分，展示结算按钮和全选功能，通过 `:buttonText`、`showAllCheck` 和 `cartData` 属性将相应的数据传递给 `qxc-settle` 组件。
 ``：当购物车为空时，显示购物车为空的提示信息。
``：显示一个空购物车的图片。
 `购物车空空如也`：显示一个提示文本，表示购物车为空。

这段代码使用了多个自定义组件（例如 `qxc-address`、`qxc-goods` 和 `qxc-settle`），

（1）、qxc-address（收货地址）

1.在