vant 2.13.5 → 2.13.7

package/es/sku/components/SkuActions.js

@@ -0,0 +1,49 @@
+import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
+// Utils
+import { createNamespace } from '../../utils';
+import { inherit } from '../../utils/functional'; // Components
+
+import Button from '../../button'; // Types
+
+var _createNamespace = createNamespace('sku-actions'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1],
+    t = _createNamespace[2];
+
+function SkuActions(h, props, slots, ctx) {
+  var createEmitter = function createEmitter(name) {
+    return function () {
+      props.skuEventBus.$emit(name);
+    };
+  };
+
+  return h("div", _mergeJSXProps([{
+    "class": bem()
+  }, inherit(ctx)]), [props.showAddCartBtn && h(Button, {
+    "attrs": {
+      "size": "large",
+      "type": "warning",
+      "text": props.addCartText || t('addCart')
+    },
+    "on": {
+      "click": createEmitter('sku:addCart')
+    }
+  }), h(Button, {
+    "attrs": {
+      "size": "large",
+      "type": "danger",
+      "text": props.buyText || t('buy')
+    },
+    "on": {
+      "click": createEmitter('sku:buy')
+    }
+  })]);
+}
+
+SkuActions.props = {
+  buyText: String,
+  addCartText: String,
+  skuEventBus: Object,
+  showAddCartBtn: Boolean
+};
+export default createComponent(SkuActions);

package/es/sku/components/SkuDateTimeField.js

@@ -0,0 +1,114 @@
+// Utils
+import { createNamespace } from '../../utils';
+import { stringToDate, dateToString } from '../utils/time-helper'; // Components
+
+import Popup from '../../popup';
+import DateTimePicker from '../../datetime-picker';
+import Field from '../../field';
+var namespace = createNamespace('sku-datetime-field');
+var createComponent = namespace[0];
+var t = namespace[2];
+export default createComponent({
+  props: {
+    value: String,
+    label: String,
+    required: Boolean,
+    placeholder: String,
+    type: {
+      type: String,
+      default: 'date'
+    }
+  },
+  data: function data() {
+    return {
+      showDatePicker: false,
+      currentDate: this.type === 'time' ? '' : new Date(),
+      minDate: new Date(new Date().getFullYear() - 60, 0, 1)
+    };
+  },
+  watch: {
+    value: function value(val) {
+      switch (this.type) {
+        case 'time':
+          this.currentDate = val;
+          break;
+
+        case 'date':
+        case 'datetime':
+          this.currentDate = stringToDate(val) || new Date();
+          break;
+      }
+    }
+  },
+  computed: {
+    title: function title() {
+      return t("title." + this.type);
+    }
+  },
+  methods: {
+    onClick: function onClick() {
+      this.showDatePicker = true;
+    },
+    onConfirm: function onConfirm(val) {
+      var data = val;
+
+      if (this.type !== 'time') {
+        data = dateToString(val, this.type);
+      }
+
+      this.$emit('input', data);
+      this.showDatePicker = false;
+    },
+    onCancel: function onCancel() {
+      this.showDatePicker = false;
+    },
+    formatter: function formatter(type, val) {
+      var word = t("format." + type);
+      return "" + val + word;
+    }
+  },
+  render: function render() {
+    var _this = this;
+
+    var h = arguments[0];
+    return h(Field, {
+      "attrs": {
+        "readonly": true,
+        "is-link": true,
+        "center": true,
+        "value": this.value,
+        "label": this.label,
+        "required": this.required,
+        "placeholder": this.placeholder
+      },
+      "on": {
+        "click": this.onClick
+      }
+    }, [h(Popup, {
+      "attrs": {
+        "round": true,
+        "position": "bottom",
+        "getContainer": "body"
+      },
+      "slot": "extra",
+      "model": {
+        value: _this.showDatePicker,
+        callback: function callback($$v) {
+          _this.showDatePicker = $$v;
+        }
+      }
+    }, [h(DateTimePicker, {
+      "attrs": {
+        "type": this.type,
+        "title": this.title,
+        "value": this.currentDate,
+        "minDate": this.minDate,
+        "formatter": this.formatter
+      },
+      "on": {
+        "cancel": this.onCancel,
+        "confirm": this.onConfirm
+      }
+    })])]);
+  }
+});

