https://www.meetion.com/assets/js/unit/detail-html-tabs.js

1class ScriptDetailHtmlTab extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5    this.$li = this.$dom.querySelectorAll(`${params.selector}`)
6    this.$item = this.$dom.querySelectorAll('.tab-pane')
7    this.$box = this.$dom.querySelector('.unit-detail-html-tabs__nav-box')
8    this.$content = this.$dom.querySelector('.tab-content')
9  }
10  async init() {
11    this.$dom.parentNode.style.position = 'static'
12    this._setTabToggle()
13    // this.initNavPosition()
14  }
15  /** tab切换功能 */
16  _setTabToggle() {
17    Array.from(this.$li).forEach(($el, index) => {
18      const setCssHref = (mode) => {
19        let cssHref = ''
20        if (mode === 1) {
21          cssHref = '//' + window.serverInfo.editorDomain + '/cloud-editor-responsive-out.css?v=4'
22        } else if (mode === 2) {
23          // cssHref = '/dist/css/detail.css'
24          if (typeof window.app.info.page.detail_css_name === 'string' && window.app.info.page.detail_css_name.length) {
25            cssHref = `/style/detail.css?unit=detail,${window.app.info.page.detail_css_name}`
26          }
27        }
28        if (cssHref && document.querySelector('[style-mode="editor"]').getAttribute('href') !== cssHref) {
29          document.querySelector('[style-mode="editor"]').setAttribute('href', cssHref)
30        }
31      }
32      if (index === 0 && Utilts.ins().checkDesign()) {
33        // 设计模式下客户端赋值
34        const mode = parseInt($el.getAttribute('edit-mode'))
35        setCssHref(mode)
36      }
37      $el.addEventListener('click', (e) => {
38        const mode = parseInt(e.target.parentNode.getAttribute('edit-mode'))
39        setCssHref(mode)
40
41        Array.from(this.$li).forEach((li, i) => {
42          if (index === i) li.querySelector('a').classList.add('active')
43          else li.querySelector('a').classList.remove('active')
44        })
45        Array.from(this.$item).forEach((item, idx) => {
46          if (idx === index) {
47            item.classList.add('show')
48            item.classList.add('active')
49          } else {
50            item.classList.remove('show')
51            item.classList.remove('active')
52          }
53        })
54      })
55    })
56  }
57  // initNavPosition() {
58  //   if (window.innerWidth < 769) {
59  //     const that = this
60  //     window.addEventListener('scroll', that.debounce(() => {
61  //       const y = that.$content.getBoundingClientRect().y
62  //       if (y < 120) that.$box.classList.add('fix')
63  //       else that.$box.classList.remove('fix')
64  //     }, 0))
65  //   }
66  // }
67  render() {
68    const $comment_tab = this.$dom.querySelector('.unit-detail-html-tabs__nav-review')
69    const $comment = $comment_tab.querySelector('.comment-quantity')
70    if ($comment_tab) {
71      if (window.app.info.productDetail.detail_comment_content_show) $comment_tab.classList.add('active')
72    }
73    if ($comment && window.app.info.productDetail.detail_comment_score_show && window.app.info.productDetail.detail_comment_total) {
74      $comment.innerHTML = `(${window.app.info.productDetail.detail_comment_total})`
75    }
76    this.fixTabsNum();
77  }
78
79  /**
80   * 修正tabs数量值
81   */
82  fixTabsNum() {
83    const $comment_tab = this.$dom.querySelector('.unit-detail-html-tabs__nav-review')
84    let $unitTabs = this.$box.closest('.unit-detail-html-tabs');
85    if ($unitTabs && $comment_tab && $comment_tab.classList.contains('active')) {
86      $unitTabs.dataset.tabsNum = $unitTabs.querySelectorAll('.unit-detail-html-tabs__nav-box > .unit-detail-html-tabs__nav > li').length;
87    }
88  }
89
90  debounce(fn, delay = 500){
91    let timer = null //借助闭包
92    return function() {
93      if(timer) clearTimeout(timer)
94      timer = setTimeout(fn,delay) // 简化写法
95    }
96  }
97}