mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 399102c03e611d7bc2e7cfaf350ba6ef5e2e8d84 1 parent 0cd42411

整理代码 review by 红魔

Inline Side-by-side
Showing 16 changed files with 328 additions and 913 deletions
1 -'use strict'  
2 -  
3 -import React, {Component} from 'react';  
4 -import {  
5 - StyleSheet,  
6 - Dimensions,  
7 - Platform,  
8 - View,  
9 - Text,  
10 - Alert,  
11 - Image,  
12 - ListView,  
13 - NativeModules,  
14 - InteractionManager,  
15 - NativeAppEventEmitter,  
16 - TouchableOpacity,  
17 - PixelRatio,  
18 -} from 'react-native'  
19 -  
20 -import {bindActionCreators} from 'redux';  
21 -import {connect} from 'react-redux';  
22 -import {Map} from 'immutable';  
23 -import * as brandStoreActions from '../../../reducers/brandStore/brandStoreActions';  
24 -import BrandStoreHeaderView from '../brandStoreSubView/SessionHeader/BrandStoreHeaderView';  
25 -import CouponCell from '../brandStoreSubView/Cells/CouponCell';  
26 -import BrandListCell from '../brandStoreSubView/Cells/BrandListCell';  
27 -import BrandSwiper from '../brandStoreSubView/Cells/BrandSwiper';  
28 -  
29 -  
30 -const actions = [  
31 - brandStoreActions,  
32 -];  
33 -  
34 -function mapStateToProps(state) {  
35 - return {  
36 - ...state  
37 - };  
38 -}  
39 -  
40 -function mapDispatchToProps(dispatch) {  
41 -  
42 - const creators = Map()  
43 - .merge(...actions)  
44 - .filter(value => typeof value === 'function')  
45 - .toObject();  
46 -  
47 - return {  
48 - actions: bindActionCreators(creators, dispatch),  
49 - dispatch  
50 - };  
51 -}  
52 -  
53 -class BradnStoreCenter extends Component {  
54 - constructor(props) {  
55 - super(props);  
56 -  
57 - let getSectionData = (dataBlob, sectionID) => {  
58 - return dataBlob[sectionID];  
59 - };  
60 -  
61 - let getRowData = (dataBlob, sectionID, rowID) => {  
62 - return dataBlob[sectionID + ':' + rowID];  
63 - };  
64 -  
65 - this.state = {  
66 - dataSource: new ListView.DataSource({  
67 - getSectionData: getSectionData, // 获取组中数据  
68 - getRowData: getRowData, // 获取行中的数据  
69 - rowHasChanged: (r1, r2) => r1 != r2,  
70 - sectionHeaderHasChanged: (s1, s2) => s1 !== s2  
71 - })  
72 - };  
73 -  
74 - this.loadDataFromJason();  
75 - this._onPressCollection = this._onPressCollection.bind(this);  
76 - this._onPressCoupon = this._onPressCoupon.bind(this);  
77 - this._onPressBrandItem= this._onPressBrandItem.bind(this);  
78 - this.onPressImage1 = this._onPressImage1.bind(this);  
79 -  
80 - }  
81 -  
82 - componentDidMount() {  
83 -  
84 - }  
85 -  
86 - componentWillUnmount() {  
87 -  
88 - }  
89 -  
90 - _onPressCollection(){  
91 - this.props.actions.onPressCollection();  
92 - }  
93 - _onPressCoupon(){  
94 - this.props.actions.onPressCoupon();  
95 - }  
96 - _onPressBrandItem(){  
97 - this.props.actions.onPressBrandItem();  
98 - }  
99 - _onPressImage1(){  
100 -  
101 - }  
102 - loadDataFromJason() {  
103 - let jsonData = require('../../../image/Car.json');  
104 - let dataBlob = {},  
105 - sectionIDs = [],  
106 - rowIDs = [],  
107 - cars = [];  
108 - let datas = jsonData.data;  
109 - for (let i in datas) {  
110 - //step 1、把组数据放入sectionIDs数组中  
111 - sectionIDs.push(i);  
112 - //step 2、把组中内容放dataBlob对象中  
113 - dataBlob[i] = datas[i].title;  
114 - //step 3、取出该组中所有的车  
115 - cars = datas[i].cars;  
116 - //step 4记录每一行中的数据  
117 - rowIDs[i] = [];  
118 - //step 5、获取行中每一组数据  
119 - for (let j in cars) {  
120 - //把行号放入rowIDs中  
121 - rowIDs[i].push(j);  
122 - //把每一行中的内容放dataBlob对象中  
123 - dataBlob[i + ':' + j] = cars[j];  
124 - }  
125 - }  
126 - this.state = {  
127 - dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)  
128 - };  
129 - }  
130 - render() {  
131 - return (  
132 - <ListView  
133 - dataSource={this.state.dataSource}  
134 - renderRow={this.renderRow.bind(this)}  
135 - renderSectionHeader={this.renderSectionHeader.bind(this)}  
136 - renderHeader = {this.renderHeader.bind(this)}  
137 - contentContainerStyle={styles.listViewStyle}//设置cell的样式  
138 - />  
139 - );  
140 - }  
141 - // 每一行的数据  
142 - renderRow(rowData,sectionID,rowID,highlightRow) {  
143 -  
144 - if (sectionID === '0') {  
145 - switch (rowID) {  
146 - case '0':  
147 - {  
148 - return (  
149 - <CouponCell  
150 - src={'aa'}  
151 - onPressCoupon={this._onPressCoupon}  
152 - />  
153 - );  
154 - }  
155 - break;  
156 - case '1':  
157 - {  
158 - return (  
159 - <BrandListCell  
160 - src={'aa'}  
161 - onPressBrandItem={this._onPressBrandItem}  
162 - />  
163 - );  
164 - }  
165 - break;  
166 - default:  
167 - {  
168 - return (  
169 - <BrandSwiper  
170 - src={'aa'}  
171 - // onPressBrandItem={this._onPressBrandItem}  
172 - />  
173 - );  
174 - }  
175 - break;  
176 - }  
177 - }else {  
178 - return (  
179 - <TouchableOpacity activeOpacity={0.5}>  
180 - <View style={styles.row}>  
181 - <Text style={styles.text}>  
182 - {rowData.name}  
183 - </Text>  
184 - </View>  
185 - </TouchableOpacity>  
186 - );  
187 - }  
188 - }  
189 -  
190 - // 每一组中的数据  
191 - renderSectionHeader(sectionData, sectionID) {  
192 -  
193 - //根据数据显示不同的header  
194 - switch (sectionData) {  
195 - case 'A':  
196 - {  
197 - return (  
198 - <View style={styles.headerViewStyle}>  
199 - <Text style={{marginLeft: 5, color: 'white'}}>{sectionData}</Text>  
200 - </View>  
201 - );  
202 - }  
203 - break;  
204 - default:  
205 - {  
206 - return (  
207 - <View style={styles.headerViewStyle}>  
208 - <Text style={{marginLeft: 5, color: 'white'}}>{sectionData}</Text>  
209 - </View>  
210 - );  
211 - }  
212 - break;  
213 - }  
214 - }  
215 -  
216 - renderHeader(){  
217 - return(  
218 - <BrandStoreHeaderView  
219 - src={'aa'}  
220 - onPressCollection={this._onPressCollection}  
221 - />  
222 - );  
223 - }  
224 -}  
225 -  
226 -let styles = StyleSheet.create({  
227 - container: {  
228 - flex: 1,  
229 - },  
230 - separator: {  
231 - height: 0.5,  
232 - backgroundColor: 'rgba(255,255,255,0.5)',  
233 - },  
234 - listViewStyle:{  
235 - justifyContent: 'space-around',  
236 - flexDirection: 'row',  
237 - flexWrap: 'wrap',  
238 - alignItems:'flex-start'  
239 - },  
240 - rowStyle: {  
241 - flexDirection: 'row',  
242 - alignItems: 'center',  
243 - padding: 10,  
244 - borderBottomColor: 'grey',  
245 - borderBottomWidth: 1 / PixelRatio.get()  
246 - },  
247 - headerViewStyle: {  
248 - height: 64,  
249 - backgroundColor: 'blue',  
250 - justifyContent: 'center',  
251 - alignItems: 'center',  
252 - width: Dimensions.get('window').width,  
253 - },  
254 - row: {  
255 - justifyContent: 'center',  
256 - padding: 5,  
257 - margin: 3,  
258 - width: 150,  
259 - height: 200,  
260 - backgroundColor: '#F6F6F6',  
261 - alignItems: 'center',  
262 - borderWidth: 1,  
263 - borderRadius: 5,  
264 - borderColor: '#CCC'  
265 - },  
266 - text: {  
267 - flex: 1,  
268 - marginTop: 5,  
269 - fontWeight: 'bold'  
270 - },  
271 - list: {  
272 - marginTop:5,  
273 - justifyContent: 'space-around',  
274 - flexDirection: 'row',  
275 - flexWrap: 'wrap'  
276 - },  
277 -});  
278 -  
279 -export default connect(mapStateToProps, mapDispatchToProps)(BradnStoreCenter);  
1 -'use strict'  
2 -  
3 -import React, {Component} from 'react';  
4 -import {  
5 - StyleSheet,  
6 - Dimensions,  
7 - Platform,  
8 - View,  
9 - Text,  
10 - Alert,  
11 - Image,  
12 - ListView,  
13 - NativeModules,  
14 - InteractionManager,  
15 - NativeAppEventEmitter,  
16 - TouchableOpacity,  
17 - PixelRatio,  
18 -} from 'react-native'  
19 -  
20 -import {bindActionCreators} from 'redux';  
21 -import {connect} from 'react-redux';  
22 -import {Map} from 'immutable';  
23 -import * as brandStoreActions from '../../../reducers/brandStore/brandStoreActions';  
24 -import BrandStoreHeaderView from '../brandStoreSubView/SessionHeader/BrandStoreHeaderView';  
25 -import CouponCell from '../brandStoreSubView/Cells/CouponCell';  
26 -import BrandListCell from '../brandStoreSubView/Cells/BrandListCell';  
27 -import BrandSwiper from '../brandStoreSubView/Cells/BrandSwiper';  
28 -  
29 -  
30 -const actions = [  
31 - brandStoreActions,  
32 -];  
33 -  
34 -function mapStateToProps(state) {  
35 - return {  
36 - ...state  
37 - };  
38 -}  
39 -  
40 -function mapDispatchToProps(dispatch) {  
41 -  
42 - const creators = Map()  
43 - .merge(...actions)  
44 - .filter(value => typeof value === 'function')  
45 - .toObject();  
46 -  
47 - return {  
48 - actions: bindActionCreators(creators, dispatch),  
49 - dispatch  
50 - };  
51 -}  
52 -  
53 -class BradnStoreCenter extends Component {  
54 - constructor(props) {  
55 - super(props);  
56 -  
57 - let getSectionData = (dataBlob, sectionID) => {  
58 - return dataBlob[sectionID];  
59 - };  
60 -  
61 - let getRowData = (dataBlob, sectionID, rowID) => {  
62 - return dataBlob[sectionID + ':' + rowID];  
63 - };  
64 -  
65 - this.state = {  
66 - dataSource: new ListView.DataSource({  
67 - getSectionData: getSectionData, // 获取组中数据  
68 - getRowData: getRowData, // 获取行中的数据  
69 - rowHasChanged: (r1, r2) => r1 != r2,  
70 - sectionHeaderHasChanged: (s1, s2) => s1 !== s2  
71 - })  
72 - };  
73 -  
74 - this.loadDataFromJason();  
75 - this._onPressCollection = this._onPressCollection.bind(this);  
76 - this._onPressCoupon = this._onPressCoupon.bind(this);  
77 - this._onPressBrandItem= this._onPressBrandItem.bind(this);  
78 - this.onPressImage1 = this._onPressImage1.bind(this);  
79 -  
80 - }  
81 -  
82 - componentDidMount() {  
83 -  
84 - }  
85 -  
86 - componentWillUnmount() {  
87 -  
88 - }  
89 -  
90 - _onPressCollection(){  
91 - this.props.actions.onPressCollection();  
92 - }  
93 - _onPressCoupon(){  
94 - this.props.actions.onPressCoupon();  
95 - }  
96 - _onPressBrandItem(){  
97 - this.props.actions.onPressBrandItem();  
98 - }  
99 - _onPressImage1(){  
100 -  
101 - }  
102 - loadDataFromJason() {  
103 - let jsonData = require('../../../image/Car.json');  
104 - let dataBlob = {},  
105 - sectionIDs = [],  
106 - rowIDs = [],  
107 - cars = [];  
108 - let datas = jsonData.data;  
109 - for (let i in datas) {  
110 - //step 1、把组数据放入sectionIDs数组中  
111 - sectionIDs.push(i);  
112 - //step 2、把组中内容放dataBlob对象中  
113 - dataBlob[i] = datas[i].title;  
114 - //step 3、取出该组中所有的车  
115 - cars = datas[i].cars;  
116 - //step 4记录每一行中的数据  
117 - rowIDs[i] = [];  
118 - //step 5、获取行中每一组数据  
119 - for (let j in cars) {  
120 - //把行号放入rowIDs中  
121 - rowIDs[i].push(j);  
122 - //把每一行中的内容放dataBlob对象中  
123 - dataBlob[i + ':' + j] = cars[j];  
124 - }  
125 - }  
126 - this.state = {  
127 - dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)  
128 - };  
129 - }  
130 - render() {  
131 - return (  
132 - <ListView  
133 - dataSource={this.state.dataSource}  
134 - renderRow={this.renderRow.bind(this)}  
135 - renderSectionHeader={this.renderSectionHeader.bind(this)}  
136 - renderHeader = {this.renderHeader.bind(this)}  
137 - contentContainerStyle={styles.listViewStyle}//设置cell的样式  
138 - />  
139 - );  
140 - }  
141 - // 每一行的数据  
142 - renderRow(rowData,sectionID,rowID,highlightRow) {  
143 -  
144 - if (sectionID === '0') {  
145 - switch (rowID) {  
146 - case '0':  
147 - {  
148 - return (  
149 - <CouponCell  
150 - src={'aa'}  
151 - onPressCoupon={this._onPressCoupon}  
152 - />  
153 - );  
154 - }  
155 - break;  
156 - case '1':  
157 - {  
158 - return (  
159 - <BrandListCell  
160 - src={'aa'}  
161 - onPressBrandItem={this._onPressBrandItem}  
162 - />  
163 - );  
164 - }  
165 - break;  
166 - default:  
167 - {  
168 - return (  
169 - <BrandSwiper  
170 - src={'aa'}  
171 - // onPressBrandItem={this._onPressBrandItem}  
172 - />  
173 - );  
174 - }  
175 - break;  
176 - }  
177 - }else {  
178 - return (  
179 - <TouchableOpacity activeOpacity={0.5}>  
180 - <View style={styles.row}>  
181 - <Text style={styles.text}>  
182 - {rowData.name}  
183 - </Text>  
184 - </View>  
185 - </TouchableOpacity>  
186 - );  
187 - }  
188 - }  
189 -  
190 - // 每一组中的数据  
191 - renderSectionHeader(sectionData, sectionID) {  
192 -  
193 - //根据数据显示不同的header  
194 - switch (sectionData) {  
195 - case 'A':  
196 - {  
197 - return (  
198 - <View style={styles.headerViewStyle}>  
199 - <Text style={{marginLeft: 5, color: 'white'}}>{sectionData}</Text>  
200 - </View>  
201 - );  
202 - }  
203 - break;  
204 - default:  
205 - {  
206 - return (  
207 - <View style={styles.headerViewStyle}>  
208 - <Text style={{marginLeft: 5, color: 'white'}}>{sectionData}</Text>  
209 - </View>  
210 - );  
211 - }  
212 - break;  
213 - }  
214 - }  
215 -  
216 - renderHeader(){  
217 - return(  
218 - <BrandStoreHeaderView  
219 - src={'aa'}  
220 - onPressCollection={this._onPressCollection}  
221 - />  
222 - );  
223 - }  
224 -}  
225 -  
226 -let styles = StyleSheet.create({  
227 - container: {  
228 - flex: 1,  
229 - },  
230 - separator: {  
231 - height: 0.5,  
232 - backgroundColor: 'rgba(255,255,255,0.5)',  
233 - },  
234 - listViewStyle:{  
235 - justifyContent: 'space-around',  
236 - flexDirection: 'row',  
237 - flexWrap: 'wrap',  
238 - alignItems:'flex-start'  
239 - },  
240 - rowStyle: {  
241 - flexDirection: 'row',  
242 - alignItems: 'center',  
243 - padding: 10,  
244 - borderBottomColor: 'grey',  
245 - borderBottomWidth: 1 / PixelRatio.get()  
246 - },  
247 - headerViewStyle: {  
248 - height: 64,  
249 - backgroundColor: 'blue',  
250 - justifyContent: 'center',  
251 - alignItems: 'center',  
252 - width: Dimensions.get('window').width,  
253 - },  
254 - row: {  
255 - justifyContent: 'center',  
256 - padding: 5,  
257 - margin: 3,  
258 - width: 150,  
259 - height: 200,  
260 - backgroundColor: '#F6F6F6',  
261 - alignItems: 'center',  
262 - borderWidth: 1,  
263 - borderRadius: 5,  
264 - borderColor: '#CCC'  
265 - },  
266 - text: {  
267 - flex: 1,  
268 - marginTop: 5,  
269 - fontWeight: 'bold'  
270 - },  
271 - list: {  
272 - marginTop:5,  
273 - justifyContent: 'space-around',  
274 - flexDirection: 'row',  
275 - flexWrap: 'wrap'  
276 - },  
277 -});  
278 -  
279 -export default connect(mapStateToProps, mapDispatchToProps)(BradnStoreCenter);  
1 -'use strict';  
2 -  
3 -import React from 'react';  
4 -import ReactNative from 'react-native';  
5 -  
6 -const {  
7 - AppRegistry,  
8 - StyleSheet,  
9 - Text,  
10 - View,  
11 - Image,  
12 - ListView,  
13 - Dimensions,  
14 - TouchableOpacity,  
15 -} = ReactNative;  
16 -  
17 -export default class BrandListCell extends React.Component {  
18 - constructor(props) {  
19 - super(props);  
20 - let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});  
21 - this.state = {  
22 - dataSource: ds.cloneWithRows(['row 1', 'row 2' ,'row 3' ,'row 4', 'row 5']),  
23 - touchBrandItem : false,  
24 - };  
25 - }  
26 - render() {  
27 - return (  
28 -  
29 - <View style={styles.cellList}>  
30 - <Text style={styles.titleStyle}>  
31 - 品牌一览  
32 - </Text>  
33 - <ListView  
34 - showsHorizontalScrollIndicator ={false}  
35 - dataSource={this.state.dataSource}  
36 - horizontal={true}  
37 - renderRow={this.renderRow.bind(this)}  
38 - />  
39 - </View>  
40 -  
41 -  
42 - );  
43 - }  
44 - renderRow(rowData,sectionID,rowID,highlightRow) {  
45 - return (  
46 - <TouchableOpacity activeOpacity={0.5} onPress={this.props.onPressBrandItem}>  
47 - <View style={styles.row}>  
48 -  
49 - <Image  
50 - source={require('../../../../image/2.png')}  
51 - style={{ width: 100, height: 120}}  
52 - resizeMode={'cover'}  
53 - ></Image>  
54 -  
55 - <Text style={styles.text}>  
56 - {rowData}  
57 - </Text>  
58 - </View>  
59 - </TouchableOpacity>  
60 - );  
61 - }  
62 -};  
63 -  
64 -let styles = StyleSheet.create({  
65 - cellList:{  
66 - justifyContent: 'center',  
67 - width: Dimensions.get('window').width,  
68 - height: 200,  
69 - },  
70 - titleStyle:{  
71 - marginTop:8,  
72 - alignItems: 'center',  
73 - textAlign:'center',  
74 - fontWeight: 'bold',  
75 - fontSize:28,  
76 - width: Dimensions.get('window').width,  
77 - height: 30,  
78 - },  
79 - row: {  
80 - justifyContent: 'center',  
81 - margin: 3,  
82 - width: 100,  
83 - height: 140,  
84 - backgroundColor: 'white',  
85 - alignItems: 'center',  
86 - },  
87 - text: {  
88 - flex: 1,  
89 - justifyContent: 'center',  
90 - fontWeight: 'bold',  
91 - },  
92 -});  
1 -'use strict';  
2 -  
3 -import React from 'react';  
4 -import ReactNative from 'react-native';  
5 -import Swiper from 'react-native-swiper';  
6 -import ImmutablePropTypes from 'react-immutable-proptypes';  
7 -  
8 -const {  
9 - View,  
10 - Image,  
11 - TouchableOpacity,  
12 - StyleSheet,  
13 - Dimensions,  
14 -} = ReactNative;  
15 -  
16 -export default class BrandSwiper extends React.Component {  
17 -  
18 - constructor(props) {  
19 - super (props);  
20 -  
21 - this.state = {  
22 - data:['1', '2' ,'3' ,'4', '5'],  
23 - duration: 1,  
24 - width: Dimensions.get('window').width,  
25 - height: 200,  
26 - // onPress: React.PropTypes.func,  
27 - };  
28 -  
29 - this.dot = <View  
30 - style={{  
31 - backgroundColor:'rgba(0,0,0,.2)',  
32 - width: 6,  
33 - height: 6,  
34 - borderRadius: 3,  
35 - marginLeft: 3,  
36 - marginRight: 3,  
37 - marginTop: 3,  
38 - marginBottom: 23,  
39 - }}  
40 - />;  
41 - this.activeDot = <View  
42 - style={{  
43 - backgroundColor:'white',  
44 - width: 6,  
45 - height: 6,  
46 - borderRadius: 3,  
47 - marginLeft: 3,  
48 - marginRight: 3,  
49 - marginTop: 3,  
50 - marginBottom: 23,  
51 - }}  
52 - />;  
53 - }  
54 -  
55 - render() {  
56 - let width = this.state.width;  
57 - let height = this.state.height;  
58 - let data = this.state.data;  
59 -  
60 - if (data.length == 1) {  
61 - // let item = data[0];  
62 - return (  
63 - <TouchableOpacity  
64 - activeOpacity={1}  
65 - onPress={() => {  
66 -  
67 - }}  
68 - >  
69 - <Image  
70 - source={require('../../../../image/1.png')}  
71 - style={{ width: width, height: height}}  
72 - resizeMode={'cover'}  
73 - ></Image>  
74 -  
75 - </TouchableOpacity>  
76 - );  
77 - } else {  
78 - return (  
79 - <Swiper  
80 - style={styles.banner}  
81 - showsButtons={false}  
82 - loop={true}  
83 - autoplay={true}  
84 - autoplayTimeout={this.state.duration}  
85 - paginationStyle={{bottom: 8}}  
86 - dot={this.dot}  
87 - activeDot={this.activeDot}  
88 - height={height}  
89 - >  
90 - {data.map((item, i) => {  
91 - return (  
92 - <TouchableOpacity  
93 - key={i}  
94 - activeOpacity={1}  
95 - onPress={() => {  
96 -  
97 - }}  
98 - >  
99 - <Image  
100 - source={require('../../../../image/1.png')}  
101 - style={{ width: width, height: height - 20}}  
102 - resizeMode={'cover'}  
103 - ></Image>  
104 -  
105 - </TouchableOpacity>  
106 - );  
107 - })}  
108 - </Swiper>  
109 - );  
110 - }  
111 - }  
112 -}  
113 -  
114 -let styles = StyleSheet.create({  
115 -  
116 - banner: {  
117 -  
118 - },  
119 -  
120 -});  
1 -'use strict';  
2 -  
3 -import React from 'react';  
4 -import ReactNative from 'react-native';  
5 -  
6 -const {  
7 - AppRegistry,  
8 - StyleSheet,  
9 - Text,  
10 - View,  
11 - Image,  
12 - ListView,  
13 - Dimensions,  
14 - TouchableOpacity,  
15 -} = ReactNative;  
16 -  
17 -export default class CouponCell extends React.Component {  
18 - constructor(props) {  
19 - super(props);  
20 - let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});  
21 - this.state = {  
22 - dataSource: ds.cloneWithRows(['row 1', 'row 2' ,'row 3' ,'row 4', 'row 5']),  
23 - hasBuy : false,  
24 - };  
25 - }  
26 - render() {  
27 - return (  
28 - <View style={styles.viewStyle}>  
29 - <ListView  
30 - showsHorizontalScrollIndicator ={false}  
31 - dataSource={this.state.dataSource}  
32 - horizontal={true}  
33 - renderRow={this.renderRow.bind(this)}  
34 - />  
35 - </View>  
36 - );  
37 - }  
38 - renderRow(rowData,sectionID,rowID,highlightRow) {  
39 - return (  
40 - <TouchableOpacity activeOpacity={0.5} onPress={this.props.onPressCoupon}>  
41 - <View style={styles.row}>  
42 - <Image  
43 - source={require('../../../../image/3.png')}  
44 - style={{ width: 140, height: 60}}  
45 - resizeMode={'cover'}  
46 - ></Image>  
47 - </View>  
48 - </TouchableOpacity>  
49 - );  
50 - }  
51 -};  
52 -  
53 -let styles = StyleSheet.create({  
54 -  
55 - viewStyle:{  
56 - justifyContent: 'center',  
57 - width: Dimensions.get('window').width,  
58 - height:80,  
59 - backgroundColor:'#f0f0f0',  
60 - },  
61 -  
62 - row: {  
63 - marginTop:8,  
64 - justifyContent: 'center',  
65 - padding: 5,  
66 - margin: 5,  
67 - width: 140,  
68 - height: 60,  
69 - backgroundColor: '#F6F6F6',  
70 - alignItems: 'center',  
71 - borderWidth: 1,  
72 - borderRadius: 5,  
73 - borderColor: '#CCC'  
74 - },  
75 - text: {  
76 - flex: 1,  
77 - justifyContent: 'center',  
78 - fontWeight: 'bold',  
79 - },  
80 -});  
1 -'use strict';  
2 -  
3 -import React from 'react';  
4 -import ReactNative from 'react-native';  
5 -  
6 -const {  
7 - Image,  
8 - StyleSheet,  
9 - Dimensions,  
10 - TouchableOpacity,  
11 -} = ReactNative;  
12 -  
13 -export default class BrandStoreHeaderView extends React.Component {  
14 -  
15 - constructor(props) {  
16 - super (props);  
17 -  
18 - this.state = {  
19 - backgroundWidth: Dimensions.get('window').width,  
20 - backgroundHeight: Math.ceil((310 / 640) * Dimensions.get('window').width),  
21 - buttonWidth: 60,  
22 - buttonHeight: 30,  
23 - isCollection: true,  
24 - }  
25 - }  
26 -  
27 - componentDidMount() {  
28 - }  
29 -  
30 - render() {  
31 - return (  
32 - <Image  
33 - source={require('../../../../image/4.png')}  
34 - // source={{uri: this.props.src}}  
35 - style={{width: this.state.backgroundWidth, height: this.state.backgroundHeight }}  
36 - resizeMode={'cover'}>  
37 - <TouchableOpacity onPress={this.props.onPressCollection} >  
38 - <Image  
39 - source={require('../../../../image/5.png')}  
40 - style={{ width: this.state.buttonWidth, height: this.state.buttonHeight,position:'absolute',bottom:-this.state.backgroundHeight + 30,right:30}}  
41 - resizeMode={'cover'}  
42 - ></Image>  
43 - </TouchableOpacity>  
44 - </Image>  
45 - );  
46 - }  
47 -};  
48 -  
49 -const styles = StyleSheet.create({  
50 - thumbnail: {  
51 - width: 320,  
52 - height: 120,  
53 - },  
54 -});  
@@ -10,4 +10,7 @@ export default keyMirror({ @@ -10,4 +10,7 @@ export default keyMirror({
10 SHOP_INTRO_SUCCESS: null, 10 SHOP_INTRO_SUCCESS: null,
11 SHOP_INTRO_REQUEST: null, 11 SHOP_INTRO_REQUEST: null,
12 SHOP_INTRO_FAILURE: null, 12 SHOP_INTRO_FAILURE: null,
  13 + SHOP_RESOURCE_REQUEST: null,
  14 + SHOP_RESOURCE_SUCCESS: null,
  15 + SHOP_RESOURCE_FAILURE: null,
13 }); 16 });
@@ -6,16 +6,25 @@ import { @@ -6,16 +6,25 @@ import {
6 Dimensions, 6 Dimensions,
7 Platform, 7 Platform,
8 View, 8 View,
  9 + Text,
  10 + Alert,
  11 + Image,
  12 + ListView,
9 NativeModules, 13 NativeModules,
10 InteractionManager, 14 InteractionManager,
11 NativeAppEventEmitter, 15 NativeAppEventEmitter,
  16 + TouchableOpacity,
  17 + PixelRatio,
12 } from 'react-native' 18 } from 'react-native'
13 19
14 import {bindActionCreators} from 'redux'; 20 import {bindActionCreators} from 'redux';
15 import {connect} from 'react-redux'; 21 import {connect} from 'react-redux';
16 import {Map} from 'immutable'; 22 import {Map} from 'immutable';
17 import * as brandStoreActions from '../reducers/brandStore/brandStoreActions'; 23 import * as brandStoreActions from '../reducers/brandStore/brandStoreActions';
18 -import BrandStoreCenter from '../components/common/brandStoreHome/BrandStoreCenter'; 24 +import BrandStoreHeaderView from '../components/brandStore/brandStoreSubView/SessionHeader/BrandStoreHeaderView';
  25 +import CouponCell from '../components/brandStore/brandStoreSubView/Cells/CouponCell';
  26 +import BrandListCell from '../components/brandStore/brandStoreSubView/Cells/BrandListCell';
  27 +import BrandSwiper from '../components/brandStore/brandStoreSubView/Cells/BrandSwiper';
