地址

src/main/nine-space/src/views/user/Address.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="address">
+        <div class="title">我的地址</div>
+        <van-address-list :switchable="false" :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            list: [
+                {
+                    id: '1',
+                    name: '张三',
+                    tel: '13000000000',
+                    address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
+                    isDefault: true
+                },
+                {
+                    id: '2',
+                    name: '李四',
+                    tel: '1310000000',
+                    address: '浙江省杭州市拱墅区莫干山路 50 号'
+                }
+            ]
+        };
+    },
+    methods: {
+        onAdd() {
+            this.$router.push('/mineAddressEdit');
+        },
+        onEdit() {}
+    }
+};
+</script>
+<style lang="less" scoped>
+.address {
+    padding-bottom: 100px;
+    box-sizing: border-box;
+    background-color: @bg3;
+}
+
+.title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 30px;
+    padding: 10px 10px;
+    background-color: @bg;
+}
+
+/deep/.van-address-item {
+    background-color: @bg;
+    .van-tag--danger {
+        background-color: transparent;
+        color: @prim;
+        border: 1px solid @prim;
+    }
+}
+
+/deep/.van-address-list__bottom {
+    background-color: @bg;
+    padding-left: 48px;
+    padding-right: 48px;
+
+    .van-button--danger {
+        background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+        border-width: 0;
+        color: @bg;
+        font-weight: bold;
+    }
+}
+</style>

src/main/nine-space/src/views/user/AddressEdit.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="address">
+        <van-address-edit
+            :area-list="areaList"
+            show-delete
+            show-set-default
+            show-search-result
+            :tel-validator="val => phonePattern.test(val)"
+            :search-result="searchResult"
+            :area-columns-placeholder="['请选择', '请选择', '请选择']"
+            @save="onSave"
+            @delete="onDelete"
+            @change-detail="onChangeDetail"
+        />
+    </div>
+</template>
+
+<script>
+import { areaList } from '@vant/area-data';
+import phone from '../../mixins/phone';
+export default {
+    mixins: [phone],
+    data() {
+        return {
+            searchResult: [],
+            areaList
+        };
+    },
+    methods: {
+        onSave(content) {
+            console.log(content);
+            this.$http.post('/userAddress/save');
+        },
+        onDelete() {},
+        onChangeDetail(val) {
+            console.log(val);
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.address {
+    background-color: @bg3;
+}
+/deep/.van-cell {
+    background-color: @bg;
+
+    .van-switch {
+        background-color: #000;
+        .van-switch__node {
+            background-color: #fff;
+        }
+    }
+
+    .van-switch--on {
+        background-color: @prim;
+        .van-switch__node {
+            background-color: @bg;
+        }
+    }
+}
+/deep/.van-address-edit__buttons {
+    padding: 50px 32px;
+    .van-button--danger {
+        background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+        border-width: 0;
+        color: #19191b;
+        font-weight: bold;
+    }
+    .van-button--default {
+        background-color: transparent;
+        border-color: #fff;
+        font-weight: bold;
+    }
+}
+</style>