我的地址

src/views/user/Address.vue

@@ -4,7 +4,7 @@
         <van-address-list
             :class="{ emptyList: empty }"
             :switchable="false"
-            :list="list"
+            :list="showList"
             default-tag-text="默认"
             @add="onAdd"
             @edit="onEdit"
@@ -18,31 +18,33 @@
 export default {
     data() {
         return {
-            list: [
-                {
-                    id: '1',
-                    name: '张三',
-                    tel: '13000000000',
-                    address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
-                    isDefault: true
-                },
-                {
-                    id: '2',
-                    name: '李四',
-                    tel: '1310000000',
-                    address: '浙江省杭州市拱墅区莫干山路 50 号'
-                }
-            ],
+            list: [],
             empty: false
         };
     },
+    computed: {
+        showList() {
+            let list = [...this.list];
+
+            return list.map(item => {
+                return {
+                    id: item.id,
+                    name: item.name,
+                    tel: item.phone,
+                    address: `${item.provinceName} ${item.cityName} ${item.districtName} ${item.address}`,
+                    isDefault: item.def
+                };
+            });
+        }
+    },
     mounted() {
         this.$http
             .post(
                 '/userAddress/all',
                 {
                     query: {
-                        userId: this.$store.state.userInfo.id
+                        userId: this.$store.state.userInfo.id,
+                        del: false
                     },
                     size: 99
                 },
@@ -57,7 +59,9 @@ export default {
         onAdd() {
             this.$router.push('/mineAddressEdit');
         },
-        onEdit() {}
+        onEdit(info) {
+            this.$router.push('/mineAddressEdit?id=' + info.id);
+        }
     }
 };
 </script>
@@ -92,7 +96,7 @@ export default {
     padding-right: 48px;
 
     .van-button--danger {
-        background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+        background: linear-gradient(135deg, @prim 0%, @prim 100%);
         border-width: 0;
         color: @bg;
         font-weight: bold;

src/views/user/AddressEdit.vue

@@ -2,6 +2,7 @@
     <div class="address">
         <van-address-edit
             :area-list="areaList"
+            :address-info="addressInfo"
             show-set-default
             show-search-result
             :tel-validator="val => phonePattern.test(val)"
@@ -12,6 +13,10 @@
             @change-detail="onChangeDetail"
             :show-delete="isEdit"
         />
+
+        <div class="back-list" v-if="!isEdit">
+            <van-button color="#939599" @click="$router.go(-1)" round block plain>返回</van-button>
+        </div>
     </div>
 </template>
 
@@ -24,12 +29,27 @@ export default {
         return {
             searchResult: [],
             areaList,
+            addressInfo: {},
             isEdit: false
         };
     },
     mounted() {
         if (this.$route.query.id) {
             this.isEdit = true;
+            this.$http.get('/userAddress/get/' + this.$route.query.id).then(res => {
+                this.addressInfo = {
+                    id: res.id,
+                    userId: res.userId,
+                    isDefault: res.def,
+                    name: res.name,
+                    tel: res.phone,
+                    addressDetail: res.address,
+                    province: res.provinceName,
+                    city: res.cityName,
+                    county: res.districtName,
+                    areaCode: res.districtId
+                };
+            });
         } else {
             this.isEdit = false;
         }
@@ -51,6 +71,9 @@ export default {
                 phone: content.tel,
                 address: content.addressDetail
             };
+            if (content.id) {
+                form.id = content.id;
+            }
             this.$http.post('/userAddress/save', form, { body: 'json' }).then(() => {
                 this.$toast.success('保存成功');
                 setTimeout(() => {
@@ -58,7 +81,18 @@ export default {
                 }, 1500);
             });
         },
-        onDelete() {},
+        onDelete(content) {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http.post('/userAddress/del/' + content.id).then(res => {
+                this.$toast.success('删除成功');
+                setTimeout(() => {
+                    this.$router.go(-1);
+                }, 1500);
+            });
+        },
         onChangeDetail(val) {
             console.log(val);
         }
@@ -73,7 +107,7 @@ export default {
     background-color: @bg;
 
     .van-switch {
-        background-color: #000;
+        background-color: #f2f4f5;
         .van-switch__node {
             background-color: #fff;
         }
@@ -86,12 +120,15 @@ export default {
         }
     }
 }
+/deep/.van-field__label {
+    color: #000;
+}
 /deep/.van-address-edit__buttons {
     padding: 50px 32px;
     .van-button--danger {
-        background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+        background: linear-gradient(135deg, @prim 0%, @prim 100%);
         border-width: 0;
-        color: #19191b;
+        color: #fff;
         font-weight: bold;
     }
     .van-button--default {
@@ -100,4 +137,13 @@ export default {
         font-weight: bold;
     }
 }
+.back-list {
+    margin: -60px 48px 0;
+    .van-button {
+        color: @text3!important;
+    }
+}
+/deep/.van-address-edit__buttons .van-button--default {
+    border-color: @text3;
+}
 </style>