Vue3仿美团项目--第五天

5 第五天

主要任务：订单页面，地址管理（添加地址，修改地址，删除地址），我的页面

5.1 订单页面

头部组件：引用公共组件，传递一个title为订单就行了。

导航栏：vant组件里面的Tab 标签页，标题是写死的，在订单组件中定义一个数组，存放这五个标题，遍历这个数组获取标题。

商品卡片：vant里面的Card 卡片组件，显示的内容是已完成的商品，这个数组是储存在vuex中的，在订单组件遍历已完成的订单数组。

商品卡片和空组件：需要在遍历卡片的时候判断当选择的标签是“全部”并且已完成的订单数组不为0的时候显示商品卡片，否则显示空组件。

5.2 地址

在src文件夹下新建地址管理的路由，在main.js里面配置路由， 点击生成订单页面的用户信息跳转到地址管理页面。 （这个点击跳按钮在生成订单组件中）

5.2.1 地址管理页面

头部：引用公共组件绑定title为地址管理。

下面是vant里面的AddressList 地址列表，去掉不需要的部分，颜色根据自己需要修改。

<van-address-list v-model="chosenAddressId"

:list="list" :disabled-list="disabledList" disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" />

将我们的用户信息与vant官网中的各个变量对应，通过map方法获取一个新数组，因为我们的信息和vant中的不太一样，所以需要把有几条消息通过${}.${}拼接起来。

将数据转化为布尔值：可以通过boolean()转化，也可以取反再取反强制转化。 

5.2.2 跳转到编辑地址

从地址管理页面点击编辑需要跳转到编辑地址页面，在src文件夹的pages中新建编辑地址组件，在router中配置路由。

编辑地址页面包含头部组件和地址编辑。

头部：引用公共组件中的Header。

地址编辑：使用vant组件里面的AddressEdit 地址编辑，首先在main.js里面引入，然后use一下，然后将官网代码粘贴到编辑地址组件中，有些不需要的属性就删除掉了。

<van-address-edit :area-list="areaList"

show-delete show-set-default show-search-result

search-result="searchResult"

:area-columns-placeholder="['请选择', '请选择', '请选择']"

@save="onSave" @delete="onDelete" @change-detail="onChangeDetail" />

5.2.3 编辑地址显示默认值

点击编辑跳转到编辑地址页面，需要初始显示默认值，通过route.query获取点击编辑按钮的信息数据的id，在vuex的用户地址信息数组中进行匹配，匹配上了，就把该条信息赋值给地址编辑组件，成为初始值。

vant组件中的AddressEdit 地址编辑的API：

address-info

地址信息初始值

AddressEditInfo

{}

5.2.4 vuex定义方法

1）添加地址：如果新传入的信息是默认地址，就把其他的都改为非默认，否则什么都不做。

2）编辑地址：如果把地址改为默认地址，并且一开始默认地址的id与编辑的id不匹配，就把其他的改为默认，否则不操作。

返回的数组是通过，把编辑的信息的id与用户数组的id进行匹配，如果匹配上就添加修改之后的信息，如果没匹配上就传入原来的数据。

3）删除地址：用filter过滤删除的信息，得到除删除以外的信息，返回数组。

需要判断当删除的项为默认项的时候，自动让数组中的index为0的信息成为默认项。

当信息都删除的时候，上面的判断会报错，因此需要在条件添加一条，当用户地址信息数组有长度的时候，才执行。

5.2.5 编辑和添加按钮

需要区分是编辑地址还是添加地址，在地址管理页面定义onAdd和onEdit方法，分别传递add和change两个参数。

1）头部组件：在编辑地址组件中，给头部组件绑定一个计算属性，传入一个type，当接收到的type参数为add的时候，显示编辑地址，否则显示添加地址。

2）添加地址功能：如果当前用户地址信息数组中有数据，那新传入的地址信息的id就是原来数组的最后一项的id+1，如果原来数组没有内容，那新添加的就是第一项，然后commit调用vuex添加地址方法。

3）编辑地址功能：当传递的参数不是add的时候就调用vuex里面的编辑方法。

5.2.5 删除地址

在编辑地址组件中，commit调用vuex里的删除方法。

优化：

引入Toast提示框，当编辑完成或者添加完成或者删除完成都会跳出提示框，然后再设置一个定时器，弹出提示后过一秒钟返回到上一个页面。

5.4 我的页面

5.4.1 头部

引用公共组件，绑定title为我的。

5.4.2 用户信息

背景颜色：从左向右的颜色渐变，通过 background: linear-gradient(90deg,#ffc400,#c7c351); 实现。

头像、昵称、个性签名：纯样式书写.......

5.4.3 列表

ul下有三个li，每个li包含文字和一个小箭头。

给列表绑定点击事件，点击跳转到对应的路由组件中。