三级联动选择地区（小程序-wepy)

项目中采用的小程序框架 wepy 来搭建小程序项目

1、父组件 中显示弹框结构，以及引入三集联动的组件

1.1  父组件中 弹框结构
<wxc-popup class="selAddressPopupBox J_Popup" wx:if="{{ selFlag }}" animation-mode="bottom" align="bottom"   @tap.stop="hidePopup" > 
    <view class="popup__content" @tap.stop="showPopUp1">
        <ThreeLevelLinkage wx:if="{{ selFlag }}" :selFlag.sync="selFlag" :selAddress.sync="selAddress"></ThreeLevelLinkage>
    </view>
</wxc-popup>


1.2 父组件中映入三级联动组件
import ThreeLevelLinkage from '组件相对路径/threeLevelLinkage'

1.2.1 定义父组件中 该部分需要的变量以及方法
//  变量
    data = {
        items: {name: 0, value: '默认地址'},
        selFlag:false,          //点击选择地区
        selAddress:{},      //选择省市区的信息存储
    }
//  方法
mathods = {
    //点击选择地区
    showPopup() {
        this.selFlag = true
        this.$apply();
    },
    hidePopup() {
        this.selFlag = false;
        this.$apply();
    },
    showPopUp1(){
        this.selFlag = true
    },
}
//  传递给子组件的方法
events = { 
    //传递方法给子组件
    changeSelFlag(){
        this.selFlag = false;
        this.$apply();
    },
}

2、三集联动组件

2.1 三级联动dom结构

<template>
    <view class="threeLevelLinkageBox">
        <view class="addressTitle">
            所在地区
            <view class="iconBox">
                <view class="icon icon_close" @tap.stop="closePupop"></view>
            </view>
        </view>
        <view class="addressBox">
            <view class="addressTop">
                <view class="provLi {{ selType==0 ? 'isSel':'' }}" @tap="selAddressType(0)">{{ selParams.prov.prov }}</view>
                <view class="cityLi {{ selType==1 ? 'isSel':'' }}" @tap="selAddressType(1)">{{ selParams.city.city }}</view>
                <view class="distLi {{ selType==2 ? 'isSel':'' }}" @tap="selAddressType(2)">{{ selParams.dist.dist }}</view>
            </view>
            <view class="addressList">
                <scroll-view scroll-y  class="contentBox">
                    <repeat for="{{ addressLinkage }}" key="index" index="index" item="item">
                        <view class="box clearfix {{ (selType==0&&selParams.prov.provIdx==index) || (selType==1&&selParams.city.cityIdx==index) || (selType==2&&selParams.dist.distIdx==index) ? 'isSel':''}}" 
                            @tap.stop="selAddressList({{ index }},{{ item }})" >
                            <view class="addLiLeft pull-left">{{ item.name }}</view>
                            <view class="addLiRight pull-right">
                                <view class="icon iconfont icon-pintuantuangouchenggong"></view>
                            </view>
                        </view>
                    </repeat>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

2.2 三集联动样式结构

@import '../common/comm.less';
.threeLevelLinkageBox{
    height:100%;
    width:100%;
    .addressTitle{
        padding: 30rpx 30rpx 15rpx 30rpx;
        font-size:32rpx;
        font-weight:500;
        color:rgba(51,51,51,1);
        text-align: center;
        position: relative;
        .iconBox{
            position: absolute;
            width:30rpx;
            height:30rpx;
            top:36rpx;
            right:36rpx;
            .icon_close{
                background: url('http://p.kepule.net/staticPic/s.png') no-repeat;
                background-size: cover;
            }
        }
    }
    .addressBox{
        padding:0 30rpx 20rpx 30rpx;
        .addressTop{
            height:90rpx;
            line-height: 90rpx;
            display: flex;
            justify-content: space-between;
            font-size:30rpx;
            color:rgba(51,51,51,1);
            border-bottom: 2rpx solid #f6f6f6;
            >view{
                width:33%;
                margin-right:1.5%;
                text-align: center;
            }
            >view.last-child{
                margin-right:0;
            }
            >view.isSel{
                border-bottom: 4rpx solid #EA3838;
                color:#EA3838;
            }
        }
        .addressList{
            height:508rpx;
            width:100%;
            padding:20rpx 0;
            .contentBox{
                width:100%;
                height:100%;
                .box{
                    padding: 0 20rpx;
                    height: 84rpx;
                    line-height: 84rpx;
                    border-bottom: 2rpx solid #f6f6f6;
                    .addLiLeft{
                        width:80%;
                        font-size:26rpx;
                        color:rgba(51,51,51,1);
                        text-align: left;
                    }
                    .addLiRight{
                        width:20%;
                        height:100%;
                        text-align: right;
                        >view{
                            width:36rpx;
                            height:36rpx;
                            display: none;
                        }
                    }
                }
                .box.isSel{
                    .addLiLeft{
                        color: #EA3838;
                    }
                    .addLiRight{
                        >view{
                            display: inline-block;
                            color:#EA3838;
                        }
                    }
                }
            }
        }
    }
}

2.3三集联动组件的js

