DealerSelect2组件，根据定位信息自动选择省、市、自进的门店。定位中的省、市显示在第一个位置，并且标注“当前地区”自动传递最近门店选项

安装

新项目用npm init -y命令初始化一下

安装依赖组件

npm install mini-ali-ui --save

安装

npm i dealerselect2

使用说法

// ***.json
{
  "usingComponents": {
    "dealer-select2": "dealerselect2"
  }
}

基本用法

  <dealer-select2 show="{{showTop}}" location="{{location}}" provinceList="{{provinceList}}" cityList="{{cityList}}" dealerList="{{dealerList}}" onClose="onPopupClose" onChange="selectStore" onOpen="openNav"></dealer-select2>

数据格式

省

provinceList: [
  '河南',
  '山东',
  '四川',
  '重庆',
  '西藏',
  '广西',
  '云南',
  '贵州',
  '宁夏',
  '甘肃',
  ...
]

城市

cityList: [
  {
    province: '四川',
    cityList: ['成都', '泸州', '达州', '凉山', '宜宾', '广元', '德阳', '绵阳', '南充'],
  },
  {
    province: '重庆',
    cityList: ['重庆'],
  },
  {
    province: '西藏',
    cityList: ['拉萨'],
  },
  {
    province: '广西',
    cityList: ['南宁', '柳州', '钦州'],
  },
  {
    province: '云南',
    cityList: ['文山', '红河', '普洱', '临沧', '昭通', '保山', '曲靖', '昆明', '玉溪'],
  },
  ...
]

门店

dealerList: [
  {
    city: '驻马店',
    dealerList: [
      {
        province: '河南',
        city: '驻马店',
        district: '驿城区',
        region: '中原大区',
        dealer: '驻马店骏裕通（驿城）',
        address: '驻马店市驿城区置地大道与兴业大道交叉口长仑汽车城上汽大通骏裕通店',
        longitude: 119.692138,
        latitude: 29.150114,
      },
    ],
  },
  {
    city: '郑州',
    dealerList: [
      {
        province: '河南',
        city: '郑州',
        district: '管城回族区',
        region: '中原大区',
        dealer: '郑州中盛合（郑州）',
        address: '郑州市经开区文治路与鼎尚路交叉口云时代广场向北20米',
        longitude: 119.692138,
        latitude: 29.150114,
      },
      {
        province: '河南',
        city: '郑州',
        district: '惠济区',
        region: '中原大区',
        dealer: '郑州广华（惠济）',
        address: '河南省郑州市金水区北三环路15-3',
        longitude: 119.692138,
        latitude: 29.150114,
      },
      {
        province: '河南',
        city: '郑州',
        district: '中原区',
        region: '中原大区',
        dealer: '郑州宜丰（中原）',
        address: '河南省郑州市大中原汽贸城中原西路',
        longitude: 119.692138,
        latitude: 29.150114,
      },
      {
        province: '河南',
        city: '郑州',
        district: '管城回族区',
        region: '中原大区',
        dealer: '郑州海益通（管城）',
        address: '河南省郑州市经北六路第五大街交叉口往西20米路北',
        longitude: 119.692138,
        latitude: 29.150114,
      },
      {
        province: '河南',
        city: '郑州',
        district: '管城回族区',
        region: '中原大区',
        dealer: '郑州合和（管城）',
        address:
          '河南自贸试验区郑州片区（郑东）汉风路与潭南街交叉口华丰国际汽车园上汽大通4S店',
        longitude: 119.692138,
        latitude: 29.150114,
      },
    ],
  },
  ...
]

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :---| :--- | :-- | :--- | :--- | | show | 显示 | boolean | true/false | false | | title | 标题 | string | - | - | | provinceList | 省级数据列表 | array | - | - | | cityList | 城市数据列表 | array | - | - | | dealerList | 门店数据列表 | array | - | - | | location | 位置信息(用户) | object | - | - | | closeIcon | 关闭图标 | string | - | - |

事件

| 事件名称 | 说明 | 回调参数 | | :---| :--- | :-- | | onChange | 选中值发生变化时触发 | 目前的选中值 | | onOpen | 打开导航 | | | onClose | 关闭面板 | - |