https://www.canwindg.com/assets/js/unit/product-sort.js

1/**
2 * 产品排序组件
3 */
4class ScriptProductSort extends Script {
5	constructor(params) {
6		super(params)
7		this.$unit = document.querySelector(`#${this.attrId}`)
8		if (!this.$unit) return
9		this.prefx = 'unit-product-sort'
10		this.$main = this.$unit.querySelector(`.${this.prefx}__items`)
11		this.$main.innerHTML = ''
12		this.sortName = Utilts.ins().$t('Sort By')
13		this.templateType = params.templateType 
14		// 排序项
15		this.sortList = [
16			{ id: 5, name: Utilts.ins().$t('Default'), active: false, sort: 'sort desc,create_time desc' },
17			{ id: 1, name: Utilts.ins().$t('Newest'), active: false, sort: 'create_time desc,id desc' },
18			{ id: 2, name: Utilts.ins().$t('Lowest Price'), active: false, sort: 'price asc' },
19			{ id: 3, name: Utilts.ins().$t('Highest Price'), active: false, sort: 'price desc' },
20			{ id: 4, name: Utilts.ins().$t('Hot Sale'), active: false, sort: 'order desc' },
21			{ id: 5, name: Utilts.ins().$t('Most Popular'), active: false, sort: 'favorite desc' }
22		]
23		if(this.templateType==='b2b'){
24			this.sortList = [
25				{ id: 5, name: Utilts.ins().$t('Default'), active: false, sort: 'sort desc,create_time desc' },
26				{ id: 1, name: Utilts.ins().$t('Newest'), active: false, sort: 'create_time desc,id desc' },
27			]
28		}
29	}
30	async init() {
31		this.initSort()
32		this.initHideElement()
33		const sortItems = document.querySelector(`#${this.attrId} .unit-product-sort__items`)
34		const prefix = this.prefx
35		const unitElem = this.$unit
36		const sortList = this.sortList
37		sortItems.addEventListener('click', function (evt) {
38			const clickElem = evt.target
39			const elemFilterTextReg = new RegExp(`${prefix}__filter(-text)?\\b(?!-)`, 'i')
40			const elemFilterPosiText = new RegExp(`${prefix}__filter-posi(-text)?\\b(?!-)`, 'i')
41			if (elemFilterTextReg.test(clickElem.className) || elemFilterTextReg.test(clickElem.parentElement.className)) {
42				// 打开下拉排序列表
43				evt.stopPropagation()
44				const itemSearchFilterBox = unitElem.querySelector(`.${prefix}__filter-text`)
45				itemSearchFilterBox && itemSearchFilterBox.classList.toggle('is_active')
46			} else if (clickElem instanceof HTMLParagraphElement && elemFilterPosiText.test(clickElem.parentElement.className)) {
47				// 排序下拉列表选中元素点击
48				evt.stopPropagation()
49				const list = Array.prototype.filter.call(clickElem.parentElement.children, function (node) {
50					return node instanceof HTMLParagraphElement
51				})
52				const idx = list.indexOf(clickElem)
53				list.forEach(function (elem) {
54					elem === clickElem ? (elem.classList.add('is_active')) : (elem.classList.remove('is_active'))
55				})
56				if (idx > -1 && sortList[idx]) {
57					const filter = sortList[idx]
58					window.app.info.product_sort = filter.sort
59					if (window.app.info && window.app.info.renderListView) {
60						window.app.info.renderListView()
61					}
62				}
63				const itemSearchFilterBox = unitElem.querySelector(`.${prefix}__filter-text`)
64				itemSearchFilterBox.classList.toggle('is_active')
65				itemSearchFilterBox.firstChild.innerText = clickElem.innerText
66			}
67
68		})
69	}
70
71	// 点击页面空白，折叠已展开栏目
72	initHideElement() {
73		document.querySelector('body').addEventListener('click', () => {
74			this.$itemSearchFilterBox.classList.remove('is_active')
75		})
76	}
77
78	initSort() {
79		this.$main.innerHTML = ''
80		this.$main.append(this.getSortListElement())
81	}
82
83	h(tag, props, text) {
84		const $item = document.createElement(tag)
85		for (const key in props) {
86			if (Object.hasOwnProperty.call(props, key)) {
87				const element = props[key];
88				if (key === 'class') {
89					if (Array.isArray(element)) $item.classList.add(...element)
90					else $item.classList.add(element)
91				}
92				else $item.setAttribute(key, element)
93			}
94		}
95		if (text) $item.innerHTML = text
96		return $item
97	}
98	/**
99	* 获取排序项 
100	* @param {Object} data 排序信息 
101	* @returns 
102	*/
103	getSortListElement() {
104		const $itemBox = this.h('div', { class: `${this.prefx}__filter` })
105		this.$itemSearchFilterBox = this.h('div', { class: `${this.prefx}__filter-text` })
106		const $span = this.h('span', {}, this.sortName)
107		this.$itemSearchFilterBox.append($span)
108
109		// this.$itemSearchFilterBox.onclick = (event) => {
110		// 	event.stopPropagation()
111		// 	this.$itemSearchFilterBox.classList.toggle('is_active')
112		// 	const $searchItem = this.$unit.querySelector('.unit-attr-text-search__items')
113		// 	if ($searchItem) $searchItem.classList.remove('show')
114		// }
115
116		const $icon = this.h('span', { class: ['iconfont', 'icon-action-bottom-lighter', 'ml-1'] })
117		this.$itemSearchFilterBox.append($icon)
118		$itemBox.append(this.$itemSearchFilterBox)
119
120		const $filterPosiBox = this.h('div', { class: `${this.prefx}__filter-posi` })
121
122		const attr = { class: [`${this.prefx}__filter-posi-text`, `${this.prefx}__sanjiao`, `${this.prefx}__isChoose`] }
123		const $filterPosiBoxText = this.h('div', attr)
124
125		this.sortList.forEach((data, index) => {
126			const $pItem = this.h('p', {}, data.name)
127			if (data.active) $pItem.classList.add('is_active')
128			// $pItem.onclick = (event) => {
129			// 	// event.stopPropagation()
130			// 	this.sortList.forEach(p => {
131			// 		if (p.id === data.id) {
132			// 			p.active = true
133			// 			this.sortName = data.name
134			// 			window.app.info.product_sort = p.sort
135			// 		} else {
136			// 			p.active = false
137			// 		}
138			// 	})
139			// 	// this.initSort()
140			// 	// window.app.info.renderListView()
141			// }
142			$filterPosiBoxText.append($pItem)
143		})
144		$filterPosiBox.append($filterPosiBoxText)
145		this.$itemSearchFilterBox.append($filterPosiBox)
146		return $itemBox
147	}
148}