选择地址

project.config.json

@@ -120,6 +120,12 @@
                     "pathName": "/pages/questions",
                     "scene": null
                 },
+                {
+                    "id": -1,
+                    "name": "选择地址",
+                    "pathName": "/pages/chooseAddress",
+                    "scene": null
+                },
                 {
                     "id": -1,
                     "name": "订单详情",

src/components/AddressInfo.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="address" @click="choose">
+        <div class="info">
+            <span class="text1">收货人</span>
+            <span class="text2">{{ info.name }} {{ info.phone }}</span>
+        </div>
+        <div class="info">
+            <span class="text1">收货地址</span>
+            <span class="text2">{{ info.province }} {{ info.city }} {{ info.district }} {{ info.detail }}</span>
+        </div>
+
+        <div class="btn-list">
+            <div class="default">{{ info.enabled ? '默认地址' : '' }}</div>
+            <van-button @click.stop="edit" plain :radius="0" type="info" size="mini">编辑</van-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Address',
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    methods: {
+        edit() {
+            this.navigateTo('/pages/receiving?id=' + this.info.id);
+        },
+        choose() {
+            this.$emit('choose', this.info);
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.address {
+    padding: 20px 16px;
+    background-color: #fff;
+    border-radius: 12px;
+}
+
+.info {
+    .flex();
+    align-items: flex-start;
+    .text1 {
+        font-size: 14px;
+        color: #c8c9cc;
+        line-height: 24px;
+        min-width: 56px;
+        margin-right: 12px;
+    }
+
+    .text2 {
+        font-size: 14px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 24px;
+    }
+}
+.info + .info {
+    margin-top: 8px;
+}
+.btn-list {
+    .flex();
+    margin-top: 16px;
+    .default {
+        flex-grow: 1;
+        font-size: 13px;
+        color: #000000;
+        line-height: 18px;
+    }
+
+    /deep/ .van-button--mini {
+        line-height: 32px;
+        font-size: 13px;
+    }
+}
+</style>

src/main.js

@@ -49,7 +49,8 @@ export default {
             'pages/rule',
             'pages/minePublish',
             'pages/mineFollow',
-            'pages/changeText'
+            'pages/changeText',
+            'pages/chooseAddress'
         ],
         tabBar: {
             color: '#7E7E80',

src/pages/chooseAddress.vue

@@ -0,0 +1,209 @@
+<config>
+{
+    "navigationBarTitleText": "选择地址",
+    "navigationBarBackgroundColor": "#ffffff",
+    "navigationBarTextStyle": "black",
+    "backgroundTextStyle":"light"
+}
+</config>
+<template>
+    <div class="container">
+        <van-empty v-if="empty" image="/native/imgs/kong_png_shouhuodizhi.png" description="你还没有收货地址哦～">
+            <van-button type="primary" block @click="address">新增地址</van-button>
+        </van-empty>
+
+        <template v-else>
+            <div class="list">
+                <address-info
+                    @choose="choose"
+                    :info="item"
+                    v-for="(item, index) in addressList"
+                    :key="index"
+                ></address-info>
+            </div>
+
+            <div class="bottom">
+                <van-button type="primary" block @click="address">新增地址</van-button>
+            </div>
+        </template>
+    </div>
+</template>
+<script>
+import AddressInfo from '../components/AddressInfo.vue';
+export default {
+    components: { AddressInfo },
+    data() {
+        return {
+            addressList: [],
+            empty: false,
+            pageType: 'list'
+        };
+    },
+    methods: {
+        addRess() {
+            this.showLoading();
+            this.empty = false;
+            this.$http
+                .get('/address/showMy')
+                .then(res => {
+                    this.addressList = res;
+                    this.hideLoading();
+                    if (res.length === 0) {
+                        this.empty = true;
+                    }
+                })
+                .catch(e => {
+                    this.hideLoading();
+                    if (e.error) {
+                        this.toast(e.rror);
+                    }
+                });
+        },
+        address() {
+            this.navigateTo('/pages/receiving');
+        },
+        // 添加到确认订单
+        add(item) {
+            let pages = getCurrentPages();
+            let prevPage = pages[pages.length - 2];
+            prevPage.rootVM.userAddressId = item.id;
+            prevPage.rootVM.addressList = item;
+            wx.navigateBack();
+        },
+        choose(info) {
+            if (this.pageType === 'order') {
+                let pages = getCurrentPages();
+                let prevPage = pages[pages.length - 2];
+                prevPage.rootVM.userAddressId = info.id;
+                prevPage.rootVM.addressList = info;
+                wx.navigateBack();
+            }
+        }
+    },
+    onShow() {
+        this.addRess();
+    },
+    onLoad(options) {
+        if (options.type === 'order') {
+            this.pageType = 'order';
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    // background: #f5f7fa;
+    // padding-top: 8px;
+    // padding-bottom: 100px;
+    .box {
+        padding: 8px 20px;
+        .box-con {
+            background: #ffffff;
+            border-radius: 12px;
+            padding: 16px 0 16px 16px;
+            .box-con-top {
+                display: flex;
+                margin-bottom: 8px;
+                p {
+                    width: 68px;
+                    height: 24px;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #c8c9cc;
+                    line-height: 24px;
+                }
+                .box-con-span {
+                    height: 24px;
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #000000;
+                    line-height: 24px;
+                }
+                .box-con-code {
+                    height: 24px;
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #000000;
+                    line-height: 24px;
+                    margin-left: 14px;
+                }
+                .box-con-sp {
+                    width: 235px;
+                    height: 24px;
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #000000;
+                    line-height: 24px;
+                }
+            }
+            .box-con-buttom {
+                display: flex;
+                margin: 40px 10px 0 0;
+                justify-content: flex-end;
+                .box-con-default {
+                    width: 60px;
+                    height: 32px;
+                    border-radius: 4px;
+                    text-align: center;
+                    line-height: 32px;
+                    border: 1px solid #000;
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #c8c9cc;
+                    margin-right: 16px;
+                }
+                .box-con-edit {
+                    width: 60px;
+                    height: 32px;
+                    background: #ffffff;
+                    border-radius: 4px;
+                    border: 1px solid #ff6c00;
+                    font-size: 13px;
+                    font-weight: bold;
+                    text-align: center;
+                    line-height: 32px;
+                    color: #ff6c00;
+                }
+            }
+        }
+    }
+    .container-but {
+        width: 290px;
+        height: 48px;
+        background: #ff6c00;
+        border-radius: 12px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        text-align: center;
+        line-height: 48px;
+        margin: 6px 43px;
+    }
+}
+
+.list {
+    background-color: @bg;
+    padding: 16px;
+    min-height: 100vh;
+
+    .address + .address {
+        margin-top: 16px;
+    }
+
+    .address {
+        &:last-child {
+            margin-bottom: 100px;
+        }
+    }
+}
+
+.bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 6px 43px;
+    background-color: #fff;
+    .bottom(6px);
+}
+</style>

src/pages/confirmorder.vue

@@ -101,7 +101,7 @@ export default {
     },
     methods: {
         address() {
-            this.navigateTo('/pages/address');
+            this.navigateTo('/pages/chooseAddress?type=order');
         },
         order() {
             if (!this.addressList) {
@@ -136,11 +136,28 @@ export default {
                     this.Boxes = res.selectedBoxes;
                     this.cardCaseInfo = res.selectedCase.collection;
                 });
+        },
+        getDefaultAddress() {
+            this.$http
+                .postJson('/address/all', {
+                    query: {
+                        userId: this.$store.state.userInfo.id,
+                        enabled: true
+                    }
+                })
+                .then(res => {
+                    if (!res.empty) {
+                        this.userAddressId = res.content[0].id;
+                        this.addressList = res.content[0];
+                    }
+                });
         }
     },
     onLoad(option) {
         this.caseId = option.caseId;
         this.boxIds = option.boxIds.split(',');
+
+        this.getDefaultAddress();
     },
     created() {
         this.getFn();

src/pages/receiving.vue

@@ -42,16 +42,12 @@
             />
         </van-cell-group>
         <div class="box-but">
-            <div class="box-img">
-                <img
-                    :checked="form.isDefault"
-                    @change="form.isDefault = $event.detail"
-                    src="/native/tabbar/icon_weixuanzhong@2x.png"
-                    alt=""
-                />
-                <div class="label">设为默认地址</div>
-                <!-- <van-switch active-color="#FF7F1F" :checked="form.isDefault" @change="form.isDefault = $event.detail" /> -->
+            <div class="default">
+                <van-checkbox :checked-color="$colors.prim" :value="form.enabled" @change="form.enabled = $event.detail"
+                    >设为默认地址</van-checkbox
+                >
             </div>
+
             <div class="box-but-con">
                 <div class="container-but" @click="addRess">确认</div>
                 <div class="container-cancel">获取微信地址</div>
@@ -73,7 +69,7 @@ export default {
     data() {
         return {
             form: {
-                isDefault: false,
+                enabled: false,
                 name: '',
                 phone: '',
                 city: '',
@@ -119,7 +115,6 @@ export default {
                 return;
             }
             let form = { ...this.form };
-            console.log(form);
             if (!form.id) {
                 form.userId = this.$store.state.userInfo.id;
             }
@@ -132,7 +127,7 @@ export default {
                         title: '保存成功'
                     });
                     setTimeout(() => {
-                        this.navigateTo('/pages/address');
+                        this.navigateBack();
                     }, 1500);
                 })
                 .catch(e => {
@@ -143,6 +138,16 @@ export default {
                     });
                 });
         }
+    },
+    onLoad(options) {
+        if (options.id) {
+            wx.setNavigationBarTitle({
+                title: '编辑地址'
+            });
+            this.$http.get('/address/get/' + options.id).then(res => {
+                this.form = res;
+            });
+        }
     }
 };
 </script>
@@ -199,4 +204,8 @@ export default {
         }
     }
 }
+
+.default {
+    padding: 17px 20px;
+}
 </style>

src/plugins/http.js

@@ -85,6 +85,33 @@ const http = {
             });
         });
     },
+    postJson(url, data, options, backHeader = false) {
+        options = options || {};
+        return new Promise((resolve, reject) => {
+            wx.request({
+                method: 'post',
+                url: parseUrl(url),
+                data: data,
+                dataType: 'json',
+                header: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    Authorization: this.getToken() ? 'Bearer ' + this.getToken() : '',
+                    ...(options.header || {})
+                },
+                success(res) {
+                    if (res && res.statusCode === 200) {
+                        resolve(backHeader ? res : res.data);
+                    } else {
+                        reject(res.data || res);
+                    }
+                },
+                fail(err) {
+                    reject(err.data || err);
+                }
+            });
+        });
+    },
     uploadFile(filePath, options) {
         options = options || {};
         return new Promise((resolve, reject) => {

src/styles/vanIndex.less

@@ -10,6 +10,8 @@
     --button-default-border-color: #fff;
     --button-info-background-color: #c8c9cc;
     --button-info-border-color: #c8c9cc;
+    --button-mini-min-width: 60px;
+    --button-mini-height: 32px;
 }
 
 .van-grid {