Blame view

more/self/fapiao/jss/cityPicker.js 3.29 KB
313ce84a   songchongxian   创建h5 app项目
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
  /**
   *
   * cityPicker.js
   * cityPicker is made by Framework picker component which effects like iOS native select.
   *
   * nzb329@163.com
   *
   * 2017-10-28
   *
   */
  ;
  (function(window, $, undefined) {
  
      /**
       * [getProvince 获取省]
       * @param  {[Object]} regions [省市区数据]
       * @return {[Array]}          [省数组]
       */
      function getProvince(regions) {
  
          return regions['provincesArr'];
      }
  
      /**
       * [getCity 获取市]
       * @param  {[Object]} regions      [省市区数据]
       * @param  {[String]} provinceName [省名]
       * @return {[Array]}               [市数组]
       */
      function getCity(regions, provinceName) {
  
          return regions['provinces'][provinceName]['citiesArr'];
      }
  
      /**
       * [getArea 获取区]
       * @param  {[Object]} regions      [省市区数据]
       * @param  {[String]} provinceName [省名]
       * @param  {[String]} cityName     [市名]
       * @return {[Array]}               [区数组]
       */
      function getArea(regions, provinceName, cityName) {
  
          return regions['provinces'][provinceName]['cities'][cityName]['areasArr'];
  
      }
  
      // 初始化 Framework7
      var myApp = new Framework7();
  
      // 初始化省市区
      var province = getProvince(regions),
          city = getCity(regions, '北京市'),
          area = getArea(regions, '北京市', '北京市');
  
      // 保存 picker 选择的省
      var provinceSelect = '';
  
      // 省市区联动 / Framework7 picker
      var pickerLocation = myApp.picker({
          input: '#location',
          rotateEffect: true,
          toolbarTemplate: '<div class="toolbar">\
                              <div class="toolbar-inner">\
                                  <div class="left">\
                                      <a href="#" class="link close-picker">取消</a>\
                                  </div>\
                                  <div class="right">\
                                      <a href="#" class="link close-picker">完成</a>\
                                  </div>\
                              </div>\
                          </div>',
          cols: [{
                  cssClass: 'f-s-14',
                  width: '33.33%',
                  textAlign: 'left',
                  values: province,
                  onChange: function(picker, province) {
                      if (picker.cols[1].replaceValues) {
                          provinceSelect = province;
                          city = getCity(regions, province);
                          area = getArea(regions, province, city[0]);
                          picker.cols[1].replaceValues(city);
                          picker.cols[2].replaceValues(area);
                      }
                  }
              },
              {
                  cssClass: 'f-s-14',
                  width: '33.33%',
                  textAlign: 'center',
                  values: city,
                  onChange: function(picker, city) {
                      if (picker.cols[2].replaceValues) {
                          area = getArea(regions, provinceSelect, city);
                          picker.cols[2].replaceValues(area);
                      }
                  }
              },
              {
                  cssClass: 'f-s-14',
                  width: '33.33%',
                  textAlign: 'right',
                  values: area,
              }
          ]
      });
  
  
  })(window, jQuery);