https://www.jarmoo.com/assets/js/unit/pop-up.js

1class ScriptPopUp extends Script {
2  constructor(params) {
3    super(params)
4    this.config = JSON.parse(this.utilts.htmlDecode(params.config))
5    this.$target = document.getElementById(this.attrId)
6    this.modal = null
7    this.openTime = 0
8  }
9  get $module() {
10    return this.utilts.getParents(this.$target, { attrName: 'package-item', attrValue: 'module' })[0]
11  }
12  init() {
13    this.initEvent()
14    this.initModule()
15    if (!this.utilts.checkDesign()) {
16      this.initModal()
17      this.initModalPosition()
18      setTimeout(() => this.openModal(), 1000)
19    }
20  }
21  initEvent() {
22    this.$module.classList.add('all-pop-up_module')
23    if (this.$module && window.app.info.page.page_type === 'all_pop_up' && this.utilts.checkDesign() && !ctx.query.render) {
24      console.log('*****', this.$module.previousElementSibling);
25      if (this.$module.previousElementSibling && this.$module.previousElementSibling.classList.contains('pop-up-title')) return
26      const parentElement = this.$module.parentNode
27      const children = Array.from(parentElement.querySelectorAll('.all-pop-up_module'));
28      const currentIndex = children.indexOf(this.$module)
29      const numberElement = document.createElement('div');
30      numberElement.className = 'pop-up-title'
31      numberElement.textContent = `弹窗${currentIndex + 1}`
32      parentElement.insertBefore(numberElement, this.$module);
33    }
34  }
35  /** 初始化模块样式 */
36  initModule() {
37    this.$module.removeAttribute('hide-phone')
38    this.$module.removeAttribute('hide-pad')
39    this.$module.removeAttribute('hide-pc')
40  }
41  /** 初始化弹窗 */
42  initModal() {
43    if (this.utilts.checkDesign()) return
44    this.modal = new Modal()
45    this.modal.init({
46      title: '',
47      body: this.$module,
48      className: 'pop-up-modal',
49      size: 'xl'
50    })
51    this.modal.$target.style.setProperty('--bgc-val', window.getComputedStyle(this.$module).getPropertyValue('background-color'))
52  }
53  initModalPosition() {
54    if (!this.config.show_position) return
55    const pos = this.config.show_position.split(' ').map(x => x.substr(0, 1).toLowerCase()).join('')
56    this.modal.$target.classList.add(`pos--${pos}`)
57  }
58  openModal() {
59    if (this.utilts.checkDesign()) return
60    if (this.checkPage() && this.checkFreq() && this.checkDate() && this.checkScreen()) {
61      if (this.config.delay_time) {
62        setTimeout(() => {
63          this.modal.open()
64          this.autoCloseModal()
65        }, Number(this.config.delay_time) * 1000)
66      } else {
67        this.modal.open()
68        this.autoCloseModal()
69      }
70      // 限制频率
71      if (this.config.freq_time) {
72        this.utilts.setItem(`${this.attrId}-pop-modal`, this.openTime + 1)
73      }
74    }
75  }
76  closeModal() {
77    this.modal.close()
78  }
79  /**自动关闭 */
80  autoCloseModal() {
81    if (Number(this.config.close_time) > 0) {
82      setTimeout(() => this.closeModal(), Number(this.config.close_time) * 1000)
83    }
84  }
85  /** 判断页面 */
86  checkPage() {
87    const thisCode = window.app.info.page.page_code
88    const code_arr = this.config.show_page.join(',').split(',').map(item => Number(item))
89    let bool = false
90    const systemCode = [111, 112, 113, 114, 115, 121, 122, 123, 131, 133, 141, 142, 143, 144, 145, 146, 161, 162, 156]
91    if (thisCode) {
92      // 系统页直接过滤
93      if (systemCode.includes(thisCode)) return false
94      code_arr.forEach((code) => {
95        // 匹配对应code
96        if (code === thisCode) bool = true
97        // 数组里存在0，代表所有页面类型都匹配
98        else if (code === 0) bool = true
99        // 数组里含有*00数
100        else if (
101          (code % 100 === 0) &&
102          Math.floor(thisCode / 100) === Math.floor(code / 100)
103        ) bool = true
104        // 数组里含有*10、*20、*30...
105        else if (
106          (code % 100) % 10 === 0 &&
107          Math.floor((code % 100) / 10) > 0 &&
108          Math.floor((code % 100) / 10) === Math.floor((thisCode % 100) / 10)
109        ) bool = true
110      })
111    }
112    return bool
113  }
114  /** 频率限制 */
115  checkFreq() {
116    if (!this.config.freq_type) return true
117    this.openTime = 0
118    // 判断是全部页面还是指定页面
119    this.openTime = Number(this.utilts.getItem(`${this.attrId}-pop-modal`))
120    return this.openTime < Number(this.config.freq_time)
121  }
122  /** 判断有效时间 */
123  checkDate() {
124    if (!this.config.open_type) return true
125    const currentDate = window.serverInfo.date
126    const startTime = new Date(this.config.start_time).getTime()
127    const endTime = new Date(this.config.end_time).getTime()
128    return startTime <= currentDate && endTime >= currentDate
129  }
130  /** 判断三端显示 */
131  checkScreen() {
132    const is_default = this.$target.hasAttribute('hide-phone')
133    const is_md = this.$target.hasAttribute('hide-pad')
134    const is_xl = this.$target.hasAttribute('hide-pc')
135    const width = window.innerWidth
136    if (width > 1200 && is_xl) return false
137    else if (width < 1200 && width > 577 && is_md) return false
138    else if (width < 576 && is_default) return false
139    return true
140  }
141}