index.js
2.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import Taro, {Component} from '@tarojs/taro';
import {View, Text, Image, Navigator} from '@tarojs/components';
import { connect } from '@tarojs/redux';
import { bindActionCreators } from 'redux';
import {changeType} from '../../actions/filterMenu';
import filterIcon from '../../static/images/filter.png';
import sort from '../../static/images/sort.png';
import sortUp from '../../static/images/sort-up.png';
import sortDown from '../../static/images/sort-down.png';
import './index.scss';
@connect(({ filterMenu }) => {
return {filterMenu}
}, (dispatch) => {
return bindActionCreators({
changeType
}, dispatch);
})
export default class filterMenu extends Component {
constructor(props) {
super(props);
this.state = {
curOrder: ''
};
}
static defaultProps = {
tabs: [],
hasFilter: false,
tabClass: '',
}
componentWillMount() {
}
onChangeTab(item) {
let {filterMenu} = this.props;
let order = '';
if (item === 'price') {
order = this.state.curOrder === 's_t_asc' ? 's_t_desc' : 's_t_asc';
item = order;
} else {
if (item === filterMenu.curType) {
return;
}
}
this.props.changeType(item);
this.setState({
curOrder: order
});
}
render() {
let {tabs, hasFilter, tabClass, filterMenu} = this.props;
let {curOrder} = this.state;
let curType = filterMenu.curType;
let sortImg = sort;
if (curOrder === 's_t_desc') {
sortImg = sortDown;
}
if (curOrder === 's_t_asc') {
sortImg = sortUp;
}
curType = curType === curOrder ? 'price' : curType;
return (
<View className="tabs-nav">
{
tabs.map(item => {
return (
<View key={item.type} className="tab-box" onClick={this.onChangeTab.bind(this, item.type)}>
<Text className={curType == item.type ? `actived tab-item ${tabClass}` : 'tab-item'}>{item.text}</Text>
{
item.type === 'price' && <Image src={sortImg} className="sort-icon"></Image>
}
</View>
)
})
}
{
hasFilter &&
<Navigator className="filter-btn" url="/pages/filter/index" hover-class="none">
<Image src={filterIcon} className="filter-icon"></Image>
<Text className="text">筛选</Text>
</Navigator>
}
</View>
)
}
}