Authored by 郭成尧

address-data-handle

@@ -3,11 +3,11 @@ @@ -3,11 +3,11 @@
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" :class="{ 'head-address-li': provinceActive }" @click="getAddress()">{{province}}</li> 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> 7 <li v-else class="head-address-li">请选择</li>
8 - <li v-if="city" :class="{ 'head-address-li': cityActive }">{{city}}</li>  
9 - <li v-if="area" :class="{ 'head-address-li': areaActive }">{{area}}</li>  
10 - <li v-if="street" :class="{ 'head-address-li': streetActive }">{{street}}</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>
11 </ul> 11 </ul>
12 <div class="address-container"> 12 <div class="address-container">
13 <div class="address-content"> 13 <div class="address-content">
@@ -144,49 +144,52 @@ @@ -144,49 +144,52 @@
144 return { 144 return {
145 addresses:[], 145 addresses:[],
146 show: false, 146 show: false,
147 - province: '',  
148 - provinceActive: false,  
149 - city: '',  
150 - cityActive: false,  
151 - area: '',  
152 - areaActive: false,  
153 - street: '',  
154 - streetActive: false 147 + province: {
  148 + name: '',
  149 + active: false
  150 + },
  151 + city: {
  152 + name: '',
  153 + active: false
  154 + },
  155 + area: {
  156 + name: '',
  157 + active: false
  158 + },
  159 + street: {
  160 + name: '',
  161 + active: false
  162 + }
155 }; 163 };
156 }, 164 },
157 - watch: {  
158 - province: function() {  
159 -  
160 - }  
161 - },  
162 methods: { 165 methods: {
163 166
164 /* 获取地址数据 */ 167 /* 获取地址数据 */
165 getAddress(id, caption) { 168 getAddress(id, caption) {
166 if (!id) { 169 if (!id) {
167 - this.province = this.city = this.area = this.street = '';  
168 - this.provinceActive = true;  
169 - this.cityActive = this.areaActive = this.streetActive = false; 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;
170 } 173 }
171 - if (!this.province) {  
172 - this.province = caption;  
173 - this.provinceActive = true;  
174 - } else if (!this.city) {  
175 - this.city = caption;  
176 - this.cityActive = true;  
177 - this.provinceActive = false;  
178 - } else if (!this.area) {  
179 - this.area = caption;  
180 - this.areaActive = true;  
181 - this.cityActive = false;  
182 - } else if (!this.street) { 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) {
183 if (caption.length > 5) { 186 if (caption.length > 5) {
184 - this.street = caption.substring(0,2) + '...' + caption.substring(caption.length - 2); 187 + this.street.name = caption.substring(0,2) + '...' + caption.substring(caption.length - 2);
185 } else { 188 } else {
186 - this.street = caption; 189 + this.street.name = caption;
187 } 190 }
188 - this.streetActive = true;  
189 - this.areaActive = false; 191 + this.street.active = true;
  192 + this.area.active = false;
190 } 193 }
191 194
192 $.get('/home/getaddress.json', { 195 $.get('/home/getaddress.json', {