微信小程序-实现三级联动-省市区

<view class="online-con">
    <text><text style="color:red;">*</text>收 货 地 址：</text>
    <text class="online-text" bindtap="selectArea" style="color:#646464; ">{{val}}</text>
    <image src='images/down.png' class="imgg imgg6"></image>
  </view>

<van-popup show="{{ show }}" bind:close="onClose" position="bottom">
  <van-area area-list="{{ areaList }}" bind:confirm="confirm" bind:cancel="cancel" />
</van-popup>

.online-con {
  width: 606rpx;
  margin: 0 auto 20rpx;
  font-size: 30rpx;
  font-family: PingFang-SC-Medium;
  font-weight: bold;
  color: rgba(50, 50, 50, 1);
  box-sizing: border-box;
  position: relative;
}

.online-con text {
  display: inline-block;
  color: rgba(100, 100, 100, 1);
  font-weight: 500;
}
.online-text {
  display: inline-block;
  width: 385rpx;
  height: 60rpx;
  border: 1rpx solid rgba(150, 150, 150, 0.6);
  border-radius: 10rpx;
  padding-left: 25rpx;
  font-size: 30rpx;
  font-family: PingFang-SC-Medium;
  font-weight: bold;
  color: rgba(100, 100, 100, 1);
  line-height: 60rpx;
}
.conts {
  width: 750rpx;
  height: auto;
}

.areas {
  width: 583rpx;
  height: 114rpx;
  font-size: 30rpx;
  border: 1rpx solid rgba(150, 150, 150, 0.6);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-radius: 10rpx;
  padding: 0 10rpx;
  color: #646464;
}
.imgg, .imgg3, .imgg4 {
  width: 23rpx;
  height: 11rpx;
  position: absolute;
  top: 26rpx;
  right: 70rpx;
}

{
  "navigationBarTitleText": "新增地址",
  "usingComponents": {
    "van-popup": "/dist/popup/index",
    "van-area": "/dist/area/index"
  }
}

import province_list from '../../../utils/area.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    areaList: [],
    val: '选择/省/市/区',
    show: false
  },

  confirm(val) {
    let test = `${val.detail.values[0].name}${val.detail.values[1].name}${val.detail.values[2].name}`
    console.log(test)
    this.setData({
      show: false,
      val: test
    })
    console.log(val)
  },
  selectArea() {
    this.setData({
      isShow: false,
      show: true,
      areaList: province_list
    })
  },
  onClose() {
    this.setData({
      show: false
    });
  },
  savaData(){
     this.setData({
       loading:false
     })
  },
  cancel(){
    this.setData({
      show: false
    }); 
  },
   
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

组件：https://youzan.github.io/vant-weapp/#/intro