fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit 6c3e14f4e7ecada8738df95aa3c9d1ebdb86def1 1 parent 517f0ca7

address-act-style

Inline Side-by-side
Showing 1 changed file with 96 additions and 42 deletions
@@ -3,10 +3,10 @@ @@ -3,10 +3,10 @@
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">&#xe623;</span></div> 4 <div class="component-title"><span class="title">所在地区</span><span class="iconfont close" @click="closeAddBox">&#xe623;</span></div>
5 <ul class="head-address-ul"> 5 <ul class="head-address-ul">
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> 6 + <li v-if="province.title" :class="{ 'head-address-li': common.titleActive }" @click="clickTitle('province')">{{province.title}}</li>
  7 + <li v-if="city.title" :class="{ 'head-address-li': province.titleActive }" @click="clickTitle('city')">{{city.title}}</li>
  8 + <li v-if="area.title" :class="{ 'head-address-li': city.titleActive }" @click="clickTitle('area')">{{area.title}}</li>
  9 + <li v-if="street.title" :class="{ 'head-address-li': area.titleActive }">{{street.title}}</li>
10 </ul> 10 </ul>
11 <div class="address-container"> 11 <div class="address-container">
12 <div class="address-content"> 12 <div class="address-content">
@@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
27 </ul> 27 </ul>
28 <ul v-if="street.showList" class="address-ul"> 28 <ul v-if="street.showList" class="address-ul">
29 <li v-for="pstreet in streets" 29 <li v-for="pstreet in streets"
30 - @click="switchAddress(pstreet.id, pstreet.caption)">{{pstreet.caption}} 30 + @click="switchAddress(pstreet.id, pstreet.caption, true)">{{pstreet.caption}}
31 <span v-if="pstreet.id === street.id" class="iconfont icon-V"></span></li> 31 <span v-if="pstreet.id === street.id" class="iconfont icon-V"></span></li>
32 </ul> 32 </ul>
33 </div> 33 </div>
@@ -37,6 +37,7 @@ @@ -37,6 +37,7 @@
37 </template> 37 </template>
38 <style> 38 <style>
39 .icon-V:before { content: "\e6ea"; } 39 .icon-V:before { content: "\e6ea"; }
  40 +