<script>
  import wepy from 'wepy'
  import Api from '../../utils/api.js'     //   API接口
  import Utils from '../../utils/utils.js'  //  公共方法

  export default class ThreeLevelLinkage extends wepy.component {
    components = { }

    data = {
        addressLinkage:[],          //获取地区信息
        selParams:{
            prov:{
                provIdx:'-1',
                prov:'省份/地区',
                prov_id:'',
            },
            city:{
                cityIdx:'-1',
                city:'城市',
                city_id:'',
            },
            dist:{
                distIdx:'-1',
                dist:'区/县',
                dist_id:''
            }
        },   //选择地址的信息
        lastDistIdx:'-1',
        selType:0,//选择的地址选项  0：省 ， 1： 市 ， 2： 区
        clickFlag: false ,      //选择地址防双击
    }
    props = {     //  父组件传递的变量
        selFlag : {
            type: Boolean,
            default: true,
            twoWay: true
        },
        selAddress : {
            type: Object,
            default: true,
            twoWay: true
        }
    };

    computed = {}

    methods = {
        //关闭地址选择弹框
        closePupop(){
            this.$emit('changeSelFlag')
        },
        //选择的地址选项
        selAddressType(flag){
            if( this.clickFlag ){
                return;
            }
            //两次选择的选项一样
            if( this.selType == flag ){
                return;
            }
            if( flag==0 || (flag==1&&this.selParams.prov.provIdx != '-1') || (flag==2&&this.selParams.prov.provIdx!= '-1' &&this.selParams.city.cityIdx != '-1') ){
                this.selType = flag;
            }else if( this.selParams.prov.provIdx == '-1' ){
                Utils.wxShowToast('请先选择省份/地区');
                return
            }else if( this.selParams.city.cityIdx == '-1' ){
                Utils.wxShowToast('请先选择城市');
                return
            }
            //选择上一级
            if( this.selType == 0 ){
                this.selParams.city.cityIdx = '-1'
                this.selParams.city.city  = '城市'
                this.selParams.city.city_id = ''
                this.selParams.dist.distIdx = '-1'
                this.selParams.dist.dist = '区/县'
                this.selParams.dist.dist_id = '';
                this.getProvList(0);
            }else if( this.selType == 1 ){
                this.selParams.dist.distIdx = '-1'
                this.selParams.dist.dist = '区/县'
                this.selParams.dist.dist_id = ''
                this.getProvList(this.selParams.prov.prov_id);
            }else if( this.selType == 2 ){
                this.getProvList(this.selParams.city.city_id);
            }
            this.$apply();
        },
        //选择地址列表
        selAddressList( index , item ){
            if( this.clickFlag ){
                return;
            }
            if( this.selType == 0 ){
                this.selParams.prov.provIdx = index
                this.selParams.prov.prov = item.name
                this.selParams.prov.prov_id = item.id
                this.selType = 1
            }else if( this.selType == 1 ){
                this.selParams.city.cityIdx = index
                this.selParams.city.city = item.name
                this.selParams.city.city_id = item.id
                this.selType = 2
            }else if( this.selType == 2 ){
                this.selParams.dist.distIdx = index
                this.selParams.dist.dist = item.name
                this.selParams.dist.dist_id = item.id
                if( this.selParams.dist.distIdx != this.lastDistIdx ){
                    this.selAddress = {
                        prov : this.selParams.prov.prov,
                        prov_id : this.selParams.prov.prov_id,
                        city : this.selParams.city.city,
                        city_id : this.selParams.city.city_id,
                        dist : this.selParams.dist.dist,
                        dist_id :this.selParams.dist.dist_id,
                    }
                }
                this.$emit('changeSelFlag')
                this.$apply();
                this.lastDistIdx =  this.selParams.dist.distIdx;
            }
            if( this.selType != 2 || (this.selType == 2 && this.selParams.dist.distIdx == '-1')){
                this.getProvList( item.id );
            }
            this.$apply();
        },
        //根据parentid获取地区
        getChildList( flag ){
            let params = {},that = this;
            params.method = 'GET'
            params.api_name = 'Home/Pcenter/childAddressPlace'
            params.parentid = flag
            Api.getAddressApi( params ).then( res => {
                if( res.code == 200 ){
                    that.addressLinkage = res.data;
                    that.$apply();
                }else{
                    Utils.wxShowToast(res.message);
                    that.$emit('changeSelFlag')
                }
            })
        }
    }
    watch = {
        selFlag (newValue, oldValue) {
            if( newValue == true ){
               let flag = 0
                if(this.selParams.dist.dist_id !='' && this.selType == 2){
                    flag = this.selParams.city.city_id
                }else if( this.selParams.city.city_id !='' && this.selType == 1 ){
                    flag = this.selParams.prov.prov_id
                }else {
                    flag = 0
                }
                this.getProvList(flag);
                }
        },
    }
    onLoad() {
        this.getProvList(0);
    }
    //根据parentid获取地区
    getProvList(flag){
        let params = {},that = this;
        params.method = 'GET'
        params.api_name = 'Home/Pcenter/childAddressPlace'
        params.parentid = flag
        this.clickFlag = true
        Api.getAddressApi( params ).then( res => {
            this.clickFlag = false
            if( res.code == 200 ){
                that.addressLinkage = res.data;
                this.$apply();
            }else{
                Utils.wxShowToast(res.message);
                that.$emit('changeSelFlag')
            }
        })
    }
  }
</script>

3、三集联动效果如图