19 28
20 const actions = [ 29 const actions = [
21 brandStoreActions, 30 brandStoreActions,
@@ -43,23 +52,175 @@ function mapDispatchToProps(dispatch) { @@ -43,23 +52,175 @@ function mapDispatchToProps(dispatch) {
43 class BrandStoreContainer extends Component { 52 class BrandStoreContainer extends Component {
44 constructor(props) { 53 constructor(props) {
45 super(props); 54 super(props);
  55 +
  56 + let getSectionData = (dataBlob, sectionID) => {
  57 + return dataBlob[sectionID];
  58 + };
  59 +
  60 + let getRowData = (dataBlob, sectionID, rowID) => {
  61 + return dataBlob[sectionID + ':' + rowID];
  62 + };
  63 +
  64 + this.state = {
  65 + dataSource: new ListView.DataSource({
  66 + getSectionData: getSectionData, // 获取组中数据
  67 + getRowData: getRowData, // 获取行中的数据
  68 + rowHasChanged: (r1, r2) => r1 != r2,
  69 + sectionHeaderHasChanged: (s1, s2) => s1 !== s2
  70 + })
  71 + };
  72 +
  73 + this.loadDataFromJason();
  74 + this._onPressCollection = this._onPressCollection.bind(this);
  75 + this._onPressCoupon = this._onPressCoupon.bind(this);
  76 + this._onPressBrandItem= this._onPressBrandItem.bind(this);
  77 + this.onPressImage1 = this._onPressImage1.bind(this);
  78 +
46 } 79 }
47 80
48 componentDidMount() { 81 componentDidMount() {
49 - this.props.actions.getShopsIntro(); 82 + // this.props.actions.getShopsIntro();
50 } 83 }
51 84
52 componentWillUnmount() { 85 componentWillUnmount() {
53 86
54 } 87 }
55 88
  89 + _onPressCollection(){
  90 + this.props.actions.onPressCollection();
  91 + }
  92 + _onPressCoupon(){
  93 + this.props.actions.onPressCoupon();
  94 + }
  95 + _onPressBrandItem(){
  96 + this.props.actions.onPressBrandItem();
  97 + }
  98 + _onPressImage1(){
56 99
  100 + }
  101 + loadDataFromJason() {
  102 + let jsonData = require('../image/Car.json');
  103 + let dataBlob = {},
  104 + sectionIDs = [],
  105 + rowIDs = [],
  106 + cars = [];
  107 + let datas = jsonData.data;
  108 + for (let i in datas) {
  109 + //step 1、把组数据放入sectionIDs数组中
  110 + sectionIDs.push(i);
  111 + //step 2、把组中内容放dataBlob对象中
  112 + dataBlob[i] = datas[i].title;
  113 + //step 3、取出该组中所有的车
  114 + cars = datas[i].cars;
  115 + //step 4记录每一行中的数据
  116 + rowIDs[i] = [];
  117 + //step 5、获取行中每一组数据
  118 + for (let j in cars) {
  119 + //把行号放入rowIDs中
  120 + rowIDs[i].push(j);
  121 + //把每一行中的内容放dataBlob对象中
  122 + dataBlob[i + ':' + j] = cars[j];
  123 + }
  124 + }
  125 + this.state = {
  126 + dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)
  127 + };
  128 + }
57 render() { 129 render() {
58 - let {brandStore} = this.props;  
59 - let {shopId} = brandStore; 130 +
  131 +
  132 + return (
  133 + <ListView
  134 + dataSource={this.state.dataSource}
  135 + renderRow={this.renderRow.bind(this)}
  136 + renderSectionHeader={this.renderSectionHeader.bind(this)}
  137 + renderHeader = {this.renderHeader.bind(this)}
  138 + contentContainerStyle={styles.listViewStyle}//设置cell的样式
  139 + />
  140 + );
  141 + }
  142 + // 每一行的数据
  143 + renderRow(rowData,sectionID,rowID,highlightRow) {
  144 +
  145 + if (sectionID === '0') {
  146 + switch (rowID) {
  147 + case '0':
  148 + {
  149 + return (
  150 + <CouponCell
  151 + src={'aa'}
  152 + onPressCoupon={this._onPressCoupon}
  153 + />
  154 + );
  155 + }
  156 + break;
  157 + case '1':
  158 + {
  159 + return (
  160 + <BrandListCell
  161 + src={'aa'}
  162 + onPressBrandItem={this._onPressBrandItem}
  163 + />
  164 + );
  165 + }
  166 + break;
  167 + default:
  168 + {
  169 + return (
  170 + <BrandSwiper
  171 + src={'aa'}
  172 + // onPressBrandItem={this._onPressBrandItem}
  173 + />
  174 + );
  175 + }
  176 + break;
  177 + }
  178 + }else {
60 return ( 179 return (
61 - <BrandStoreCenter /> 180 + <TouchableOpacity activeOpacity={0.5}>
  181 + <View style={styles.row}>
  182 + <Text style={styles.text}>
  183 + {rowData.name}
  184 + </Text>
  185 + </View>
  186 + </TouchableOpacity>
62 ); 187 );
  188 + }
  189 + }
  190 +
  191 + // 每一组中的数据
  192 + renderSectionHeader(sectionData, sectionID) {
  193 +
  194 + //根据数据显示不同的header
  195 + switch (sectionData) {
  196 + case 'A':
  197 + {
  198 + return (
  199 + <View style={styles.headerViewStyle}>
  200 + <Text style={{marginLeft: 5, color: 'white'}}>{sectionData}</Text>
  201 + </View>
  202 + );
  203 + }
  204 + break;
  205 + default:
  206 + {
  207 + return (
  208 + <View style={styles.headerViewStyle}>
  209 + <Text style={{marginLeft: 5, color: 'white'}}>{sectionData}</Text>
  210 + </View>
  211 + );
  212 + }
  213 + break;
  214 + }
  215 + }
  216 +
  217 + renderHeader(){
  218 + return(
  219 + <BrandStoreHeaderView
  220 + src={'aa'}
  221 + onPressCollection={this._onPressCollection}
  222 + />
  223 + );
63 } 224 }
64 } 225 }
65 226
@@ -67,7 +228,54 @@ let styles = StyleSheet.create({ @@ -67,7 +228,54 @@ let styles = StyleSheet.create({
67 container: { 228 container: {
68 flex: 1, 229 flex: 1,
69 }, 230 },
70 - 231 + separator: {
  232 + height: 0.5,
  233 + backgroundColor: 'rgba(255,255,255,0.5)',
  234 + },
  235 + listViewStyle:{
  236 + justifyContent: 'space-around',
  237 + flexDirection: 'row',
  238 + flexWrap: 'wrap',
  239 + alignItems:'flex-start'
  240 + },
  241 + rowStyle: {
  242 + flexDirection: 'row',
  243 + alignItems: 'center',
  244 + padding: 10,
  245 + borderBottomColor: 'grey',
  246 + borderBottomWidth: 1 / PixelRatio.get()
  247 + },
  248 + headerViewStyle: {
  249 + height: 64,
  250 + backgroundColor: 'blue',
  251 + justifyContent: 'center',
  252 + alignItems: 'center',
  253 + width: Dimensions.get('window').width,
  254 + },
  255 + row: {
  256 + justifyContent: 'center',
  257 + padding: 5,
  258 + margin: 3,
  259 + width: 150,
  260 + height: 200,
  261 + backgroundColor: '#F6F6F6',
  262 + alignItems: 'center',
  263 + borderWidth: 1,
  264 + borderRadius: 5,
  265 + borderColor: '#CCC'
  266 + },
  267 + text: {
  268 + flex: 1,
  269 + marginTop: 5,
  270 + fontWeight: 'bold'
  271 + },
  272 + list: {
  273 + marginTop:5,
  274 + justifyContent: 'space-around',
  275 + flexDirection: 'row',
  276 + flexWrap: 'wrap'
  277 + },
71 }); 278 });
72 279
  280 +
73 export default connect(mapStateToProps, mapDispatchToProps)(BrandStoreContainer); 281 export default connect(mapStateToProps, mapDispatchToProps)(BrandStoreContainer);
@@ -15,8 +15,51 @@ const { @@ -15,8 +15,51 @@ const {
15 SHOP_INTRO_SUCCESS, 15 SHOP_INTRO_SUCCESS,
16 SHOP_INTRO_REQUEST, 16 SHOP_INTRO_REQUEST,
17 SHOP_INTRO_FAILURE, 17 SHOP_INTRO_FAILURE,
  18 + SHOP_RESOURCE_SUCCESS,
  19 + SHOP_RESOURCE_REQUEST,
  20 + SHOP_RESOURCE_FAILURE,
  21 +
18 } = require('../../constants/actionTypes').default; 22 } = require('../../constants/actionTypes').default;
19 23
  24 +export function onPressBrandItem() {
  25 + return {
  26 + type: SEL_BRANDITEM,
  27 + payload: true
  28 + };
  29 +}
  30 +export function onPressCoupon() {
  31 + return {
  32 + type: SEL_COUPONITEM,
  33 + payload: true
  34 + };
  35 +}
  36 +export function onPressCollection() {
  37 + return {
  38 + type: SET_COLLECTION,
  39 + payload: true
  40 + };
  41 +}
  42 +
  43 +export function shopResourceRequest() {
  44 + return {
  45 + type: SHOP_RESOURCE_REQUEST,
  46 + };
  47 +}
  48 +
  49 +export function shopsResourcesSuccess(json) {
  50 + return {
  51 + type: SHOP_RESOURCE_SUCCESS,
  52 + payload:json
  53 + }
  54 +}
  55 +
  56 +export function shopsResourcesFailure(error) {
  57 + return {
  58 + type: SHOP_RESOURCE_FAILURE,
  59 + payload:error
  60 + }
  61 +}
  62 +
20 export function shopIntroRequest() { 63 export function shopIntroRequest() {
21 return { 64 return {
22 type: SHOP_INTRO_REQUEST, 65 type: SHOP_INTRO_REQUEST,
@@ -52,7 +95,7 @@ export function getShopsIntro() { @@ -52,7 +95,7 @@ export function getShopsIntro() {
52 let {app, brandStore} = getState(); 95 let {app, brandStore} = getState();
53 let {shopId} = brandStore; 96 let {shopId} = brandStore;
54 if (!shopId) { 97 if (!shopId) {
55 - return; 98 + // return;
56 } 99 }
57 100
58 let fetchShopIntroInfo = (shopId, uid) => { 101 let fetchShopIntroInfo = (shopId, uid) => {
@@ -77,3 +120,37 @@ export function getShopsIntro() { @@ -77,3 +120,37 @@ export function getShopsIntro() {
77 }); 120 });
78 }; 121 };
79 } 122 }
  123 +
  124 +/*
  125 + * 店铺资源位
  126 + */
  127 +export function getShopsResources() {
  128 + return (dispatch, getState) => {
  129 + let {app, brandStore} = getState();
  130 + let {shopId} = brandStore;
  131 + if (!shopId) {
  132 + return;
  133 + }
  134 +
  135 + let fetchShopsResourcesInfo = (shopId, uid) => {
  136 +
  137 + return new BrandStoreService().fetchShopsResources(shopId, uid)
  138 + .then(json => {
  139 + let payload = json;
  140 + console.log(json);
  141 + dispatch(shopsResourcesSuccess(payload));
  142 + })
  143 + .catch(error => {
  144 + dispatch(shopsResourcesFailure(error));
  145 + });
  146 + }
  147 +
  148 + ReactNative.NativeModules.YH_CommonHelper.uid()
  149 + .then(uid => {
  150 + fetchShopsResourcesInfo(shopId, uid);
  151 + })
  152 + .catch(error => {
  153 + fetchShopsResourcesInfo(shopId, 0);
  154 + });
  155 + };
  156 +}
@@ -15,6 +15,7 @@ let shopsIntro = new (Record({ @@ -15,6 +15,7 @@ let shopsIntro = new (Record({
15 })); 15 }));
16 16
17 let InitialState = Record({ 17 let InitialState = Record({
  18 + shopResource: List(),
18 shopsIntro: shopsIntro, 19 shopsIntro: shopsIntro,
19 isCollection: false, 20 isCollection: false,
20 hasBuy : false, 21 hasBuy : false,
@@ -15,6 +15,9 @@ const { @@ -15,6 +15,9 @@ const {
15 SHOP_INTRO_SUCCESS, 15 SHOP_INTRO_SUCCESS,
16 SHOP_INTRO_REQUEST, 16 SHOP_INTRO_REQUEST,
17 SHOP_INTRO_FAILURE, 17 SHOP_INTRO_FAILURE,
  18 + SHOP_RESOURCE_SUCCESS,
  19 + SHOP_RESOURCE_REQUEST,
  20 + SHOP_RESOURCE_FAILURE,
18 } = require('../../constants/actionTypes').default; 21 } = require('../../constants/actionTypes').default;
19 22
20 const initialState = new InitialState; 23 const initialState = new InitialState;
@@ -43,7 +46,7 @@ export default function brandStoreReducer(state=initialState, action) { @@ -43,7 +46,7 @@ export default function brandStoreReducer(state=initialState, action) {
43 46
44 case SHOP_INTRO_SUCCESS:{ 47 case SHOP_INTRO_SUCCESS:{
45 let json = action.payload; 48 let json = action.payload;
46 - let {is_favorite,shop_intro,shop_logo,shop_name} = json; 49 + let {is_favorite,shop_intro,shop_logo,shop_name,mult_brand_shop_type,shop_domain,shops_id} = json;
47 let shopIntro = initialState.shopsIntro; 50 let shopIntro = initialState.shopsIntro;
48 shopIntro = shopIntro.set('isFavorite', is_favorite) 51 shopIntro = shopIntro.set('isFavorite', is_favorite)
49 .set('shopIntro', shop_intro) 52 .set('shopIntro', shop_intro)
@@ -52,11 +55,21 @@ export default function brandStoreReducer(state=initialState, action) { @@ -52,11 +55,21 @@ export default function brandStoreReducer(state=initialState, action) {
52 .set('multBrandShopType', mult_brand_shop_type) 55 .set('multBrandShopType', mult_brand_shop_type)
53 .set('shopDomain', shop_domain) 56 .set('shopDomain', shop_domain)
54 .set('shopsId', shops_id); 57 .set('shopsId', shops_id);
55 - let nextState = state.set('shopsIntro', shopsIntro) 58 + let nextState = state.set('shopsIntro', shopIntro)
56 return nextState; 59 return nextState;
57 } 60 }
58 61
59 break; 62 break;
  63 +
  64 + case SHOP_RESOURCE_SUCCESS:{
  65 + return state.set('shopResource', Immutable.fromJS(action.payload.list))
  66 + }
  67 + case SHOP_RESOURCE_FAILURE:{
  68 + return state.set('shopResource', Immutable.fromJS(action.payload))
  69 + }
  70 +
  71 + break;
  72 +
60 } 73 }
61 74
62 return state; 75 return state;
@@ -26,4 +26,21 @@ export default class QRCodeService { @@ -26,4 +26,21 @@ export default class QRCodeService {
26 }); 26 });
27 } 27 }
28 28
  29 + async fetchShopsResources(shopId, uid) {
  30 + return await this.api.get({
  31 + url: '',
  32 + body: {
  33 + method: 'app.shopsdecorator.getList',
  34 + shop_id: shopId,
  35 + uid,
  36 + }
  37 + })
  38 + .then((json) => {
  39 + return json;
  40 + })
  41 + .catch((error) => {
  42 + throw(error);
  43 + });
  44 + }
  45 +
29 } 46 }