SkuMessages.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  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. getExtraDesc: function getExtraDesc(message) {
  122. var h = this.$createElement;
  123. var extraDesc = message.extraDesc;
  124. if (extraDesc) {
  125. return h("div", {
  126. "class": bem('extra-message')
  127. }, [extraDesc]);
  128. }
  129. },
  130. genMessage: function genMessage(message, index) {
  131. var _this2 = this;
  132. var h = this.$createElement;
  133. if (message.type === 'image') {
  134. return h(_cell.default, {
  135. "key": this.goodsId + "-" + index,
  136. "attrs": {
  137. "title": message.name,
  138. "required": String(message.required) === '1',
  139. "valueClass": bem('image-cell-value')
  140. },
  141. "class": bem('image-cell')
  142. }, [h(_SkuImgUploader.default, {
  143. "attrs": {
  144. "maxSize": this.messageConfig.uploadMaxSize,
  145. "uploadImg": this.messageConfig.uploadImg,
  146. "customUpload": this.messageConfig.customUpload
  147. },
  148. "model": {
  149. value: _this2.messageValues[index].value,
  150. callback: function callback($$v) {
  151. _this2.$set(_this2.messageValues[index], "value", $$v);
  152. }
  153. }
  154. }), h("div", {
  155. "class": bem('image-cell-label')
  156. }, [t('imageLabel')])]);
  157. } // 时间和日期使用的vant选择器
  158. var isDateOrTime = ['date', 'time'].indexOf(message.type) > -1;
  159. if (isDateOrTime) {
  160. return h(_SkuDateTimeField.default, {
  161. "attrs": {
  162. "label": message.name,
  163. "required": String(message.required) === '1',
  164. "placeholder": this.getPlaceholder(message),
  165. "type": this.getType(message)
  166. },
  167. "key": this.goodsId + "-" + index,
  168. "model": {
  169. value: _this2.messageValues[index].value,
  170. callback: function callback($$v) {
  171. _this2.$set(_this2.messageValues[index], "value", $$v);
  172. }
  173. }
  174. });
  175. }
  176. return h("div", {
  177. "class": bem('cell-block')
  178. }, [h(_field.default, {
  179. "attrs": {
  180. "maxlength": "200",
  181. "center": !message.multiple,
  182. "label": message.name,
  183. "required": String(message.required) === '1',
  184. "placeholder": this.getPlaceholder(message),
  185. "type": this.getType(message),
  186. "formatter": this.getFormatter(message),
  187. "border": false
  188. },
  189. "key": this.goodsId + "-" + index,
  190. "model": {
  191. value: _this2.messageValues[index].value,
  192. callback: function callback($$v) {
  193. _this2.$set(_this2.messageValues[index], "value", $$v);
  194. }
  195. }
  196. }), this.getExtraDesc(message)]);
  197. }
  198. },
  199. render: function render() {
  200. var h = arguments[0];
  201. return h("div", {
  202. "class": bem()
  203. }, [this.messages.map(this.genMessage)]);
  204. }
  205. });
  206. exports.default = _default2;