支付宝小程序 省市区三级联动

最新推荐文章于 2024-08-22 04:09:02 发布
最新推荐文章于 2024-08-22 04:09:02 发布
阅读量894 收藏
点赞数
分类专栏： 小程序 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Kris1995/article/details/109098287
版权 
 <!--级联选择器-->
  <multi-select selectShow="{{selectShow}}" selectValue="{{selectValue}}" list="{{rawCitiesData}}" directoryCode="{{directoryCode}}" onSelectSuccess="onSelectSuccess" onClose="closeSelect"/>
  <!---->

组件部分

select.json

{
  "component": true,
  "usingComponents": {
    "popup": "mini-antui/es/popup/index",
    "tabs": "mini-antui/es/tabs/index",
    "tab-content": "mini-antui/es/tabs/tab-content/index"
  }
}Ï

select.axml

<view>
  <popup show="{{selectShow}}" position="bottom" onClose="onPopupClose" className="picker-popup" disableScroll="{{false}}">
    <view class="btn-action">
      <view class="cancel-btn" data-click="{{isConfirm}}" onTap="onCancel">取消                                                            
      </view>
      <view class="confirm-btn {{isConfirm?'active':'disable'}}" data-click="{{isConfirm}}" onTap="onConfirm">确定                                                            
      </view>
    </view>
    <tabs className="pipick-view-tab" tabBarCls="pick-view-tab-header" activeCls="activeTab" tabBarActiveTextColor="#333333" tabBarBackgroundColor="transparent" tabs="{{selectList}}" swipeable="{{false}}" onTabClick="handleTabClick" activeTab="{{activeTab}}">
      <block a:for="{{selectList}}" a:for-index="idx" a:for-item="itemName">
        <tab-content key="{{idx}}">
          <scroll-view class="pick-view-content" scroll-y="{{true}}" trap-scroll="{{true}}">
            <block a:for="{{itemName.sub}}">
              <view data-key="{{idx}}" data-name="{{item.name}}" data-code="{{item.code}}" data-sub="{{item.sub?item.sub:''}}" class="pick-view-content-item {{selectList[idx].title===item.name?'curret':''}}" onTap="itemSelect">{{item.name}}                                                        
              </view>
            </block>
          </scroll-view>
        </tab-content>
      </block>
    </tabs>
  </popup>
</view>

select.js

  1. 省市区数据全部返回
Component({
  data: {
    isConfirm: false,
    // 确认是否可点击
    selectList: [{
      title: '请选择',
      sub: []
    }],
    // list数据
    activeTab: 0 // 当前tab项

  },
  props: {
    selectShow: false // 选择面板是否展示
  },
  didMount: function didMount() {
    this.setData({
      selectList: [{
        title: '请选择',
        sub: this.props.list
      }]
    });
  },
  didUpdate: function didUpdate(prevProps) {
    if (!prevProps.selectShow && this.props.selectShow && this.props.list != prevProps.list) {
      // console.log('didUpdate', this.props.list)
      this.setData({
        selectList: [
          {
            title: '请选择',
            sub: this.props.list
          }
        ],
        isConfirm: false,
        activeTab: 0
      })
      // console.log(this.data.selectList)
    }
  },
  didUnmount: function didUnmount() { },
  methods: {
    /**
    * 关闭popup
    * @method onPopupClose
    */
    onPopupClose: function onPopupClose() {
      var _this$props2 = this.props,
        selectValue = _this$props2.selectValue,
        list = _this$props2.list;

      if (!selectValue) {
        this.setData({
          isConfirm: false,
          selectList: [{
            title: '请选择',
            sub: list
          }],
          activeTab: 0
        });
      }

      this.props.onClose();
    },

    /**
     * 确认
     * @method onConfirm
     * @param {*} e
     */
    onConfirm: function onConfirm(e) {
      if (e.target.dataset.click) {
        // 点击确定
        var selectList = this.data.selectList;
        var result = [];
        selectList.forEach(function (item) {
          var singleSelect = {
            name: item.title,
            code: item.code,
          };
          result.push(singleSelect);
        });
        console.log('selectList', selectList[selectList.length - 1])
        result.push(selectList[selectList.length - 1].sub[0].TASK_CODE)
        this.props.onSelectSuccess(result);
        this.props.onClose();
      }
    },

    /**
     * 取消
     * @method onCancel
     */
    onCancel: function onCancel() {
      this.props.onClose();
    },

    /**
     * tab切换
     * @method handleTabClick
     * @param {*} index
     */
    handleTabClick: function handleTabClick(_ref) {
      var index = _ref.index;
      // console.log("xxxx", index)
      this.setData({
        activeTab: index
      });
    },

    /**
     * 省市区选择事件
     * @method itemSelect
     * @param {*} e
     */
    itemSelect: function itemSelect(e) {
      var _e$target$dataset = e.target.dataset,
        key = _e$target$dataset.key,
        name = _e$target$dataset.name,
        code = _e$target$dataset.code,
        sub = _e$target$dataset.sub;
      var list = this.props.list;

      if (key === 0) {
        // 第一级数据处理
        if (sub) {
          this.setData({
            selectList: [{
              title: name,
              code: code,
              sub: list
            }, {
              title: '城市',
              sub: sub
            }],
            activeTab: 1,
            isConfirm: false
          });
        } else {
          this.setData({
            selectList: [{
              title: name,
              code: code,
              sub: list
            }],
            isConfirm: true
          });
        }
      }

      if (key === 1) {
        // 第二级数据处理
        if (sub) {
          this.setData({
            selectList: [{
              title: this.data.selectList[0].title,
              code: this.data.selectList[0].code,
              sub: list
            }, {
              title: name,
              code: code,
              sub: this.data.selectList[1].sub
            }, {
              title: '区县',
              sub: sub
            }],
            activeTab: 2,
            isConfirm: false
          });
        } else {
          this.setData({
            selectList: [{
              title: this.data.selectList[0].title,
              code: this.data.selectList[0].code,
              sub: list
            }, {
              title: name,
              code: code,
              sub: this.data.selectList[1].sub
            }],
            activeTab: 1,
            isConfirm: true
          });
        }
      }

      if (key === 2) {
        // 第三级数据处理
        this.setData({
          selectList: [{
            title: this.data.selectList[0].title,
            code: this.data.selectList[0].code,
            sub: list
          }, {
            title: this.data.selectList[1].title,
            code: this.data.selectList[1].code,
            sub: this.data.selectList[1].sub
          }, {
            title: name,
            code: code,
            sub: this.data.selectList[2].sub
          }],
          activeTab: 2,
          isConfirm: true
        });
      }
    }
  }
});
  1. 省市区数据一级级获取
