index.js 10 KB

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