小程序省市级联组件使用

胡斌附体2025-08-08 8:32

背景。uni-data-picker组件用起来不方便。调整后级联效果欠佳，会关闭弹窗需要重新选择。

  • 解决方案。让cursor使用uniapp 原生组件生成懒加载省市级联
js 复制代码 
<template>
  <view class="picker-cascader">
    <view class="cascader-label">
      <text v-if="required" class="required-mark">*</text>
      <text class="label-text">{{ label }}</text>
    </view>

    <picker
      mode="multiSelector"
      :range="range"
      :value="defaultValue"
      :disabled="disabled || readonly"
      @change="handleChange"
      @cancel="handleCancel"
      @columnchange="handleColumnChange"
      @confirm="handleConfirm">
      <view class="picker-input" :data-disabled="disabled || readonly">
        <text v-if="displayText" class="picker-text">{{ displayText }}</text>
        <text v-else class="picker-placeholder">{{ placeholder }}</text>
        <text class="picker-arrow">></text>
      </view>
    </picker>
  </view>
</template>

<script>
import { getProvinceList, getCityListByProvince, getCountyListByCity } from '@/api/regionApi.js';
import { getProvinceListMock, getCityListByProvinceMock, getCountyListByCityMock } from '@/mock/regionMock.js';

export default {
  name: 'PickerCascader',
  props: {
    /**
     * 标签文本
     */
    label: {
      type: String,
      default: '所在地区'
    },
    /**
     * 绑定的值，支持字符串格式 "provinceCode,cityCode,countyCode" 或对象格式 {provinceCode: "110000", cityCode: "110100", countyCode: "110101"}
     */
    regionStr: {
      type: [String, Object],
      default: ''
    },
    /**
     * 占位符文本
     */
    placeholder: {
      type: String,
      default: '请选择省市区'
    },
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 是否只读
     */
    readonly: {
      type: Boolean,
      default: false
    },
    /**
     * 最大选择级数，支持2-3级
     */
    maxLevel: {
      type: Number,
      default: 3,
      validator: function (value) {
        return value >= 2 && value <= 3;
      }
    },
    /**
     * 是否必填
     */
    required: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // picker的range数据，格式为二维数组
      range: [],
      // picker的value数据，格式为数组，表示每列选中的索引
      defaultValue: [0, 0, 0],
      // 省份数据
      provinces: [],
      // 城市数据缓存，格式为 {provinceCode: cities}
      cityCache: {},
      // 县级数据缓存，格式为 {cityCode: counties}
      countyCache: {},
      // 当前选中的编码
      selectedCodes: ['', '', ''],
      // 当前选中的文本
      selectedTexts: ['', '', ''],
      // 是否正在加载数据
      loading: false
    };
  },
  computed: {
    /**
     * 显示文本
     */
    displayText() {
      const texts = this.selectedTexts.filter((text) => text);
      return texts.length > 0 ? texts.join(' ') : '';
    }
  },
  watch: {
    /**
     * 监听value 变化，更新选中值
     */
     regionStr: {
      handler(newVal) {
        console.log('value变化', newVal);
        this.initFromValue(newVal);
      },
      immediate: true
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    /**
     * 初始化数据
     */
    async initData() {
      try {
        this.loading = true;
        console.log('PickerCascader 开始初始化数据...');

        await this.loadProvinces();
        this.initRange();
        this.initFromValue(this.regionStr);

        console.log('PickerCascader 数据初始化完成');
        console.log('省份数据:', this.provinces.length, '个');
        console.log('range数据:', this.range);
      } catch (error) {
        console.error('初始化数据失败:', error);
      } finally {
        this.loading = false;
      }
    },

    /**
     * 加载省份数据
     */
    async loadProvinces() {
      try {
        console.log('开始加载省份数据...');
        const res = await getProvinceList();

        if (res.code === 200 && Array.isArray(res.data)) {
          this.provinces = res.data;
          console.log('从API获取省份数据成功:', this.provinces.length, '个省份');
        } else {
          // 使用mock数据
          console.log('API返回异常，使用mock数据');
          const mockRes = getProvinceListMock();
          this.provinces = mockRes.data;
        }

        console.log('省份数据加载完成:', this.provinces.length, '个省份');
      } catch (error) {
        console.error('获取省份列表失败:', error);
        // 使用mock数据
        const mockRes = getProvinceListMock();
        this.provinces = mockRes.data;
        console.log('使用mock数据，省份数量:', this.provinces.length);
      }
    },

    /**
     * 初始化range数据
     */
    initRange() {
      // 初始化省份列
      const provinceColumn =
        this.provinces && this.provinces.length > 0
          ? this.provinces.map((province) => ({
              text: province.name,
              code: province.code
            }))
          : [];

      // 初始化城市列（空数据，等待选择省份后加载）
      const cityColumn = [];

      // 初始化县级列（空数据，等待选择城市后加载）
      const countyColumn = [];

      this.range = [provinceColumn, cityColumn, countyColumn];
    },

    /**
     * 从value初始化选中值
     */
    initFromValue(value) {
      if (!value) {
        this.resetSelection();
        return;
      }

      let provinceCode = '';
      let cityCode = '';
      let countyCode = '';

      if (typeof value === 'string') {
        const codes = value.split(',');
        provinceCode = codes[0] || '';
        cityCode = codes[1] || '';
        countyCode = codes[2] || '';
      } else if (typeof value === 'object') {
        provinceCode = value.provinceCode || '';
        cityCode = value.cityCode || '';
        countyCode = value.countyCode || '';
      }

      this.setSelectionByCodes(provinceCode, cityCode, countyCode);
    },

    /**
     * 根据编码设置选中值
     */
    async setSelectionByCodes(provinceCode, cityCode, countyCode) {
      if (!provinceCode) {
        this.resetSelection();
        return;
      }

      // 查找省份索引
      const provinceIndex = this.provinces.findIndex((p) => p.code === provinceCode);
      if (provinceIndex === -1) {
        this.resetSelection();
        return;
      }

      // 设置省份选中
      this.value[0] = provinceIndex;
      this.selectedCodes[0] = provinceCode;
      this.selectedTexts[0] = this.provinces[provinceIndex].name;

      // 加载城市数据
      await this.loadCities(provinceCode, provinceIndex);

      if (cityCode && this.range[1] && this.range[1].length > 0) {
        // 查找城市索引
        const cities = this.range[1];
        const cityIndex = cities.findIndex((c) => c.code === cityCode);
        if (cityIndex !== -1) {
          this.value[1] = cityIndex;
          this.selectedCodes[1] = cityCode;
          this.selectedTexts[1] = cities[cityIndex].text;

          // 如果是三级联动，加载县级数据
          if (this.maxLevel === 3) {
            await this.loadCounties(cityCode, provinceIndex, cityIndex);

            if (countyCode && this.range[2] && this.range[2].length > 0) {
              // 查找县级索引
              const counties = this.range[2];
              const countyIndex = counties.findIndex((c) => c.code === countyCode);
              if (countyIndex !== -1) {
                this.value[2] = countyIndex;
                this.selectedCodes[2] = countyCode;
                this.selectedTexts[2] = counties[countyIndex].text;
              }
            }
          }
        }
      }

      // 强制更新
      this.$forceUpdate();
    },

    /**
     * 重置选中值
     */
    resetSelection() {
      this.value = [0, 0, 0];
      this.selectedCodes = ['', '', ''];
      this.selectedTexts = ['', '', ''];
    },

    /**
     * 加载城市数据
     */
    async loadCities(provinceCode, provinceIndex) {
      console.log('开始加载城市数据，省份编码:', provinceCode);

      // 检查缓存
      if (this.cityCache[provinceCode]) {
        console.log('使用缓存的城市数据:', this.cityCache[provinceCode].length, '个城市');
        this.range[1] = this.cityCache[provinceCode];
        return;
      }

      try {
        const res = await getCityListByProvince(provinceCode);
        let cities = [];

        if (res.code === 200 && Array.isArray(res.data)) {
          cities = res.data;
          console.log('从API获取城市数据成功:', cities.length, '个城市');
        } else {
          // 使用mock数据
          console.log('API返回异常，使用mock数据');
          const mockRes = getCityListByProvinceMock(provinceCode);
          cities = mockRes.data;
        }

        // 转换为picker所需格式
        const cityColumn =
          cities && cities.length > 0
            ? cities.map((city) => ({
                text: city.name,
                code: city.code
              }))
            : [];

        console.log('城市数据转换完成:', cityColumn.length, '个城市');

        // 缓存数据
        this.cityCache[provinceCode] = cityColumn;
        this.range[1] = cityColumn;

        // 重置后续列的选中值
        this.value[1] = 0;
        this.value[2] = 0;
        this.selectedCodes[1] = '';
        this.selectedCodes[2] = '';
        this.selectedTexts[1] = '';
        this.selectedTexts[2] = '';

        // 清空县级数据
        this.range[2] = [];

        console.log('城市数据加载完成，range更新为:', this.range);

        // 强制更新
        this.$forceUpdate();
      } catch (error) {
        console.error('获取城市列表失败:', error);
        // 使用mock数据
        const mockRes = getCityListByProvinceMock(provinceCode);
        const cities = mockRes.data;
        const cityColumn =
          cities && cities.length > 0
            ? cities.map((city) => ({
                text: city.name,
                code: city.code
              }))
            : [];
        this.cityCache[provinceCode] = cityColumn;
        this.range[1] = cityColumn;
        console.log('使用mock数据，城市数量:', cityColumn.length);
        this.$forceUpdate();
      }
    },

    /**
     * 加载县级数据
     */
    async loadCounties(cityCode, provinceIndex, cityIndex) {
      console.log('开始加载县级数据，城市编码:', cityCode);

      // 检查缓存
      if (this.countyCache[cityCode]) {
        console.log('使用缓存的县级数据:', this.countyCache[cityCode].length, '个县区');
        this.range[2] = this.countyCache[cityCode];
        return;
      }

      try {
        const res = await getCountyListByCity(cityCode);
        let counties = [];

        if (res.code === 200 && Array.isArray(res.data)) {
          counties = res.data;
          console.log('从API获取县级数据成功:', counties.length, '个县区');
        } else {
          // 使用mock数据
          console.log('API返回异常，使用mock数据');
          const mockRes = getCountyListByCityMock(cityCode);
          counties = mockRes.data;
        }

        // 转换为picker所需格式
        const countyColumn =
          counties && counties.length > 0
            ? counties.map((county) => ({
                text: county.name,
                code: county.code
              }))
            : [];

        console.log('县级数据转换完成:', countyColumn.length, '个县区');

        // 缓存数据
        this.countyCache[cityCode] = countyColumn;
        this.range[2] = countyColumn;

        // 重置县级选中值
        this.value[2] = 0;
        this.selectedCodes[2] = '';
        this.selectedTexts[2] = '';

        console.log('县级数据加载完成，range更新为:', this.range);

        // 强制更新
        this.$forceUpdate();
      } catch (error) {
        console.error('获取县级列表失败:', error);
        // 使用mock数据
        const mockRes = getCountyListByCityMock(cityCode);
        const counties = mockRes.data;
        const countyColumn =
          counties && counties.length > 0
            ? counties.map((county) => ({
                text: county.name,
                code: county.code
              }))
            : [];
        this.countyCache[cityCode] = countyColumn;
        this.range[2] = countyColumn;
        console.log('使用mock数据，县级数量:', countyColumn.length);
        this.$forceUpdate();
      }
    },

    /**
     * 处理列变化事件
     */
    async handleColumnChange(e) {
      const { column, value } = e.detail;

      console.log('列变化事件:', { column, value, currentRange: this.range });

      // 更新选中索引
      this.value[column] = value;

      if (column === 0) {
        // 省份变化
        if (this.range[0] && this.range[0][value]) {
          const provinceCode = this.range[0][value].code;
          const provinceName = this.range[0][value].text;

          console.log('选择省份:', { provinceCode, provinceName });

          this.selectedCodes[0] = provinceCode;
          this.selectedTexts[0] = provinceName;

          // 加载城市数据
          await this.loadCities(provinceCode, value);
        }

        // 重置后续列的选中值
        this.value[1] = 0;
        this.value[2] = 0;
        this.selectedCodes[1] = '';
        this.selectedCodes[2] = '';
        this.selectedTexts[1] = '';
        this.selectedTexts[2] = '';

        // 清空县级数据
        this.range[2] = [];
      } else if (column === 1) {
        // 城市变化
        if (this.range[1] && this.range[1][value]) {
          const cityCode = this.range[1][value].code;
          const cityName = this.range[1][value].text;

          console.log('选择城市:', { cityCode, cityName });

          this.selectedCodes[1] = cityCode;
          this.selectedTexts[1] = cityName;

          // 如果是三级联动，加载县级数据
          if (this.maxLevel === 3) {
            await this.loadCounties(cityCode, this.value[0], value);
          }
        }

        // 重置县级选中值
        this.value[2] = 0;
        this.selectedCodes[2] = '';
        this.selectedTexts[2] = '';
      } else if (column === 2) {
        // 县级变化
        if (this.range[2] && this.range[2][value]) {
          const countyCode = this.range[2][value].code;
          const countyName = this.range[2][value].text;

          console.log('选择县级:', { countyCode, countyName });

          this.selectedCodes[2] = countyCode;
          this.selectedTexts[2] = countyName;
        }
      }

      // 强制更新
      this.$forceUpdate();
    },

    /**
     * 处理选择确认事件
     */
    handleChange(e) {
      const { value } = e.detail;
      console.log('选择确认事件:', { value, range: this.range });

      // 更新选中索引
      this.value = value;

      // 更新选中编码和文本
      for (let i = 0; i < value.length; i++) {
        if (this.range[i] && this.range[i][value[i]] && value[i] >= 0) {
          this.selectedCodes[i] = this.range[i][value[i]].code;
          this.selectedTexts[i] = this.range[i][value[i]].text;
        }
      }

      // 触发change事件
      const result = this.formatResult();
      console.log('最终结果:', result);
      this.$emit('change', result);
    },

    /**
     * 处理确认事件
     */
    handleConfirm(e) {
      console.log('确认事件:', e);
      // 这里可以添加额外的确认逻辑
    },

    /**
     * 处理取消事件
     */
    handleCancel() {
      this.$emit('cancel');
    },

    /**
     * 格式化结果
     */
    formatResult() {
      const codes = this.selectedCodes.filter((code) => code);
      const texts = this.selectedTexts.filter((text) => text);

      // 根据maxLevel返回相应格式
      if (this.maxLevel === 2) {
        return codes.slice(0, 2).join(',');
      } else {
        return codes.join(',');
      }
    }
  }
};
</script>