package/es/sku/components/SkuHeader.js

@@ -0,0 +1,78 @@
+import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
+import _extends from "@babel/runtime/helpers/esm/extends";
+// Utils
+import { createNamespace } from '../../utils';
+import { inherit } from '../../utils/functional';
+import { BORDER_BOTTOM } from '../../utils/constant'; // Components
+
+import Image from '../../image'; // Types
+
+var _createNamespace = createNamespace('sku-header'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+function getSkuImgValue(sku, selectedSku) {
+  var imgValue;
+  sku.tree.some(function (item) {
+    var id = selectedSku[item.k_s];
+
+    if (id && item.v) {
+      var matchedSku = item.v.filter(function (skuValue) {
+        return skuValue.id === id;
+      })[0] || {};
+      var img = matchedSku.previewImgUrl || matchedSku.imgUrl || matchedSku.img_url;
+
+      if (img) {
+        imgValue = _extends({}, matchedSku, {
+          ks: item.k_s,
+          imgUrl: img
+        });
+        return true;
+      }
+    }
+
+    return false;
+  });
+  return imgValue;
+}
+
+function SkuHeader(h, props, slots, ctx) {
+  var _slots$skuHeaderIma;
+
+  var sku = props.sku,
+      goods = props.goods,
+      skuEventBus = props.skuEventBus,
+      selectedSku = props.selectedSku,
+      _props$showHeaderImag = props.showHeaderImage,
+      showHeaderImage = _props$showHeaderImag === void 0 ? true : _props$showHeaderImag;
+  var selectedValue = getSkuImgValue(sku, selectedSku);
+  var imgUrl = selectedValue ? selectedValue.imgUrl : goods.picture;
+
+  var previewImage = function previewImage() {
+    skuEventBus.$emit('sku:previewImage', selectedValue);
+  };
+
+  return h("div", _mergeJSXProps([{
+    "class": [bem(), BORDER_BOTTOM]
+  }, inherit(ctx)]), [showHeaderImage && h(Image, {
+    "attrs": {
+      "fit": "cover",
+      "src": imgUrl
+    },
+    "class": bem('img-wrap'),
+    "on": {
+      "click": previewImage
+    }
+  }, [(_slots$skuHeaderIma = slots['sku-header-image-extra']) == null ? void 0 : _slots$skuHeaderIma.call(slots)]), h("div", {
+    "class": bem('goods-info')
+  }, [slots.default == null ? void 0 : slots.default()])]);
+}
+
+SkuHeader.props = {
+  sku: Object,
+  goods: Object,
+  skuEventBus: Object,
+  selectedSku: Object,
+  showHeaderImage: Boolean
+};
+export default createComponent(SkuHeader);

package/es/sku/components/SkuHeaderItem.js

@@ -0,0 +1,16 @@
+import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
+// Utils
+import { createNamespace } from '../../utils';
+import { inherit } from '../../utils/functional'; // Types
+
+var _createNamespace = createNamespace('sku-header-item'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+function SkuHeader(h, props, slots, ctx) {
+  return h("div", _mergeJSXProps([{
+    "class": bem()
+  }, inherit(ctx)]), [slots.default && slots.default()]);
+}
+
+export default createComponent(SkuHeader);

package/es/sku/components/SkuImgUploader.js

@@ -0,0 +1,94 @@
+// Utils
+import { createNamespace } from '../../utils'; // Components
+
+import Uploader from '../../uploader';
+var namespace = createNamespace('sku-img-uploader');
+var createComponent = namespace[0];
+var t = namespace[2];
+export default createComponent({
+  props: {
+    value: String,
+    uploadImg: Function,
+    customUpload: Function,
+    maxSize: {
+      type: Number,
+      default: 6
+    }
+  },
+  data: function data() {
+    return {
+      fileList: []
+    };
+  },
+  watch: {
+    value: function value(val) {
+      if (val) {
+        this.fileList = [{
+          url: val,
+          isImage: true
+        }];
+      } else {
+        this.fileList = [];
+      }
+    }
+  },
+  methods: {
+    afterReadFile: function afterReadFile(file) {
+      var _this = this;
+
+      file.status = 'uploading';
+      file.message = t('uploading');
+      this.uploadImg(file.file, file.content).then(function (img) {
+        file.status = 'done';
+
+        _this.$emit('input', img);
+      }).catch(function () {
+        file.status = 'failed';
+        file.message = t('fail');
+      });
+    },
+    onOversize: function onOversize() {
+      this.$toast(t('oversize', this.maxSize));
+    },
+    onDelete: function onDelete() {
+      this.$emit('input', '');
+    },
+    onClickUpload: function onClickUpload() {
+      var _this2 = this;
+
+      if (this.customUpload) {
+        this.customUpload().then(function (url) {
+          _this2.fileList.push({
+            url: url
+          });
+
+          _this2.$emit('input', url);
+        });
+      }
+    }
+  },
+  render: function render() {
+    var _this3 = this;
+
+    var h = arguments[0];
+    return h(Uploader, {
+      "attrs": {
+        "maxCount": 1,
+        "readonly": !!this.customUpload,
+        "maxSize": this.maxSize * 1024 * 1024,
+        "afterRead": this.afterReadFile
+      },
+      "on": {
+        "oversize": this.onOversize,
+        "delete": this.onDelete,
+        "click-upload": this.onClickUpload
+      },
+      "model": {
+        value: _this3.fileList,
+        callback: function callback($$v) {
+          _this3.fileList = $$v;
+        }
+      }
+    });
+  }
+});

package/es/sku/components/SkuMessages.js

@@ -0,0 +1,220 @@
+// Utils
+import { createNamespace } from '../../utils';
+import { isEmail } from '../../utils/validate/email';
+import { isNumeric } from '../../utils/validate/number'; // Components
+
+import Cell from '../../cell';
+import Field from '../../field';
+import SkuImgUploader from './SkuImgUploader';
+import SkuDateTimeField from './SkuDateTimeField';
+
+var _createNamespace = createNamespace('sku-messages'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1],
+    t = _createNamespace[2];
+
+export default createComponent({
+  props: {
+    messageConfig: Object,
+    goodsId: [Number, String],
+    messages: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    }
+  },
+  data: function data() {
+    return {
+      messageValues: this.resetMessageValues(this.messages)
+    };
+  },
+  watch: {
+    messages: function messages(val) {
+      this.messageValues = this.resetMessageValues(val);
+    }
+  },
+  methods: {
+    resetMessageValues: function resetMessageValues(messages) {
+      var messageConfig = this.messageConfig;
+      var _messageConfig$initia = messageConfig.initialMessages,
+          initialMessages = _messageConfig$initia === void 0 ? {} : _messageConfig$initia;
+      return (messages || []).map(function (message) {
+        return {
+          value: initialMessages[message.name] || ''
+        };
+      });
+    },
+    getType: function getType(message) {
+      if (+message.multiple === 1) {
+        return 'textarea';
+      }
+
+      if (message.type === 'id_no') {
+        return 'text';
+      }
+
+      return message.datetime > 0 ? 'datetime' : message.type;
+    },
+    getMessages: function getMessages() {
+      var messages = {};
+      this.messageValues.forEach(function (item, index) {
+        messages["message_" + index] = item.value;
+      });
+      return messages;
+    },
+    getCartMessages: function getCartMessages() {
+      var _this = this;
+
+      var messages = {};
+      this.messageValues.forEach(function (item, index) {
+        var message = _this.messages[index];
+        messages[message.name] = item.value;
+      });
+      return messages;
+    },
+    getPlaceholder: function getPlaceholder(message) {
+      var type = +message.multiple === 1 ? 'textarea' : message.type;
+      var map = this.messageConfig.placeholderMap || {};
+      return message.placeholder || map[type] || t("placeholder." + type);
+    },
+    validateMessages: function validateMessages() {
+      var values = this.messageValues;
+
+      for (var i = 0; i < values.length; i++) {
+        var value = values[i].value;
+        var message = this.messages[i];
+
+        if (value === '') {
+          // 必填字段的校验
+          if (String(message.required) === '1') {
+            var textType = t(message.type === 'image' ? 'upload' : 'fill');
+            return textType + message.name;
+          }
+        } else {
+          if (message.type === 'tel' && !isNumeric(value)) {
+            return t('invalid.tel');
+          }
+
+          if (message.type === 'mobile' && !/^\d{6,20}$/.test(value)) {
+            return t('invalid.mobile');
+          }
+
+          if (message.type === 'email' && !isEmail(value)) {
+            return t('invalid.email');
+          }
+
+          if (message.type === 'id_no' && (value.length < 15 || value.length > 18)) {
+            return t('invalid.id_no');
+          }
+        }
+      }
+    },
+
+    /**
+     * The phone number copied from IOS mobile phone address book
+     * will add spaces and invisible Unicode characters
+     * which cannot pass the /^\d+$/ verification
+     * so keep numbers and dots
+     */
+    getFormatter: function getFormatter(message) {
+      return function formatter(value) {
+        if (message.type === 'mobile' || message.type === 'tel') {
+          return value.replace(/[^\d.]/g, '');
+        }
+
+        return value;
+      };
+    },
+    getExtraDesc: function getExtraDesc(message) {
+      var h = this.$createElement;
+      var extraDesc = message.extraDesc;
+
+      if (extraDesc) {
+        return h("div", {
+          "class": bem('extra-message')
+        }, [extraDesc]);
+      }
+    },
+    genMessage: function genMessage(message, index) {
+      var _this2 = this;
+
+      var h = this.$createElement;
+
+      if (message.type === 'image') {
+        return h(Cell, {
+          "key": this.goodsId + "-" + index,
+          "attrs": {
+            "title": message.name,
+            "required": String(message.required) === '1',
+            "valueClass": bem('image-cell-value')
+          },
+          "class": bem('image-cell')
+        }, [h(SkuImgUploader, {
+          "attrs": {
+            "maxSize": this.messageConfig.uploadMaxSize,
+            "uploadImg": this.messageConfig.uploadImg,
+            "customUpload": this.messageConfig.customUpload
+          },
+          "model": {
+            value: _this2.messageValues[index].value,
+            callback: function callback($$v) {
+              _this2.$set(_this2.messageValues[index], "value", $$v);
+            }
+          }
+        }), h("div", {
+          "class": bem('image-cell-label')
+        }, [t('imageLabel')])]);
+      } // 时间和日期使用的vant选择器
+
+
+      var isDateOrTime = ['date', 'time'].indexOf(message.type) > -1;
+
+      if (isDateOrTime) {
+        return h(SkuDateTimeField, {
+          "attrs": {
+            "label": message.name,
+            "required": String(message.required) === '1',
+            "placeholder": this.getPlaceholder(message),
+            "type": this.getType(message)
+          },
+          "key": this.goodsId + "-" + index,
+          "model": {
+            value: _this2.messageValues[index].value,
+            callback: function callback($$v) {
+              _this2.$set(_this2.messageValues[index], "value", $$v);
+            }
+          }
+        });
+      }
+
+      return h("div", {
+        "class": bem('cell-block')
+      }, [h(Field, {
+        "attrs": {
+          "maxlength": "200",
+          "center": !message.multiple,
+          "label": message.name,
+          "required": String(message.required) === '1',
+          "placeholder": this.getPlaceholder(message),
+          "type": this.getType(message),
+          "formatter": this.getFormatter(message),
+          "border": false
+        },
+        "key": this.goodsId + "-" + index,
+        "model": {
+          value: _this2.messageValues[index].value,
+          callback: function callback($$v) {
+            _this2.$set(_this2.messageValues[index], "value", $$v);
+          }
+        }
+      }), this.getExtraDesc(message)]);
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("div", {
+      "class": bem()
+    }, [this.messages.map(this.genMessage)]);
+  }
+});

package/es/sku/components/SkuRow.js

@@ -0,0 +1,117 @@
+// Utils
+import { createNamespace } from '../../utils';
+import { BORDER_BOTTOM } from '../../utils/constant'; // Mixins
+
+import { ParentMixin } from '../../mixins/relation';
+import { BindEventMixin } from '../../mixins/bind-event';
+
+var _createNamespace = createNamespace('sku-row'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1],
+    t = _createNamespace[2];
+
+export { bem };
+export default createComponent({
+  mixins: [ParentMixin('vanSkuRows'), BindEventMixin(function (bind) {
+    if (this.scrollable && this.$refs.scroller) {
+      bind(this.$refs.scroller, 'scroll', this.onScroll);
+    }
+  })],
+  props: {
+    skuRow: Object
+  },
+  data: function data() {
+    return {
+      progress: 0
+    };
+  },
+  computed: {
+    scrollable: function scrollable() {
+      return this.skuRow.largeImageMode && this.skuRow.v.length > 6;
+    }
+  },
+  methods: {
+    onScroll: function onScroll() {
+      var _this$$refs = this.$refs,
+          scroller = _this$$refs.scroller,
+          row = _this$$refs.row;
+      var distance = row.offsetWidth - scroller.offsetWidth;
+      this.progress = scroller.scrollLeft / distance;
+    },
+    genTitle: function genTitle() {
+      var h = this.$createElement;
+      return h("div", {
+        "class": bem('title')
+      }, [this.skuRow.k, this.skuRow.is_multiple && h("span", {
+        "class": bem('title-multiple')
+      }, ["\uFF08", t('multiple'), "\uFF09"])]);
+    },
+    genIndicator: function genIndicator() {
+      var h = this.$createElement;
+
+      if (this.scrollable) {
+        var style = {
+          transform: "translate3d(" + this.progress * 20 + "px, 0, 0)"
+        };
+        return h("div", {
+          "class": bem('indicator-wrapper')
+        }, [h("div", {
+          "class": bem('indicator')
+        }, [h("div", {
+          "class": bem('indicator-slider'),
+          "style": style
+        })])]);
+      }
+    },
+    genContent: function genContent() {
+      var h = this.$createElement;
+      var nodes = this.slots();
+
+      if (this.skuRow.largeImageMode) {
+        var top = [];
+        var bottom = [];
+        nodes.forEach(function (node, index) {
+          var group = Math.floor(index / 3) % 2 === 0 ? top : bottom;
+          group.push(node);
+        });
+        return h("div", {
+          "class": bem('scroller'),
+          "ref": "scroller"
+        }, [h("div", {
+          "class": bem('row'),
+          "ref": "row"
+        }, [top]), bottom.length ? h("div", {
+          "class": bem('row')
+        }, [bottom]) : null]);
+      }
+
+      return nodes;
+    },
+    centerItem: function centerItem(selectSkuId) {
+      if (!this.skuRow.largeImageMode || !selectSkuId) {
+        return;
+      }
+
+      var _this$children = this.children,
+          children = _this$children === void 0 ? [] : _this$children;
+      var _this$$refs2 = this.$refs,
+          scroller = _this$$refs2.scroller,
+          row = _this$$refs2.row;
+      var child = children.find(function (it) {
+        return +it.skuValue.id === +selectSkuId;
+      });
+
+      if (scroller && row && child && child.$el) {
+        var target = child.$el;
+        var to = target.offsetLeft - (scroller.offsetWidth - target.offsetWidth) / 2;
+        scroller.scrollLeft = to;
+      }
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("div", {
+      "class": [bem(), BORDER_BOTTOM]
+    }, [this.genTitle(), this.genContent(), this.genIndicator()]);
+  }
+});