FangSearch.js
24.6 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
//
// ClassName.js
//
// Created by Cheney Mars on 2018/9/26.
// Copyright © 2018年 saygoodlolita. All rights reserved.
//
import React, { Component } from "react";
import {
Image,
StatusBar,
StyleSheet,
Text,
TouchableOpacity,
TextInput,
View,
ScrollView,
SectionList,
AsyncStorage, ActivityIndicator
} from "react-native";
import { zoomH, zoomW ,width,height} from "../../utils/getSize";
import { getHeaderHeight, getHeaderPadding, getHomeColor,xnToast ,NoDoublePress} from "../../utils/utils";
import {scaleHeight, scaleSize} from "../../utils/ScreenUtil";
import ItemImageText from "../component/ItemImageText";
import AtlasItem from "../atlas/AtlasItem";
import QuestionHomeListItem from "../questions/QuestionHomeListItem";
import AppService from "../../service/AppService";
// import ForumHeader from "../../widget/ForumHeader";
export default class FangSearch extends Component {
static navigationOptions = ({ navigation, screenProps }) => ({
title:'芳聊搜索',
headerLeft: (
<View style={{flex: 1}}>
<TouchableOpacity style={{width: 40, height: 40, justifyContent: 'center', alignItems: 'center'}}
onPress={() => navigation.goBack()}>
<Image style={{width: 18, height: 18}} source={require('../../img/loadBack.png')}/>
</TouchableOpacity>
</View>
),
headerRight: (
<View></View>
),
headerStyle: {
elevation: 0, // 去掉阴影
backgroundColor: "#fff",
borderBottomColor: '#fff',
borderBottomWidth: StyleSheet.hairlineWidth
},
});
constructor(props) {
super(props);
this.state = {
hotData:['精油护肤','祛痘','舒缓肩颈','婴儿护理','芳疗师认证课程','美白','单方','保湿','美白','防晒','防蚊','毛孔粗大','芳聊课','线下课堂','精油调配','去角质','痘痘','感冒','薰衣草','按摩'],
historyData:[],
keyword:'',
showResult:false,
loading:true,
resultData:[
{ key: "芳疗师", data: [{ title: "阿童木",description:'生活达人' }, { title: "阿玛尼",description:'浪子回头' }, { title: "爱多多",description:'嘻哈逗比' }] },
{ key: "社区", data: [{atHistoryList:[],attachmentCount:1,attachmentList:[{businessId:"1119142456751955968",businessType:"THREAD",class:"com.xiniunet.file.domain.Attachment",displayName:"com/1038991752041734144/1038991752725401600/1119142127067078656.jpg",extension:"jpg",fileId:"1119142456789704704",filePath:"https://img.xiniunet.com/1038991752041734144/1038991752725401600/1119142127067078656.jpg",id:"1119142456798093312",tenantId:"1038991752041734144",type:"IMAGE"}],boardId:"1087235346279915520",boardName:"聊芳香",forumId:"1073504669986328576",forumName:"芳聊",hasBeenLiked:false,hasBeenRead:false,id:"1119142456751955968",isActive:true,isBoardTop:false,isForward:false,isLayoutTpeLr:false,isLayoutTpeRl:false,isLayoutTpeTb:true,isRecommend:false,month:4,rowVersion:"0",sortIndex:0,sourceFrom:"APP",tenantId:"1038991752041734144",threadDetail:{approveResult:1,class:"com.xiniunet.community.domain.ThreadDetail",content:"<p><img src=\'https://xiniunet.oss-cn-hangzhou.aliyuncs.com//1038991752041734144/upload/1119142006648610816.jpg\' alt=\'173026355.jpg\' width=\'278\' height=\'199\' /></p>\n<p>头发是人体中增长速度非常快的组织，而且头发与皮肤表层的最外层一样，主要构成的成分都是角蛋白，因此同样可以藉由外用的保养品，来维持头发的光泽和强韧。头发不但影响美观，也反映出身体的健康状况。市面上的洗发水，护发用品，都强调能让头发更顺滑、有弹性、有光泽、更健康，而事实真是如此吗？的确，拥有一头有质感的秀发，是每个女性毕生的向往，所以，电视广告上效果经过一再处理的长发，总是能够吸引各位姐妹的目光，但又有多少款洗发水能够真正达到你预期的效果呢。 先不讨论各种高价位洗发水配方中的营养成分有没有存在的价值，我先从最基础的洗发水配方基底和清洗的方法说起。个人不太建议用皂洗发，无论是手工制作的中药皂还是精油皂，头皮跟脸部的肌肤一样，洗发水的选择，应注重避免碱性，头发的角质蛋白就不会在清洁中溶出而流失劣化太快。洗头时，应注重洗头皮，能确实洗去头发油垢，洗完头，头发上不应该还能抓出白色的奶油般的皮脂，清洁力才符合理想。而护发素是针对发丝，不接触头皮的。 作为头皮头发的日常保养，我们选择洗发水时，应该了解像大分子的蛋白质，玻尿酸，几丁质等，这些成分是吸附在发丝帮忙抓住水分，搽在头皮上，即使能渗透进去毛孔，也无法转化成可以利用的营养元素。头发真正需要的小分子营养物质，是氨基酸，维生素，核酸，微量元素等。 各种植物油（如常用于护肤的椰子油、摩洛哥坚果油、橄榄油等）也都是增加发丝的亮泽度，可以调和精油作为头发的护理油。用于日常保养，把调配好的护发油用于半干的发尾，或是出门前涂抹在毛躁的地方，增加光泽。如果用于加强保养，则把混合好的护发油均匀涂抹在头皮与全部头发，用热毛巾包起来，停留15分钟后冲洗，每周一次即可。</p>\n<p><strong>【推荐护发配方】</strong></p>\n<p>油性发质：柠檬或大西洋雪松，1滴加入单次用量洗发水中洗头。</p>\n<p>干性发质：桉油醇迷迭香3滴+依兰1滴+百里酚百里香1滴+真正薰衣草1滴，混合纯精油，调合成复方油，每次取1滴，加入单次用量洗发水中。</p>\n<p>干枯受损发质（缺乏光泽感）：桉油醇迷迭香10+侧柏醇百里香10+柠檬10，混合后加入250ml无香洗发水中，调和均匀。</p>\n<p>脱发：茶树10+玫瑰草10+绿花白千层10+柠檬10+大西洋雪松10+桉油醇迷迭香10，调和成复方纯精油，加入250ml无香洗发水中，混合均匀。</p>",firstFileId:"1119142456789704704",firstFileUrl:"https://img.xiniunet.com/1038991752041734144/1038991752725401600/1119142127067078656.jpg",id:"1119142456751955968",isAutoApprove:true,richContent:"<div><p><img src=\"https://xiniunet.oss-cn-hangzhou.aliyuncs.com//1038991752041734144/upload/1119142006648610816.jpg\" alt=\"173026355.jpg\" width=\"278\" height=\"199\" /></p>\n<p>头发是人体中增长速度非常快的组织，而且头发与皮肤表层的最外层一样，主要构成的成分都是角蛋白，因此同样可以藉由外用的保养品，来维持头发的光泽和强韧。头发不但影响美观，也反映出身体的健康状况。市面上的洗发水，护发用品，都强调能让头发更顺滑、有弹性、有光泽、更健康，而事实真是如此吗？的确，拥有一头有质感的秀发，是每个女性毕生的向往，所以，电视广告上效果经过一再处理的长发，总是能够吸引各位姐妹的目光，但又有多少款洗发水能够真正达到你预期的效果呢。 先不讨论各种高价位洗发水配方中的营养成分有没有存在的价值，我先从最基础的洗发水配方基底和清洗的方法说起。个人不太建议用皂洗发，无论是手工制作的中药皂还是精油皂，头皮跟脸部的肌肤一样，洗发水的选择，应注重避免碱性，头发的角质蛋白就不会在清洁中溶出而流失劣化太快。洗头时，应注重洗头皮，能确实洗去头发油垢，洗完头，头发上不应该还能抓出白色的奶油般的皮脂，清洁力才符合理想。而护发素是针对发丝，不接触头皮的。 作为头皮头发的日常保养，我们选择洗发水时，应该了解像大分子的蛋白质，玻尿酸，几丁质等，这些成分是吸附在发丝帮忙抓住水分，搽在头皮上，即使能渗透进去毛孔，也无法转化成可以利用的营养元素。头发真正需要的小分子营养物质，是氨基酸，维生素，核酸，微量元素等。 各种植物油（如常用于护肤的椰子油、摩洛哥坚果油、橄榄油等）也都是增加发丝的亮泽度，可以调和精油作为头发的护理油。用于日常保养，把调配好的护发油用于半干的发尾，或是出门前涂抹在毛躁的地方，增加光泽。如果用于加强保养，则把混合好的护发油均匀涂抹在头皮与全部头发，用热毛巾包起来，停留15分钟后冲洗，每周一次即可。</p>\n<p><strong>【推荐护发配方】</strong></p>\n<p>油性发质：柠檬或大西洋雪松，1滴加入单次用量洗发水中洗头。</p>\n<p>干性发质：桉油醇迷迭香3滴+依兰1滴+百里酚百里香1滴+真正薰衣草1滴，混合纯精油，调合成复方油，每次取1滴，加入单次用量洗发水中。</p>\n<p>干枯受损发质（缺乏光泽感）：桉油醇迷迭香10+侧柏醇百里香10+柠檬10，混合后加入250ml无香洗发水中，调和均匀。</p>\n<p>脱发：茶树10+玫瑰草10+绿花白千层10+柠檬10+大西洋雪松10+桉油醇迷迭香10，调和成复方纯精油，加入250ml无香洗发水中，混合均匀。</p></div>"},threadStatistics:{class:"com.xiniunet.community.domain.ThreadStatistics",collectNum:0,commentNum:0,forwardNum:0,id:"1119142456751955968",likeNum:0,readNum:0,rewardAmount:0,rewardNum:0},threadType:4,threadUserHeadFileUrl:"https://img.xiniunet.com/1038991752041734144/avatar/1103500947465830400.jpg",threadUserId:"1085784920997191681",threadUserName:"小马甲",title:"解决头发问题的困扰，先从洗头开始",topicHistoryList:[],user:{attentionNum:0,authentedResult:0,avatar:"https://img.xiniunet.com/1038991752041734144/avatar/1103500947465830400.jpg",beAttentionNum:0,class:"com.xiniunet.community.domain.UserExtend",collectNum:0,footprintNum:0,hasBeenAttended:false,headFileId:"1103500947465830400",headFileUrl:"https://img.xiniunet.com/1038991752041734144/avatar/1103500947465830400.jpg",id:"1085784920997191681",imid:"xnnt1088359965078470656",isActive:true,isAuthented:false,likeNum:0,name:"小马甲",rowVersion:"3",sourceId:"1085784917696278529",sourceType:"MEMBER",tenantId:"1038991752041734144",threadNum:0},week:16,year:2019,ymd:20190419}]},
]
};
}
async componentWillMount() {
let that = this;
if (!global.isConnected) {
xnToast("暂无网络连接，请稍后重试！");
return;
}
//热门搜索
await AppService.findHostCommunity({pageSize:20}).then((data) => {
that.setState({
loading:false
});
if (data.message) {
xnToast(data.message);
return;
}
if (data.errors.length > 0) {
xnToast(data.errors[0].message);
return;
} else {
that.setState({
hotData:data.result,
})
}
}).catch((error) => {
that.setState({
loading: false
});
xnToast(error);
});
// api.community.hot.find
await AsyncStorage.getItem("searchHistory", function (errs, result) {
if (!errs) {
if (result){
let params = JSON.parse(result);
that. setState({
historyData:params
})
}
}
})
}
search=()=>{
this.state.historyData.push(this.state.keyword)
AsyncStorage.setItem("searchHistory", JSON.stringify(this.state.historyData), function (errs) {
if (errs) {
console.warn('存储报错：' + errs);
}
});
findMoreCommunity
// api.community.thread.findMore
};
renderItem =(v,i)=>{
return (
<TouchableOpacity onPress={()=>{this.setState({keyword:v})}} style={{marginTop: 10,marginRight: 10}}>
<View style={{flex:1,paddingLeft:10,paddingRight: 10,paddingTop: 5,paddingBottom: 5,borderColor: '#ddd',borderWidth: 1,borderRadius: 15,minWidth: (width-70)/4,alignItems:'center'}}>
<Text>{v}</Text>
</View>
</TouchableOpacity>
)
};
//渲染item
keyExtractor = (item,index) => item + index;
sectionItem(info){
let txt = ' ' + info.section.key;
return (
<View style={{height:30,backgroundColor: "fff"}}>
<Text
style={{textAlignVertical: 'center', color: 'rgba(0,0,0,.65)', fontSize: 15 }}>{txt}</Text>
</View>
)
}
flatListItem(info){
let item = info.item;
switch (info.section.key) {
case '芳疗师':
return (
<View style={{flexDirection:'row',padding:10,maxHeight: 170}}>
<Image style={{width:100,height:150,backgroundColor:'red',}}/>
<View style={{marginLeft: 20,flex:1,borderBottomColor: '#eee',borderBottomWidth: 1,flexDirection:'row',justifyContent:'space-between'}}>
<View style={{justifyContent:'flex-start'}}>
<Text numberOfLines={1} style={{textAlign: 'left',fontSize:20,fontWeight: '600'}}>{item.title}</Text>
<View style={{marginTop:20,flexDirection:'row'}}>
<Text numberOfLines={5} style={{maxWidth: 150,fontSize:18,color:'rgba(0,0,0,.3)'}}>{item.description}</Text>
</View>
</View>
<View style={{justifyContent:'center'}}>
<TouchableOpacity style={{borderWidth:1,borderColor:'#ddd',padding:10,borderRadius:8}}>
<Text>定制咨询</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
break;
case '社区':
let isRecommend = false;
switch (info.item.threadType) {
case 0: //图文
return (
<View style={{padding:10}}>
<ItemImageText
itemList={item}
nav={this.props.navigation}
showLocation = {true}
showType = {true}
hideTop = {isRecommend}//隐藏置顶标签
hideTime = {isRecommend}//隐藏时间
showReport = {true}//显示举报按钮
reportCallback = {() =>{//举报
this.reportData(item,index);
}}
/>
</View>
)
break;
case 1: //图集
return (
<View style={{padding:10}}>
<AtlasItem
item={item}
nav={this.props.navigation}
showType = {true}
hideTop = {isRecommend}//隐藏置顶标签
hideTime = {isRecommend}//隐藏时间
showReport = {true}//显示举报按钮
reportCallback = {() =>{//举报
this.reportData(item,index);
}}
/>
</View>
)
break;
case 2: //视频
return (
<View style={{padding:10}}>
<ItemImageText
itemList={item}
nav={this.props.navigation}
isVideo={true}
showType = {true}
hideTop = {isRecommend}//隐藏置顶标签
hideTime = {isRecommend}//隐藏时间
showReport = {true}//显示举报按钮
reportCallback = {() =>{//举报
this.reportData(item,index);
}}
/>
</View>
);
break;
case 3: //提问
return (
<View style={{padding:10}}>
<QuestionHomeListItem
item={item}
nav={this.props.navigation}
showType = {true}
hideTop = {isRecommend}//隐藏置顶标签
hideTime = {isRecommend}//隐藏时间
showReport = {true}//显示举报按钮
reportCallback = {() =>{//举报
this.reportData(item,index);
}}
/>
</View>
);
break;
case 4: //文章
return (
<View style={{backgroundColor:'red'}}>
<ItemImageText
itemList={item}
nav={this.props.navigation}
showType = {true}
hideTop = {isRecommend}//隐藏置顶标签
hideTime = {isRecommend}//隐藏时间
showReport = {true}//显示举报按钮
reportCallback = {() =>{//举报
this.reportData(item,index);
}}
/>
</View>
);
break;
case 5: //课程
return (
<View style={{padding:10}}>
<ItemCourse
item={item}
nav={this.props.navigation}
showType = {true}
hideTop = {isRecommend}//隐藏置顶标签
hideTime = {isRecommend}//隐藏时间
showReport = {true}//显示举报按钮
reportCallback = {() =>{//举报
this.reportData(item,index);
}}
/>
</View>
);
break;
default:
//其他
return (
<View style={{padding:10}}>
<ItemImageText
itemList={item}
nav={this.props.navigation}
showType = {true}
hideTop = {isRecommend}//隐藏置顶标签
hideTime = {isRecommend}//隐藏时间
showReport = {true}//显示举报按钮
reportCallback = {() =>{//举报
this.reportData(item,index);
}}
/>
</View>
);
break;
}
}
}
render() {
return (
<View style={styles.background}>
<StatusBar
backgroundColor={global.homeColor}
networkActivityIndicatorVisible
/>
{/*<ForumHeader title={"芳聊搜索"} pop navigation={this.props.navigation}/>*/}
<View style={{width:width,height:50,justifyContent: 'center',alignItems: 'center',paddingLeft: 15,paddingRight: 15}}>
<View style={styles.searchBar}>
<Image resizeMode="contain" style={{width: scaleSize(17), height: scaleHeight(20) }} source={require("../../img/searchB.png")}/>
<TextInput value={this.state.keyword} onChangeText={(text)=>{this.setState({keyword:text})}} returnKeyType={'search'} onSubmitEditing={()=>{this.search()}} underlineColorAndroid="transparent" style={{flex:1,marginLeft: 5}} placeholder={'图文，视频，文章，问答，用户，课程'}/>
</View>
</View>
{!this.state.showResult&&<ScrollView style={{flex:1,padding: 15}}>
{this.state.hotData&& this.state.hotData.length>0&&<View>
<Text style={{color:'red',fontSize:19}}>热门搜索</Text>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' ,marginTop: 5}}>
{this.state.hotData.map((v, i) => this.renderItem(v, i))}
</View>
</View>}
{this.state.historyData&& this.state.historyData.length>0&&<View style={{marginTop:25}}>
<View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
<Text style={{fontSize:19}}>历史搜索</Text>
<Text onPress={()=>{
this.setState({historyData:[]});
AsyncStorage.removeItem('searchHistory',function (errs) {
console.log(errs);
});
}} style={{color:'red',fontSize:15}}>清空</Text>
</View>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' ,marginTop: 5}}>
{this.state.historyData.map((v, i) => this.renderItem(v, i))}
</View>
</View>}
</ScrollView>}
{this.state.showResult&&
<SectionList style={{paddingLeft: 15,paddingRight: 15,marginTop:15,paddingBottom: 15}}
keyExtractor={this.keyExtractor}
sections={this.state.resultData}
renderSectionHeader={this.sectionItem.bind(this)}
renderItem={this.flatListItem.bind(this)}
ItemSeparatorComponent={() => <View style={{width:width-30,height:5,backgroundColor:'#eee'}}></View>}/>
}
{this.state.loading && <View style={styles.loadingBg}>
<View style={styles.loadingBox}>
<ActivityIndicator size='large' color='#fff'/>
<Text style={{fontSize: 16, color: '#fff', marginTop: (6 / zoomH)}}>加载中...</Text>
</View>
</View>}
</View>
);
}
}
const styles = StyleSheet.create({
background: {
flex: 1,
backgroundColor: "#fff",
display: "flex"
},
searchBar: {
width:width-30,
height:40,
borderRadius:21,
borderWidth: 1,
borderColor:'#d1d2d3',
flexDirection: 'row',
alignItems:'center',
paddingLeft: 10
},
loadingBg: {
position: "absolute",
top: 0,
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
},
loadingBox: {
width: 100 / zoomW,
height: 120 / zoomH,
backgroundColor: "rgba(0,0,0,.5)",
borderRadius: 8,
display: "flex",
alignItems: "center",
justifyContent: "center"
}
});