SkuMessages.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _utils = require("../../utils");
  6. var _email = require("../../utils/validate/email");
  7. var _number = require("../../utils/validate/number");
  8. var _cell = _interopRequireDefault(require("../../cell"));
  9. var _field = _interopRequireDefault(require("../../field"));
  10. var _SkuImgUploader = _interopRequireDefault(require("./SkuImgUploader"));
  11. var _SkuDateTimeField = _interopRequireDefault(require("./SkuDateTimeField"));
  12. // Utils
  13. // Components
  14. var _createNamespace = (0, _utils.createNamespace)('sku-messages'),
  15. createComponent = _createNamespace[0],
  16. bem = _createNamespace[1],
  17. t = _createNamespace[2];
  18. var _default2 = createComponent({
  19. props: {
  20. messageConfig: Object,
  21. goodsId: [Number, String],
  22. messages: {
  23. type: Array,
  24. default: function _default() {
  25. return [];
  26. }
  27. }
  28. },
  29. data: function data() {
  30. return {
  31. messageValues: this.resetMessageValues(this.messages)
  32. };
  33. },
  34. watch: {
  35. messages: function messages(val) {
  36. this.messageValues = this.resetMessageValues(val);
  37. }
  38. },
  39. methods: {
  40. resetMessageValues: function resetMessageValues(messages) {
  41. var messageConfig = this.messageConfig;
  42. var _messageConfig$initia = messageConfig.initialMessages,
  43. initialMessages = _messageConfig$initia === void 0 ? {} : _messageConfig$initia;
  44. return (messages || []).map(function (message) {
  45. return {
  46. value: initialMessages[message.name] || ''
  47. };
  48. });
  49. },
  50. getType: function getType(message) {
  51. if (+message.multiple === 1) {
  52. return 'textarea';
  53. }
  54. if (message.type === 'id_no') {
  55. return 'text';
  56. }
  57. return message.datetime > 0 ? 'datetime' : message.type;
  58. },
  59. getMessages: function getMessages() {
  60. var messages = {};
  61. this.messageValues.forEach(function (item, index) {
  62. messages["message_" + index] = item.value;
  63. });
  64. return messages;
  65. },
  66. getCartMessages: function getCartMessages() {
  67. var _this = this;
  68. var messages = {};
  69. this.messageValues.forEach(function (item, index) {
  70. var message = _this.messages[index];
  71. messages[message.name] = item.value;
  72. });
  73. return messages;
  74. },
  75. getPlaceholder: function getPlaceholder(message) {
  76. var type = +message.multiple === 1 ? 'textarea' : message.type;
  77. var map = this.messageConfig.placeholderMap || {};
  78. return message.placeholder || map[type] || t("placeholder." + type);
  79. },
  80. validateMessages: function validateMessages() {
  81. var values = this.messageValues;
  82. for (var i = 0; i < values.length; i++) {
  83. var value = values[i].value;
  84. var message = this.messages[i];
  85. if (value === '') {
  86. // 必填字段的校验
  87. if (String(message.required) === '1') {
  88. var textType = t(message.type === 'image' ? 'upload' : 'fill');
  89. return textType + message.name;
  90. }
  91. } else {
  92. if (message.type === 'tel' && !(0, _number.isNumeric)(value)) {
  93. return t('invalid.tel');
  94. }
  95. if (message.type === 'mobile' && !/^\d{6,20}$/.test(value)) {
  96. return t('invalid.mobile');
  97. }
  98. if (message.type === 'email' && !(0, _email.isEmail)(value)) {
  99. return t('invalid.email');
  100. }
  101. if (message.type === 'id_no' && (value.length < 15 || value.length > 18)) {
  102. return t('invalid.id_no');
  103. }
  104. }
  105. }
  106. },
  107. /**
  108. * The phone number copied from IOS mobile phone address book
  109. * will add spaces and invisible Unicode characters
  110. * which cannot pass the /^\d+$/ verification
  111. * so keep numbers and dots
  112. */
  113. getFormatter: function getFormatter(message) {
  114. return function formatter(value) {
  115. if (message.type === 'mobile' || message.type === 'tel') {
  116. return value.replace(/[^\d.]/g, '');
  117. }
  118. return value;
  119. };
  120. },
  121. genMessage: function genMessage(message, index) {
  122. var _this2 = this;
  123. var h = this.$createElement;
  124. if (message.type === 'image') {
  125. return h(_cell.default, {
  126. "key": this.goodsId + "-" + index,
  127. "attrs": {
  128. "title": message.name,
  129. "required": String(message.required) === '1',
  130. "valueClass": bem('image-cell-value')
  131. },
  132. "class": bem('image-cell')
  133. }, [h(_SkuImgUploader.default, {
  134. "attrs": {
  135. "maxSize": this.messageConfig.uploadMaxSize,
  136. "uploadImg": this.messageConfig.uploadImg
  137. },
  138. "model": {
  139. value: _this2.messageValues[index].value,
  140. callback: function callback($$v) {
  141. _this2.$set(_this2.messageValues[index], "value", $$v);
  142. }
  143. }
  144. }), h("div", {
  145. "class": bem('image-cell-label')
  146. }, [t('imageLabel')])]);
  147. } // 时间和日期使用的vant选择器
  148. var isDateOrTime = ['date', 'time'].indexOf(message.type) > -1;
  149. if (isDateOrTime) {
  150. return h(_SkuDateTimeField.default, {
  151. "attrs": {
  152. "label": message.name,
  153. "required": String(message.required) === '1',
  154. "placeholder": this.getPlaceholder(message),
  155. "type": this.getType(message)
  156. },
  157. "key": this.goodsId + "-" + index,
  158. "model": {
  159. value: _this2.messageValues[index].value,
  160. callback: function callback($$v) {
  161. _this2.$set(_this2.messageValues[index], "value", $$v);
  162. }
  163. }
  164. });
  165. }
  166. return h(_field.default, {
  167. "attrs": {
  168. "maxlength": "200",
  169. "center": !message.multiple,
  170. "label": message.name,
  171. "required": String(message.required) === '1',
  172. "placeholder": this.getPlaceholder(message),
  173. "type": this.getType(message),
  174. "formatter": this.getFormatter(message)
  175. },
  176. "key": this.goodsId + "-" + index,
  177. "model": {
  178. value: _this2.messageValues[index].value,
  179. callback: function callback($$v) {
  180. _this2.$set(_this2.messageValues[index], "value", $$v);
  181. }
  182. }
  183. });
  184. }
  185. },
  186. render: function render() {
  187. var h = arguments[0];
  188. return h("div", {
  189. "class": bem()
  190. }, [this.messages.map(this.genMessage)]);
  191. }
  192. });
  193. exports.default = _default2;