SkuStepper.js 5.0 KB

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