https://www.chinaventech.com/assets/js/unit/special-offers.js

1class ScriptSpecialOffers extends Script {
2  constructor(params) {
3    super(params)
4    this.$unit = document.getElementById(`${this.attrId}`)
5    if (this.$unit === null) return;
6    // 更多优惠信息按钮
7    this.$detail = this.$unit.querySelector('.unit-special-offers--detail')
8    // 折扣更多列表项
9    this.$discountList = this.$unit.querySelector('.unit-special-offers--discount-list')
10    // 倒计时，时，分秒
11    this.$hh = this.$unit.querySelector('.unit-special-offers--date_limt--hh')
12    this.$mm = this.$unit.querySelector('.unit-special-offers--date_limt--mm')
13    this.$ss = this.$unit.querySelector('.unit-special-offers--date_limt--ss')
14  }
15
16  init() {
17
18  }
19
20  /** 初始化显示折扣信息 */
21  async initDicountInfo() {
22    // 获取当前产品的折扣信息
23    //如果没有返回
24    // 设置折扣信息
25    // 查找原价信息元素
26    const $price = this.$unit.querySelector('.unit-special-offers--prices_sell-price')
27    // 原价隐藏在倒计时结束显示
28    const $original = $price.querySelector('.unit-special-offers--prices_sell-price_original')
29    if ($original) $original.classList.add('d-none')
30    // 显示折扣为折扣的价格
31    const $newPrice = $price.querySelector('.unit-special-offers--prices_sell-price_new')
32    if ($newPrice) $newPrice.innerHTML = `${window.app.info.productDetail.discount_price}`
33    // 显示默认隐藏的降价信息
34    const $off = this.$unit.querySelector('.unit-special-offers-prices_off')
35    if (!$off) return
36    $off.classList.remove('d-none')
37    // 设置显示降价的比率
38    const $offRate = $off.querySelector('.unit-special-offers--prices_dis')
39    if (!$offRate) return
40    $offRate.textContent = `${window.app.info.productDetail.off_rate}% OFF`
41    this.countTime()
42  }
43
44  /**
45   * 根据产品信息显示倒计时 
46   * @param {产品信息} product 
47   */
48  countTime() {
49    // 如果有倒计时，处理显示倒计时
50    if (window.app.info.productDetail.is_discount) {
51      const $date = this.$unit.querySelector('.unit-special-offers--date')
52      if ($date) $date.classList.remove('d-none')
53      const $countTimeHint = this.$unit.querySelector('.unit-special-offers--date_ends')
54      const $limt = this.$unit.querySelector('.unit-special-offers--date_limt')
55      if (window.app.info.productDetail.detail_type  === 'now') { //正在进行的活动
56        $countTimeHint.innerHTML = 'Ends in'
57        $limt.classList.add('unit-special-offers--date_limt--1')
58        $limt.classList.remove('unit-special-offers--date_limt--2')
59      }
60      else if (window.app.info.productDetail.detail_type === 'upcoming') { //即将进行的活动
61        $countTimeHint.innerHTML = 'Sale starts in'
62        $limt.classList.add('unit-special-offers--date_limt--2')
63        $limt.classList.remove('unit-special-offers--date_limt--1')
64      }
65      const time = window.app.info.productDetail.count_time
66      this.utilts.countTime(this.utilts.getTimeParseInt(time), this.$hh, this.$mm, this.$ss, () => {
67        // 如果是正在进行的活动，价格恢复正常
68        if (window.app.info.productDetail.detail_type === 'now') {
69          this.countTimeFinish()
70        } else if (window.app.info.productDetail.detail_type === 'upcoming') {
71          // 如果是即将进行的活动，继续倒计时为正在进行的活动
72          this.countTime()
73        }
74      })
75    }
76  }
77
78  /** 初始化更多detail展开事件 */
79  initDetailEvent() {
80    //如果没有detail 退出
81    if (!this.$detail) return;
82    this.$detail.addEventListener('click', () => {
83      const clientHeight = this.$discountList.clientHeight
84      const height = this.$discountList.scrollHeight
85      if (clientHeight > 60) this.$discountList.style.height = '60px'
86      else this.$discountList.style.height = `${height}px`
87    })
88  }
89
90  /** 倒计时结束时，处理相关信息 */
91  countTimeFinish() {
92    // 价格信息
93    const $price = this.$unit.querySelector('.unit-special-offers--prices_sell-price')
94    if (!$price) return
95    // 显示原价
96    const $original = $price.querySelector('.unit-special-offers--prices_sell-price_original')
97    if ($original) $original.classList.remove('d-none')
98    // 隐藏折扣价格
99    const $newPrice = $price.querySelector('.unit-special-offers--prices_sell-price_new')
100    if ($newPrice) $newPrice.classList.add('d-none')
101
102    //隐藏倒计时
103    const $date = this.$unit.querySelector('.unit-special-offers--date')
104    if ($date) $date.classList.add('d-none')
105    // 隐藏折扣
106    const $off = this.$unit.querySelector('.unit-special-offers-prices_off')
107    if (!$off) return
108    $off.classList.add('d-none')
109  }
110
111  render() {
112    // 初始化更多detail展开事件
113    this.initDetailEvent()
114    this.initDicountInfo()
115  }
116}