https://www.szumao.com/assets/js/unit/store-search.js

1class ScriptStoreSearch extends Script {
2  constructor(params) {
3    super(params)
4    this.$unit = document.querySelector(`#${this.attrId}`)
5    if (!this.$unit) return
6    // this.$main = this.$unit.querySelector('.unit-attr-text-search__items')
7    this.$input = this.$unit.querySelector('.ss-input')
8    this.$incofont = this.$unit.querySelector('.ss-btn')
9
10    this.$storeListDom = this.$unit.querySelector('.ss-area-list')
11    this.timer = null
12    // this.address = {}
13  }
14
15  async init() {
16    // 如果是装修时才调用
17    // if (this.utilts.checkDesign()) this.renderAttr()
18    this.renderAttr()
19  }
20
21  initEvent() {
22    // 搜索图标点击查找事件
23    this.$incofont.addEventListener('click', (event) => {
24      event.stopPropagation()
25      if (!this.$input.value) {
26        window.app.info.storeAddress = {}
27      }
28
29      this.searchData()
30    })
31    // 回车跳转
32    this.$input.addEventListener('keydown', (event) => {
33      event = event || window.event;
34      event.stopPropagation()
35      if (event.keyCode === 13) {
36        this.searchData()
37      }
38    })
39    /**
40     * 输入框输入事件
41     */
42    this.$input.addEventListener('input', (event) => {
43      event.stopPropagation()
44      this.loadData()
45    })
46    /**
47     * 输入框失去焦点事件
48     */
49    this.$input.addEventListener('blur', (event) => {
50      event.stopPropagation()
51      setTimeout(() => {
52        this.$storeListDom.classList.remove('on')
53      }, 200);
54
55    })
56  }
57
58  loadData() {
59    if (this.timer) clearTimeout(this.timer)
60    if (this.$input.value === '') {
61      this.$storeListDom.innerHTML = ''
62      this.$storeListDom.classList.remove('on')
63      return
64    }
65    this.timer = setTimeout(() => {
66      window.app.utilts.request({
67        url: '/store/get-area-list',
68        method: 'GET',
69        prefix: '/qqt',
70        params: {
71          site_id: window.app.info.site.site_id,
72          search: this.$input.value
73        }
74      }).then(res => {
75        if (res.code === 0) {
76          this.initStoreList(res.data)
77        }
78      }).catch(error => reject(error))
79    }, 500)
80  }
81
82  /**
83   * 搜索数据
84   */
85  searchData() {
86    window.app.info.pagination.page_number = 1
87    let area = window.app.info.storeAddress
88    // if (!this.$input.value) {
89    // this.address = {}
90    // window.app.info.storeAddress = {}
91    // }
92
93    window.app.info.renderStoreList({
94      page_number: 1,
95      area
96    })
97  }
98
99  renderAttr() {
100    this.initEvent()
101  }
102
103  initStoreList(data) {
104    let html = ''
105    data.forEach(item => {
106      let areaName = Object.values(item).reverse().join(', ')
107      html += `<div text-style="3" data-address='${JSON.stringify(item).replace(/'/g, "&apos;")}'>${areaName}</div>`
108    })
109    this.$storeListDom.innerHTML = html
110    if (html) {
111      this.initClickInsert()
112      window.app.info.storeAddress = data[0]
113    } else {
114      this.$storeListDom.innerHTML = `<div text-style="3">${(window.app.utilts.$t('No information available for this area.'))}</div>`
115      window.app.info.storeAddress = {}
116    }
117    this.$storeListDom.classList.add('on')
118  }
119
120  initClickInsert() {
121    let items = this.$storeListDom.querySelectorAll('div')
122    items.forEach(item => {
123      item.onclick = (event) => {
124        this.$input.value = event.target.innerHTML
125        // this.address = JSON.parse(event.target.getAttribute('data-address').replace(/&apos;/g, "'"))
126        window.app.info.storeAddress = JSON.parse(event.target.getAttribute('data-address').replace(/&apos;/g, "'"))
127        this.searchData()
128        this.$storeListDom.innerHTML = ''
129        this.$storeListDom.classList.remove('on')
130        this.$input.focus()
131      }
132    })
133  }
134}