https://www.ry-elerelay.com/assets/js/unit/detail-quantity.js

1class ScriptDetailQuantity extends Script {
2  constructor(params) {
3    super(params)
4    this.$unit = document.getElementById(`${this.attrId}`)
5    this.$increase = this.$unit.querySelector('.increase')
6    this.$minus = this.$unit.querySelector('.minus')
7    this.$quantity = this.$unit.querySelector('.unit-detail-quantity__input')
8    this.$stock = this.$unit.querySelector('.unit-detail-quantity__stock')
9    this.$stockNum = this.$unit.querySelector('.unit-detail-quantity__stock--num')
10    this.$stockAvailable = this.$unit.querySelector('.unit-detail-quantity__stock--available')
11    this.$stockOut = this.$unit.querySelector('.unit-detail-quantity__stock--out')
12    this.$moqEle = this.$unit.querySelector('.unit-detail-quantity__moq')
13    this.$moqNum = this.$unit.querySelector('.unit-detail-quantity__moq-num')
14    this.amount = 1
15    this.moq = 1
16    this.ishasLimitHint = false //确保只提示一次
17  }
18
19  init() {
20    this.initEvents()
21  }
22
23  initEvents() {
24    // 产品数量添加
25    if (!this.$increase && !this.$minus && !this.$quantity) return
26    this.$increase.addEventListener('click', () => {
27      this.changeAmount('add')
28    })
29    // 产品数量减少
30    this.$minus.addEventListener('click', () => {
31      this.changeAmount('minus')
32    })
33    // 修改产品数量
34    this.$quantity.addEventListener('change', () => {
35      this.changeAmount('input')
36    })
37
38  }
39  // 改变数量
40  changeAmount(type) {
41    switch (type) {
42      case 'add':
43        this.amount = Number(this.amount) + 1
44        if (this.amount > 9999) this.amount = 9999
45        this.limitByHint()
46        break;
47      case 'minus':
48        if (this.amount <= this.moq) this.amount = this.moq
49        else if (this.amount > 1) this.amount = Number(this.amount) - 1
50        break;
51      case 'input':
52        if (Number(this.$quantity.value) <= this.moq) this.amount = this.moq
53        else if (Number(this.$quantity.value) < 1) this.amount = 1
54        else if (Number(this.$quantity.value) > 9999) this.amount = 9999
55        else {
56          this.amount = Math.ceil(this.$quantity.value)
57          this.limitByHint()
58        }
59        break;
60      default:
61        break;
62    }
63    this.$quantity.value = this.amount || 1
64    window.app.info.productDetail.quantity = this.amount || 1
65  }
66
67  /** 限购提示 */
68  limitByHint() {
69    const detail = window.app.info.productDetail
70    // 如果不是限时活动产品
71    if (!detail.is_discount) return
72    // 如果不限购
73    if (detail.limit_buy <= 0) return
74    // 如果买的数量小于限购的数量
75    if (this.amount <= detail.limit_buy) return
76    // 如果买的不是正在进行的限时折扣
77    if (detail.detail_type !== 'now') return
78    // 如果还没提示
79    if (this.ishasLimitHint) return
80    // 提示限购
81    const hintStr = this.utilts.$t(`Limited to ${detail.limit_buy} pieces, purchase at the original price after exceeding`)
82    new Message().info(hintStr)
83    this.ishasLimitHint = true
84  }
85
86  showStock() {
87    const detail = window.app.info.productDetail
88    const stock_available = detail.config.stock_available
89    const moq = window.app.info.page.moq
90    if (moq > 1) {
91      this.$moqEle.classList.remove('d-none')
92      this.$moqNum.innerHTML = moq
93      this.amount = moq
94      this.moq = moq
95      this.$quantity.value = moq
96      window.app.info.productDetail.quantity = moq
97    } else {
98      this.$quantity.value = 1
99      window.app.info.productDetail.quantity = 1
100      this.amount = 1
101    } 
102    // 如果显示库存
103    if (detail.config.display_stock && stock_available) {
104      this.$stock.classList.remove('d-none')
105      if (detail.stock > 0) {
106        // 有库存
107        this.$stockAvailable.classList.remove('d-none')
108        this.$stockOut.classList.add('d-none')
109        this.$stockNum.classList.remove('d-none')
110        this.$stockNum.innerHTML = detail.stock
111      } else if (detail.stock <= 0) {
112        // 无库存
113        this.$stockNum.classList.add('d-none')
114        this.$stockAvailable.classList.add('d-none')
115        this.$stockOut.classList.remove('d-none')
116      } else if (detail.stock === 'none') {
117        // 多个款式初始没选择款式时不显示
118        this.$stock.classList.add('d-none')
119      }
120    }
121  }
122
123  render() {
124    this.showStock()
125  }
126}