Showing
1 changed file
with
128 additions
and
43 deletions
| @@ -3,16 +3,24 @@ | @@ -3,16 +3,24 @@ | ||
| 3 | <div class="address-select-box"> | 3 | <div class="address-select-box"> |
| 4 | <div class="component-title"><span class="title">所在地区</span><span class="iconfont close" @click="closeAddBox">X</span></div> | 4 | <div class="component-title"><span class="title">所在地区</span><span class="iconfont close" @click="closeAddBox">X</span></div> |
| 5 | <ul class="head-address-ul"> | 5 | <ul class="head-address-ul"> |
| 6 | - <li v-if="province.name" :class="{ 'head-address-li': province.active }" @click="getAddress()">{{province.name}}</li> | ||
| 7 | - <li v-else class="head-address-li">请选择</li> | ||
| 8 | - <li v-if="city.name" :class="{ 'head-address-li': city.active }">{{city.name}}</li> | ||
| 9 | - <li v-if="area.name" :class="{ 'head-address-li': area.active }">{{area.name}}</li> | ||
| 10 | - <li v-if="street.name" :class="{ 'head-address-li': street.active }">{{street.name}}</li> | 6 | + <li v-if="province.title" :class="{ 'head-address-li': province.titleActive }" @click="clickTitle('province')">{{province.title}}</li> |
| 7 | + <li v-if="city.title" :class="{ 'head-address-li': city.titleActive }" @click="clickTitle('city')">{{city.title}}</li> | ||
| 8 | + <li v-if="area.title" :class="{ 'head-address-li': area.titleActive }" @click="clickTitle('area')">{{area.title}}</li> | ||
| 9 | + <li v-if="street.title" :class="{ 'head-address-li': street.titleActive }">{{street.title}}</li> | ||
| 11 | </ul> | 10 | </ul> |
| 12 | <div class="address-container"> | 11 | <div class="address-container"> |
| 13 | <div class="address-content"> | 12 | <div class="address-content"> |
| 14 | - <ul class="address-ul"> | ||
| 15 | - <li v-for="address in addresses" @click="getAddress(address.id, address.caption)">{{address.caption}}</li> | 13 | + <ul v-if="province.showList" class="address-ul"> |
| 14 | + <li v-for="province in provinces" @click="switchAddress(province.id, province.caption)">{{province.caption}}</li> | ||
| 15 | + </ul> | ||
| 16 | + <ul v-if="city.showList" class="address-ul"> | ||
| 17 | + <li v-for="city in citys" @click="switchAddress(city.id, city.caption)">{{city.caption}}</li> | ||
| 18 | + </ul> | ||
| 19 | + <ul v-if="area.showList" class="address-ul"> | ||
| 20 | + <li v-for="area in areas" @click="switchAddress(area.id, area.caption)">{{area.caption}}</li> | ||
| 21 | + </ul> | ||
| 22 | + <ul v-if="street.showList" class="address-ul"> | ||
| 23 | + <li v-for="street in streets" @click="switchAddress(street.id, street.caption)">{{street.caption}}</li> | ||
| 16 | </ul> | 24 | </ul> |
| 17 | </div> | 25 | </div> |
| 18 | </div> | 26 | </div> |
| @@ -142,70 +150,147 @@ | @@ -142,70 +150,147 @@ | ||
| 142 | module.exports = { | 150 | module.exports = { |
| 143 | data() { | 151 | data() { |
| 144 | return { | 152 | return { |
| 145 | - addresses:[], | 153 | + provinces:[], |
| 154 | + citys: [], | ||
| 155 | + areas: [], | ||
| 156 | + streets: [], | ||
| 146 | show: false, | 157 | show: false, |
| 147 | province: { | 158 | province: { |
| 148 | - name: '', | ||
| 149 | - active: false | 159 | + id: '', |
| 160 | + title: '', | ||
| 161 | + showList: true, | ||
| 162 | + titleActive: false, | ||
| 150 | }, | 163 | }, |
| 151 | city: { | 164 | city: { |
| 152 | - name: '', | ||
| 153 | - active: false | 165 | + id: '', |
| 166 | + title: '', | ||
| 167 | + showList: false, | ||
| 168 | + titleActive: false, | ||
| 154 | }, | 169 | }, |
| 155 | area: { | 170 | area: { |
| 156 | - name: '', | ||
| 157 | - active: false | 171 | + id: '', |
| 172 | + title: '', | ||
| 173 | + showList: false, | ||
| 174 | + titleActive: false, | ||
| 158 | }, | 175 | }, |
| 159 | street: { | 176 | street: { |
| 160 | - name: '', | ||
| 161 | - active: false | 177 | + id: '', |
| 178 | + title: '', | ||
| 179 | + showList: false, | ||
| 180 | + titleActive: false, | ||
| 162 | } | 181 | } |
| 163 | }; | 182 | }; |
| 164 | }, | 183 | }, |
| 165 | methods: { | 184 | methods: { |
| 166 | - | ||
| 167 | - /* 获取地址数据 */ | ||
| 168 | - getAddress(id, caption) { | ||
| 169 | - if (!id) { | ||
| 170 | - this.province.name = this.city.name = this.area.name = this.street.name = ''; | ||
| 171 | - this.province.active = true; | ||
| 172 | - this.city.active = this.area.active = this.street.active = false; | ||
| 173 | - } | ||
| 174 | - if (!this.province.name) { | ||
| 175 | - this.province.name = caption; | ||
| 176 | - this.province.active = true; | ||
| 177 | - } else if (!this.city.name) { | ||
| 178 | - this.city.name = caption; | ||
| 179 | - this.city.active = true; | ||
| 180 | - this.province.active = false; | ||
| 181 | - } else if (!this.area.name) { | ||
| 182 | - this.area.name = caption; | ||
| 183 | - this.area.active = true; | ||
| 184 | - this.city.active = false; | ||
| 185 | - } else if (!this.street.name) { | 185 | + /* 选择地址后的显示控制 */ |
| 186 | + changeShow(id, caption) { | ||
| 187 | + switch ((id + '').length) { | ||
| 188 | + case 2: | ||
| 189 | + this.province.title = caption; | ||
| 190 | + this.city.showList = true; | ||
| 191 | + this.province.showList = this.area.showList = this.street.showList = false; | ||
| 192 | + this.province.titleActive = true; | ||
| 193 | + this.city.titleActive = this.area.titleActive = this.street.titleActive = false; | ||
| 194 | + break; | ||
| 195 | + case 4: | ||
| 196 | + this.city.title = caption; | ||
| 197 | + this.area.showList = true; | ||
| 198 | + this.province.showList = this.city.showList = this.street.showList = false; | ||
| 199 | + this.city.titleActive = true; | ||
| 200 | + this.province.titleActive = this.area.titleActive = this.street.titleActive = false; | ||
| 201 | + break; | ||
| 202 | + case 6: | ||
| 203 | + this.area.title = caption; | ||
| 204 | + this.street.showList = true; | ||
| 205 | + this.province.showList = this.city.showList = this.area.showList = false; | ||
| 206 | + this.area.titleActive = true; | ||
| 207 | + this.province.titleActive = this.city.titleActive = this.street.titleActive = false; | ||
| 208 | + break; | ||
| 209 | + case 9: // 一定要返回结果了 | ||
| 186 | if (caption.length > 5) { | 210 | if (caption.length > 5) { |
| 187 | - this.street.name = caption.substring(0,2) + '...' + caption.substring(caption.length - 2); | 211 | + this.street.title = caption.substring(0, 2) + '...' + caption.substring(caption.length - 2); |
| 188 | } else { | 212 | } else { |
| 189 | - this.street.name = caption; | 213 | + this.street.title = caption; |
| 190 | } | 214 | } |
| 191 | - this.street.active = true; | ||
| 192 | - this.area.active = false; | 215 | + this.street.showList = true; |
| 216 | + this.province.showList = this.city.showList = this.area.showList = false; | ||
| 217 | + this.street.titleActive = true; | ||
| 218 | + this.province.titleActive = this.city.titleActive = this.area.titleActive = false; | ||
| 219 | + break; | ||
| 220 | + default: | ||
| 221 | + this.province.title = '请选择'; | ||
| 222 | + this.province.showList = true; | ||
| 223 | + this.city.showList = this.area.showList = this.street.showList = false; | ||
| 224 | + this.province.titleActive = true; | ||
| 225 | + this.city.titleActive = this.area.titleActive = this.street.titleActive = false; | ||
| 226 | + break; | ||
| 227 | + } | ||
| 228 | + }, | ||
| 229 | + | ||
| 230 | + /* 获取地址数据 */ | ||
| 231 | + switchAddress(id, caption) { | ||
| 232 | + if (!id) { | ||
| 233 | + id = 0; | ||
| 193 | } | 234 | } |
| 194 | 235 | ||
| 195 | $.get('/home/getaddress.json', { | 236 | $.get('/home/getaddress.json', { |
| 196 | - id: id || '0' | 237 | + id: id |
| 197 | }, resultData => { | 238 | }, resultData => { |
| 198 | - this.addresses = resultData; | 239 | + |
| 240 | + /* 数据绑定 */ | ||
| 241 | + switch((id + '').length) { | ||
| 242 | + case 2: | ||
| 243 | + this.citys = resultData; | ||
| 244 | + break; | ||
| 245 | + case 4: | ||
| 246 | + this.areas = resultData; | ||
| 247 | + break; | ||
| 248 | + case 6: | ||
| 249 | + this.streets = resultData; | ||
| 250 | + break; | ||
| 251 | + case 9: // 该返回结果了 | ||
| 252 | + console.log(id); | ||
| 253 | + break; | ||
| 254 | + default: | ||
| 255 | + this.provinces = resultData; | ||
| 256 | + break; | ||
| 257 | + } | ||
| 258 | + this.changeShow(id, caption); | ||
| 199 | }); | 259 | }); |
| 200 | }, | 260 | }, |
| 201 | 261 | ||
| 202 | /* 关闭地址选择组件 */ | 262 | /* 关闭地址选择组件 */ |
| 203 | closeAddBox() { | 263 | closeAddBox() { |
| 204 | this.show = false; | 264 | this.show = false; |
| 265 | + }, | ||
| 266 | + | ||
| 267 | + /* 点击地址标题时的处理 */ | ||
| 268 | + clickTitle(type) { | ||
| 269 | + switch(type) { | ||
| 270 | + case 'province': | ||
| 271 | + this.province.titleActive = this.province.showList = true; | ||
| 272 | + this.city.titleActive = this.area.titleActive = this.street.titleActive = false; | ||
| 273 | + this.city.title = this.area.title = this.street.title = ''; | ||
| 274 | + break; | ||
| 275 | + case 'city': | ||
| 276 | + this.city.titleActive = this.city.showList = true; | ||
| 277 | + this.province.titleActive = this.area.titleActive = this.street.titleActive = false; | ||
| 278 | + this.province.showList = this.area.showList = this.street.showList = false; | ||
| 279 | + this.area.title = this.street.title = ''; | ||
| 280 | + break; | ||
| 281 | + case 'area': | ||
| 282 | + this.area.titleActive = this.area.showList = true; | ||
| 283 | + this.province.titleActive = this.city.titleActive = this.street.titleActive = false; | ||
| 284 | + this.province.showList = this.city.showList = this.street.showList = false; | ||
| 285 | + this.street.title = ''; | ||
| 286 | + break; | ||
| 287 | + default: | ||
| 288 | + break | ||
| 205 | } | 289 | } |
| 206 | }, | 290 | }, |
| 291 | + }, | ||
| 207 | created: function() { | 292 | created: function() { |
| 208 | - this.getAddress(); | 293 | + this.switchAddress(); |
| 209 | } | 294 | } |
| 210 | }; | 295 | }; |
| 211 | 296 |
-
Please register or login to post a comment