football/pages/order-submit/address-pick.vue

<template>
    <app-layout>
        <view class="page">
            <template v-if="list !== null">
                <view v-if="!list.length" class="no-data mb-24">暂无报名信息</view>
                <view v-else class="main-center dir-top-nowrap list">
                    <view v-for="(item,index) in list"
                          :key="index"
                          @click="setData(item.id)">
                        <app-shipping-address @handleAddress="address"
                                              :item="item"
                                              :is_hide_default_btn="true"
                                              :destroy_url="destroy_url"></app-shipping-address>
                    </view>
                </view>
            </template>
            <view class="dir-left-nowrap add-address-row">
                <view class="box-grow-1">
                    <app-form-id>
                        <app-button :theme="theme" type="important" round @click="editAddress(0)">
                            <view class="cross-center main-center">
                                <image class="icon" src="/static/image/icon/add.png"></image>
                                <view>新增</view>
                            </view>
                        </app-button>
                    </app-form-id>
                </view>
                <!-- #ifdef MP-WEIXIN -->
   <!--             <view class="box-grow-1">
                    <app-form-id>
                        <app-button :theme="theme" type="important" round background="#08c303"
                                    @click="wechatAddAddress">
                            <view class="cross-center main-center">
                                <image class="icon" src="/static/image/icon/wechat-white.png"></image>
                                <view>自动获取</view>
                            </view>
                        </app-button>
                    </app-form-id>
                </view> -->
                <!-- #endif -->
            </view>
            <template v-if="notInPointList !== null && notInPointList.length">
                <view class="tip">以下地址不在配送范围内，请编辑地址进行定位</view>
                <view class="main-center dir-top-nowrap list not-list">
                    <view v-for="(item,index) in notInPointList"
                          :key="index"
                          class="dir-left-nowrap cross-center item">
                        <view class="box-grow-1 left">
                            <view class="dir-left-nowrap mb-12">
                                <view class="box-grow-1">收货人: {{item.name}}</view>
                                <view class="box-grow-0">{{item.mobile}}</view>
                            </view>
                            <view>收货地址: {{item.address}}</view>
                        </view>
                        <view class="box-grow-0">
                            <view class="edit-btn-out" @click.stop="editAddress(item.id)">
                                <view class="edit-btn">编辑</view>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </view>
    </app-layout>
</template>

<script>
    import {mapState} from 'vuex';
    import appShippingAddress from '../../components/page-component/app-shipping-address/app-shipping-address.vue';

    export default {
        name: 'address-pick',
        components: {
            appShippingAddress,
        },
        data() {
            return {
                mchIndex: null,
                list: null,
                hasCity: false,
                notInPointList: null,
                sign: '',
                page: 1,
                noMore: false,
                destroy_url: this.$api.user.address_destroy,
            };
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
            }),
        },
        onLoad(options) {
            this.hasCity = options.hasCity;
            this.sign = options.sign;
        },
        onShow() {
            this.page = 1;
            // #ifdef MP-BAIDU
            setTimeout(() => {
                this.loadData();
            }, 50);
            // #endif
            // #ifndef MP-BAIDU
            this.loadData();
            // #endif

        },
        onReachBottom() {
            this.more();
        },
        methods: {
            address(status) {
                this.page = 1;
                this.loadData();
            },

            more() {
                if (this.noMore) return;
                this.page++;
                this.loadData('add');
            },
            loadData(type = 'current') {
                uni.showLoading({
                    mask: true,
                    title: '加载中',
                });
                this.$request({
                    url: this.$api.user.address,
                    data: {
                        hasCity: this.hasCity,
                        page: this.page,
                    }
                }).then(response => {
                    uni.hideLoading();
                    if (response.code === 0) {
                        if (
                            (!response.data.list || !response.data.list.length)
                            && (!response.data.notInPointList || !response.data.notInPointList.length)
                        ) {
                            this.noMore = true;
                        }
                        if (type === 'add') {
                            this.list = this.list.concat(response.data.list);
                        } else {
                            this.list = response.data.list;
                        }
                        if (type === 'add') {
                            this.notInPointList = this.notInPointList.concat(response.data.notInPointList);
                        } else {
                            this.notInPointList = response.data.notInPointList;
                        }
                        console.log('this.list-->', this.list);
                    } else {
                    }
                }).catch(e => {
                    uni.hideLoading();
                });
            },
            setData(data) {
                if (this.sign === 'gift') {
                    let formData = this.$store.state.gift.address_id;
                    formData = data;
                    this.$store.commit('gift/addressId', formData);
                } else {
                    const formData = this.$store.state.orderSubmit.formData;
                    formData.address_id = data;
                    this.$store.commit('orderSubmit/mutSetFormData', formData);
                }
                uni.navigateBack();
            },
            editAddress(id) {
                uni.navigateTo({
                    url: '/pages/address/address-edit?id=' + id,
                });
            },
            wechatAddAddress() {
                uni.chooseAddress({
                    success: (e) => {
                        console.log(e);
                        if (e.errMsg !== 'chooseAddress:ok')
                            return;
                        this.$request({
                            url: this.$api.user.wechat_district,
                            data: {
                                national_code: e.nationalCode,
                                province_name: e.provinceName,
                                city_name: e.cityName,
                                county_name: e.countyName,
                            }
                        }).then(info => {
                            if (info.code === 0) {
                                let province_id = info.data.district['province']['id'];
                                let city_id = info.data.district['city']['id'];
                                let district_id = info.data.district['district']['id'];
                                let newAddress = {
                                    id: '',
                                    name: e.userName,
                                    ids: [province_id, city_id, district_id],
                                    province_id: province_id,
                                    city_id: city_id,
                                    district_id: district_id,
                                    mobile: e.telNumber,
                                    detail: e.detailInfo,
                                };
                                uni.navigateTo({
                                    url: '/pages/address/address-edit?form=' + JSON.stringify(newAddress)
                                })
                            } else {
                                console.error(info.msg);
                            }
                        });
                    },
                });
            },
        },
    }
</script>

<style lang="scss">
    page {
        background: $uni-weak-color-two;
    }
</style>

<style scoped lang="scss">
    .mb-12 {
        margin-bottom: #{12rpx};
    }

    .mb-24 {
        margin-bottom: #{24rpx};
    }

    .page {
        padding: #{24rpx} 0;

        .no-data {
            padding: #{100rpx};
            text-align: center;
            color: $uni-general-color-three;
            background: #fff;
            border-radius: #{16rpx};
        }
    }

    .list {
        margin-bottom: #{48rpx};

        .item {
            font-size: $uni-font-size-general-one;
            background: #fff;
            border-radius: #{24rpx};
            margin-bottom: #{24rpx};

            .left {
                padding: #{24rpx};
            }

            .edit-btn-out {
                padding: #{39rpx} 0;
            }

            .edit-btn {
                padding: #{4rpx} #{30rpx};
                color: $uni-general-color-two;
                border-left: $uni-weak-color-one #{1rpx} solid;
            }
        }
    }

    .add-address-row {
        margin: 0 -#{12rpx};
        padding: 0 #{24rpx};
        > view {
            padding: 0 #{12rpx};
        }

        .icon {
            width: #{32rpx};
            height: #{32rpx};
            margin-right: #{12rpx};
        }
    }

    .not-list {
        color: $uni-general-color-two;
        margin-left: #{24rpx};
        margin-right: #{24rpx};
    }

    .tip {
        color: $uni-general-color-one;
        margin: #{56rpx 24rpx 20rpx 24rpx};
    }

</style>