40 .address-select-component { 41 .address-select-component {
41 position: fixed; 42 position: fixed;
42 top: 0; 43 top: 0;
@@ -75,7 +76,7 @@ @@ -75,7 +76,7 @@
75 height: 40px; 76 height: 40px;
76 line-height: 40px; 77 line-height: 40px;
77 position: relative; 78 position: relative;
78 - margin-right: 75px; 79 + margin-right: 70px;
79 } 80 }
80 81
81 li:last-child { 82 li:last-child {
@@ -93,18 +94,18 @@ @@ -93,18 +94,18 @@
93 position: absolute; 94 position: absolute;
94 bottom: 0; 95 bottom: 0;
95 left: 0; 96 left: 0;
96 - content: ''; 97 + content: "";
97 } 98 }
98 } 99 }
99 100
100 .head-address-ul:after { 101 .head-address-ul:after {
101 - content: ''; 102 + content: "";
102 width: 100%; 103 width: 100%;
103 height: 1px; 104 height: 1px;
104 position: absolute; 105 position: absolute;
105 border-bottom: 1px solid #e3e5e9; 106 border-bottom: 1px solid #e3e5e9;
106 - left: 0px;  
107 - bottom: 0px; 107 + left: 0;
  108 + bottom: 0;
108 transform: scaleY(0.5); 109 transform: scaleY(0.5);
109 -webkit-transform: scaleY(0.5); 110 -webkit-transform: scaleY(0.5);
110 } 111 }
@@ -117,7 +118,7 @@ @@ -117,7 +118,7 @@
117 border-top: solid 1px #ccc; 118 border-top: solid 1px #ccc;
118 119
119 .address-content { 120 .address-content {
120 - transform: translate(0px, 0px) translateZ(0px); 121 + transform: translate(0, 0) translateZ(0);
121 height: 620px; 122 height: 620px;
122 123
123 .address-ul { 124 .address-ul {
@@ -143,12 +144,12 @@ @@ -143,12 +144,12 @@
143 } 144 }
144 145
145 li:after { 146 li:after {
146 - content: ''; 147 + content: "";
147 width: 100%; 148 width: 100%;
148 height: 1px; 149 height: 1px;
149 position: absolute; 150 position: absolute;
150 - left: 0px;  
151 - bottom: 0px; 151 + left: 0;
  152 + bottom: 0;
152 transform: scaleY(0.5); 153 transform: scaleY(0.5);
153 -webkit-transform: scaleY(0.5); 154 -webkit-transform: scaleY(0.5);
154 } 155 }
@@ -170,70 +171,108 @@ @@ -170,70 +171,108 @@
170 module.exports = { 171 module.exports = {
171 data() { 172 data() {
172 return { 173 return {
173 - provinces:[], 174 + provinces: [],
174 citys: [], 175 citys: [],
175 areas: [], 176 areas: [],
176 streets: [], 177 streets: [],
177 show: false, 178 show: false,
  179 + common: {
  180 + titleActive: true,
  181 + },
178 province: { 182 province: {
179 id: '', 183 id: '',
180 title: '', 184 title: '',
  185 + allTitle: '',
181 showList: true, 186 showList: true,
182 titleActive: false, 187 titleActive: false,
183 }, 188 },
184 city: { 189 city: {
185 id: '', 190 id: '',
186 title: '', 191 title: '',
  192 + allTitle: '',
187 showList: false, 193 showList: false,
188 titleActive: false, 194 titleActive: false,
189 }, 195 },
190 area: { 196 area: {
191 id: '', 197 id: '',
192 title: '', 198 title: '',
  199 + allTitle: '',
193 showList: false, 200 showList: false,
194 titleActive: false, 201 titleActive: false,
195 }, 202 },
196 street: { 203 street: {
197 id: '', 204 id: '',
198 title: '', 205 title: '',
  206 + allTitle: '',
199 showList: false, 207 showList: false,
200 titleActive: false, 208 titleActive: false,
201 } 209 }
202 }; 210 };
203 }, 211 },
204 methods: { 212 methods: {
  213 + /* 返回标题处理 */
  214 + returnTitle() {
  215 + let getTitle = this.province.allTitle +
  216 + this.city.allTitle +
  217 + this.area.allTitle +
  218 + this.street.allTitle;
  219 + let returnTitle = '';
  220 +
  221 + if (getTitle.length > 11) {
  222 + returnTitle = getTitle.substr(0, 5) + '...' + getTitle.substr(-5);
  223 + } else {
  224 + returnTitle = getTitle;
  225 + }
  226 +
  227 + return returnTitle;
  228 + },
  229 +
  230 + /* 标题长度处理 */
  231 + titleHandle(caption) {
  232 + if (caption.length > 3) {
  233 + return caption.substring(0, 3) + '...';
  234 + } else {
  235 + return caption;
  236 + }
  237 + },
  238 +
205 /* 选择地址后的显示控制 */ 239 /* 选择地址后的显示控制 */
206 changeShow(id, caption) { 240 changeShow(id, caption) {
207 switch ((id + '').length) { 241 switch ((id + '').length) {
208 case 2: 242 case 2:
209 this.province.id = id; 243 this.province.id = id;
210 - this.province.title = caption; 244 + this.province.allTitle = caption;
  245 + this.province.title = this.titleHandle(caption);
  246 + this.city.title = '请选择';
211 this.city.showList = this.province.titleActive = true; 247 this.city.showList = this.province.titleActive = true;
212 this.province.showList = this.area.showList = this.street.showList = false; 248 this.province.showList = this.area.showList = this.street.showList = false;
213 - this.city.titleActive = this.area.titleActive = this.street.titleActive = false; 249 + this.common.titleActive = this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
214 break; 250 break;
215 case 4: 251 case 4:
216 this.city.id = id; 252 this.city.id = id;
217 - this.city.title = caption; 253 + this.city.allTitle = caption;
  254 + this.city.title = this.titleHandle(caption);
  255 + this.area.title = '请选择';
218 this.area.showList = this.city.titleActive = true; 256 this.area.showList = this.city.titleActive = true;
219 this.province.showList = this.city.showList = this.street.showList = false; 257 this.province.showList = this.city.showList = this.street.showList = false;
220 this.province.titleActive = this.area.titleActive = this.street.titleActive = false; 258 this.province.titleActive = this.area.titleActive = this.street.titleActive = false;
221 break; 259 break;
222 case 6: 260 case 6:
  261 + if (caption !== '全部') {
223 this.area.id = id; 262 this.area.id = id;
224 - this.area.title = caption; 263 + this.area.allTitle = caption;
  264 + this.area.title = this.titleHandle(caption);
  265 + this.street.title = '请选择';
225 this.street.showList = this.area.titleActive = true; 266 this.street.showList = this.area.titleActive = true;
226 this.province.showList = this.city.showList = this.area.showList = false; 267 this.province.showList = this.city.showList = this.area.showList = false;
227 this.province.titleActive = this.city.titleActive = this.street.titleActive = false; 268 this.province.titleActive = this.city.titleActive = this.street.titleActive = false;
  269 + }
228 break; 270 break;
229 case 9: 271 case 9:
230 this.street.id = id; 272 this.street.id = id;
231 - if (caption.length > 5) {  
232 - this.street.title = caption.substring(0, 2) + '...' + caption.substring(caption.length - 2);  
233 - } else {  
234 - this.street.title = caption;  
235 - }  
236 - this.street.showList =this.street.titleActive = true; 273 + this.street.allTitle = caption;
  274 + this.street.title = this.titleHandle(caption);
  275 + this.street.showList = this.street.titleActive = true;
237 this.province.showList = this.city.showList = this.area.showList = false; 276 this.province.showList = this.city.showList = this.area.showList = false;
238 this.province.titleActive = this.city.titleActive = this.area.titleActive = false; 277 this.province.titleActive = this.city.titleActive = this.area.titleActive = false;
239 break; 278 break;
@@ -246,12 +285,25 @@ @@ -246,12 +285,25 @@
246 } 285 }
247 }, 286 },
248 287
249 - /* 获取地址数据 */  
250 - switchAddress(id, caption) { 288 + /* 获取地址数据绑定 */
  289 + switchAddress(id, caption, isStreet) {
251 if (!id) { 290 if (!id) {
252 id = 0; 291 id = 0;
253 } 292 }
254 293
  294 + this.changeShow(id, caption);
  295 +
  296 + /* 选择全部的控制 */
  297 + if (isStreet && (id + '').length === 6) {
  298 + this.street.allTitle = this.street.title = '全部';
  299 + this.street.id = id;
  300 + areaCode.val(id);
  301 + let returnTitle = this.returnTitle();
  302 +
  303 + area.val(returnTitle);
  304 + this.show = false;
  305 + }
  306 +
255 $.get('/home/getaddress.json', { 307 $.get('/home/getaddress.json', {
256 id: id 308 id: id
257 }, resultData => { 309 }, resultData => {
@@ -259,15 +311,14 @@ @@ -259,15 +311,14 @@
259 /* 结果返回 */ 311 /* 结果返回 */
260 if (resultData.length < 1) { 312 if (resultData.length < 1) {
261 areaCode.val(id); 313 areaCode.val(id);
262 - area.val(this.province.title + ' '  
263 - + this.city.title + ' '  
264 - + this.area.title + ' '  
265 - + this.street.title); 314 + let returnTitle = this.returnTitle();
  315 +
  316 + area.val(returnTitle);
266 this.show = false; 317 this.show = false;
267 } 318 }
268 319
269 /* 数据绑定 */ 320 /* 数据绑定 */
270 - switch((id + '').length) { 321 + switch ((id + '').length) {
271 case 2: 322 case 2:
272 this.citys = resultData; 323 this.citys = resultData;
273 break; 324 break;
@@ -275,16 +326,17 @@ @@ -275,16 +326,17 @@
275 this.areas = resultData; 326 this.areas = resultData;
276 break; 327 break;
277 case 6: 328 case 6:
278 - this.streets = resultData;  
279 - break;  
280 - case 9: // 该返回结果了  
281 - console.log(id); 329 + this.streets = [];
  330 + this.streets.push({
  331 + caption: '全部',
  332 + id: this.area.id
  333 + });
  334 + $.merge(this.streets, resultData);
282 break; 335 break;
283 default: 336 default:
284 this.provinces = resultData; 337 this.provinces = resultData;
285 break; 338 break;
286 } 339 }
287 - this.changeShow(id, caption);  
288 }); 340 });
289 }, 341 },
290 342
@@ -295,16 +347,18 @@ @@ -295,16 +347,18 @@
295 return; 347 return;
296 } 348 }
297 areaCode.val(this.street.id || this.area.id || this.city.id || this.province.id); 349 areaCode.val(this.street.id || this.area.id || this.city.id || this.province.id);
298 - area.val(this.province.title + ' '  
299 - + this.city.title + ' '  
300 - + this.area.title + ' '  
301 - + this.street.title); 350 + let returnTitle = this.returnTitle();
  351 +
  352 + area.val(returnTitle);
302 }, 353 },
303 354
304 /* 点击地址标题时的处理 */ 355 /* 点击地址标题时的处理 */
305 clickTitle(type) { 356 clickTitle(type) {
306 - switch(type) { 357 + switch (type) {
307 case 'province': 358 case 'province':
  359 + if (this.provinces.length < 1) {
  360 + this.switchAddress();
  361 + }
308 this.province.titleActive = this.province.showList = true; 362 this.province.titleActive = this.province.showList = true;
309 this.city.titleActive = this.area.titleActive = this.street.titleActive = false; 363 this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
310 this.city.title = this.area.title = this.street.title = ''; 364 this.city.title = this.area.title = this.street.title = '';