在新增地址的弹窗组件中：
首先，增加新地址，就要把所有的信息储存到一个变量中 : receive。
新增的内容要添加到receiveInfo(vuex)中，格式也是一致的。
- 在组件中建立一个变量，和数据格式保持一致，然后用指令绑定到标签上。
======
//组件中
data() {
return {
receive : {
'name': '',
'phone': '',
'areaCode': '',
'landLine': '',
'provinceId': 0,
'province': '',
'cityId': 0,
'city': '',
'countyId': 0,
'county': '',
'add' : '',
'default': false
}
}
}
====
然后将这些数据绑定到对应的标签上
-
省份，城市，自己模拟一个数据,图示：
屏幕快照 2018-03-13 下午10.08.00.png
2-1 首先绑定省份数据。直接绑定即可。
<option :value="province.area_id" v-for="province,index in addList">
{{province.area_name}}
</option>
2-2 点击省份的时候，就要显示渲染赌赢的城市信息，需要做一个计算。
这个计算很重要，是这一步实现了真正的绑定数据，
首先需要拿到数据，并挂载。然后循环这个数据，先对比省份ID，并绑定。然后我们需要做一个计算，当省份对应上之后，可以新建一个数组，然后将这个省份对应的城市列表赋值给这个数组，页面上去绑定这个数组即可。
// 监控countryId
watch: {
'receive.countyId'(){
this.countyList.forEach((county) => {
// 当循环数据中的省份ID对应上当前的标签上绑定的数据的ID
if(county.area_id === this.receive.countyId){
this.receive.county = county.area_name
return
}
})
},
}，
computed: {
// 点击省份，渲染对应城市
cityList(){
let cityList = []
this.addList.forEach((province) => {
// 当循环数据中的省份ID对应上当前的标签上绑定的数据的ID
if(province.area_id === this.receive.provinceId){
// 改变对应的receive的数据
this.receive.province = province.area_name
cityList = province.city_list
return
}
})
if(this.receive.provinceId === '0'){
this.receive.cityId = 0
this.receive.countyId = 0
}
return cityList
},
// 点击城市，渲染对应区县
countyList(){
let countyList = []
this.cityList.forEach((city) => {
// 当循环数据中的省份ID对应上当前的标签上绑定的数据的ID
if(city.area_id === this.receive.cityId){
// 改变对应的receive的数据
this.receive.city = city.area_name
countyList = city.county_list
return
}
})
if(this.receive.cityId === '0'){
this.receive.countyId = 0
}
return countyList
}
},
========
<option :value="province.area_id" v-for="province,index in addList">
{{province.area_name}}
</option>
<option
:value="city.area_id"
v-for="city,index in cityList">
{{city.area_name}}
</option>
- 验证每项信息是否填写
首先需要定义一个变量，isRight。写一个方法inspectReceive，判断receive每一项都有内容，就是验证通过。什么时候时候判断（执行inspectReceive）？在receive的每一项都被改变（都添加内容的时候），所以需要将receive进行深度监控。要监控每一项改变，所以就要在点击的时候去改变receive里面对应的值。
data() {
return {
isRight:false //判断每项信息是否填写正确
}
}
}
=========
//computed中
// 验证每条信息是否正确：依次判断receive的值
inspectReceive(){
if(this.receive.name && !this.phoneError && this.receive.province && this.receive.city && this.receive.county && this.receive.add){
this.isRight = true
}else{
this.isRight = false
}
}
========
watch: {
receive : { // 当receive有变化的时候执行一次验证
handler(){ //方法
this.inspectReceive()
},
deep:true //是否深度监控
}
}
4.点击按钮提交新增的地址信息
如果每一项都验证通过了，就提交vuex中的submitReceive，这个函数做的事情是：先判断当前数据是否点击了设置为默认地址的按钮，如果点击了，就循环之前默认的已有的两条地址：receiveInfo，目的是将这两个数据的default都设置为false.然后将当前的这个data，push到receiveInfo中。
难点：如果勾选了，怎么设置当前这条信息是默认选中的状态？
如果用watch，发现根本监控不到。所以用了一个笨办法：提交之后，窗口就关闭了，那么在关闭的时候，重新去改变index值，就可以了。就等于是局部初始化了一下。
created通常用于初始化某些属性值，然后再对视图进行渲染。在这里用created是为了要把默认地址做一个初始化，让默认地址在渲染的时候为被选中状态。
// 提交订单页
created(){
this.$store.state.receiveInfo.forEach((receive,index) => {
if (receive.default) {
this.receiveIndex = index
return
}
})
}
// vuex
// 提交新的地址
submitReceive (state,data) {
if (data.default) { // 是否勾选设置为默认地址按钮
state.receiveInfo.forEach((receive) => {
receive.default = false
})
state.receiveInfo.push(data)
}
}
// 提交新增地址信息
submitReceiveHandle(){
if(this.isRight){
this.$store.commit('submitReceive',this.receive)
this.$emit('close')
}
}
