vant 2.13.5 → 2.13.7

package/es/sku/components/SkuRowItem.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { bem } from './SkuRow';
+import { createNamespace } from '../../utils';
+import { isSkuChoosable } from '../utils/sku-helper';
+import { ChildrenMixin } from '../../mixins/relation';
+import Icon from '../../icon';
+import Image from '../../image';
+
+var _createNamespace = createNamespace('sku-row-item'),
+    createComponent = _createNamespace[0];
+
+export default createComponent({
+  mixins: [ChildrenMixin('vanSkuRows')],
+  props: {
+    lazyLoad: Boolean,
+    skuValue: Object,
+    skuKeyStr: String,
+    skuEventBus: Object,
+    selectedSku: Object,
+    largeImageMode: Boolean,
+    disableSoldoutSku: Boolean,
+    skuList: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    }
+  },
+  computed: {
+    imgUrl: function imgUrl() {
+      var url = this.skuValue.imgUrl || this.skuValue.img_url;
+      return this.largeImageMode ? url || 'https://img01.yzcdn.cn/upload_files/2020/06/24/FmKWDg0bN9rMcTp9ne8MXiQWGtLn.png' : url;
+    },
+    choosable: function choosable() {
+      if (!this.disableSoldoutSku) {
+        return true;
+      }
+
+      return isSkuChoosable(this.skuList, this.selectedSku, {
+        key: this.skuKeyStr,
+        valueId: this.skuValue.id
+      });
+    }
+  },
+  methods: {
+    onSelect: function onSelect() {
+      if (this.choosable) {
+        this.skuEventBus.$emit('sku:select', _extends({}, this.skuValue, {
+          skuKeyStr: this.skuKeyStr
+        }));
+      }
+    },
+    onPreviewImg: function onPreviewImg(event) {
+      event.stopPropagation();
+      var skuValue = this.skuValue,
+          skuKeyStr = this.skuKeyStr;
+      this.skuEventBus.$emit('sku:previewImage', _extends({}, skuValue, {
+        ks: skuKeyStr,
+        imgUrl: skuValue.imgUrl || skuValue.img_url
+      }));
+    },
+    genImage: function genImage(classPrefix) {
+      var h = this.$createElement;
+
+      if (this.imgUrl) {
+        return h(Image, {
+          "attrs": {
+            "fit": "cover",
+            "src": this.imgUrl,
+            "lazyLoad": this.lazyLoad
+          },
+          "class": classPrefix + "-img"
+        });
+      }
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    var choosed = this.skuValue.id === this.selectedSku[this.skuKeyStr];
+    var classPrefix = this.largeImageMode ? bem('image-item') : bem('item');
+    return h("span", {
+      "class": [classPrefix, choosed ? classPrefix + "--active" : '', !this.choosable ? classPrefix + "--disabled" : ''],
+      "on": {
+        "click": this.onSelect
+      }
+    }, [this.genImage(classPrefix), h("div", {
+      "class": classPrefix + "-name"
+    }, [this.largeImageMode ? h("span", {
+      "class": {
+        'van-multi-ellipsis--l2': this.largeImageMode
+      }
+    }, [this.skuValue.name]) : this.skuValue.name]), this.largeImageMode && h(Icon, {
+      "attrs": {
+        "name": "enlarge"
+      },
+      "class": classPrefix + "-img-icon",
+      "on": {
+        "click": this.onPreviewImg
+      }
+    })]);
+  }
+});

