Authored by 郭成尧

title-change

@@ -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: {
  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: // 一定要返回结果了
  210 + if (caption.length > 5) {
  211 + this.street.title = caption.substring(0, 2) + '...' + caption.substring(caption.length - 2);
  212 + } else {
  213 + this.street.title = caption;
  214 + }
  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 + },
166 229
167 /* 获取地址数据 */ 230 /* 获取地址数据 */
168 - getAddress(id, caption) { 231 + switchAddress(id, caption) {
169 if (!id) { 232 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) {  
186 - if (caption.length > 5) {  
187 - this.street.name = caption.substring(0,2) + '...' + caption.substring(caption.length - 2);  
188 - } else {  
189 - this.street.name = caption;  
190 - }  
191 - this.street.active = true;  
192 - this.area.active = false; 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;
205 - } 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
  289 + }
  290 + },
206 }, 291 },
207 created: function() { 292 created: function() {
208 - this.getAddress(); 293 + this.switchAddress();
209 } 294 }
210 }; 295 };
211 296