active-change

@@ -3,15 +3,16 @@
         <div class="address-select-box">
             <div class="component-title"><span class="title">所在地区</span><span class="iconfont close" @click="closeAddBox">X</span></div>
             <ul class="head-address-ul">
-                <li class="head-address-li">请选择</li>
-                <li></li>
-                <li></li>
-                <li></li>
+                <li v-if="province" :class="{ 'head-address-li': provinceActive }" @click="getAddress()">{{province}}</li>
+                <li v-else class="head-address-li">请选择</li>
+                <li v-if="city" :class="{ 'head-address-li': cityActive }">{{city}}</li>
+                <li v-if="area" :class="{ 'head-address-li': areaActive }">{{area}}</li>
+                <li v-if="street" :class="{ 'head-address-li': streetActive }">{{street}}</li>
             </ul>
             <div class="address-container">
                 <div class="address-content">
                     <ul class="address-ul">
-                        <li v-for="address in addresses" @click="getAddress(address.id)">{{address.caption}}</li>
+                        <li v-for="address in addresses" @click="getAddress(address.id, address.caption)">{{address.caption}}</li>
                     </ul>
                 </div>
             </div>
@@ -43,7 +44,7 @@
         }
 
         .head-address-ul {
-            margin: 0;
+            margin: 0 0 0 30px;
             padding: 0;
             list-style: none;
             overflow: hidden;
@@ -57,7 +58,11 @@
                 height: 40px;
                 line-height: 40px;
                 position: relative;
-                padding-left: 30px;
+                margin-right: 75px;
+            }
+
+            li:last-child {
+                margin-right: 30px;
             }
 
             .head-address-li {
@@ -65,14 +70,13 @@
             }
 
             .head-address-li:after {
-                width: 70%;
+                width: 100%;
                 height: 1px;
                 border-bottom: 2px solid #f23030;
                 position: absolute;
-                bottom: 1px;
-                left: 50%;
+                bottom: 0;
+                left: 0;
                 content: '';
-                margin-left: -20px;
             }
         }
 
@@ -89,7 +93,7 @@
         }
 
         .address-container {
-            margin: -1px 0 0 0;
+            margin: 0;
             overflow: hidden;
             height: 100%;
             width: 100%;
@@ -139,13 +143,52 @@
         data() {
             return {
                 addresses:[],
-                show: false
+                show: false,
+                province: '',
+                provinceActive: false,
+                city: '',
+                cityActive: false,
+                area: '',
+                areaActive: false,
+                street: '',
+                streetActive: false
             };
         },
+        watch: {
+            province: function() {
+
+            }
+        },
         methods: {
 
             /* 获取地址数据 */
-            getAddress(id) {
+            getAddress(id, caption) {
+                if (!id) {
+                    this.province = this.city = this.area = this.street = '';
+                    this.provinceActive = true;
+                    this.cityActive = this.areaActive = this.streetActive = false;
+                }
+                if (!this.province) {
+                    this.province = caption;
+                    this.provinceActive = true;
+                } else if (!this.city) {
+                    this.city = caption;
+                    this.cityActive = true;
+                    this.provinceActive = false;
+                } else if (!this.area) {
+                    this.area = caption;
+                    this.areaActive = true;
+                    this.cityActive = false;
+                } else if (!this.street) {
+                    if (caption.length > 5) {
+                        this.street = caption.substring(0,2) + '...' + caption.substring(caption.length - 2);
+                    } else {
+                        this.street = caption;
+                    }
+                    this.streetActive = true;
+                    this.areaActive = false;
+                }
+                
                 $.get('/home/getaddress.json', {
                     id: id || '0'
                 }, resultData => {