<style scoped>
.picker-cascader {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.cascader-label {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.required-mark {
  color: #ff4757;
  font-size: 28rpx;
  margin-right: 8rpx;
  font-weight: bold;
}

.label-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.picker-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
  border: 2rpx solid #e1e5e9;
  border-radius: 8rpx;
  background-color: #fff;
  transition: all 0.3s ease;
}

.picker-input:active {
  border-color: #2979ff;
  box-shadow: 0 0 0 4rpx rgba(41, 121, 255, 0.1);
}

.picker-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.picker-placeholder {
  font-size: 28rpx;
  color: #999;
  flex: 1;
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
  transform: rotate(90deg);
}

/* 禁用状态 */
.picker-input[data-disabled='true'] {
  background-color: #f8f9fa;
  color: #999;
  cursor: not-allowed;
}

.picker-input[data-disabled='true'] .picker-text,
.picker-input[data-disabled='true'] .picker-placeholder {
  color: #999;
}
</style>
相关推荐
阿彬学java43 分钟前
Charles抓包微信小程序请求响应数据
微信小程序·小程序
傻傻有内涵的我1 小时前
【微信小程序】分别解决H5的跨域代理问题 和小程序正常不需要代理问题
微信小程序·小程序
必然秃头1 小时前
微信小程序SSE替代方案实战
微信小程序·小程序
再学一点就睡1 小时前
深入理解 Redux：从手写核心到现代实践（附 RTK 衔接）
前端·redux
天天进步20152 小时前
从零到一：现代化充电桩App的React前端参考
前端·react.js·前端框架
柯南二号2 小时前
【大前端】React Native Flex 布局详解
前端·react native·react.js
龙在天3 小时前
npm run dev 做了什么❓小白也能看懂
前端
hellokai4 小时前
React Native新架构源码分析
android·前端·react native
li理4 小时前
鸿蒙应用开发完全指南：深度解析UIAbility、页面与导航的生命周期
前端·harmonyos
去伪存真4 小时前
因为rolldown-vite比vite打包速度快, 所以必须把rolldown-vite在项目中用起来🤺
前端
热门推荐
01UV安装并设置国内源02不再让Windows更新！&Edge游戏助手卸载及关闭自动更新03KGG转MP3工具|非KGM文件|解密音频04Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code05【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）06Linux下V2Ray安装配置指南07Claude Code VSCode集成开发指南：AI编程助手完整配置08突破百度网盘的下载限速，两种方法教会你【超详细】09jdk21下载、安装（Windows、Linux、macOS）10使用国内镜像网站在线下载安装Qt（解决官网慢的问题）——Qt