SkuStepper.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  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 _constants = require("../constants");
  7. var _stepper = _interopRequireDefault(require("../../stepper"));
  8. var namespace = (0, _utils.createNamespace)('sku-stepper');
  9. var createComponent = namespace[0];
  10. var t = namespace[2];
  11. var QUOTA_LIMIT = _constants.LIMIT_TYPE.QUOTA_LIMIT,
  12. STOCK_LIMIT = _constants.LIMIT_TYPE.STOCK_LIMIT;
  13. var _default = createComponent({
  14. props: {
  15. stock: Number,
  16. skuEventBus: Object,
  17. skuStockNum: Number,
  18. selectedNum: Number,
  19. stepperTitle: String,
  20. disableStepperInput: Boolean,
  21. customStepperConfig: Object,
  22. hideQuotaText: Boolean,
  23. quota: {
  24. type: Number,
  25. default: 0
  26. },
  27. quotaUsed: {
  28. type: Number,
  29. default: 0
  30. },
  31. startSaleNum: {
  32. type: Number,
  33. default: 1
  34. }
  35. },
  36. data: function data() {
  37. return {
  38. currentNum: this.selectedNum,
  39. // 购买限制类型: 限购/库存
  40. limitType: STOCK_LIMIT
  41. };
  42. },
  43. watch: {
  44. currentNum: function currentNum(num) {
  45. var intValue = parseInt(num, 10);
  46. if (intValue >= this.stepperMinLimit && intValue <= this.stepperLimit) {
  47. this.skuEventBus.$emit('sku:numChange', intValue);
  48. }
  49. },
  50. stepperLimit: function stepperLimit(limit) {
  51. if (limit < this.currentNum && this.stepperMinLimit <= limit) {
  52. this.currentNum = limit;
  53. }
  54. this.checkState(this.stepperMinLimit, limit);
  55. },
  56. stepperMinLimit: function stepperMinLimit(start) {
  57. if (start > this.currentNum || start > this.stepperLimit) {
  58. this.currentNum = start;
  59. }
  60. this.checkState(start, this.stepperLimit);
  61. }
  62. },
  63. computed: {
  64. stepperLimit: function stepperLimit() {
  65. var quotaLimit = this.quota - this.quotaUsed;
  66. var limit; // 无限购时直接取库存,有限购时取限购数和库存数中小的那个
  67. if (this.quota > 0 && quotaLimit <= this.stock) {
  68. // 修正负的limit
  69. limit = quotaLimit < 0 ? 0 : quotaLimit;
  70. this.limitType = QUOTA_LIMIT;
  71. } else {
  72. limit = this.stock;
  73. this.limitType = STOCK_LIMIT;
  74. }
  75. return limit;
  76. },
  77. stepperMinLimit: function stepperMinLimit() {
  78. return this.startSaleNum < 1 ? 1 : this.startSaleNum;
  79. },
  80. quotaText: function quotaText() {
  81. var _this$customStepperCo = this.customStepperConfig,
  82. quotaText = _this$customStepperCo.quotaText,
  83. hideQuotaText = _this$customStepperCo.hideQuotaText;
  84. if (hideQuotaText) return '';
  85. var text = '';
  86. if (quotaText) {
  87. text = quotaText;
  88. } else {
  89. var textArr = [];
  90. if (this.startSaleNum > 1) {
  91. textArr.push(t('quotaStart', this.startSaleNum));
  92. }
  93. if (this.quota > 0) {
  94. textArr.push(t('quotaLimit', this.quota));
  95. }
  96. text = textArr.join(t('comma'));
  97. }
  98. return text;
  99. }
  100. },
  101. created: function created() {
  102. this.checkState(this.stepperMinLimit, this.stepperLimit);
  103. },
  104. methods: {
  105. setCurrentNum: function setCurrentNum(num) {
  106. this.currentNum = num;
  107. this.checkState(this.stepperMinLimit, this.stepperLimit);
  108. },
  109. onOverLimit: function onOverLimit(action) {
  110. this.skuEventBus.$emit('sku:overLimit', {
  111. action: action,
  112. limitType: this.limitType,
  113. quota: this.quota,
  114. quotaUsed: this.quotaUsed,
  115. startSaleNum: this.startSaleNum
  116. });
  117. },
  118. onChange: function onChange(currentValue) {
  119. var intValue = parseInt(currentValue, 10);
  120. var handleStepperChange = this.customStepperConfig.handleStepperChange;
  121. handleStepperChange && handleStepperChange(intValue);
  122. this.$emit('change', intValue);
  123. },
  124. checkState: function checkState(min, max) {
  125. // 如果选择小于起售,则强制变为起售
  126. if (this.currentNum < min || min > max) {
  127. this.currentNum = min;
  128. } else if (this.currentNum > max) {
  129. // 当前选择数量大于最大可选时,需要重置已选数量
  130. this.currentNum = max;
  131. }
  132. this.skuEventBus.$emit('sku:stepperState', {
  133. valid: min <= max,
  134. min: min,
  135. max: max,
  136. limitType: this.limitType,
  137. quota: this.quota,
  138. quotaUsed: this.quotaUsed,
  139. startSaleNum: this.startSaleNum
  140. });
  141. }
  142. },
  143. render: function render() {
  144. var _this = this;
  145. var h = arguments[0];
  146. return h("div", {
  147. "class": "van-sku-stepper-stock"
  148. }, [h("div", {
  149. "class": "van-sku__stepper-title"
  150. }, [this.stepperTitle || t('num')]), h(_stepper.default, {
  151. "attrs": {
  152. "integer": true,
  153. "min": this.stepperMinLimit,
  154. "max": this.stepperLimit,
  155. "disableInput": this.disableStepperInput
  156. },
  157. "class": "van-sku__stepper",
  158. "on": {
  159. "overlimit": this.onOverLimit,
  160. "change": this.onChange
  161. },
  162. "model": {
  163. value: _this.currentNum,
  164. callback: function callback($$v) {
  165. _this.currentNum = $$v;
  166. }
  167. }
  168. }), !this.hideQuotaText && this.quotaText && h("span", {
  169. "class": "van-sku__stepper-quota"
  170. }, ["(", this.quotaText, ")"])]);
  171. }
  172. });
  173. exports.default = _default;