地址选中

 <template>
   <LayoutApp title="选择地址" :show-back="true">
-    <AddressItem :list="addressList" :pageName="pageName"></AddressItem>
+    <AddressItem :list="addressList" :pageName="pageName" :selectedAddressId="selectedAddressId"></AddressItem>
   </LayoutApp>
 </template>
 
@@ -21,7 +21,8 @@ export default {
   },
   data() {
     return {
-      pageName: ""
+      pageName: "",
+      selectedAddressId: ""
     };
   },
   computed: {
@@ -39,6 +40,9 @@ export default {
       // 通过 `vm` 访问组件实例
       vm.pageName = from.name;
     });
+  },
+  mounted() {
+    this.selectedAddressId = this.$route.query.address_id;
   }
 };
 </script>

@@ -4,6 +4,9 @@
       <div v-for="(item, index) in list" :key="index" class="item" @click="toOrderPage(item)">
         <slot name="item" :data="item">
           <div class="user-item">
+            <div
+              :class="{'uncheck-item' : item.address_id !== selectedAddressId , 'check-item' : item.address_id === selectedAddressId }"
+            ></div>
             <div class="user-info">
               <div class="extra">
                 <p class="name">{{item.consignee}}</p>
@@ -18,10 +21,10 @@
                 >编辑</div>
               </div>
               <p class="address">{{item.area}}{{item.address}}</p>
-              <div class="border-line"></div>
             </div>
           </div>
         </slot>
+        <div class="border-line"></div>
       </div>
     </div>
     <div class="add-btn" :data-add="1" @click="toEditorPage">新增地址</div>
@@ -49,6 +52,10 @@ export default {
     pageName: {
       type: String,
       default: ""
+    },
+    selectedAddressId: {
+      type: String,
+      default: ""
     }
   },
   data() {
@@ -118,22 +125,37 @@ export default {
   background-color: white;
 
   .border-line {
+    width: 100%;
     height: 1px;
-    margin-top: 40px;
-    background-color: #e0e0e0;
+    background-color: #eee;
   }
 }
 
 .user-item {
   display: flex;
   padding-top: 40px;
-  padding-left: 40px;
+  padding-bottom: 44px;
+  padding-left: 28px;
   padding-right: 40px;
   align-items: center;
 
+  .check-item {
+    width: 40px;
+    height: 40px;
+    background: url(~statics/image/address/selected.png) no-repeat;
+    background-size: cover;
+  }
+  .uncheck-item {
+    width: 40px;
+    height: 40px;
+    background: url(~statics/image/address/unselected.png) no-repeat;
+    background-size: cover;
+  }
+
   .user-info {
     flex-grow: 1;
     overflow: hidden;
+    margin-left: 32px;
   }
 
   .extra {