在新增地址的彈窗組件中：
首先偷拔，增加新地址坯癣，就要把所有的信息儲存到一個變量中 : receive芍秆。
新增的內(nèi)容要添加到receiveInfo(vuex)中，格式也是一致的钱床。
- 在組件中建立一個變量荚斯，和數(shù)據(jù)格式保持一致，然后用指令綁定到標簽上查牌。
======
//組件中
data() {
return {
receive : {
'name': '',
'phone': '',
'areaCode': '',
'landLine': '',
'provinceId': 0,
'province': '',
'cityId': 0,
'city': '',
'countyId': 0,
'county': '',
'add' : '',
'default': false
}
}
}
====
然后將這些數(shù)據(jù)綁定到對應(yīng)的標簽上
-
省份事期，城市，自己模擬一個數(shù)據(jù),圖示：
屏幕快照 2018-03-13 下午10.08.00.png
2-1 首先綁定省份數(shù)據(jù)纸颜。直接綁定即可兽泣。
<option :value="province.area_id" v-for="province,index in addList">
{{province.area_name}}
</option>
2-2 點擊省份的時候，就要顯示渲染賭贏的城市信息胁孙，需要做一個計算唠倦。
這個計算很重要，是這一步實現(xiàn)了真正的綁定數(shù)據(jù)涮较，
首先需要拿到數(shù)據(jù)稠鼻，并掛載。然后循環(huán)這個數(shù)據(jù)狂票，先對比省份ID候齿，并綁定。然后我們需要做一個計算闺属，當(dāng)省份對應(yīng)上之后慌盯，可以新建一個數(shù)組，然后將這個省份對應(yīng)的城市列表賦值給這個數(shù)組掂器，頁面上去綁定這個數(shù)組即可亚皂。
// 監(jiān)控countryId
watch: {
'receive.countyId'(){
this.countyList.forEach((county) => {
// 當(dāng)循環(huán)數(shù)據(jù)中的省份ID對應(yīng)上當(dāng)前的標簽上綁定的數(shù)據(jù)的ID
if(county.area_id === this.receive.countyId){
this.receive.county = county.area_name
return
}
})
},
}，
computed: {
// 點擊省份唉匾，渲染對應(yīng)城市
cityList(){
let cityList = []
this.addList.forEach((province) => {
// 當(dāng)循環(huán)數(shù)據(jù)中的省份ID對應(yīng)上當(dāng)前的標簽上綁定的數(shù)據(jù)的ID
if(province.area_id === this.receive.provinceId){
// 改變對應(yīng)的receive的數(shù)據(jù)
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
},
// 點擊城市孕讳，渲染對應(yīng)區(qū)縣
countyList(){
let countyList = []
this.cityList.forEach((city) => {
// 當(dāng)循環(huán)數(shù)據(jù)中的省份ID對應(yīng)上當(dāng)前的標簽上綁定的數(shù)據(jù)的ID
if(city.area_id === this.receive.cityId){
// 改變對應(yīng)的receive的數(shù)據(jù)
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每一項都有內(nèi)容芋簿，就是驗證通過峡懈。什么時候時候判斷（執(zhí)行inspectReceive）？在receive的每一項都被改變（都添加內(nèi)容的時候）与斤，所以需要將receive進行深度監(jiān)控肪康。要監(jiān)控每一項改變荚恶，所以就要在點擊的時候去改變receive里面對應(yīng)的值。
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 : { // 當(dāng)receive有變化的時候執(zhí)行一次驗證
handler(){ //方法
this.inspectReceive()
},
deep:true //是否深度監(jiān)控
}
}
4.點擊按鈕提交新增的地址信息
如果每一項都驗證通過了磷支，就提交vuex中的submitReceive谒撼，這個函數(shù)做的事情是：先判斷當(dāng)前數(shù)據(jù)是否點擊了設(shè)置為默認地址的按鈕，如果點擊了雾狈，就循環(huán)之前默認的已有的兩條地址：receiveInfo廓潜，目的是將這兩個數(shù)據(jù)的default都設(shè)置為false.然后將當(dāng)前的這個data，push到receiveInfo中善榛。
難點：如果勾選了辩蛋，怎么設(shè)置當(dāng)前這條信息是默認選中的狀態(tài)？
如果用watch移盆，發(fā)現(xiàn)根本監(jiān)控不到悼院。所以用了一個笨辦法：提交之后，窗口就關(guān)閉了咒循，那么在關(guān)閉的時候据途，重新去改變index值，就可以了叙甸。就等于是局部初始化了一下昨凡。
created通常用于初始化某些屬性值，然后再對視圖進行渲染蚁署。在這里用created是為了要把默認地址做一個初始化便脊，讓默認地址在渲染的時候為被選中狀態(tài)。
// 提交訂單頁
created(){
this.$store.state.receiveInfo.forEach((receive,index) => {
if (receive.default) {
this.receiveIndex = index
return
}
})
}
// vuex
// 提交新的地址
submitReceive (state,data) {
if (data.default) { // 是否勾選設(shè)置為默認地址按鈕
state.receiveInfo.forEach((receive) => {
receive.default = false
})
state.receiveInfo.push(data)
}
}
// 提交新增地址信息
submitReceiveHandle(){
if(this.isRight){
this.$store.commit('submitReceive',this.receive)
this.$emit('close')
}
}
