index.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. 'use strict';
  2. var __assign =
  3. (this && this.__assign) ||
  4. function () {
  5. __assign =
  6. Object.assign ||
  7. function (t) {
  8. for (var s, i = 1, n = arguments.length; i < n; i++) {
  9. s = arguments[i];
  10. for (var p in s)
  11. if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  12. }
  13. return t;
  14. };
  15. return __assign.apply(this, arguments);
  16. };
  17. Object.defineProperty(exports, '__esModule', { value: true });
  18. var component_1 = require('../common/component');
  19. var shared_1 = require('../picker/shared');
  20. var utils_1 = require('../common/utils');
  21. var EMPTY_CODE = '000000';
  22. component_1.VantComponent({
  23. classes: ['active-class', 'toolbar-class', 'column-class'],
  24. props: __assign(__assign({}, shared_1.pickerProps), {
  25. value: {
  26. type: String,
  27. observer: function (value) {
  28. this.code = value;
  29. this.setValues();
  30. },
  31. },
  32. areaList: {
  33. type: Object,
  34. value: {},
  35. observer: 'setValues',
  36. },
  37. columnsNum: {
  38. type: null,
  39. value: 3,
  40. },
  41. columnsPlaceholder: {
  42. type: Array,
  43. observer: function (val) {
  44. this.setData({
  45. typeToColumnsPlaceholder: {
  46. province: val[0] || '',
  47. city: val[1] || '',
  48. county: val[2] || '',
  49. },
  50. });
  51. },
  52. },
  53. }),
  54. data: {
  55. columns: [{ values: [] }, { values: [] }, { values: [] }],
  56. typeToColumnsPlaceholder: {},
  57. },
  58. mounted: function () {
  59. var _this = this;
  60. utils_1.requestAnimationFrame(function () {
  61. _this.setValues();
  62. });
  63. },
  64. methods: {
  65. getPicker: function () {
  66. if (this.picker == null) {
  67. this.picker = this.selectComponent('.van-area__picker');
  68. }
  69. return this.picker;
  70. },
  71. onCancel: function (event) {
  72. this.emit('cancel', event.detail);
  73. },
  74. onConfirm: function (event) {
  75. var index = event.detail.index;
  76. var value = event.detail.value;
  77. value = this.parseValues(value);
  78. this.emit('confirm', { value: value, index: index });
  79. },
  80. emit: function (type, detail) {
  81. detail.values = detail.value;
  82. delete detail.value;
  83. this.$emit(type, detail);
  84. },
  85. parseValues: function (values) {
  86. var columnsPlaceholder = this.data.columnsPlaceholder;
  87. return values.map(function (value, index) {
  88. if (
  89. value &&
  90. (!value.code || value.name === columnsPlaceholder[index])
  91. ) {
  92. return __assign(__assign({}, value), { code: '', name: '' });
  93. }
  94. return value;
  95. });
  96. },
  97. onChange: function (event) {
  98. var _this = this;
  99. var _a = event.detail,
  100. index = _a.index,
  101. picker = _a.picker,
  102. value = _a.value;
  103. this.code = value[index].code;
  104. this.setValues().then(function () {
  105. _this.$emit('change', {
  106. picker: picker,
  107. values: _this.parseValues(picker.getValues()),
  108. index: index,
  109. });
  110. });
  111. },
  112. getConfig: function (type) {
  113. var areaList = this.data.areaList;
  114. return (areaList && areaList[type + '_list']) || {};
  115. },
  116. getList: function (type, code) {
  117. if (type !== 'province' && !code) {
  118. return [];
  119. }
  120. var typeToColumnsPlaceholder = this.data.typeToColumnsPlaceholder;
  121. var list = this.getConfig(type);
  122. var result = Object.keys(list).map(function (code) {
  123. return {
  124. code: code,
  125. name: list[code],
  126. };
  127. });
  128. if (code != null) {
  129. // oversea code
  130. if (code[0] === '9' && type === 'city') {
  131. code = '9';
  132. }
  133. result = result.filter(function (item) {
  134. return item.code.indexOf(code) === 0;
  135. });
  136. }
  137. if (typeToColumnsPlaceholder[type] && result.length) {
  138. // set columns placeholder
  139. var codeFill =
  140. type === 'province'
  141. ? ''
  142. : type === 'city'
  143. ? EMPTY_CODE.slice(2, 4)
  144. : EMPTY_CODE.slice(4, 6);
  145. result.unshift({
  146. code: '' + code + codeFill,
  147. name: typeToColumnsPlaceholder[type],
  148. });
  149. }
  150. return result;
  151. },
  152. getIndex: function (type, code) {
  153. var compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
  154. var list = this.getList(type, code.slice(0, compareNum - 2));
  155. // oversea code
  156. if (code[0] === '9' && type === 'province') {
  157. compareNum = 1;
  158. }
  159. code = code.slice(0, compareNum);
  160. for (var i = 0; i < list.length; i++) {
  161. if (list[i].code.slice(0, compareNum) === code) {
  162. return i;
  163. }
  164. }
  165. return 0;
  166. },
  167. setValues: function () {
  168. var picker = this.getPicker();
  169. if (!picker) {
  170. return;
  171. }
  172. var code = this.code || this.getDefaultCode();
  173. var provinceList = this.getList('province');
  174. var cityList = this.getList('city', code.slice(0, 2));
  175. var stack = [];
  176. var indexes = [];
  177. var columnsNum = this.data.columnsNum;
  178. if (columnsNum >= 1) {
  179. stack.push(picker.setColumnValues(0, provinceList, false));
  180. indexes.push(this.getIndex('province', code));
  181. }
  182. if (columnsNum >= 2) {
  183. stack.push(picker.setColumnValues(1, cityList, false));
  184. indexes.push(this.getIndex('city', code));
  185. if (cityList.length && code.slice(2, 4) === '00') {
  186. code = cityList[0].code;
  187. }
  188. }
  189. if (columnsNum === 3) {
  190. stack.push(
  191. picker.setColumnValues(
  192. 2,
  193. this.getList('county', code.slice(0, 4)),
  194. false
  195. )
  196. );
  197. indexes.push(this.getIndex('county', code));
  198. }
  199. return Promise.all(stack)
  200. .catch(function () {})
  201. .then(function () {
  202. return picker.setIndexes(indexes);
  203. })
  204. .catch(function () {});
  205. },
  206. getDefaultCode: function () {
  207. var columnsPlaceholder = this.data.columnsPlaceholder;
  208. if (columnsPlaceholder.length) {
  209. return EMPTY_CODE;
  210. }
  211. var countyCodes = Object.keys(this.getConfig('county'));
  212. if (countyCodes[0]) {
  213. return countyCodes[0];
  214. }
  215. var cityCodes = Object.keys(this.getConfig('city'));
  216. if (cityCodes[0]) {
  217. return cityCodes[0];
  218. }
  219. return '';
  220. },
  221. getValues: function () {
  222. var picker = this.getPicker();
  223. if (!picker) {
  224. return [];
  225. }
  226. return this.parseValues(
  227. picker.getValues().filter(function (value) {
  228. return !!value;
  229. })
  230. );
  231. },
  232. getDetail: function () {
  233. var values = this.getValues();
  234. var area = {
  235. code: '',
  236. country: '',
  237. province: '',
  238. city: '',
  239. county: '',
  240. };
  241. if (!values.length) {
  242. return area;
  243. }
  244. var names = values.map(function (item) {
  245. return item.name;
  246. });
  247. area.code = values[values.length - 1].code;
  248. if (area.code[0] === '9') {
  249. area.country = names[1] || '';
  250. area.province = names[2] || '';
  251. } else {
  252. area.province = names[0] || '';
  253. area.city = names[1] || '';
  254. area.county = names[2] || '';
  255. }
  256. return area;
  257. },
  258. reset: function (code) {
  259. this.code = code || '';
  260. return this.setValues();
  261. },
  262. },
  263. });