html

<view class='compile'>
    <view>
    <view class='inpur'>
        联系人<input placeholder='姓名' class='inp' bindinput="nameInput"></input>
    </view>
     <view class='inpur'>
        手机号码<input placeholder='11位手机号码' class='inp' bindinput="telInput"></input>
    </view>
     <view class='inpur'>
        详细地址
      <!--三级联动  -->
        <picker bindchange="selectedProvince" value="{{index}}" range="{{arrayProvince}}" class='in'>  
            <view class="picker">  
              {{province}}  
            </view>  
        </picker>  
        <picker bindchange="selectedCity" value="{{index}}" range="{{arrayCity}}" class='in'>  
          <view class="picker">  
            {{city}}  
          </view>  
      </picker>  
        <picker bindchange="selectedDistrict" value="{{index}}" range="{{arrayDistrict}}" class='in'>  
          <view class="picker">  
            {{district}}  
          </view>  
      </picker>  
    </view>
     <view class='inpur'>
        详细地址<input placeholder='街道门牌号' class='inp' bindinput="addressInput"></input>
    </view>
     <view class='inpur'>
        邮证编号<input placeholder='邮证编号' class='inp' bindinput="youInput"></input>
    </view>
    <view class='btns btns1' bindtap='btn1'>保存</view>
    <view class='btns btns2' bindtap='btn2'>从微信读取</view>
    <view class='btns' bindtap='btn3'>取消</view>
</view>
</view>

css

