订单组件地址增删改以及结算提交笔记

订单组件地址增删改以及结算提交笔记

一.设置静态的模态框：
1》删：

submitAddress后面会说，点击确定按钮触发的事件

2》增，改：

同时注意，增改的这个模态框的template插入的是表单（v-model后面会说）

二.新增data

checkedItem表示选中的商品对象
userAction表示用户行为

三.封装接口及对应函数：

1》设置点击删增改图标触发的事件函数：

删和改需要传item参数是因为，删改的接口地址含有item的id
还要注意在点击删改按钮，弹出模态框时，checkedItem已经为点击的地址item对象了

2》设置submitAddress函数：


这地方要注意 由于method是动态的 应该用【】中括号括起来

3》封装closeModal函数，进行数据清空：

4》设置封装接口参数
上面说到删改的url地址需要item的id
其实增改的接口参数也需要item的id

同时也要掌握 这里面errMsg的用法 和判断方式

四.增改的双向绑定：

主要利用了v-model指令，此时checkedItem就等于点击的地址的item，
因为在打开模态框之前，触发了openAddressModal，editAddressModal事件，this.checkedItem =item;进行了赋值。

五.点击地址红框选定：

1》先设置一个：checked样式，利用：class动态绑定

2》巧妙利用索引（index）和checkIndex进行判断

六.结算提交
提交之后的url地址：



1》若没有地址要进行一个判断
2》注意query的传参方式