uni-app接省市区接口

最新推荐文章于 2024-06-05 09:17:55 发布
最新推荐文章于 2024-06-05 09:17:55 发布
阅读量801 收藏 4
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qd_xbL/article/details/109402623
版权
这段代码展示了如何使用uni-app框架动态获取并显示省市区数据，并实现多列选择器（picker）的联动效果。在用户选择不同级别的行政区域时，通过API请求更新下级区域数据。同时，提供了`bindMultiPickerColumnChange`和`bindMultiPickerChange`两个事件处理函数，分别处理滑动和选择变化。
摘要由CSDN通过智能技术生成

HTML：

	<!-- 省市区 -->
      <view class="input-item">
        <picker
          mode="multiSelector"
          @columnchange="bindMultiPickerColumnChange"
          :value="regionIndex"
          :range="regionArray"
          @change="bindMultiPickerChange"
          range-key="area_name"
        >
          <view
            class="uni-input"
            v-if="provinceName != '' ||cityName!=''|| areaName!=''"
          >{{provinceName}} {{cityName}} {{areaName}}</view>
          <view class="default" v-else>请选择收货地区</view>
        </picker>
      </view>
	<!-- 省市区 end -->

js

const host = "https://d170.ichuk.com";
export default {
  components: { bar },
  data() {
    return {
      // 省
      provinceArray: [],
      provinceID: "",
      provinceName: "",
      // 市
      cityArray: [],
      cityID: "",
      cityName: "",
      // 区
      areaArray: [],
      areaID: "",
      areaName: "",
      // 省市区集合 - 多列选择地区数据
      regionArray: [],
      // 省市区集合下标 - 多列选择值数据
      regionIndex: [0, 0, 0],
    };
  },
  methods: {
    /**
     * 初始化区域数据
     */
    initRegionData: function () {
      var that = this;
      // 省
      uni.request({
        method: "get",
        header: {
          "Content-Type": "application/x-www-form-urlencoded",
          "Auth-Token": uni.getStorageSync("Auth-Token") || "",
        },
        data: {
          type: 1,
          id: 0,
        },
        url: host + "/api/region",
        success: (res) => {
          if (res.data.errCode == 0 && res.data.data.length > 0) {
            that.provinceArray = res.data.data;
            // 市
            uni.request({
              method: "get",
              header: {
                "Content-Type": "application/x-www-form-urlencoded",
                "Auth-Token": uni.getStorageSync("Auth-Token") || "",
              },
              data: {
                type: 1,
                id: res.data.data[0].id,
              },
              url: host + "/api/region",
              success: (res) => {
                if (res.data.errCode == 0 && res.data.data.length > 0) {
                  that.cityArray = res.data.data;
                }
                // 区
                uni.request({
                  method: "get",
                  header: {
                    "Content-Type": "application/x-www-form-urlencoded",
                    "Auth-Token": uni.getStorageSync("Auth-Token") || "",
                  },
                  data: {
                    type: 1,
                    id: res.data.data[0].id,
                  },
                  url: host + "/api/region",
                  success: (res) => {
                    if (res.data.errCode == 0 && res.data.data.length > 0) {
                      that.areaArray = res.data.data;
                      // 省市区集合
                      that.regionArray = [
                        that.provinceArray,
                        that.cityArray,
                        that.areaArray
                      ];
                    }
                  },
                });
              },
            });
          }
        },
      });
    },

    // 省市区 picker 滑动事件
    bindMultiPickerColumnChange: function (e) {
      var that = this;
      var data = {
        regionArray: that.regionArray,
        regionIndex: that.regionIndex,
      };
      data.regionIndex[e.detail.column] = e.detail.value;
      switch (e.detail.column) {
				case 0: //滑动省
          uni.request({
            method: "get",
            header: {
              "Content-Type": "application/x-www-form-urlencoded",
              "Auth-Token": uni.getStorageSync("Auth-Token") || "",
            },
            data: {
              type: 1,
              id: that.regionArray[0][e.detail.value].id,
            },
            url: host + "/api/region",
            success: (res) => {
              if (res.data.errCode == 0) {
								that.regionArray[1] = res.data.data;
								that.cityArray = res.data.data;
								that.regionIndex[1] = 0;
                uni.request({
                  method: "get",
                  header: {
                    "Content-Type": "application/x-www-form-urlencoded",
                    "Auth-Token": uni.getStorageSync("Auth-Token") || "",
                  },
                  data: {
                    type: 1,
                    id: that.regionArray[1][0].id,
                  },
                  url: host + "/api/region",
                  success: (res) => {
                    if (res.data.errCode == 0) {
											that.regionArray[2] = res.data.data;
											that.areaArray = res.data.data;
											that.regionIndex[2] = 0;
											that.regionArray = [
                        that.provinceArray,
                        that.cityArray,
                        that.areaArray
											];
                      // that.setData(data);
                    }
                  },
                });
              }
            },
					});
					
          break;
        case 1: //滑动市
          uni.request({
            method: "get",
            header: {
              "Content-Type": "application/x-www-form-urlencoded",
              "Auth-Token": uni.getStorageSync("Auth-Token") || "",
            },
            data: {
              type: 1,
              id: that.regionArray[1][e.detail.value].id,
            },
            url: host + "/api/region",
            success: (res) => {
              if (res.data.errCode == 0) {
								that.regionArray[2] = res.data.data;
								that.areaArray = res.data.data;
								that.regionIndex[2] = 0;
								that.regionArray = [
                  that.provinceArray,
                  that.cityArray,
                  that.areaArray
								];
                // that.setData(data);
              }
            },
          });
          break;
        case 2:
          // that.setData(data);
					that.regionArray = [
						that.provinceArray,
						that.cityArray,
						that.areaArray
					];
          break;
      }
      // this.$forceUpdate();
    },

    // 省市区 change事件 -- picker 确定事件
    bindMultiPickerChange(e) {
      console.log(e.detail.value);
      var that = this;
      that.provinceID = that.regionArray[0][e.detail.value[0]].id;
      that.cityID = that.regionArray[1][e.detail.value[1]].id;
      that.areaID = that.regionArray[2][e.detail.value[2]].id;
      that.regionIndex = e.detail.value;
      that.provinceName = that.regionArray[0][e.detail.value[0]].area_name;
      that.cityName = that.regionArray[1][e.detail.value[1]].area_name;
      that.areaName = that.regionArray[2][e.detail.value[2]].area_name;
    },


  },
  /**
   *  监听页面加载
   */
  onLoad() {},
  /**
   *  监听页面显示
   */
  onShow() {

		// 渲染地址数据
    this.initRegionData();
  },
};
qd_xbL
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp 省市区联动 使用三个接口进行地址的三联
m0_64622807的博客
05-06 699
uniapp 省市区联动 使用三个接口进行地址的三联
uni-app获取省市区详细位置信息
01-20
效果图 主要是两个功能 一个是可以根据地图搜索定位获取省市区详细地址； 另外一种也可以通过picker省市区选择器来实现手动选择问题; 最后在实现功能的前提下把代码封装了一下,代码如下 /** * 格式化位置 * @param {*} res chooseLocation成功后返回参数 * 格式: { address: 浙江省舟山市定海区昌国路61号 errMsg: chooseLocation:ok latitude: 30.019785 longitude: 122.106927 name: 舟山市定海区人民政府 } */ function
uniapp在引用高德地图实现自定义省市区海量点
最新发布
weixin_52830464的博客
06-05 360
vue在手机端引用高德地图实现自定义省、市、区、项目、设备海量点，根据地图的zoom设置成4-6级是省级别、7-9级是市级别、10-12级是区级别、13和14级是项目级别、15级-15级以上是设备级别。省、市、区、项目的数据，对象的字段是: name、value、latitude、longitude、id。设备的数据，对象的字段是: name、value、latitude、longitude、deviceid。传给后端的字段是地图的被点击海量点的id(areaid)和地图的缩放等级(grade)
uniapp获取当前城市的省市区
qq_39755601的博客
01-06 3762
uniapp获取当前城市经纬度并转换成省市区
uniapp 省市区三级联动
SSophia的博客
07-17 1948
uniapp 省市区三级联动 需求：小程序省市区三级联动，可在子节点存在时选择父节点（也就是说可以在区存在时选择市），同时满足可以根据不同用户权限展示出两级联动（列表无省），一级联动（列表无省市只有区。我用的是uniapp的picker的多列选择器，希望给因同样需求在苦恼的你一些帮助。 （uni-nav-bar为自定义导航栏可忽略） 后端所给结构为树结构，这是部分结构， [ { "id": "3c495cc5-e5c0-4788-b65e-6f7d7179ac4a", "t
uniapp取后台数据实现省市区三级联动
u012673806的博客
11-28 4031
实现这个功能，我们先看官方文档，的picker-view组件，这个案例是再这个组件的基础上做修改而来，还有看一下官方的uni-popup组件，直接操作 1.先下载好popup弹出层插件，下载地址：uni-popup 弹出层 - DCloud 插件市场 下载这个两个，为什么呢，我说明一下，直接下载插件ZIP，里面有组件缺少，不完整，导致其他组件不能使用，这个插件是一整体使用，不能拆分使用，下载好插件ZIP打开是这样的 我们直接打开components文件夹，把里面的所有东西拷贝到你项目的com.
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app实现省市区三级联动的js文件
10-22
本文件是uni-app实现省市区三级联动中的data.js文件，详情见博客：https://whhtjl.blog.csdn.net/article/details/109216246
uni-app中u-picker省市区JS代码
08-23
uni-app中u-picker省市区JS代码
uniapp：H5定位当前省市区街道信息
sunluyi的博客
07-27 3106
uniapp在H5不能获取到省市区街道信息，使用高德地图api，获取省市区街道信息
uni-app picker省市县级联选择
weixin_55201902的博客
06-28 1119
uni-app picker省市县级联选择
uniapp省市区（region.json）
08-03
uniapp省市区（region.json）
前端实现省市区三级联动（jquery+json）
06-26
省市区信息保存在JSON文件和JS文件中，用过jQuery在页面实现三级联动
三级联动的省市区地址选择器
03-16
三级联动的省市区地址选择器
uniapp在H5获取当前定位信息不需要SDK可直接获取城市（包括经纬度省市区和市区编码）_uni如何获取城市定位(1)
2401_84166896的博客
04-15 1270
this.myMap = new qq.maps.Geolocation(“你的key”,海拔准确度 : coords.altitudeAcuracy。title: ‘当前环境无法获取定位信息’,title: ‘当前环境无法获取定位信息’,经度 : coords.longitude。准确度 : coords.accuracy。行进方向 : coords.heading。纬度 : coords.latitude。海拔 : coords.altitude。地面速度 : coords.speed。
uniapp 省市区联动 自定义数据源
weixin_43942866的博客
04-20 650
支持微信小程序 APP上测试通过 数据源采用一次行请求接口返回的所有的省，所有的市，所有的区，其他的省id 市id 区id 对应的改造即可。 isCity：表示是否选择市 isArea：表示是否选择区 所需要的数据格式 新建组件choose-area.vue <template> <uni-popup ref="provincePopup" type="bottom" :maskClick="true"> <view class="pop.
uniapp实现省市区三级级联选择（含地区json文件）
03-28 1520
uni-app实现省市区三级级联选择
省市区 - 接口加载数据
LQS000的博客
03-19 220
解析：https://element.eleme.io/#/zh-CN/component/cascader。通过lazyload来设置加载数据源的方法。
关于uniapp省市区三级联动选择器
Lyn1421的博客
04-28 1403
其次在defaultRegion的监听里把那个region.length==6删掉，把判断条件判断if(region)；2:选择省的时候，市，区自动选择到第1位。选择市时，区自动选到第1位;1.回显时regionId超过六位数时回显失败。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值