https://www.hardvogue.com/assets/js/unit/download-text-search.js

1/**
2 * 产品属性文本搜索组件
3 */
4class ScriptDownloadTextSearch extends Script {
5	constructor(params) {
6		super(params)
7		this.$unit = document.querySelector(`#${this.attrId}`)
8		if (!this.$unit) return
9		this.$main = this.$unit.querySelector('.unit-attr-text-search__items')
10		// this.product_attr_id = ''
11		// this.showSearchItemName = '--Please Selected--'
12		this.$input = this.$unit.querySelector('.form-control')
13		this.$incofont = this.$unit.querySelector('.iconfont.icon-action-search-lighter.btnSearch')
14	}
15
16	async init() {
17		// 如果是装修时才调用
18		// if (this.utilts.checkDesign()) this.renderAttr()
19		this.renderAttr()
20		// this.utilts.request({
21		// 	url: '/download/list-page',
22		// 	method: 'GET',
23		// 	params: {
24		// 		site_id: window.app.info.site.site_id,
25		// 		keyword: '88',
26		// 		// sort: 'sort asc',
27		// 		page_number: 1,
28		// 		page_size: 12
29		// 	}
30		// })
31		// 	.then(res => {
32		// 		console.log(1111111111122222,res);
33		// 	})
34		// 	.catch(err => reject(err))
35	}
36
37	// initLoadData() {
38	// 	this.$droupDowm.innerHTML = ''
39	// 	const list = this.getAttrList()
40	// 	if (list.length > 0){
41	// 		this.product_attr_id = list[0].id
42	// 		for (const item of list) {
43	// 			const $item = document.createElement('div')
44	// 			$item.classList.add('dropdown-item')
45	// 			$item.setAttribute('data-id', item.id)
46	// 			$item.setAttribute('href', '#')
47	// 			$item.innerText = item.name
48	// 			this.$droupDowm.append($item)
49	// 			$item.onclick = () => {
50	// 				this.product_attr_id = item.id
51	// 				const $btnText = this.$button.querySelector('.btn-text')
52	// 				$btnText.innerText = item.name
53	// 				this.$droupDowm.classList.toggle('show')
54	// 			}
55	// 		}
56	// 	} else {
57	// 		const tip = window.app.utilts.$t('no data')
58	// 		this.$droupDowm.innerHTML = `<div class='dropdown-item' style='color:grey;text-align:center;'>${tip}<div>`
59	// 	} 
60		
61	// }
62
63	initEvent() {
64		// 下拉属性名改变事件
65		// this.$button.addEventListener('click', (event) => {
66		// 	event.stopPropagation()
67		// 	this.$droupDowm.classList.toggle('show')
68		// })
69
70		// 搜索图标点击查找事件
71		this.$incofont.addEventListener('click', (event) => {
72			event.stopPropagation()
73			this.searchData()
74		})
75
76		// 回车跳转
77		this.$input.addEventListener('keydown', (event) => {
78			event = event || window.event;
79			event.stopPropagation()
80			if (event.keyCode === 13) this.searchData()
81		})
82
83		// 点击页面空白，折叠已展开栏目
84		// document.querySelector('body').addEventListener('click', () => {
85		// 	this.$droupDowm.classList.remove('show')
86		// })
87	}
88
89	/**
90	 * 搜索数据
91	 */
92	searchData() {
93		window.app.info.pagination.page_number = 1
94		const keyword = this.$input.value
95		window.app.info.renderDownloadList({
96			page_number:1,
97			keyword
98		})
99		// this.setAttrParams(content)
100		// window.app.info.renderListView()
101		// const product_list_el= this.$unit.parentNode.parentNode.parentNode.querySelector('[package-unit-type="product-list"]')
102		// const list_el = this.$unit.parentNode.parentNode.parentNode.querySelector('[package-unit-type="list"]')
103		// if (!list_el && !product_list_el) return
104		// if(list_el) {
105		// 	list_el.parentNode.parentNode.style.overflow = 'auto'
106		// 	window.scrollTo({ top: list_el.getBoundingClientRect().top - 85})
107		// }
108		// if(product_list_el) window.scrollTo({ behavior: 'smooth', top: product_list_el.getBoundingClientRect().top - 85})
109	}
110
111	/**
112	 * 设置全局attr_params参数
113	 * @param {string} content 查找的内容 
114	 * @returns 
115	 */
116	// setAttrParams(content) {
117	// 	// 如果没有内容,删除存在的
118	// 	let attrs = window.app.info.attr_params
119	// 	if (!content) {
120	// 		// 清空文本查找项
121	// 		if (attrs.length > 0) {
122	// 			window.app.info.attr_params = attrs.filter(p => typeof p.content !== 'string')
123	// 		}
124	// 		return
125	// 	}
126	// 	// 如果当前属性查找参数为空，添加一条数组记录
127	// 	const params = { product_attr_id: this.product_attr_id, content }
128	// 	if (attrs.length === 0) window.app.info.attr_params = [params]
129	// 	else {
130	// 		// 是否有文本查找项
131	// 		const attrInfo = attrs.find(p => typeof p.content === 'string')
132	// 		if (attrInfo) {
133	// 			attrInfo.product_attr_id = this.product_attr_id
134	// 			attrInfo.content = content
135	// 		}
136	// 		else window.app.info.attr_params.push(params)
137	// 	}
138	// }
139
140	/** 
141	 * 获取产品属性参数
142	 */
143	// getAttrList() {
144	// 	const list = window.app.info.productAttrList
145	// 		.filter(p => p.input_type === 1 && p.status && p.is_show)
146	// 		.map((p, i) => ({ id: p.id, name: p.sign || `name${i}`, type: p.input_type }))
147	// 	return list
148	// }
149
150	renderAttr() {
151		// 创建元素
152		// this.createdSearchElement()
153		// 加载数据
154		// this.initLoadData()
155		// 添加事件
156		this.initEvent()
157	}
158
159
160	// createdSearchElement() {
161	// 	// 清空旧的数据
162	// 	this.$main.innerHTML = ''
163	// 	// 创建divBox
164	// 	const $searchBox = document.createElement('div')
165	// 	$searchBox.classList.add('input-group')
166
167	// 	const $inputGroup = document.createElement('div')
168	// 	$inputGroup.classList.add('input-group-prepend')
169	// 	// 创建下拉属性项
170	// 	this.$button = null
171	// 	this.$button = document.createElement('button')
172	// 	this.$button.classList.add('btn', 'btn-outline-secondary')
173	// 	const html = `<span class="btn-text text-truncate"> ${this.showSearchItemName} </span>
174	// 		<span class="iconfont icon-action-bottom-lighter ml-1"></span>`
175	// 	this.$button.innerHTML = html
176	// 	$inputGroup.append(this.$button)
177
178	// 	// 创建搜索文本项
179	// 	this.$droupDowm = document.createElement('div')
180	// 	this.$droupDowm.classList.add('dropdown-menu')
181	// 	$inputGroup.append(this.$droupDowm)
182
183	// 	this.$input = null
184	// 	this.$input = document.createElement('input')
185	// 	this.$input.classList.add('form-control')
186	// 	$inputGroup.append(this.$input)
187	// 	// 创建搜索图标
188	// 	this.$incofont = null
189	// 	this.$incofont = document.createElement('span')
190	// 	this.$incofont.classList.add('iconfont', 'icon-action-search-lighter', 'btnSearch')
191
192	// 	$searchBox.append($inputGroup)
193	// 	$searchBox.append(this.$input)
194	// 	$searchBox.append(this.$incofont)

195	// 	this.$main.append($searchBox)
196	// }
197
198}