.compile{
  width: 100%;
  height: 1100rpx;
  background: #F4F5F9;
}
.inpur{
  width:94%;
  padding: 3%;
  height: 100rpx;
  display: flex;
  justify-content:space-between;
  align-items: center;
  font-size: 35rpx;
  background: #fff;
  border-bottom: 1rpx solid lightgray;
}
.inp{
  width: 70%;
  padding-left: 20rpx;
   font-size: 35rpx;
}
.in{
  width: 24%;
  text-align: left;
  color: gray;
}
.btns{
  width: 90%;
  height: 100rpx;
  line-height: 100rpx;
  margin: 10rpx auto;
  text-align: center;
  border: 1rpx solid lightgray;
  color: black;
  background: #fff;
}
.btns1{
  color: #fff;
  background: #B4272D;
}
.btns2{
  color: #fff;
  background: #19AD19;
}

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    province: '省',
    city: '市',
    district: '区',
    arrayProvince: [],
    arrayCity: [],
    arrayDistrict: [],
    indexProvince: 0,
    indexCity: 0,
    IndexDistrict: 0,
    citylist1: [],
    citylist: [{ "p": "北京", "c": [{ "n": "东城区" }, { "n": "西城区" }, { "n": "崇文区" }, { "n": "宣武区" }, { "n": "朝阳区" }, { "n": "丰台区" }, { "n": "石景山区" }, { "n": "海淀区" }, { "n": "门头沟区" }, { "n": "房山区" }, { "n": "通州区" }, { "n": "顺义区" }, { "n": "昌平区" }, { "n": "大兴区" }, { "n": "平谷区" }, { "n": "怀柔区" }, { "n": "密云县" }, { "n": "延庆县" }] }, { "p": "台湾", "c": [{ "n": "台北市" }, { "n": "高雄市" }, { "n": "基隆市" }, { "n": "台中市" }, { "n": "台南市" }, { "n": "新竹市" }, { "n": "嘉义市" }, { "n": "台北县" }, { "n": "宜兰县" }, { "n": "新竹县" }, { "n": "桃园县" }, { "n": "苗栗县" }, { "n": "台中县" }, { "n": "彰化县" }, { "n": "南投县" }, { "n": "嘉义县" }, { "n": "云林县" }, { "n": "台南县" }, { "n": "高雄县" }, { "n": "屏东县" }, { "n": "台东县" }, { "n": "花莲县" }, { "n": "澎湖县" }] }, { "p": "山西", "c": [{ "n": "太原", "a": [{ "s": "小店区" }, { "s": "迎泽区" }, { "s": "杏花岭区" }, { "s": "尖草坪区" }, { "s": "万柏林区" }, { "s": "晋源区" }, { "s": "清徐县" }, { "s": "阳曲县" }, { "s": "娄烦县" }, { "s": "古交市" }] }, { "n": "大同", "a": [{ "s": "城区" }, { "s": "矿区" }, { "s": "南郊区" }, { "s": "新荣区" }, { "s": "阳高县" }, { "s": "天镇县" }, { "s": "广灵县" }, { "s": "灵丘县" }, { "s": "浑源县" }, { "s": "左云县" }, { "s": "大同县" }] }, { "n": "阳泉", "a": [{ "s": "城区" }, { "s": "矿区" }, { "s": "郊区" }, { "s": "平定县" }, { "s": "盂县" }] }, { "n": "长治", "a": [{ "s": "城区" }, { "s": "郊区" }, { "s": "长治县" }, { "s": "襄垣县" }, { "s": "屯留县" }, { "s": "平顺县" }, { "s": "黎城县" }, { "s": "壶关县" }, { "s": "长子县" }, { "s": "武乡县" }, { "s": "沁县" }, { "s": "沁源县" }, { "s": "潞城市" }] }, { "n": "晋城", "a": [{ "s": "城区" }, { "s": "沁水县" }, { "s": "阳城县" }, { "s": "陵川县" }, { "s": "泽州县" }, { "s": "高平市" }] }, { "n": "朔州", "a": [{ "s": "朔城区" }, { "s": "平鲁区" }, { "s": "山阴县" }, { "s": "应县" }, { "s": "右玉县" }, { "s": "怀仁县" }] }, { "n": "晋中", "a": [{ "s": "榆次区" }, { "s": "榆社县" }, { "s": "左权县" }, { "s": "和顺县" }, { "s": "昔阳县" }, { "s": "寿阳县" }, { "s": "太谷县" }, { "s": "祁县" }, { "s": "平遥县" }, { "s": "灵石县" }, { "s": "介休市" }] }, { "n": "运城", "a": [{ "s": "盐湖区" }, { "s": "临猗县" }, { "s": "万荣县" }, { "s": "闻喜县" }, { "s": "稷山县" }, { "s": "新绛县" }, { "s": "绛县" }, { "s": "垣曲县" }, { "s": "夏县" }, { "s": "平陆县" }, { "s": "芮城县" }, { "s": "永济市" }, { "s": "河津市" }] }, { "n": "忻州", "a": [{ "s": "忻府区" }, { "s": "定襄县" }, { "s": "五台县" }, { "s": "代县" }, { "s": "繁峙县" }, { "s": "宁武县" }, { "s": "静乐县" }, { "s": "神池县" }, { "s": "五寨县" }, { "s": "岢岚县" }, { "s": "河曲县" }, { "s": "保德县" }, { "s": "偏关县" }, { "s": "原平市" }] }, { "n": "临汾", "a": [{ "s": "尧都区" }, { "s": "曲沃县" }, { "s": "翼城县" }, { "s": "襄汾县" }, { "s": "洪洞县" }, { "s": "古县" }, { "s": "安泽县" }, { "s": "浮山县" }, { "s": "吉县" }, { "s": "乡宁县" }, { "s": "大宁县" }, { "s": "隰县" }, { "s": "永和县" }, { "s": "蒲县" }, { "s": "汾西县" }, { "s": "侯马市" }, { "s": "霍州市" }] }, { "n": "吕梁", "a": [{ "s": "离石区" }, { "s": "文水县" }, { "s": "交城县" }, { "s": "兴县" }, { "s": "临县" }, { "s": "柳林县" }, { "s": "石楼县" }, { "s": "岚县" }, { "s": "方山县" }, { "s": "中阳县" }, { "s": "交口县" }, { "s": "孝义市" }, { "s": "汾阳市" }] }] }]

  },
  nameInput:function(e){
    let name = e.detail.value
    this.setData({
      addressname:name
    })
  },
  telInput: function (e) {
    let tel = e.detail.value
    this.setData({
      addresstel: tel
    })
  },
  addressInput: function (e) {
    let addressInput = e.detail.value
    this.setData({
      addressInput: addressInput
    })
  },
  youInput: function (e) {
    let youInput = e.detail.value
    this.setData({
      addressyouInput: youInput
    })
  },
  onLoad: function (options) {

  },
  btn1: function (event) {
    if (this.data.addressname==""){
      wx.showToast({
        title: '请填写名字',
        icon: 'none',
        duration: 2000,
        mask:true
      })
    } else if (this.data.addresstel == ""){
      wx.showToast({
        title: '请填写电话号',
        icon: 'none',
        duration: 2000,
        mask: true
      })
    } else if (this.data.addressInput == ""){
      wx.showToast({
        title: '请填写详细地址',
        icon: 'none',
        duration: 2000,
        mask: true
      })
    } else if (this.data.addressyouInput == ""){
      wx.showToast({
        title: '请填写邮政编码',
        icon: 'none',
        duration: 2000,
        mask: true
      })
    } else if (this.data.province == "") {
      wx.showToast({
        title: '请填写省',
        icon: 'none',
        duration: 2000,
        mask: true
      })
    } else if (this.data.city == "") {
      wx.showToast({
        title: '请填写市',
        icon: 'none',
        duration: 2000,
        mask: true
      })
    } else if (this.data.district == "") {
      wx.showToast({
        title: '请填写区',
        icon: 'none',
        duration: 2000,
        mask: true
      })
    }else{
      wx.setStorage({
        key: 'address',
        data:{
          "name": this.data.addressname,
          "tel": this.data.addresstel,
          "addressInput": this.data.addressInput,
          "addressyouInput": this.data.addressyouInput,
          "province": this.data.province,
          "city": this.data.city,
          "district": this.data.district,
          "flag":true
         }
      })
      wx.showToast({
        title: '已保存',
        icon: 'success',
        duration: 2000,
        mask: true
      })
    wx.navigateBack({ delta: 1 })

    }
    // console.log(this.data.province) //province
    // console.log(this.data.city) //city  
    // console.log(this.data.district) //district  区
    
  },
  onLoad: function () {
    //获取省份列表  
    var arrayTemp = [];
    for (var i = 0; i < this.data.citylist.length; i++) {
      arrayTemp.push(this.data.citylist[i].p); 
    }
    this.setData({
      arrayProvince: arrayTemp,
    })
  },
  selectedProvince: function (e) {
    //获取省份列表  
    var arrayTemp1 = [];
    var arrayTemp = this.data.citylist[e.detail.value].c;
    if (arrayTemp[0].a) {
      for (var i = 0; i < arrayTemp.length; i++) {
        arrayTemp1.push(arrayTemp[i].n);
      }
      //更新市显示  
      this.setData({
        province: this.data.arrayProvince[e.detail.value],
        indexProvince: e.detail.value,
        arrayCity: arrayTemp1,
        city: '市',
        district: '区',
      })
    }
    //直辖市  
    else {
      for (var i = 0; i < arrayTemp.length; i++) {
        arrayTemp1.push(arrayTemp[i].n);
      }
      //更新市显示  
      this.setData({
        province: '直辖市',
        indexProvince: -1,
        city: this.data.arrayProvince[e.detail.value],
        district: '区',
        arrayDistrict: arrayTemp1,
      })
    }

  },
  selectedCity: function (e) {
    //获取区列表  
    var arrayTemp1 = [];
    var arrayTemp = this.data.citylist[this.data.indexProvince].c[e.detail.value].a;

    for (var i = 0; i < arrayTemp.length; i++) {
      arrayTemp1.push(arrayTemp[i].s);
    }

    //更新区显示  
    this.setData({
      city: this.data.arrayCity[e.detail.value],
      indexCity: e.detail.value,
      arrayDistrict: arrayTemp1,
      district: '区',
    })

  },
  selectedDistrict: function (e) {
    var arrayTemp1 = [];
    //直辖市  
    if (this.data.indexProvince === -1) {
      //更新区显示  
      this.setData({
        district: this.data.arrayDistrict[e.detail.value],
        indexDistrict: e.detail.value,
      })
    }
    //省  
    else {
      //获取省份列表  
      var arrayTemp = this.data.citylist[this.data.indexProvince].c[this.data.indexCity].a;

      //更新区显示  
      this.setData({
        district: arrayTemp[e.detail.value].s,
        indexDistrict: e.detail.value,
      })
    }
  },
})