小程序 自定义省市区三联动

 

<view class="index">
  <view class="input" bindtap="getbox" wx:if="{{!inputShow}}" style="color: #999;">请选择地址</view>
  <view class="input" bindtap="getbox" wx:if="{{inputShow}}">{{province}} {{city}} {{area}}</view>
  <!-- 省市区弹框 -->
  <view class="box" wx:if="{{boxShow}}">
    <!-- 阴影 -->
    <view class="black" bindtap="hidebox"></view>
    <!-- 内容 -->
    <view class="nr">
      <view class="item">
        <text bindtap="hidebox">取消</text>
        <text bindtap="confirm">确认</text>
      </view>
      <view style="display:flex;width: 100%;height: 400rpx;">
          <picker-view indicator-style="height: 200rpx;" style="width: 100%;height: 400rpx;text-align: center" value="{{pIndex}}" bindchange="changeProvince2">
              <picker-view-column>
                  <view wx:for="{{placeArray}}" wx:key="name" style="line-height: 66rpx">{{item.name}}</view>
              </picker-view-column>
          </picker-view>
          <picker-view indicator-style="height: 200rpx;" style="width: 100%;height: 400rpx;text-align: center" value="{{cIndex}}" bindchange="changeCity2">
              <picker-view-column>
                  <view wx:for="{{placeArray[pIndex].city}}" wx:key="name" style="line-height: 66rpx">{{item.name}}</view>
              </picker-view-column>
          </picker-view>
          <picker-view indicator-style="height: 200rpx;" style="width: 100%;height: 400rpx;text-align: center" value="{{aIndex}}" bindchange="changeArea2">
              <picker-view-column>
                  <view wx:for="{{placeArray[pIndex].city[cIndex].area}}" wx:key="*this" style="line-height: 66rpx">{{item}}</view>
              </picker-view-column>
          </picker-view>
      </view>
    </view>
  </view>
</view>

const app = getApp();
import utils from '../../utils/util';
import {
  getDistrict
} from '../../apis/extra';
// 部分省市区数据
const placeArray = [
  {
    "name": "北京",
    "city": [{
      "name": "北京",
      "area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县"]
    }]
  },

  {
    "name": "天津",
    "city": [
      {
        "name": "天津A",
        "area": ["a区", "b区", "c区", "d区", "e区"]
      },
      {
        "name": "天津B",
        "area": ["1区", "2区", "3区", "4区"]
      }
   ]
  },

  {
    "name": "河北",
    "city": [

      {
        "name": "石家庄",
        "area": ["长安区", "新乐市", "鹿泉市"]
      },

      {
        "name": "邯郸",
        "area": ["邯山区", "丛台区", "复兴区", "峰峰矿区", "邯郸县", "临漳县", "成安县", "大名县", "涉  县", "磁  县" ]
      },

      {
        "name": "邢台",
        "area": ["桥东区", "桥西区", "沙河市"]
      },
    ]
  }];


Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //是否显示modal
    show: {
      type: Boolean,
      value: false
    },
    info: {
      type: String,
      value: 'left',
      observer(newValue, oldValue) {
        console.log(newValue, oldValue)
        this.setData({
          type: newValue
        })
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    inputShow: false,
    boxShow: false,
    placeArray: placeArray,
    province: placeArray[0].name,
    pIndex: 0,
    city: placeArray[0].city[0].name,
    cIndex: 0,
    area: placeArray[0].city[0].area[0],
    aIndex: 0
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 展示弹框
    getbox: function () {
      this.setData({
        boxShow: true
      })
    },
    // 隐藏弹框
    hidebox: function () {
      this.setData({
        boxShow: false
      })
    },
    // 确认按钮
    confirm: function () {
      this.setData({
        boxShow: false,
        inputShow: true,
      })
    },
    changeProvince2: function (e) {
      const val = e.detail.value
      this.setData({
        pIndex: val,
        cIndex: 0,
        aIndex: 0,
        province: placeArray[val].name,
        city: placeArray[val].city[0].name,
        area: placeArray[val].city[0].area[0]
      })
    },
    changeCity2: function (e) {
      const val = e.detail.value
      this.setData({
        cIndex: val,
        aIndex: 0,
        city: placeArray[this.data.pIndex].city[val].name,
        area: placeArray[this.data.pIndex].city[val].area[0]
      })
    },
    changeArea2: function (e) {
      const val = e.detail.value
      this.setData({
        aIndex: val,
        area: placeArray[this.data.pIndex].city[this.data.cIndex].area[val]
      })
    },

  }
})

.index{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: inherit;
  padding-top: 30rpx;
  box-sizing: border-box;
}
.input{
  width: 680rpx;
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #999;
  border-radius: 10rpx;
  margin: auto;
  padding: 0 32rpx;
  box-sizing: border-box;
}
.box{
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  z-index: 8;
}
.black{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  z-index: 10;
}
.nr{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 500rpx;
  z-index: 12;
  background: #FFF;
}
.item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #EEE;
}