index.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  6. var _utils = require("../utils");
  7. var _mobile = require("../utils/validate/mobile");
  8. var _area = _interopRequireDefault(require("../area"));
  9. var _cell = _interopRequireDefault(require("../cell"));
  10. var _field = _interopRequireDefault(require("../field"));
  11. var _popup = _interopRequireDefault(require("../popup"));
  12. var _toast = _interopRequireDefault(require("../toast"));
  13. var _button = _interopRequireDefault(require("../button"));
  14. var _dialog = _interopRequireDefault(require("../dialog"));
  15. var _Detail = _interopRequireDefault(require("./Detail"));
  16. var _switch = _interopRequireDefault(require("../switch"));
  17. // Utils
  18. // Components
  19. var _createNamespace = (0, _utils.createNamespace)('address-edit'),
  20. createComponent = _createNamespace[0],
  21. bem = _createNamespace[1],
  22. t = _createNamespace[2];
  23. var defaultData = {
  24. name: '',
  25. tel: '',
  26. country: '',
  27. province: '',
  28. city: '',
  29. county: '',
  30. areaCode: '',
  31. postalCode: '',
  32. addressDetail: '',
  33. isDefault: false
  34. };
  35. function isPostal(value) {
  36. return /^\d{6}$/.test(value);
  37. }
  38. var _default2 = createComponent({
  39. props: {
  40. areaList: Object,
  41. isSaving: Boolean,
  42. isDeleting: Boolean,
  43. validator: Function,
  44. showDelete: Boolean,
  45. showPostal: Boolean,
  46. searchResult: Array,
  47. telMaxlength: [Number, String],
  48. showSetDefault: Boolean,
  49. saveButtonText: String,
  50. areaPlaceholder: String,
  51. deleteButtonText: String,
  52. showSearchResult: Boolean,
  53. showArea: {
  54. type: Boolean,
  55. default: true
  56. },
  57. showDetail: {
  58. type: Boolean,
  59. default: true
  60. },
  61. disableArea: Boolean,
  62. detailRows: {
  63. type: [Number, String],
  64. default: 1
  65. },
  66. detailMaxlength: {
  67. type: [Number, String],
  68. default: 200
  69. },
  70. addressInfo: {
  71. type: Object,
  72. default: function _default() {
  73. return (0, _extends2.default)({}, defaultData);
  74. }
  75. },
  76. telValidator: {
  77. type: Function,
  78. default: _mobile.isMobile
  79. },
  80. postalValidator: {
  81. type: Function,
  82. default: isPostal
  83. },
  84. areaColumnsPlaceholder: {
  85. type: Array,
  86. default: function _default() {
  87. return [];
  88. }
  89. }
  90. },
  91. data: function data() {
  92. return {
  93. data: {},
  94. showAreaPopup: false,
  95. detailFocused: false,
  96. errorInfo: {
  97. tel: '',
  98. name: '',
  99. areaCode: '',
  100. postalCode: '',
  101. addressDetail: ''
  102. }
  103. };
  104. },
  105. computed: {
  106. areaListLoaded: function areaListLoaded() {
  107. return (0, _utils.isObject)(this.areaList) && Object.keys(this.areaList).length;
  108. },
  109. areaText: function areaText() {
  110. var _this$data = this.data,
  111. country = _this$data.country,
  112. province = _this$data.province,
  113. city = _this$data.city,
  114. county = _this$data.county,
  115. areaCode = _this$data.areaCode;
  116. if (areaCode) {
  117. var arr = [country, province, city, county];
  118. if (province && province === city) {
  119. arr.splice(1, 1);
  120. }
  121. return arr.filter(function (text) {
  122. return text;
  123. }).join('/');
  124. }
  125. return '';
  126. },
  127. // hide bottom field when use search && detail get focused
  128. hideBottomFields: function hideBottomFields() {
  129. var searchResult = this.searchResult;
  130. return searchResult && searchResult.length && this.detailFocused;
  131. }
  132. },
  133. watch: {
  134. addressInfo: {
  135. handler: function handler(val) {
  136. this.data = (0, _extends2.default)({}, defaultData, val);
  137. this.setAreaCode(val.areaCode);
  138. },
  139. deep: true,
  140. immediate: true
  141. },
  142. areaList: function areaList() {
  143. this.setAreaCode(this.data.areaCode);
  144. }
  145. },
  146. methods: {
  147. onFocus: function onFocus(key) {
  148. this.errorInfo[key] = '';
  149. this.detailFocused = key === 'addressDetail';
  150. this.$emit('focus', key);
  151. },
  152. onChangeDetail: function onChangeDetail(val) {
  153. this.data.addressDetail = val;
  154. this.$emit('change-detail', val);
  155. },
  156. onAreaConfirm: function onAreaConfirm(values) {
  157. values = values.filter(function (value) {
  158. return !!value;
  159. });
  160. if (values.some(function (value) {
  161. return !value.code;
  162. })) {
  163. (0, _toast.default)(t('areaEmpty'));
  164. return;
  165. }
  166. this.showAreaPopup = false;
  167. this.assignAreaValues();
  168. this.$emit('change-area', values);
  169. },
  170. assignAreaValues: function assignAreaValues() {
  171. var area = this.$refs.area;
  172. if (area) {
  173. var detail = area.getArea();
  174. detail.areaCode = detail.code;
  175. delete detail.code;
  176. (0, _extends2.default)(this.data, detail);
  177. }
  178. },
  179. onSave: function onSave() {
  180. var _this = this;
  181. var items = ['name', 'tel'];
  182. if (this.showArea) {
  183. items.push('areaCode');
  184. }
  185. if (this.showDetail) {
  186. items.push('addressDetail');
  187. }
  188. if (this.showPostal) {
  189. items.push('postalCode');
  190. }
  191. var isValid = items.every(function (item) {
  192. var msg = _this.getErrorMessage(item);
  193. if (msg) {
  194. _this.errorInfo[item] = msg;
  195. }
  196. return !msg;
  197. });
  198. if (isValid && !this.isSaving) {
  199. this.$emit('save', this.data);
  200. }
  201. },
  202. getErrorMessage: function getErrorMessage(key) {
  203. var value = String(this.data[key] || '').trim();
  204. if (this.validator) {
  205. var message = this.validator(key, value);
  206. if (message) {
  207. return message;
  208. }
  209. }
  210. switch (key) {
  211. case 'name':
  212. return value ? '' : t('nameEmpty');
  213. case 'tel':
  214. return this.telValidator(value) ? '' : t('telInvalid');
  215. case 'areaCode':
  216. return value ? '' : t('areaEmpty');
  217. case 'addressDetail':
  218. return value ? '' : t('addressEmpty');
  219. case 'postalCode':
  220. return value && !this.postalValidator(value) ? t('postalEmpty') : '';
  221. }
  222. },
  223. onDelete: function onDelete() {
  224. var _this2 = this;
  225. _dialog.default.confirm({
  226. title: t('confirmDelete')
  227. }).then(function () {
  228. _this2.$emit('delete', _this2.data);
  229. }).catch(function () {
  230. _this2.$emit('cancel-delete', _this2.data);
  231. });
  232. },
  233. // get values of area component
  234. getArea: function getArea() {
  235. return this.$refs.area ? this.$refs.area.getValues() : [];
  236. },
  237. // set area code to area component
  238. setAreaCode: function setAreaCode(code) {
  239. this.data.areaCode = code || '';
  240. if (code) {
  241. this.$nextTick(this.assignAreaValues);
  242. }
  243. },
  244. // @exposed-api
  245. setAddressDetail: function setAddressDetail(value) {
  246. this.data.addressDetail = value;
  247. },
  248. onDetailBlur: function onDetailBlur() {
  249. var _this3 = this;
  250. // await for click search event
  251. setTimeout(function () {
  252. _this3.detailFocused = false;
  253. });
  254. },
  255. genSetDefaultCell: function genSetDefaultCell(h) {
  256. var _this4 = this;
  257. if (this.showSetDefault) {
  258. var slots = {
  259. 'right-icon': function rightIcon() {
  260. return h(_switch.default, {
  261. "attrs": {
  262. "size": "24"
  263. },
  264. "on": {
  265. "change": function change(event) {
  266. _this4.$emit('change-default', event);
  267. }
  268. },
  269. "model": {
  270. value: _this4.data.isDefault,
  271. callback: function callback($$v) {
  272. _this4.$set(_this4.data, "isDefault", $$v);
  273. }
  274. }
  275. });
  276. }
  277. };
  278. return h(_cell.default, {
  279. "directives": [{
  280. name: "show",
  281. value: !this.hideBottomFields
  282. }],
  283. "attrs": {
  284. "center": true,
  285. "title": t('defaultAddress')
  286. },
  287. "class": bem('default'),
  288. "scopedSlots": slots
  289. });
  290. }
  291. return h();
  292. }
  293. },
  294. render: function render(h) {
  295. var _this5 = this;
  296. var data = this.data,
  297. errorInfo = this.errorInfo,
  298. disableArea = this.disableArea,
  299. hideBottomFields = this.hideBottomFields;
  300. var onFocus = function onFocus(name) {
  301. return function () {
  302. return _this5.onFocus(name);
  303. };
  304. };
  305. return h("div", {
  306. "class": bem()
  307. }, [h("div", {
  308. "class": bem('fields')
  309. }, [h(_field.default, {
  310. "attrs": {
  311. "clearable": true,
  312. "label": t('name'),
  313. "placeholder": t('namePlaceholder'),
  314. "errorMessage": errorInfo.name
  315. },
  316. "on": {
  317. "focus": onFocus('name')
  318. },
  319. "model": {
  320. value: data.name,
  321. callback: function callback($$v) {
  322. _this5.$set(data, "name", $$v);
  323. }
  324. }
  325. }), h(_field.default, {
  326. "attrs": {
  327. "clearable": true,
  328. "type": "tel",
  329. "label": t('tel'),
  330. "maxlength": this.telMaxlength,
  331. "placeholder": t('telPlaceholder'),
  332. "errorMessage": errorInfo.tel
  333. },
  334. "on": {
  335. "focus": onFocus('tel')
  336. },
  337. "model": {
  338. value: data.tel,
  339. callback: function callback($$v) {
  340. _this5.$set(data, "tel", $$v);
  341. }
  342. }
  343. }), h(_field.default, {
  344. "directives": [{
  345. name: "show",
  346. value: this.showArea
  347. }],
  348. "attrs": {
  349. "readonly": true,
  350. "clickable": !disableArea,
  351. "label": t('area'),
  352. "placeholder": this.areaPlaceholder || t('areaPlaceholder'),
  353. "errorMessage": errorInfo.areaCode,
  354. "rightIcon": !disableArea ? 'arrow' : null,
  355. "value": this.areaText
  356. },
  357. "on": {
  358. "focus": onFocus('areaCode'),
  359. "click": function click() {
  360. _this5.$emit('click-area');
  361. _this5.showAreaPopup = !disableArea;
  362. }
  363. }
  364. }), h(_Detail.default, {
  365. "directives": [{
  366. name: "show",
  367. value: this.showDetail
  368. }],
  369. "attrs": {
  370. "focused": this.detailFocused,
  371. "value": data.addressDetail,
  372. "errorMessage": errorInfo.addressDetail,
  373. "detailRows": this.detailRows,
  374. "detailMaxlength": this.detailMaxlength,
  375. "searchResult": this.searchResult,
  376. "showSearchResult": this.showSearchResult
  377. },
  378. "on": {
  379. "focus": onFocus('addressDetail'),
  380. "blur": this.onDetailBlur,
  381. "input": this.onChangeDetail,
  382. "select-search": function selectSearch(event) {
  383. _this5.$emit('select-search', event);
  384. }
  385. }
  386. }), this.showPostal && h(_field.default, {
  387. "directives": [{
  388. name: "show",
  389. value: !hideBottomFields
  390. }],
  391. "attrs": {
  392. "type": "tel",
  393. "maxlength": "6",
  394. "label": t('postal'),
  395. "placeholder": t('postal'),
  396. "errorMessage": errorInfo.postalCode
  397. },
  398. "on": {
  399. "focus": onFocus('postalCode')
  400. },
  401. "model": {
  402. value: data.postalCode,
  403. callback: function callback($$v) {
  404. _this5.$set(data, "postalCode", $$v);
  405. }
  406. }
  407. }), this.slots()]), this.genSetDefaultCell(h), h("div", {
  408. "directives": [{
  409. name: "show",
  410. value: !hideBottomFields
  411. }],
  412. "class": bem('buttons')
  413. }, [h(_button.default, {
  414. "attrs": {
  415. "block": true,
  416. "round": true,
  417. "loading": this.isSaving,
  418. "type": "danger",
  419. "text": this.saveButtonText || t('save')
  420. },
  421. "on": {
  422. "click": this.onSave
  423. }
  424. }), this.showDelete && h(_button.default, {
  425. "attrs": {
  426. "block": true,
  427. "round": true,
  428. "loading": this.isDeleting,
  429. "text": this.deleteButtonText || t('delete')
  430. },
  431. "on": {
  432. "click": this.onDelete
  433. }
  434. })]), h(_popup.default, {
  435. "attrs": {
  436. "round": true,
  437. "position": "bottom",
  438. "lazyRender": false,
  439. "getContainer": "body"
  440. },
  441. "model": {
  442. value: _this5.showAreaPopup,
  443. callback: function callback($$v) {
  444. _this5.showAreaPopup = $$v;
  445. }
  446. }
  447. }, [h(_area.default, {
  448. "ref": "area",
  449. "attrs": {
  450. "value": data.areaCode,
  451. "loading": !this.areaListLoaded,
  452. "areaList": this.areaList,
  453. "columnsPlaceholder": this.areaColumnsPlaceholder
  454. },
  455. "on": {
  456. "confirm": this.onAreaConfirm,
  457. "cancel": function cancel() {
  458. _this5.showAreaPopup = false;
  459. }
  460. }
  461. })])]);
  462. }
  463. });
  464. exports.default = _default2;