https://www.linyangpvc.com/assets/js/unit/store-list.js

1class ScriptStoreList extends Script {
2  constructor(params) {
3    super(params)
4    this.attrId = params.attrId
5    this.mySwiper = null; // 保存 Swiper 实例的引用
6    this.prevScreenWidth = window.innerWidth; // 记录前一个屏幕宽度
7    this.is_swiper = params.is_swiper
8    this.delay = params.delay
9    this.loop = params.loop
10    this.mr_sm = params.mr_sm
11    this.mr_md = params.mr_md
12    this.mr_xl = params.mr_xl
13    this.screenMr = '0px'
14    this.cols_xl = params.cols_xl
15    this.cols_md = params.cols_md
16    this.cols_col = params.cols_col
17    this.cols = '3'
18    this.screen = 'xl'
19    this.pageInfo = JSON.parse(this.utilts.htmlDecode(params.pageInfo))
20    this.emptyImg = params.emptyImg
21
22    this.$dom = document.querySelector(`#${this.attrId}`)
23    this.$item = this.$dom.querySelector('.sl-item')
24    this.$wrapper = this.$dom.querySelector('.swiper-wrapper')
25    this.weekDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
26  }
27
28  async init() {
29    // 初始化 Swiper 实例
30    let attrId = this.attrId
31    let autoplay = false
32    let mr_sm = this.mr_sm
33    let mr_md = this.mr_md
34    let mr_xl = this.mr_xl
35    let cols_xl = this.cols_xl
36    let cols_md = this.cols_md
37    let cols_col = this.cols_col
38    if (this.prevScreenWidth < 768) {
39      this.screenMr = mr_sm
40      this.cols = cols_col
41      this.screen = 'sm'
42    } else if (this.prevScreenWidth >= 768 && this.prevScreenWidth < 1200) {
43      this.screenMr = mr_md
44      this.cols = cols_md
45      this.screen = 'md'
46    } else if (this.prevScreenWidth >= 1200) {
47      this.screenMr = mr_xl
48      this.cols = cols_xl
49      this.screen = 'xl'
50    }
51    // 添加屏幕宽度变化的监听器
52    let resetSwiper = () => {
53      let currentScreenWidth = window.innerWidth;
54      let screenMr = '10px';
55      let screen = 'xl';
56      if (currentScreenWidth < 768) {
57        screenMr = mr_sm
58        screen = 'sm'
59        this.cols = this.cols_col
60      } else if (currentScreenWidth >= 768 && currentScreenWidth < 1200) {
61        screenMr = mr_md
62        screen = 'md'
63        this.cols = cols_md
64      } else if (currentScreenWidth >= 1200) {
65        screenMr = mr_xl
66        screen = 'xl'
67        this.cols = cols_xl
68      }
69      if (screen !== this.screen) {
70        this.screen = screen;
71        this.mySwiper.params.spaceBetween = parseFloat(this.screenMr) || 10;
72        this.mySwiper.params.slidesPerView = this.cols;
73        this.mySwiper.update(); // 更新 Swiper 实例的配置
74        this.prevScreenWidth = currentScreenWidth; // 更新前一个屏幕宽度
75      }
76    }
77    if (this.is_swiper == 1) {
78      autoplay = {
79        delay: this.delay,
80        disableOnInteraction: false
81      }
82      this.mySwiper = new Swiper(`#${attrId} .slswiper`, {
83        loop: this.loop == 1,
84        speed: 600,
85        spaceBetween: parseFloat(this.screenMr) || 10,
86        slidesPerView: this.cols,
87        navigation: {
88          nextEl: `#${attrId} .slswiper .next`,
89          prevEl: `#${attrId} .slswiper .prev`,
90        },
91        // autoplay: { delay: 3000, disableOnInteraction: false },
92        autoplay
93      })
94      window.addEventListener('resize', resetSwiper);
95    }
96  }
97
98  async renderList({ area = {}, page_number = 1 }) {
99    const num = page_number || this.pageInfo.page_number
100    const size = this.pageInfo.page_size
101    // this.$nodataDom.classList.remove('on')
102    // let page_category_id = this.pageInfo.page_category_id || 0
103    // window.app.info.page.cur_page_category_id = page_category_id
104    const { list = [] } = await window.app.getStoreListPageBySearch(num, size, area)
105    this.getTabList('', list)
106    // const $nodeList = this.$dom.querySelector('.unit-download-list__items')
107    // this.getTabList($nodeList || this.$unitList, data.list)
108    // if (!data.total) {
109    //   this.$nodataDom.classList.add('on')
110    // }
111  }
112
113  getTabList($tabNode, list) {
114    // $tabNode.innerHTML = ''
115    this.$wrapper.innerHTML = ''
116    list.forEach((el, index) => {
117      let item = this.$item.cloneNode(true)
118      item.href = el.page_url || ''
119
120      // 图片
121      let imgDom = item.querySelector('.base-image__img')
122      if (imgDom) imgDom.src = el.thumb || this.emptyImg
123
124      // 门店名
125      let nameDom = item.querySelector('.sl-title .text_ellipsis')
126      if (nameDom) nameDom.textContent = el.detail.title
127
128      // 联系人
129      let contactDom = item.querySelector('.sl-contact .text_ellipsis')
130      if (contactDom) contactDom.textContent = Utilts.ins().$t('contact') + ': ' + el.detail.contacts
131
132      // 联系邮箱
133      let emailDom = item.querySelector('.sl-email .text_ellipsis')
134      if (emailDom) emailDom.textContent = Utilts.ins().$t('email') + ': ' + el.email
135
136      // 联系电话
137      let phoneDom = item.querySelector('.sl-phone .text_ellipsis')
138      if (phoneDom) phoneDom.textContent = Utilts.ins().$t('phone') + ': ' + el.phone
139
140      // 营业时间
141      let openingHoursDom = item.querySelector('.sl-opening-hours .text_ellipsis')
142      let receptionHtml = Utilts.ins().$t('Store Hours') + ': '
143      if (openingHoursDom) {
144        // openingHoursDom.textContent = el.reception_time
145        el.reception_time.forEach((day, x) => {
146          receptionHtml += Utilts.ins().$t(this.weekDays[day.week - 1]) + ': '
147          day.time.forEach((time, y) => {
148            receptionHtml += ((time.start ? (time.start + ' - ' + time.end + '') : Utilts.ins().$t('Closed')) + '; ')
149          })
150        })
151        openingHoursDom.textContent = receptionHtml
152      }
153
154      // 联系地址
155      let addressDom = item.querySelector('.sl-address .text_ellipsis')
156      if (addressDom) {
157        addressDom.textContent = Utilts.ins().$t('address') + ': ' + (el.detail.address + ', ') + (el.detail.city + ', ') + (el.detail.province + ', ') + (el.detail.country || '')
158      }
159
160      // 联系描述
161      let lineDom = item.querySelector('.sl-line')
162      let summaryDom = item.querySelector('.sl-desc .text_ellipsis')
163      if (summaryDom) {
164        summaryDom.textContent = el.detail.summary
165        lineDom.classList.toggle('on', !!el.detail.summary)
166      }
167
168      this.$wrapper.appendChild(item)
169    })
170  }
171
172}