package/es/sku/components/SkuRowPropItem.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createNamespace } from '../../utils';
+
+var _createNamespace = createNamespace('sku-row-prop-item'),
+    createComponent = _createNamespace[0];
+
+export default createComponent({
+  props: {
+    skuValue: Object,
+    skuKeyStr: String,
+    skuEventBus: Object,
+    selectedProp: Object,
+    multiple: Boolean,
+    disabled: Boolean
+  },
+  computed: {
+    choosed: function choosed() {
+      var selectedProp = this.selectedProp,
+          skuKeyStr = this.skuKeyStr,
+          skuValue = this.skuValue;
+
+      if (selectedProp && selectedProp[skuKeyStr]) {
+        return selectedProp[skuKeyStr].indexOf(skuValue.id) > -1;
+      }
+
+      return false;
+    }
+  },
+  methods: {
+    onSelect: function onSelect() {
+      if (this.disabled) return;
+      this.skuEventBus.$emit('sku:propSelect', _extends({}, this.skuValue, {
+        skuKeyStr: this.skuKeyStr,
+        multiple: this.multiple
+      }));
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("span", {
+      "class": ['van-sku-row__item', {
+        'van-sku-row__item--active': this.choosed
+      }, {
+        'van-sku-row__item--disabled': this.disabled
+      }],
+      "on": {
+        "click": this.onSelect
+      }
+    }, [h("span", {
+      "class": "van-sku-row__item-name"
+    }, [this.skuValue.name])]);
+  }
+});

package/es/sku/components/SkuStepper.js

@@ -0,0 +1,180 @@
+import { createNamespace } from '../../utils';
+import { LIMIT_TYPE } from '../constants';
+import Stepper from '../../stepper';
+var namespace = createNamespace('sku-stepper');
+var createComponent = namespace[0];
+var t = namespace[2];
+var QUOTA_LIMIT = LIMIT_TYPE.QUOTA_LIMIT,
+    STOCK_LIMIT = LIMIT_TYPE.STOCK_LIMIT;
+export default createComponent({
+  props: {
+    stock: Number,
+    skuEventBus: Object,
+    skuStockNum: Number,
+    selectedNum: Number,
+    stepperTitle: String,
+    disableStepperInput: Boolean,
+    customStepperConfig: Object,
+    hideQuotaText: Boolean,
+    quota: {
+      type: Number,
+      default: 0
+    },
+    quotaUsed: {
+      type: Number,
+      default: 0
+    },
+    startSaleNum: {
+      type: Number,
+      default: 1
+    }
+  },
+  data: function data() {
+    return {
+      currentNum: this.selectedNum,
+      // 购买限制类型: 限购/库存
+      limitType: STOCK_LIMIT
+    };
+  },
+  watch: {
+    currentNum: function currentNum(num) {
+      var intValue = parseInt(num, 10);
+
+      if (intValue >= this.stepperMinLimit && intValue <= this.stepperLimit) {
+        this.skuEventBus.$emit('sku:numChange', intValue);
+      }
+    },
+    stepperLimit: function stepperLimit(limit) {
+      if (limit < this.currentNum && this.stepperMinLimit <= limit) {
+        this.currentNum = limit;
+      }
+
+      this.checkState(this.stepperMinLimit, limit);
+    },
+    stepperMinLimit: function stepperMinLimit(start) {
+      if (start > this.currentNum || start > this.stepperLimit) {
+        this.currentNum = start;
+      }
+
+      this.checkState(start, this.stepperLimit);
+    }
+  },
+  computed: {
+    stepperLimit: function stepperLimit() {
+      var quotaLimit = this.quota - this.quotaUsed;
+      var limit; // 无限购时直接取库存，有限购时取限购数和库存数中小的那个
+
+      if (this.quota > 0 && quotaLimit <= this.stock) {
+        // 修正负的limit
+        limit = quotaLimit < 0 ? 0 : quotaLimit;
+        this.limitType = QUOTA_LIMIT;
+      } else {
+        limit = this.stock;
+        this.limitType = STOCK_LIMIT;
+      }
+
+      return limit;
+    },
+    stepperMinLimit: function stepperMinLimit() {
+      return this.startSaleNum < 1 ? 1 : this.startSaleNum;
+    },
+    quotaText: function quotaText() {
+      var _this$customStepperCo = this.customStepperConfig,
+          quotaText = _this$customStepperCo.quotaText,
+          hideQuotaText = _this$customStepperCo.hideQuotaText;
+      if (hideQuotaText) return '';
+      var text = '';
+
+      if (quotaText) {
+        text = quotaText;
+      } else {
+        var textArr = [];
+
+        if (this.startSaleNum > 1) {
+          textArr.push(t('quotaStart', this.startSaleNum));
+        }
+
+        if (this.quota > 0) {
+          textArr.push(t('quotaLimit', this.quota));
+        }
+
+        text = textArr.join(t('comma'));
+      }
+
+      return text;
+    }
+  },
+  created: function created() {
+    this.checkState(this.stepperMinLimit, this.stepperLimit);
+  },
+  methods: {
+    setCurrentNum: function setCurrentNum(num) {
+      this.currentNum = num;
+      this.checkState(this.stepperMinLimit, this.stepperLimit);
+    },
+    onOverLimit: function onOverLimit(action) {
+      this.skuEventBus.$emit('sku:overLimit', {
+        action: action,
+        limitType: this.limitType,
+        quota: this.quota,
+        quotaUsed: this.quotaUsed,
+        startSaleNum: this.startSaleNum
+      });
+    },
+    onChange: function onChange(currentValue) {
+      var intValue = parseInt(currentValue, 10);
+      var handleStepperChange = this.customStepperConfig.handleStepperChange;
+      handleStepperChange && handleStepperChange(intValue);
+      this.$emit('change', intValue);
+    },
+    checkState: function checkState(min, max) {
+      // 如果选择小于起售，则强制变为起售
+      if (this.currentNum < min || min > max) {
+        this.currentNum = min;
+      } else if (this.currentNum > max) {
+        // 当前选择数量大于最大可选时，需要重置已选数量
+        this.currentNum = max;
+      }
+
+      this.skuEventBus.$emit('sku:stepperState', {
+        valid: min <= max,
+        min: min,
+        max: max,
+        limitType: this.limitType,
+        quota: this.quota,
+        quotaUsed: this.quotaUsed,
+        startSaleNum: this.startSaleNum
+      });
+    }
+  },
+  render: function render() {
+    var _this = this;
+
+    var h = arguments[0];
+    return h("div", {
+      "class": "van-sku-stepper-stock"
+    }, [h("div", {
+      "class": "van-sku__stepper-title"
+    }, [this.stepperTitle || t('num')]), h(Stepper, {
+      "attrs": {
+        "integer": true,
+        "min": this.stepperMinLimit,
+        "max": this.stepperLimit,
+        "disableInput": this.disableStepperInput
+      },
+      "class": "van-sku__stepper",
+      "on": {
+        "overlimit": this.onOverLimit,
+        "change": this.onChange
+      },
+      "model": {
+        value: _this.currentNum,
+        callback: function callback($$v) {
+          _this.currentNum = $$v;
+        }
+      }
+    }), !this.hideQuotaText && this.quotaText && h("span", {
+      "class": "van-sku__stepper-quota"
+    }, ["(", this.quotaText, ")"])]);
+  }
+});

package/es/sku/constants.js

@@ -0,0 +1,9 @@
+export var LIMIT_TYPE = {
+  QUOTA_LIMIT: 0,
+  STOCK_LIMIT: 1
+};
+export var UNSELECTED_SKU_VALUE_ID = '';
+export default {
+  LIMIT_TYPE: LIMIT_TYPE,
+  UNSELECTED_SKU_VALUE_ID: UNSELECTED_SKU_VALUE_ID
+};

package/es/sku/index.css

@@ -0,0 +1 @@
+.van-sku-container{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:stretch;-webkit-align-items:stretch;align-items:stretch;min-height:50%;max-height:80%;overflow-y:visible;font-size:14px;background:#fff}.van-sku-body{-webkit-box-flex:1;-webkit-flex:1 1 auto;flex:1 1 auto;min-height:44px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.van-sku-body::-webkit-scrollbar{display:none}.van-sku-header{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-shrink:0;flex-shrink:0;margin:0 16px}.van-sku-header__img-wrap{-webkit-flex-shrink:0;flex-shrink:0;width:96px;height:96px;margin:12px 12px 12px 0;overflow:hidden;border-radius:4px}.van-sku-header__goods-info{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:12px 20px 12px 0}.van-sku-header-item{margin-top:8px;color:#969799;font-size:12px;line-height:16px}.van-sku__price-symbol{font-size:16px;vertical-align:bottom}.van-sku__price-num{font-weight:500;font-size:22px;vertical-align:bottom;word-wrap:break-word}.van-sku__goods-price{margin-left:-2px;color:#ee0a24}.van-sku__price-tag{position:relative;display:inline-block;margin-left:8px;padding:0 5px;overflow:hidden;color:#ee0a24;font-size:12px;line-height:16px;border-radius:8px}.van-sku__price-tag::before{position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;opacity:.1;content:''}.van-sku-group-container{padding-top:12px}.van-sku-group-container--hide-soldout .van-sku-row__item--disabled{display:none}.van-sku-row{margin:0 16px 12px}.van-sku-row:last-child{margin-bottom:0}.van-sku-row__image-item,.van-sku-row__item{position:relative;overflow:hidden;color:#323233;border-radius:4px;cursor:pointer}.van-sku-row__image-item::before,.van-sku-row__item::before{position:absolute;top:0;left:0;width:100%;height:100%;background:#f7f8fa;content:''}.van-sku-row__image-item--active,.van-sku-row__item--active{color:#ee0a24}.van-sku-row__image-item--active::before,.van-sku-row__item--active::before{background:currentColor;opacity:.1}.van-sku-row__item{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;min-width:40px;margin:0 12px 12px 0;font-size:13px;line-height:16px;vertical-align:middle}.van-sku-row__item-img{z-index:1;width:24px;height:24px;margin:4px 0 4px 4px;object-fit:cover;border-radius:2px}.van-sku-row__item-name{z-index:1;padding:8px}.van-sku-row__item--disabled{color:#c8c9cc;background:#f2f3f5;cursor:not-allowed}.van-sku-row__item--disabled .van-sku-row__item-img{opacity:.3}.van-sku-row__image{margin-right:0}.van-sku-row__image-item{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;width:110px;margin:0 4px 4px 0;border:1px solid transparent}.van-sku-row__image-item:last-child{margin-right:0}.van-sku-row__image-item-img{width:100%;height:110px}.van-sku-row__image-item-img-icon{position:absolute;top:0;right:0;z-index:3;width:18px;height:18px;color:#fff;line-height:18px;text-align:center;background-color:rgba(0,0,0,.4);border-bottom-left-radius:4px}.van-sku-row__image-item-name{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;height:40px;padding:4px;font-size:12px;line-height:16px}.van-sku-row__image-item-name span{word-wrap:break-word}.van-sku-row__image-item--active{border-color:currentColor}.van-sku-row__image-item--disabled{color:#c8c9cc;cursor:not-allowed}.van-sku-row__image-item--disabled::before{z-index:2;background:#f2f3f5;opacity:.4}.van-sku-row__title{padding-bottom:12px}.van-sku-row__title-multiple{color:#969799}.van-sku-row__scroller{margin:0 -16px;overflow-x:scroll;overflow-y:hidden;-webkit-overflow-scrolling:touch}.van-sku-row__scroller::-webkit-scrollbar{display:none}.van-sku-row__row{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;margin-bottom:4px;padding:0 16px}.van-sku-row__indicator{width:40px;height:4px;background:#ebedf0;border-radius:2px}.van-sku-row__indicator-wrapper{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;padding-bottom:16px}.van-sku-row__indicator-slider{width:50%;height:100%;background-color:#ee0a24;border-radius:2px}.van-sku-stepper-stock{padding:12px 16px;overflow:hidden;line-height:30px}.van-sku__stepper{float:right;padding-left:4px}.van-sku__stepper-title{float:left}.van-sku__stepper-quota{float:right;color:#ee0a24;font-size:12px}.van-sku__stock{display:inline-block;margin-right:8px;color:#969799;font-size:12px}.van-sku__stock-num--highlight{color:#ee0a24}.van-sku-messages{padding-bottom:32px}.van-sku-messages__image-cell .van-cell__title{max-width:6.2em;margin-right:12px;color:#646566;text-align:left;word-wrap:break-word}.van-sku-messages__image-cell .van-cell__value{overflow:visible;text-align:left}.van-sku-messages__image-cell-label{color:#969799;font-size:12px;line-height:18px}.van-sku-messages__cell-block{position:relative}.van-sku-messages__cell-block::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:16px;bottom:0;left:16px;border-bottom:1px solid #ebedf0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.van-sku-messages__cell-block:last-child::after{display:none}.van-sku-messages__extra-message{margin-top:-2px;padding:0 16px 12px;color:#969799;font-size:12px;line-height:18px}.van-sku-actions{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-shrink:0;flex-shrink:0;padding:8px 16px}.van-sku-actions .van-button{height:40px;font-weight:500;font-size:14px;border:none;border-radius:0}.van-sku-actions .van-button:first-of-type{border-top-left-radius:20px;border-bottom-left-radius:20px}.van-sku-actions .van-button:last-of-type{border-top-right-radius:20px;border-bottom-right-radius:20px}.van-sku-actions .van-button--warning{background:-webkit-linear-gradient(left,#ffd01e,#ff8917);background:linear-gradient(to right,#ffd01e,#ff8917)}.van-sku-actions .van-button--danger{background:-webkit-linear-gradient(left,#ff6034,#ee0a24);background:linear-gradient(to right,#ff6034,#ee0a24)}

package/es/sku/index.js

@@ -0,0 +1,27 @@
+// Utils
+import lang from './lang';
+import constants from './constants';
+import skuHelper from './utils/sku-helper'; // Components
+
+import Sku from './Sku';
+import Locale from '../locale';
+import SkuActions from './components/SkuActions';
+import SkuHeader from './components/SkuHeader';
+import SkuHeaderItem from './components/SkuHeaderItem';
+import SkuMessages from './components/SkuMessages';
+import SkuStepper from './components/SkuStepper';
+import SkuRow from './components/SkuRow';
+import SkuRowItem from './components/SkuRowItem';
+import SkuRowPropItem from './components/SkuRowPropItem';
+Locale.add(lang);
+Sku.SkuActions = SkuActions;
+Sku.SkuHeader = SkuHeader;
+Sku.SkuHeaderItem = SkuHeaderItem;
+Sku.SkuMessages = SkuMessages;
+Sku.SkuStepper = SkuStepper;
+Sku.SkuRow = SkuRow;
+Sku.SkuRowItem = SkuRowItem;
+Sku.SkuRowPropItem = SkuRowPropItem;
+Sku.skuHelper = skuHelper;
+Sku.skuConstants = constants;
+export default Sku;