import { getLocation } from '/services/all';

Component({
  data: {
    isConfirm: false, // 确认是否可点击
    selectList: [
      {
        title: '请选择',
        sub: []
      }
    ], // list数据
    activeTab: 0,// 当前tab项
  },
  props: {
    selectShow: false // 选择面板是否展示
  },
  async didMount() {
    // 获取省
    const areares = await getLocation('area', '');
    let rawCitiesData = areares.data.data;
    rawCitiesData.forEach(item => { item.sub = [] })

    this.setData({
      selectList: [
        {
          title: '请选择',
          sub: rawCitiesData
        }
      ]
    });
  },
  async didUpdate(prevProps, prevData) {
    let { selectValue, list } = this.props;
    if (!list.length) {
      list = this.data.selectList
    }

    // console.log(list, 'update')
    // console.log(selectValue, 'update1')

    // 面板状态改变的时候数据的重新渲染
    if (!prevProps.selectShow && this.props.selectShow && selectValue) {
      const selectArray = selectValue.split(' ');
      let selectList = [];
      selectArray.map((item, k) => {

        if (k === 0) {
          const provinces = {
            title: item,
            sub: list
          };
          selectList.push(provinces);
        }
        if (k === 1) {
          list.map((data, index) => {
            if (data.name === selectArray[k - 1]) {
              const city = {
                title: item,
                sub: data.sub
              };
              selectList.push(city);
            }
          });
        }
        if (k === 2) {
          list.map((data, index) => {
            if (data.name === selectArray[k - 2]) {
              data.sub.map((areaData, i) => {
                if (areaData.name === selectArray[k - 1]) {
                  const area = {
                    title: item,
                    sub: areaData.sub
                  };
                  selectList.push(area);
                }
              });
            }
          });
        }
      });

      this.setData({
        // selectList,
        activeTab: selectArray.length - 1
      });
    }
  },
  didUnmount() { },
  methods: {
		/**
	   * 关闭popup
	   * @method onPopupClose
	   */
    async onPopupClose() {
      const { selectValue, list } = this.props;
      if (!selectValue) {
        this.setData({
          isConfirm: false,
          // selectList: [
          //   {
          //     title: '请选择',
          //     // sub: list
          //   }
          // ],
          activeTab: 0
        });
      }
      this.props.onClose();
    },
		/**
		 * 确认
		 * @method onConfirm
		 * @param {*} e
		 */
    async onConfirm(e) {

      if (e.target.dataset.click) {
        // 点击确定
        const { selectList } = this.data;
        let result = [];
        selectList.map((item) => {
          const singleSelect = {
            name: item.title,
            code: item.code
          };
          result.push(singleSelect);
        });
        this.props.onSelectSuccess(result);
        this.props.onClose();
      }
    },
		/**
		 * 取消
		 * @method onCancel
		 */
    onCancel() {
      this.props.onClose();
    },
		/**
		 * tab切换
		 * @method handleTabClick
		 * @param {*} index
		 */
    handleTabClick({ index }) {
      this.setData({
        activeTab: index
      });
    },
		/**
		 * 省市区选择事件
		 * @method itemSelect
		 * @param {*} e
		 */
    async itemSelect(e) {
      const { key, name, code, sub } = e.target.dataset;
      const { list } = this.props;
      // console.log('itemselect', key)
      // console.log(code)
      if (key === 0) { // 第一级数据处理

        // 获取省
        const arearesfirst = await getLocation('area', code);
        let firstArr = arearesfirst.data.data;
        firstArr.forEach(item => { item.sub = [] })
        // console.log(firstArr)
        // console.log(this.data.selectList, 'selectList')
        let selectList = this.data.selectList[0].sub;

        // 获取下标
        const index = selectList.findIndex(item => { return item.code == code })
        if (firstArr.length) {
          this.setData({
            selectList: [
              {
                title: selectList[index].name,
                code,
                sub: this.data.selectList[0].sub
              },
              {
                title: '城市',
                sub: firstArr
              }
            ],
            activeTab: 1,
            isConfirm: false
          });
        } else {
          this.setData({
            selectList: [
              {
                title: selectList[index].name,
                code,
                sub: this.data.selectList[0].sub
              }
            ],
            isConfirm: true
          });
        }
      }
      if (key === 1) { // 第二级数据处理

        // 获取省
        const arearessecond = await getLocation('area', code);

        let secondArr = arearessecond.data.data;
        secondArr.forEach(item => { item.sub = [] })
        if (secondArr.length) {
          this.setData({
            selectList: [
              {
                title: this.data.selectList[0].title,
                code: this.data.selectList[0].code,
                sub: this.data.selectList[0].sub
              },
              {
                title: name,
                code,
                sub: this.data.selectList[1].sub
              },
              {
                title: '区',
                sub: secondArr
              }
            ],
            activeTab: 2,
            isConfirm: false
          });
        } else {
          this.setData({
            selectList: [
              {
                title: this.data.selectList[0].title,
                code: this.data.selectList[0].code,
                sub: this.data.selectList[0].sub
              },
              {
                title: name,
                code,
                sub: this.data.selectList[1].sub
              }
            ],
            activeTab: 1,
            isConfirm: true
          });
        }
      }
      if (key === 2) { // 第三级数据处理
        this.setData({
          selectList: [
            {
              title: this.data.selectList[0].title,
              code: this.data.selectList[0].code,
              sub: this.data.selectList[0].sub
            },
            {
              title: this.data.selectList[1].title,
              code: this.data.selectList[1].code,
              sub: this.data.selectList[1].sub
            },
            {
              title: name,
              code,
              sub: this.data.selectList[2].sub
            }
          ],
          activeTab: 2,
          isConfirm: true
        });
      }
    }
  }
});
支付宝小程序JS省市区三级联动
木易少
10-09 5368
1、citysJSON.js       //地区js文件 var citys = [ { "name": "北京市", "subList": [ { "name": "北京市", "subList": [ { "name": [
支付宝小程序实现省市区三级联动
11-20
本文实例为大家分享了支付宝小程序实现省市区三级联动的具体代码，供大家参考，具体内容如下 背景 最近做的项目 有省市区联动。不仅要传name还要把对应的id发给后台。 支付宝提供的级联有 my.multiLevelSelect 和picker并不能满足需求。 picker 组件不支持多列选择，所以使用 picker-view 组件和Popup配合使用。 实现效果图 数据结构 citys – 城市 areas – 区 当然这是处理之后的，行政区划树 不长这样子。 [{ code:1, name:'北京', areas:[ { code: 101, name:'朝阳区'
支付宝实现省市区三级联动my.multiLevelSelect（附带省市区js数据）
qq_51463650的博客
02-09 2648
支付宝实现省市区三级联动。my.multiLevelSelect 是级联选择功能 API。主要用于选择多级关联数据，例如省市区的信息选择。data数据免费提供，冲冲冲
支付宝小程序组件库开发之省市区三级地址选择器组件
小圣贤君的博客
05-07 3732
支付宝小程序开发文档中并没有提供明确的省市区选择器，不少项目还是有地址的填写需求，根据支付宝小程序现有提供的组件以及api，完全是可以实现填写地址的需求，比如分别获取省市区，通过地图来获取地址等，但是有些人肯定还是想要省市区三级选择器来选择地址范围。 支付宝小程序API中提供了级联选择my.multiLevelSelect，在笔者为之大喜的时候，结果在真机预览的时候，发现数据竟然显示不全，第三列数...
小程序 自定义 省市区三级联动.7z
01-09
这里我们关注的是一个与小程序相关的项目，它实现了自定义的省市区三级联动地址选择。该项目以".7z"压缩包的形式提供，包含了一个针对小程序的解决方案。 首先，我们需要理解小程序是什么。小程序是微信、支付宝等...
支付宝小程序 省市区js
qq_28263801的博客
06-19 314
之前使用正常的省市区json的时候总是会有问题，发现是无用字段太多，然后整理了一份支付宝小程序可用的省市区json，代码如下： 链接：https://pan.baidu.com/s/18HzMmIfJ-8VEUnkeNPIhbA 提取码：w3q5
支付宝小程序实现自定义地区三级联动
w_minx的博客
09-21 1353
支付宝小程序自定义地区三级联动 场景数据结构： [{ "id": 110000, "name": "北京市", "children": [{ "id": "110100", "name": "北京市", "children": [{ "id": "110101", "name": "东城区" }] }] }] view <pop
【uniapp】省市区 三级联动 手机端 picker，支付宝小程序省市区
AAAXiaoApple的博客
01-17 1280
uniapp 做省市区三级联动
支付宝小程序实现四级联动
12-06
支付宝小程序实现省市区县四级联动，由于官方只提供到三级，甲方sz还必须要四级，挺好的周末，在家敲代码。兴奋之情溢于言表，好东西分享给大家，支付宝小程序的小白，第一次在优快云上发文章。多谢支持。（注意：我的省市区县不是全国的数据，只有几个省的）
taro-picker:微信小程序基于Taro 框架开发的日期时间选择器(date-time-picker)，可实现类似微信提醒的功能
05-14
基于 Taro 实现的时间选择器 本项目基于 pickerView、pickerViewColumn 来自定义了一个选择器用于日期和时间在用一个组件中选择完成。项目使用 taro 框架，也可实现类似微信提醒的时间选择器 简介 本项目所实现的组件拥有灵活的配置项可轻松实现如下的时间选择功能： 年月日时分秒全部支持 类似微信提醒中的今天、x 月 x 日 明天、x 月 x 日 后天、x 月 x 日 周一...等时间选择 一个周期内的某几个时间点选择 (如一天内的 8 点、12 点、16 点) 一个周期内的固定间隔时间 (如 10 分、20 分、30 分、40 分)等 配合时间偏移属性(offset)支持默认时间选取下个整点或整十分等 模仿了微信默认的确认取消按钮，和微信的选择器保持体验一致，并通过 props 和父组件交互 最新的版本组件利用了来代替 moment-mini，得益于 day.js
支付宝小程序自定义组件省市区三联动
lannieZ的博客
03-19 602
自定义组件 // addressPicker.axml <view class="address-picker" a:if="{{visible}}"> <view class="picker-box"> <view class="btn-box"> <text class="cancel-btn" catchTap="clic...
支付宝小程序 使用uView实现省市区三级联动的坑
烊烊的博客
03-16 2378
第一次使用uView就遇到了坑！！
一二三级联动
Miss_ZM的博客
05-27 2446
values目录下style中添加     -     @android:anim/fade_in     @android:anim/fade_out //倒入类framework //导入包fastjson-1.2.11 //调用时的方法----也有其他方法 private Calendar calendar = Calendar.ge
级联数据获取方案
最新发布
weixin_37031083的博客
08-22 58
背景，分布式系统中，我们需要数据级联，很多时候拿到的是userId或者List,然后返回给前端展示的时候需要id对应的一些其他信息比如昵称。为啥我们只有id，没有直接查询出来这些信息呢？可能是表关联太多，性能低。也可能是对应的数据在另外的服务上面，没法用表关联。首先说一句，通过id 轮询查询 附加信息是被禁用的，效率太低。...
支付宝/钉钉小程序地区级联选择组件分享
weixin_53122412的博客
06-10 1570
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数..
使用Picker写出地区选择，选省市区
happy_girl_yes的博客
08-31 1859
uni-app使用Picker写出地区选择，选省市区
基于taro picker 封装的多级联动选择器
m0_52452766的博客
08-29 2230
因项目需求，需要做一个省市区街的四级联动，项目用的组件为taro的picker，奈何移动端与pc端共用一个接口，返回的数据并不是picker想要的数据结构（省级只有湖北省，有些区域下面无街道），因此基于picker再次封装。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值