index.js 9.7 KB

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