index.js
2.79 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
import Taro, {Component} from '@tarojs/taro';
import {View, Text, Image, ScrollView} from '@tarojs/components';
import {getImgUrl} from '../../utils';
import { connect } from '@tarojs/redux';
import { setFilter } from '../../actions/filterData'
import './index.scss';
@connect(({ filterData }) => ({
filterData
}), (dispatch) => ({
setFilter (obj) {
dispatch(setFilter(obj))
}
}))
export default class FilterGroup extends Component {
constructor(props) {
super(props);
}
static defaultProps = {
list: {}
}
componentDidMount() {
let {setFilter, filterData, list} = this.props;
if (!filterData[list.filterId]) {
setFilter({[list.filterId]: ''});
}
this.setState({filterId: list.filterId});
}
changeFilter(item) {
let {setFilter, filterData} = this.props;
if (filterData[this.state.filterId] && item.itemId === filterData[this.state.filterId]) {
setFilter({[this.state.filterId]: ''});
} else {
setFilter({[this.state.filterId]: item.itemId});
}
}
render() {
let {list, filterData} = this.props;
let itemList = list.itemList || [];
return (
<View className="group-box">
<View className="title">{list.filterName}</View>
<ScrollView
className='group'
scrollX
scrollWithAnimation
scrollLeft='0'>
{
itemList.map(item => {
return (
<View key={item.itemId} className="group-item">
{
list.filterName === '品牌' &&
<View className={filterData[list.filterId] === item.itemId ? 'group-img actived' : 'group-img'} onClick={this.changeFilter.bind(this, item)}>
<Image src={getImgUrl(item.itemUrl, 140, 70)} className="img" mode="aspectFit"/>
<View className="text">{item.itemName}</View>
</View>
}
{
list.filterName !== '品牌' &&
<View className={filterData[list.filterId] === item.itemId ? 'group-text actived' : 'group-text'} onClick={this.changeFilter.bind(this, item)}>{item.itemName}</View>
}
</View>
)
})
}
</ScrollView>
</View>
)
}
}