2、关于地区选择:AddressEdit 地址编辑修改

<template>
    <div class="add_address">
        <nav-bar :if_left_arrow="true" title="添加收货地址">nav-bar>
        <van-address-edit 
            :area-list="areaList"
            :address-info="AddressInfo"
            :area-columns-placeholder="['请选择', '请选择', '请选择']" 
            @save="onSave" 
        >
            <div slot="default" class="tips">提醒:每次下单时会使用该地址,实际下单地址会根据您购物切换的地区进行智能判断,请在下单时确认。div>
        van-address-edit>
    div>
template>

<script>
    import areaList from '@/common/js/area.js'//本地地区数据
    export default {
        data() {
            return {
                areaList,//地区列表
                AddressInfo:{//收货人信息初始值
                    name:'',//姓名
                    tel:'',//电话
                    province:'',//省份
                    city:'',//城市
                    country:'',//区县
                    areaCode:'',//地址code:ID
                    addressDetail:'',//详细地址
                    isDefault:false,//是否选择默认
                },
            }
        },
        methods: {
            //添加地址
            onSave(content) {
                this.axios.post('/api/Ucenter/add_edit_address',{
                    pcode:Number(content.areaCode.substring(0,2)+'0000'),
                    ccode:Number(content.areaCode.substring(0,4)+'00'),
                    acode:Number(content.areaCode),
                    name:content.name,
                    phone:content.tel,
                    address:content.addressDetail,
                    default:content.isDefault == true ? '1':'0',
                }).then(res=>{
                    if(res.status == 1){
                        this.$toast(res.msg);//地址修改成功
                        setTimeout(()=>{
                            this.$router.go(-1)
                        },2000)
                    }
                })
            },
        },
    }
script>

<style scoped lang="less">
    .add_address {
        /deep/.van-address-edit{
            border-top: 5px solid @bgColor;
            position: relative;
            .van-address-edit__buttons{
                margin-top: 70px;
                .van-button--danger{
                    background: @mainColor;
                    border-color: @mainColor;
                }
            }
            .tips{
                padding: 0 12px;
                position: absolute;
                bottom: 140px;
                font-size:12px;
                color:rgba(12,11,11,1);
            }
        }
    }
style>

你可能感兴趣的:(vant,vue)