SkuMessages.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  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 _cell = _interopRequireDefault(require("../../cell"));
  7. var _cellGroup = _interopRequireDefault(require("../../cell-group"));
  8. var _field = _interopRequireDefault(require("../../field"));
  9. var _email = require("../../utils/validate/email");
  10. var _number = require("../../utils/validate/number");
  11. var _SkuImgUploader = _interopRequireDefault(require("./SkuImgUploader"));
  12. var _use = (0, _utils.use)('sku-messages'),
  13. sfc = _use[0],
  14. bem = _use[1];
  15. var PLACEHOLDER = {
  16. id_no: '输入身份证号码',
  17. text: '输入文本',
  18. tel: '输入数字',
  19. email: '输入邮箱',
  20. date: '点击选择日期',
  21. time: '点击选择时间',
  22. textarea: '点击填写段落文本',
  23. mobile: '输入手机号码'
  24. };
  25. var _default = sfc({
  26. props: {
  27. messages: Array,
  28. messageConfig: Object,
  29. goodsId: [Number, String]
  30. },
  31. data: function data() {
  32. return {
  33. messageValues: this.resetMessageValues(this.messages)
  34. };
  35. },
  36. watch: {
  37. messages: function messages(val) {
  38. this.messageValues = this.resetMessageValues(val);
  39. }
  40. },
  41. methods: {
  42. resetMessageValues: function resetMessageValues(messages) {
  43. return (messages || []).map(function () {
  44. return {
  45. value: ''
  46. };
  47. });
  48. },
  49. getType: function getType(message) {
  50. if (+message.multiple === 1) {
  51. return 'textarea';
  52. }
  53. if (message.type === 'id_no') {
  54. return 'text';
  55. }
  56. return message.datetime > 0 ? 'datetime-local' : message.type;
  57. },
  58. getMessages: function getMessages() {
  59. var _this = this;
  60. var messages = {};
  61. this.messageValues.forEach(function (item, index) {
  62. var value = item.value;
  63. if (_this.messages[index].datetime > 0) {
  64. value = value.replace(/T/g, ' ');
  65. }
  66. messages["message_" + index] = value;
  67. });
  68. return messages;
  69. },
  70. getCartMessages: function getCartMessages() {
  71. var _this2 = this;
  72. var messages = {};
  73. this.messageValues.forEach(function (item, index) {
  74. var value = item.value;
  75. var message = _this2.messages[index];
  76. if (message.datetime > 0) {
  77. value = value.replace(/T/g, ' ');
  78. }
  79. messages[message.name] = value;
  80. });
  81. return messages;
  82. },
  83. getPlaceholder: function getPlaceholder(message) {
  84. var type = +message.multiple === 1 ? 'textarea' : message.type;
  85. var map = this.messageConfig.placeholderMap || {};
  86. return map[type] || PLACEHOLDER[type];
  87. },
  88. validateMessages: function validateMessages() {
  89. var values = this.messageValues;
  90. for (var i = 0; i < values.length; i++) {
  91. var value = values[i].value;
  92. var message = this.messages[i];
  93. if (value === '') {
  94. // 必填字段的校验
  95. if (String(message.required) === '1') {
  96. // eslint-disable-line
  97. var textType = message.type === 'image' ? '请上传' : '请填写';
  98. return textType + message.name;
  99. }
  100. } else {
  101. if (message.type === 'tel' && !(0, _number.isNumber)(value)) {
  102. return '请填写正确的数字格式留言';
  103. }
  104. if (message.type === 'mobile' && !/^\d{6,20}$/.test(value)) {
  105. return '手机号长度为6-20位数字';
  106. }
  107. if (message.type === 'email' && !(0, _email.isEmail)(value)) {
  108. return '请填写正确的邮箱';
  109. }
  110. if (message.type === 'id_no' && (value.length < 15 || value.length > 18)) {
  111. return '请填写正确的身份证号码';
  112. }
  113. }
  114. }
  115. }
  116. },
  117. render: function render(h) {
  118. var _this3 = this;
  119. return h(_cellGroup["default"], {
  120. "class": bem()
  121. }, [this.messages.map(function (message, index) {
  122. return message.type === 'image' ? h(_cell["default"], {
  123. "class": bem('image-cell'),
  124. "attrs": {
  125. "label": "仅限一张",
  126. "title": message.name,
  127. "required": String(message.required) === '1'
  128. },
  129. "key": _this3.goodsId + "-" + index
  130. }, [h(_SkuImgUploader["default"], {
  131. "attrs": {
  132. "uploadImg": _this3.messageConfig.uploadImg,
  133. "maxSize": _this3.messageConfig.uploadMaxSize
  134. },
  135. "model": {
  136. value: _this3.messageValues[index].value,
  137. callback: function callback($$v) {
  138. _this3.messageValues[index].value = $$v;
  139. }
  140. }
  141. })]) : h(_field["default"], {
  142. "attrs": {
  143. "maxlength": "200",
  144. "label": message.name,
  145. "required": String(message.required) === '1',
  146. "placeholder": _this3.getPlaceholder(message),
  147. "type": _this3.getType(message)
  148. },
  149. "key": _this3.goodsId + "-" + index,
  150. "model": {
  151. value: _this3.messageValues[index].value,
  152. callback: function callback($$v) {
  153. _this3.messageValues[index].value = $$v;
  154. }
  155. }
  156. });
  157. })]);
  158. }
  159. });
  160. exports["default"] = _default;