1、关于地区选择:AddressList 地址列表

<template>
    <div class="address">
        <nav-bar :if_left_arrow="true" title="收货地址"></nav-bar>
        <van-address-list 
            v-model="active_id" 
            :list="list" 
            add-button-text="+添加地址"
            @select="click_active"
            @add="$router.push('add_address')" 
            @edit="onEdit" />
            
        <no-data type="1" v-show="!dataShow"></no-data>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dataShow:true,
                active_id: '',//默认地址id
                list: [],//列表数据
            }
        },
        mounted() {
            this.axios.post('/api/Ucenter/my_address').then(res=>{
                if(res.status == 1){
                    if(res.data.address.length == 0){
                        this.dataShow = false;//没有数据
                    }else{
                        this.dataShow = true;
                        res.data.address.forEach((item,i)=>{
                            this.list.push({
                                id:item.id,
                                name:item.consigner,
                                tel:item.phone,
                                address:item.address_detail,
                                address_code:item.address_code,
                                is_default:item.is_default,
                                add:item.address,
                            })
                            //默认选择
                            if(item.is_default == 1){
                                this.active_id = item.id
                            }
                        })
                    }
                }
            })
        },
        methods: {
            //点击列表
            click_active(item,index){
                this.axios.post('/api/Ucenter/default_address',{
                    address_id:item.id,
                }).then(res=>{
                    if(res.status == 1){
                        this.active_id = item.id;
                    }
                })
            },

            //点击编辑地址
            onEdit(item) {
                this.$router.push({
                    name:'address_modify',
                    params:{
                        item:item
                    }
                })
            },
        },
    }
</script>

<style scoped lang="less">
    .address {
        min-height: 100vh;
        background: @bgColor;
        
        /deep/.van-address-list{
            margin-top: 5px;
            .van-address-item .van-radio__icon--checked .van-icon{
                background: @mainColor;
                border-color: @mainColor;
            }
            .van-button--danger{
                background: @mainColor;
            }
        }
    }
</style>

发布了97 篇原创文章 · 获赞 152 · 访问量 6526

猜你喜欢

转载自blog.csdn.net/qq_40745143/article/details/104769988