家政维修平台07个人地址管理-CSDN博客

本文链接：https://blog.csdn.net/u012877217/article/details/148055457

1 原型

首先是在我的页面有一个地址的导航功能
在这里插入图片描述
其次是地址的列表

还要有一个地址添加的表单

2 搭建地址导航功能

首先切换到我的页面，在个人信息下边添加一个普通容器，用来放置我们的地址导航功能
在这里插入图片描述
给普通容器设置一定的外边距

里边放置两个普通容器，用来放置我们的文本和图标

设置父容器的布局为横向排列，两端对齐

第一个普通容器里放置图标和文本组件，修改文本内容为地址管理

设置普通容器布局为横向排列，水平垂直居中
在这里插入图片描述
下边的普通容器放置一个图标组件，图标改为向右的箭头

然后给最外层的容器设置背景色、圆角、内边距就搭建好了

点击地址管理的时候，跳转到我们的地址列表页面

3 搭建地址列表页面

创建一个新页面，名称改为地址列表
在这里插入图片描述
页面中添加数据列表组件

数据模型选择收货地址

设置筛选条件，条件设置为所属用户等于我们全局变量用户的数据标识

$w.app.dataset.state.userData?.userInfo?._id

修改页面组件的背景色，设置为灰色
在这里插入图片描述
添加一个普通容器，将数据列表移入，并设置一定的外边距

设置普通容器的背景色为白色，一定的圆角和内边距

清空循环展示里的组件

添加一个普通容器，里边放置三个普通容器

第一个普通容器里放置两个普通容器
在这里插入图片描述
设置外层的普通容器的布局为横向排列，两端对齐

第一个普通容器，分别放置三个文本组件

设置普通容器的布局为横向排列，水平垂直居中

第一个文本我们绑定为收货人姓名

设置文本的样式为加粗
在这里插入图片描述
第二个文本绑定为地址标签

设置文本的颜色、背景色、圆角

第三个文本先设置一定的样式，文本内容设置为默认

给文本组件绑定条件展示，绑定为是否默认字段

右边的普通容器，里边添加两个图标组件，图标设置为编辑和删除
在这里插入图片描述
第二行普通容器里添加文本组件，内容绑定为联系电话

第三行绑定为详细地址

数据列表下边添加一个按钮，设置按钮的内容为添加地址
在这里插入图片描述
按钮点击的时候跳转到地址添加页面

4 搭建地址添加页面

新建一个页面，设置名称为地址添加页面
在这里插入图片描述
添加表单容器，数据模型选择收货地址

选中所属用户组件，设置选中值

绑定为我们的全局变量用户数据的数据标识

选中表单容器，设置数据源提交成功后的方法

动作选择数据源方法

选择用户管理的设置默认地址方法
在这里插入图片描述
传入具体的参数