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

最新推荐文章于 2024-08-02 20:40:11 发布
最新推荐文章于 2024-08-02 20:40:11 发布
阅读量2k 收藏 8
点赞数 2
分类专栏： demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40563746/article/details/121288900
版权

微信小程序 收货地址 三级联动 picker组件 数据验证
关键词由CSDN通过智能技术生成

实现效果如图所示
在这里插入图片描述
js

const app = getApp()
const api = require('../api')
Page({
  /**
   * 页面的初始数据
   */
  data: {
    successCode:0,
    id:0,//正在编辑的地址的id,0表示新增
    detail:{//当前正在添加/编辑的地址的信息
      name: "",//收货人名 <string>
      phone: "",//收货人电话 <string>
      province: "",//省 <string>
      provinceCode: "",//省编码 <string>
      city: "",//市 <string>
      cityCode: "",//市编码 <string>
      area: "",//区 <string>
      areaCode: "",//区编码 <string>
      address: "",//详细地址 <string>
      isDefault: 0,//0非默认，1默认 <number>
    },
    disabled:false,
    provinceList:[],//从接口获取的省市区数据
    cityList:[],
    areaList:[],
    provinceNameList:[],//地区组件中展示的省市区数据
    cityNameList:[],
    areaNameList:[],
    provinceIndex:0,//被选中的省市区在数组中的index
    cityIndex:0,
    areaIndex:0,

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if(options.id){
      this.setData({
        id:options.id
      })
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getInitRegion()
    wx.setNavigationBarTitle({
      title: '添加收货地址'
    })
    
  },

  //获取初始化的省市区信息
  /**
   * 获取初始化的省市区信息
   * 新增地址时，获取全部的省，第一个省下的市，第一个市下的区
   * 编辑地址时，获取全部的省，已选中的省下的市，已选中的市下的区
   */
  async getInitRegion(){
    try{
      const provinceList = await this.getRegionByCode('')
      const provinceCode = this.data.detail.provinceCode?this.data.detail.provinceCode:provinceList[0].cityCode
      const cityList  = await this.getRegionByCode(provinceCode)
      const cityCode =  this.data.detail.cityCode?this.data.detail.cityCode:cityList[0].cityCode
      const areaList = await this.getRegionByCode(cityCode)
      const provinceNameList = []
      const cityNameList = []
      const areaNameList = []
      provinceList.forEach((province,index)=>{
        provinceNameList.push(province.cityName)
        if(province.cityCode === this.data.detail.provinceCode){
          this.setData({
            provinceIndex:index
          })
        }
      })
      cityList.forEach((city,index)=>{
        cityNameList.push(city.cityName)
        if(city.cityCode === this.data.detail.cityCode){
          this.setData({
            cityIndex:index
          })
        }
      })
      areaList.forEach((area,index)=>{
        areaNameList.push(area.cityName)
        if(area.cityCode === this.data.detail.areaCode){
          this.setData({
            areaIndex:index
          })
        }
      })
      this.setData({
        provinceList,
        cityList,
        areaList,
        provinceNameList,
        cityNameList,
        areaNameList,
        regionNameList:[provinceNameList,cityNameList,areaNameList]
      })
      return new Promise((resolve)=>{
        resolve('success')
      })
      
    }catch(err){
      console.log(err)
      wx.showToast({
        title: err,
        icon:'none',
        duration:2000
      })
      
    }
  },
    //切换省市区划
    changeRangeColumn(e){
      console.log('切换省市区划',e)
      const index = e.detail.value
      switch(e.detail.column){
        case 0:
          this.handleChangeProvince(index)
          break;
        case 1:
          this.handleChangeCity(index)
          break;
        case 2:
          this.handleChangeArea(index)
          break;
        default:
          break
      }
    },
    //地区弹框，切换省
    async handleChangeProvince(provinceIndex){
      this.setData({
        provinceIndex:provinceIndex,
        cityIndex:0,
        areaIndex:0,
        disabled:true
      })
      try{
        const cityList  = await this.getRegionByCode(this.data.provinceList[provinceIndex].cityCode)
        const areaList = await this.getRegionByCode(cityList[0].cityCode)
        const cityNameList = []
        const areaNameList = []
        cityList.forEach((city,index)=>{
          cityNameList.push(city.cityName)
        })
        areaList.forEach((area,index)=>{
          areaNameList.push(area.cityName)
        })
        console.log('省切换完毕')
        this.setData({
          cityList,
          areaList,
          cityNameList,
          areaNameList,
          regionNameList:[this.data.regionNameList[0],cityNameList,areaNameList],
          disabled:false
        })
      }catch(err){
        console.log(err)
        wx.showToast({
          title: err,
          icon:'none',
          duration:2000
        })
      }
    },
    //地区弹框，切换市
    async handleChangeCity(cityIndex){
      this.setData({
        cityIndex:cityIndex,
        areaIndex:0
      })
      try{
        const areaNameList = []
        const areaList = await this.getRegionByCode(this.data.cityList[cityIndex].cityCode)
        areaList.forEach(area=>{
          areaNameList.push(area.cityName)
        })
        this.setData({
          areaList,
          areaNameList,
          regionNameList:[this.data.regionNameList[0],this.data.regionNameList[1],areaNameList],
        })
      }catch(err){
        console.log(err)
        wx.showToast({
          title: err,
          icon:'none',
          duration:2000
        })
      }
    },
    //地区弹框，切换区
    handleChangeArea(areaIndex){
      this.setData({
        areaIndex:areaIndex
      })
    },
    bindRegionChange(e){
      console.log('选择地址',e)
      console.log('选定地址时，data为',this.data)
      this.setData({
        detail:{
          ...this.data.detail,
          province:this.data.provinceList[this.data.provinceIndex].cityName,
          city:this.data.cityList[this.data.cityIndex].cityName,
          area:this.data.areaList[this.data.areaIndex].cityName,
          provinceCode:this.data.provinceList[this.data.provinceIndex].cityCode,
          cityCode:this.data.cityList[this.data.cityIndex].cityCode,
          areaCode:this.data.areaList[this.data.areaIndex].cityCode,
        }
      })
    },

  //切换新增/编辑地址时的默认状态
  changeDefault(e){
    const newDetail = this.data.detail
    newDetail.isDefault = e.detail.value?1:0
    this.setData({
      detail:newDetail
    })
  },
  //根据行政code获取下级区域
  getRegionByCode(code){
    return new Promise((resolve,reject)=>{
      wx.showLoading()
      api.getRegionListByCode({
        regionCode:code
      }).then(res=>{
        console.log('获取到省市区,code = '+code+',result = ',res)
        wx.hideLoading()
        if(res.code !== this.data.successCode){
          reject(res.msg)
        }
        if(res.data.length === 0){
          reject('未获取到省市区')
        }
        resolve(res.data)
      })
    })
  },
  bindInput(e){
    const newDetail = this.data.detail
    newDetail[e.currentTarget.dataset.name] = e.detail.value.trim()
    this.setData({
      detail:newDetail
    })
    console.log('detail',this.data.detail)
  },
  handleSubmit(e){
    console.log(e)
    const value = e.detail.value
    if(this.checkEmpty(value.name)){
      wx.showToast({
        title: '请填写收货人',
        icon: 'none',
        duration: 2000
      })
      return false
    }
    if(this.checkEmpty(value.phone)){
      wx.showToast({
        title: '请填写手机号码',
        icon: 'none',
        duration: 2000
      })
      return false
    }
    if(this.checkEmpty(value.region.length === 0)){
      wx.showToast({
        title: '请选择地区',
        icon: 'none',
        duration: 2000
      })
      return false
    }
    if(this.checkEmpty(this.data.detail.province) || this.checkEmpty(this.data.detail.city) || this.checkEmpty(this.data.detail.area)){
      wx.showToast({
        title: '请选择完整的地区',
        icon: 'none',
        duration: 2000
      })
      return false
    }
    if(this.checkEmpty(value.address)){
      wx.showToast({
        title: '请填写详细地址',
        icon: 'none',
        duration: 2000
      })
      return false
    }
    if(!this.checkPhone(value.phone)){
      wx.showToast({
        title: '请填写正确的手机号',
        icon: 'none',
        duration: 2000
      })
      return false
    }
    if(!this.checkEmpty(this.data.detail.id)){
      this.saveUpdateAddress(e.detail.value)
    }else{
      this.saveAddAddress(e.detail.value)
    }
  },
  //保存新增的地址
  saveAddAddress(value){
    wx.showLoading()
    api.addAddress({
      ...this.data.detail
    }).then(res=>{
      wx.hideLoading()
      if(res.code !== this.data.successCode){
        wx.showToast({
          title: res.msg,
          icon:'none',
          duration:2000
        })
        return
      }
      wx.showToast({
        title: '添加成功',
        icon:'none',
        duration:2000
      })
    })
  },
  //保存修改的地址
  saveUpdateAddress(value){
    wx.showLoading()
    api.updateAddress({
      ...this.data.detail
    }).then(res=>{
      wx.hideLoading()
      if(res.status !== this.data.successCode){
        wx.showToast({
          title: res.msg,
          icon:'none',
          duration:2000
        })
        return
      }
      wx.showToast({
        title: '修改成功',
        icon:'none',
        duration:2000
      })
    })
  },
  //非空检查
  checkEmpty(value){
    if (value === '' || value === null || typeof (value) == 'undefined') {
      return true
    }
    return false
  }
})

wxml:



  <view class="add-page">
    <form catchsubmit="handleSubmit" >
      <view class="address-block">
        <view class="address-info">
          <view class="address-title" >收货人</view>:
          <view class="address-content">
            <input 
            name="name" 
            value="{{detail.name}}" 
            placeholder="请输入名称" 
            placeholder-style="color:#999999;" 
            maxlength="20"
            bindinput="bindInput"
            data-name="name"
            />
          </view>
        </view>
        <view class="address-info">
          <view class="address-title">手机号码</view>:
          <view class="address-content">
            <input 
              name="phone"  
              value="{{detail.phone}}" 
              placeholder="请输入手机号" 
              placeholder-style="color:#999999;"
              maxlength="11" 
              type="number"
              bindinput="bindInput"
              data-name="phone"
             />
          </view>
        </view>
        <view class="address-info">
          <view class="address-title">选择地区</view>:
          <view class="address-content address-region">
            <picker class="" 
            mode="multiSelector" 
            range="{{[provinceNameList,cityNameList,areaNameList]}}" 
            bindchange="bindRegionChange" 
            value="{{[provinceIndex,cityIndex,areaIndex]}}" 
            name="region"
            bindcolumnchange="changeRangeColumn"
            disabled="{{disabled}}"
            >
             <span class="address-region-name one-line" wx:if="{{detail.province}}">{{detail.province}} {{detail.city}} {{detail.area}}</span>
             <span class="address-region-name one-line placeholder" wx:else>请选择</span>
             <span class="arrow-right"></span>
            </picker>
          </view>
        </view>
        <view class="address-info address-detail">
          <view class="address-title">详细地址</view>:
          <view class="address-content">  
            <textarea class="address-detail-text" bindblur="bindTextAreaBlur" name="address" value="{{detail.address}}" placeholder="请输入详细地址" placeholder-style="color:#999999;" maxlength="150"  bindinput="bindInput"
            data-name="address"/>
          </view>
        </view>
        <view class="address-info">
          <span>设为默认地址</span>
          <switch checked="{{detail.isDefault}}" bindchange="changeDefault" color="{{iconColor}}" />
        </view>
      </view>
      <view class="bottom-btn">
        <button class="btn-primary" type="primary" formType="submit">保存</button>
      </view>
    </form> 
  </view>

wxss：

page{
  padding-bottom: 200rpx;
}
/*添加地址start*/
.add-page{
  width: 100%;
  font-size: 28rpx;
  
}
.address-block{
  padding-left: 40rpx;
  padding-right: 51rpx;
  background-color: #ffffff;
}
.address-info{
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 98rpx;
  line-height: 98rpx;
  border-bottom: 1rpx solid #f1f1f1;
}
.address-info:last-child{
  border-bottom:none;
}
.address-info input{
  height: 100%;
}
.address-title{
  flex: 0 0 130rpx;
  text-align:justify;
}
.address-title:after{
  display:inline-block;
  content:'';
  width:100%;
}
.address-content{
  flex: 1 1 auto;
  height: 100%;
  padding-left: 35rpx;
}
.address-region{
  display: inline-flex;
  justify-content: space-between;
  position: relative;
}
.address-region-name{
  width: 450rpx;
}
.address-region .arrow-right{
  display: inline-block;
  position: absolute;
  right: 0;
  top: 40rpx;
}
.address-detail{
  height: 226rpx;
  padding-top: 40rpx;
  line-height: 41rpx;
}
.address-detail-text{
  width: 100%;
  height: 100%;
}

/*添加地址end*/

测试数据：api.js

const provinceList = 
   [
    {cityCode: "370000", cityName: "山东省"},
    {cityCode: "140000", cityName: "山西省"},
    {cityCode: "410000", cityName: "河南省"},
    {cityCode: "130000", cityName: "河北省"},
  ]
  const cityList = {
    '370000':[
      {cityCode: "370100", cityName: "济南市"},
      {cityCode: "370200", cityName: "青岛市"}
    ],
    '140000':[
      {cityCode: "140100", cityName: "太原市"},
      {cityCode: "140200", cityName: "大同市"},
      {cityCode: "140300", cityName: "阳泉市"}
    ],
    '130000':[
      {cityCode: "130100", cityName: "石家庄市"}
    ],
    '410000':[
      {cityCode: "410100", cityName: "郑州市"},
      {cityCode: "410200", cityName: "洛阳市"},
      {cityCode: "410300", cityName: "开封市"},
      {cityCode: "410300", cityName: "平顶山市"}
    ],
    '370100':[
      {cityCode: "370101", cityName: "济南区县-1"},
      {cityCode: "370102", cityName: "济南区县-2"}
    ],
    '370200':[
      {cityCode: "370201", cityName: "青岛区县-1"},
      {cityCode: "370202", cityName: "青岛区县-2"}
    ],
    '140100':[
      {cityCode: "140101", cityName: "太原区县-1"},
      {cityCode: "140102", cityName: "太原区县-2"},
      {cityCode: "140103", cityName: "太原区县-3"},
      {cityCode: "140104", cityName: "太原区县-4"}
    ],
    '140200':[
      {cityCode: "140201", cityName: "大同区县-1"},
      {cityCode: "140202", cityName: "大同区县-2"}
    ],
    '140300':[
      {cityCode: "140301", cityName: "阳泉区县-1"},
      {cityCode: "140302", cityName: "阳泉区县-2"},
      {cityCode: "140303", cityName: "阳泉区县-3"}
    ],
    '130100':[
      {cityCode: "130101", cityName: "石家庄区县-1"},
      {cityCode: "130102", cityName: "石家庄区县-2"},
      {cityCode: "130103", cityName: "石家庄区县-3"},
      {cityCode: "130104", cityName: "石家庄区县-4"},
    ],
    '410100':[
      {cityCode: "410101", cityName: "郑州区县-1"},
      {cityCode: "410102", cityName: "郑州区县-2"},
      {cityCode: "410103", cityName: "郑州区县-3"},
    ],
    '410200':[
      {cityCode: "410201", cityName: "洛阳区县-1"},
      {cityCode: "410202", cityName: "洛阳区县-2"}
    ],
    '410300':[
      {cityCode: "370100", cityName: "开封区县-1"}
    ],
    '410400':[
      {cityCode: "410401", cityName: "平顶山区县-1"},
      {cityCode: "410402", cityName: "平顶山区县-2"},
      {cityCode: "410403", cityName: "平顶山区县-3"},
      {cityCode: "410404", cityName: "平顶山区县-4"},
    ],
  }

module.exports = {
  //新增地址
  addAddress(params){
    return new Promise(resolve=>{
      resolve({
        code:0,
        msg:'success',
        data:{}
      })
    })

  },
  //获取省市区联动
  getRegionListByCode(params){
    console.log('cityCode',params)
    let result={
      code:0,
      msg:'success',
      data:[]
    }
    if(params.regionCode == ''){
      result={
        ...result,
        data:provinceList
      }
    }else{
      result={
        ...result,
        data:cityList[params.regionCode]
      }
      
    }
    return new Promise(resolve=>{
      resolve(result)
    })
  }
}
乔朵朵
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 - 最新详细实现省市区三级联动组件插件，小程序选择省市区弹框，选择省市区联动详细教程，省市区三级地址选择，微信小程序中使用picker封装省市区三级联动实现（详细示例代码，一键复制开箱即用
高级前端工程师
04-15 3105
微信小程序，省市区，省份，市区，区县，弹框式省市区三级联动，uniapp，小程序省市区三级联动，如何实现省市区数据动态懒加载，微信小程序省市区三级联动，微信小程序三级联动,省市区联动组件封装，使用picker封装省市区三级联动的实现，微信小程序picker实现的省市区三级联动，怎么懒加载，怎么选择省份的时候再出现市区，省市区三级联动后台数据动态加载到页面，报错怎么办，省市区有什么插件，动态加载省市区的数据，新手小白详细教程，小程序 后台动态数据 省市二级联动，完整运行示例源代码，小程序三级地址联动，地址选择
实战演练-java+微信小程序实现省市区三级联动
SoulNone的博客
08-13 1432
实战演练-Java+微信小程序实现省市区三级联动
微信小程序组件简易实现省市区三级联动
SoulNone的博客
08-13 1012
微信小程序组件使用-快速实现省市区三级联动
uniapp微信小程序实现省市区三级联动
逆水行舟 不进则退
06-27 2356
在uniapp微信小程序中使用省市区三级联动
微信小程序,动态设置三级联动, 省市区街道
qq_41737172的博客
09-25 2254
微信小程序 ,动态设置三级联动
微信小程序-省市二级联动
踏雨歌青春，诗酒趁年华
12-19 1002
本文介绍了在微信小程序开发中实现省份城市选择二级联动功能的方法，文中给出了全部的源码示例。城市选择采用二级联动方法，即用户先选择省份再选择城市，可以快速从全国400多所城市中找到自己需要选择的那一个，优化了用户操作体验。
微信小程序之省市区三级联动
折骨成诗的博客
05-30 3440
        最近接触小程序，使用微信自带的省市区选择器，发现无法满足需求，原因是后台需要省市区国标码发送接口查询数据，微信自带的省市区选择器只有Name,没有国标码，所以只能自定义省市区三级联动选择器，废话不多说，直接上代码。参考文档：https://www.cnblogs.com/xjwy/p/6681867.html?utm_source=tuicool&amp;utm_medium=re...
微信小程序的省市区三级地址mysql_微信小程序 实现三级联动-省市区
weixin_35781147的博客
02-06 240
序：项目中需要用到三级联动，自己试着写了下，也查了一些资料，现在把这个记录一下，里面地区数据，可根据个人需要做一些更改，我比较懒就不改了。wxml{{province}} {{city}} {{county}}选择城市取消确定{{sheng.name}}{{item.name}}{{item.name}}js//index.js//获取应用实例// var app = getApp()// var...
微信小程序的省市区三级地址mysql_微信小程序：省市区三级联动（升级版）
weixin_42314860的博客
02-06 377
之前搞了一个 传送门，缺点明显，思索一番，An idea flitted through my mind.// test.wxml地址{{province}} {{city}} {{area}}{{item.name}}{{item.name}}{{item}}//test.js 截取了部分省市区数据const placeArray = [{"name": "北京","city": [{"nam...
微信小程序 省市区三级联动选择
10-14
综上所述，微信小程序的省市区三级联动选择涉及到了UI设计、数据结构、事件处理、数据更新、页面状态管理等多个技术点，通过合理的设计和实现，可以为用户提供便捷的地址输入功能。在实际开发中，还需要根据项目需求...
微信小程序-省市县三级联动，带有自定义地区码(源代码+截图)
06-19
微信小程序-省市县三级联动，带有自定义地区码(源代码+截图)微信小程序-省市县三级联动，带有自定义地区码(源代码+截图)微信小程序-省市县三级联动，带有自定义地区码(源代码+截图)微信小程序-省市县三级联动，带有...
微信小程序实现选择地址省市区三级联动
10-15
主要为大家详细介绍了微信小程序实现选择地址省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序 使用picker封装省市区三级联动实例代码
09-01
总的来说，实现微信小程序中的省市区三级联动，需要理解并熟练运用Template、事件绑定、数据结构设计以及与服务器的通信。通过封装，可以方便地在多个页面中复用这一功能，提高开发效率。同时，良好的数据结构设计和...
微信小程序-微信小程序,省市区三级联动
08-06
通过以上步骤，你可以实现一个完整的微信小程序省市区三级联动功能。在“wechat-three-level-master”这个项目中，你应该能够找到具体的代码实现和配置示例，供学习和参考。这个项目的源码会涵盖上述所有技术点，...
微信小程序 - 自定义计数器
觉醒法师的专栏
08-02 821
微信小程序通过自定义组件，实现计数器值的增加、减少、清零、最大最小值限定、禁用等操作。通过按钮事件触发方式，更新计数器的值，并修改相关联的其它变量。通过提升用户体验，对计数器进行优化设计，使用户操作更加便捷和直观。
从零开始写一个微信小程序
最新发布
2301_79507619的博客
08-02 254
下载并安装[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)。- 参考[微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)学习更多功能和组件。- 前往[微信公众平台](https://mp.weixin.qq.com/)注册一个小程序账号。- 在微信开发者工具中，点击“上传”按钮，上传代码。
微信小程序之计算器
ch_s_t的专栏
07-25 1329
data-*是微信小程序的自定义属性，由data-前缀加上自定义的属性名，自定义属性值表示要传递的数据 ，在事件处理函数中通过targert或currentTarget对象的datasett属性获取数据。
微信小程序实现聊天界面，发送功能
番茄Salad
07-24 2286
【代码】微信小程序实现聊天界面，发送功能。
微信小程序开发实现省市县三级联动
04-12
微信小程序开发实现省市县三级联动可以通过以下步骤实现： 1. 获取省市县数据：首先需要获取省市县的数据，可以通过调用接口或者在小程序中存储一个省市县的数据文件。 2. 页面布局：在小程序的页面中，需要创建三个选择器组件，分别用于选择省、市和县。可以使用`<picker>`组件来实现选择器。 3. 数据绑定：将获取到的省市县数据绑定到选择器组件上，使得选择器能够显示相应的选项。 4. 事件处理：为每个选择器组件添加事件处理函数，当选择器的值发生变化时，触发相应的事件处理函数。 5. 动态更新：根据选择器的值变化，动态更新下一级选择器的选项。例如，当选择了某个省份后，根据该省份获取对应的城市列表，并更新城市选择器的选项。 6. 最终结果获取：当用户完成省市县的选择后，可以通过事件处理函数获取最终的选择结果，并进行相应的处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值