https://www.tcang.net/assets/js/unit/faq.js?v=1

1class ScriptFaq extends Script {
2	constructor(params) {
3		super(params)
4		this.attrId = params.attrId;
5    this.$unit = document.querySelector(`#${this.attrId}`)
6    // this.$item = this.$unit.querySelector('.unit-download-list__item')
7		this.$doms = this.$unit.querySelectorAll(`.faq-row`);
8    // 无数据时显示Nodata
9		this.$noData = this.$unit.querySelector(".unit-comment__nodata")
10		this.foldMethod = params.foldMethod || '1'
11		this.collapseSettings = Number(params.collapseSettings) || 1
12		this.faqOpenType = Number(params.faqOpenType) || 0
13    this.pageInfo = JSON.parse(decodeURIComponent(params.pageInfo || '{}'))
14    this.colInfo = JSON.parse(decodeURIComponent(params.colInfo || '{}'))
15    this.config = JSON.parse(decodeURIComponent(params.config || '{ list: {}, faq: {} }'))
16    this.clientRender = new ScriptFaqElement({
17      attrId: this.attrId,
18      openType: this.faqOpenType,
19      colInfo: this.colInfo,
20      config: this.config
21    })
22    this.content_type = params.content_type || 'detail'
23	}
24	/** 初始化，支持异步 */
25	async init() {
26		let _this = this;
27		if (this.$doms) {
28			this.$doms.forEach((item, index) => {
29				const iconDom = item.querySelector('.faq-icon')
30				if (index === 0 && this.foldMethod === '1') {
31					item.classList.add('faq-open')
32					iconDom.classList.remove('icon-action-plus')
33					iconDom.classList.add('icon-action-minus')
34				}
35				if (this.foldMethod === '99') {
36					item.classList.add('faq-open')
37					iconDom.classList.remove('icon-action-plus')
38					iconDom.classList.add('icon-action-minus')
39				}
40        if (this.faqOpenType && this.content_type !== 'detail') {
41          item.classList.remove('faq-open')
42          iconDom.classList.add('icon-action-plus')
43          iconDom.classList.remove('icon-action-minus')
44        }
45        if (this.faqOpenType && this.content_type !== 'detail') return
46				item.addEventListener('click', () => {
47					// const iconDom = item.querySelector('.faq-icon')
48					if(this.collapseSettings==2){
49						const brother = this.utilts.getSiblings(this.faqOpenType && this.content_type !== 'detail' ? item.parentNode.parentNode : item.parentNode)
50						brother.forEach((xd)=>{
51							xd.querySelector('.faq-icon').classList.add('icon-action-plus')
52							xd.querySelector('.faq-icon').classList.remove('icon-action-minus')
53							xd.querySelector('.faq-row').classList.remove('faq-open')
54						})
55					}
56					item.classList.contains('faq-open') ? item.classList.remove('faq-open') : item.classList.add('faq-open')
57					if (iconDom.classList.contains('icon-action-plus')) {
58						iconDom.classList.remove('icon-action-plus')
59						iconDom.classList.add('icon-action-minus')
60					} else {
61						iconDom.classList.add('icon-action-plus')
62						iconDom.classList.remove('icon-action-minus')
63					}
64				})
65			})
66		}
67	}
68  async renderList(params) {
69    // console.log(`faq renderList`);
70    const data = await window.app.getFAQListPageBySearch(params)
71    window.app.info.pagination.page_number = data.page_number
72    window.app.info.pagination.page_count = data.page_count
73    window.app.info.pagination.page_size = data.page_size
74    window.app.info.pagination.total = data.total
75    // console.log('data', data);
76    const $itemList = this.$unit.querySelector('.faq-module')
77    if (!$itemList) return console.warn('renderList 获取不到 .faq-module')
78    $itemList.innerHTML = ''
79    if (data.list?.length) {
80      if (this.$noData) this.$noData.classList.add('d-none')
81      data.list.forEach((item, index) => {
82        // const itemTemplate = this.$item.cloneNode(true)
83        // itemTemplate.querySelector('a').href = !this.faqOpenType || !item.page_url_suffix ? 'javascript:;' : globalThis.Server.getRinseHref(item.page_url_suffix, window.app.info.site)
84        // itemTemplate.querySelector('.faq-title-block').innerHTML = item.title
85        // itemTemplate.querySelector('.faq-content').innerHTML = item.description
86        $itemList.innerHTML += this.clientRender.createItem(item, index)
87      })
88
89      this.$doms = this.$unit.querySelectorAll(`.faq-row`);
90      this.init()
91    } else {

92      if (this.$noData) this.$noData.classList.remove('d-none')
93    }
94
95  }
96}
97
98class ScriptFaqElement {
99  constructor(params) {
100    this.attrId = params.attrId
101    // 列数信息
102    this.colInfo = params.colInfo
103    this.openType = params.openType
104    this.config = params.config
105  }
106  createItem(item, subIndex) {
107    try {
108      const page_number = window.app.info.pagination?.page_number || 0
109      const page_size = window.app.info.pagination?.page_size || 0
110      const baseSeqNum = Math.max(0, (page_number - 1) * page_size)
111      item.href = item.page_url_suffix
112      const site = window.app.info.site
113      const { cols_col, cols_md, cols_xl } = this.colInfo
114      const openType = this.openType
115      const { style_type_title, style_type_description } = this.config.list
116      const {
117        show_serial_default, show_serial_md, show_serial_xl,
118        show_title_default, show_title_md, show_title_xl,
119        show_symbol_default, show_symbol_md, show_symbol_xl,
120        show_description_default, show_description_md, show_description_xl
121      } = this.config.faq
122
123      let html = `<div class="faq-out col-${cols_col} col-md-${cols_md} col-xl-${cols_xl}">
124          <a target="${!openType || !item.href ? '_self' : '_blank'}" href="${!openType || !item.href ? 'javascript:;' : globalThis.Server.getRinseHref(item.href, site) }">
125            <div class="faq-row ">
126              <div class="faq-title faq-content-color ${ show_serial_default?'':'hide-serial-sm' } ${ show_serial_md?'':'hide-serial-md' } ${ show_serial_xl?'':'hide-serial-xl' }" text-style="${ style_type_title }">
127                <div class="faq-index faq-title-color ">${ baseSeqNum + subIndex + 1 }</div>
128                <div class="faq-title-block faq-title-color ${ show_title_default?'':'hide-title-sm' } ${ show_title_md?'':'hide-title-md' } ${ show_title_xl?'':'hide-title-xl' }">${ item.title }</div>
129                <span class="faq-icon faq-content-color iconfont icon-action-plus ${ show_symbol_default?'':'hide-symbol-sm' } ${ show_symbol_md?'':'hide-symbol-md' } ${ show_symbol_xl?'':'hide-symbol-xl' }"></span>
130              </div>
131              <div class="faq-content faq-content-color ${ show_description_default?'':'hide-description-sm' } ${ show_description_md?'':'hide-description-md' } ${ show_description_xl?'':'hide-description-xl' }" text-style="${ style_type_description }">${ item.description }</div>
132            </div>
133          </a>
134        </div>`
135
136      return html
137    } catch (error) {
138      console.error(`ScriptFaqElement createItem error`, error);
139    }
140  }
141}