罗广聪 / ProtectGod

Go to a project
Toggle navigation Toggle navigation pinning
罗广聪
eabf5f55 1 parent a55c93a5

OK

Inline Side-by-side
Showing 1 changed file with 149 additions and 74 deletions
1 -import React, { Component } from 'react'; 1 +import React, { Component } from "react";
2 import { 2 import {
3 Dimensions, 3 Dimensions,
4 Image, 4 Image,
@@ -6,50 +6,60 @@ import { @@ -6,50 +6,60 @@ import {
6 Text, 6 Text,
7 TouchableOpacity, 7 TouchableOpacity,
8 TouchableWithoutFeedback, 8 TouchableWithoutFeedback,
9 - View, 9 + View
10 -} from 'react-native'; 10 +} from "react-native";
11 import post from "../../utils/fetch"; 11 import post from "../../utils/fetch";
12 12
13 const questions = [ 13 const questions = [
14 - { question: '早上起床时，有持续的发丝掉落。', score: 5 }, 14 + { question: "早上起床时，有持续的发丝掉落。", score: 5 },
15 - { question: '情绪抑郁，会对着天空发呆。', score: 3 }, 15 + { question: "情绪抑郁，会对着天空发呆。", score: 3 },
16 - { question: '记不起昨天想好的事，而且最近经常有这种现象出现。', score: 10 }, 16 + { question: "记不起昨天想好的事，而且最近经常有这种现象出现。", score: 10 },
17 - { question: '上班途中，害怕走进办公室，觉得工作令人厌倦。', score: 5 }, 17 + { question: "上班途中，害怕走进办公室，觉得工作令人厌倦。", score: 5 },
18 - { question: '不想面对同事和上司，有一种自闭倾向。', score: 5 }, 18 + { question: "不想面对同事和上司，有一种自闭倾向。", score: 5 },
19 - { question: '工作效率明显下降，上司已表达了对你的不满。', score: 5 }, 19 + { question: "工作效率明显下降，上司已表达了对你的不满。", score: 5 },
20 - { question: '每天工作一小时，就感身体倦怠，胸闷气短。', score: 10 }, 20 + { question: "每天工作一小时，就感身体倦怠，胸闷气短。", score: 10 },
21 - { question: '工作情绪始终无法高涨，最令自己不解的是无名的火气很大，但又没有精力发作。', score: 5 }, 21 + { question: "工作情绪始终无法高涨，最令自己不解的是无名的火气很大，但又没有精力发作。", score: 5 },
22 - { question: '每天进餐少，即使口味非常适合自己的菜肴，也食不知味。', score: 5 }, 22 + { question: "每天进餐少，即使口味非常适合自己的菜肴，也食不知味。", score: 5 },
23 - { question: '盼望早点逃离办公室，能够回家躺在床上多休息。', score: 5 }, 23 + { question: "盼望早点逃离办公室，能够回家躺在床上多休息。", score: 5 },
24 - { question: '对城市的污染、噪声非常敏感，比常人渴望清幽，希望到宁静的山水处，使身心得以休息。', score: 5 }, 24 + { question: "对城市的污染、噪声非常敏感，比常人渴望清幽，希望到宁静的山水处，使身心得以休息。", score: 5 },
25 - { question: '不再像以前一样热衷于朋友的聚会，有一种强打起精神勉强应酬的感觉。', score: 2 }, 25 + { question: "不再像以前一样热衷于朋友的聚会，有一种强打起精神勉强应酬的感觉。", score: 2 },
26 - { question: '晚上经常睡不着觉，即使睡着了，又老是在做梦状态，睡眠状态很糟。', score: 10 }, 26 + { question: "晚上经常睡不着觉，即使睡着了，又老是在做梦状态，睡眠状态很糟。", score: 10 },
27 - { question: '体重明显下降，早上起来，发现眼眶深陷，下巴突出。', score: 10 }, 27 + { question: "体重明显下降，早上起来，发现眼眶深陷，下巴突出。", score: 10 },
28 - { question: '感觉免疫力下降，容易伤风感冒。', score: 5 }, 28 + { question: "感觉免疫力下降，容易伤风感冒。", score: 5 },
29 - { question: '性能力下降。昨天配偶对你明显表示有性要求，你却感到疲惫不堪，毫无性欲，令配偶怀疑你有外遇。', score: 10 }, 29 + { question: "性能力下降。昨天配偶对你明显表示有性要求，你却感到疲惫不堪，毫无性欲，令配偶怀疑你有外遇。", score: 10 }
30 ]; 30 ];
31 31
32 class Start extends Component { 32 class Start extends Component {
33 -  
34 render() { 33 render() {
35 return ( 34 return (
36 - <View style={[styles.container, { backgroundColor: 'white', alignItems: 'center' }]}> 35 + <View
37 - <Image style={styles.startImage} source={require('../../assets/home/questionnaire.png')} resizeMode='contain' /> 36 + style={[
38 - <TouchableOpacity style={styles.startBtn} onPress={() => this.props.onStart()}> 37 + styles.container,
  38 + { backgroundColor: "white", alignItems: "center" }
  39 + ]}
  40 + >
  41 + <Image
  42 + style={styles.startImage}
  43 + source={require("../../assets/home/questionnaire.png")}
  44 + resizeMode="contain"
  45 + />
  46 + <TouchableOpacity
  47 + style={styles.startBtn}
  48 + onPress={() => this.props.onStart()}
  49 + >
39 <Text style={styles.startBtnText}>开始测试</Text> 50 <Text style={styles.startBtnText}>开始测试</Text>
40 </TouchableOpacity> 51 </TouchableOpacity>
41 <Text style={styles.startComment}>已有276人</Text> 52 <Text style={styles.startComment}>已有276人</Text>
42 </View> 53 </View>
43 ); 54 );
44 } 55 }
45 -  
46 } 56 }
47 57
48 class Question extends Component { 58 class Question extends Component {
49 constructor(props) { 59 constructor(props) {
50 super(props); 60 super(props);
51 this.state = { 61 this.state = {
52 - answer: null, 62 + answer: null
53 }; 63 };
54 } 64 }
55 65
@@ -59,16 +69,30 @@ class Question extends Component { @@ -59,16 +69,30 @@ class Question extends Component {
59 <View style={styles.container}> 69 <View style={styles.container}>
60 <View style={styles.qPromptContainer}> 70 <View style={styles.qPromptContainer}>
61 <Text style={styles.qPromptText}>请根据您的真实情况选择</Text> 71 <Text style={styles.qPromptText}>请根据您的真实情况选择</Text>
62 - <Text style={styles.qPromptText}>{number + 1}/{questions.length}</Text> 72 + <Text style={styles.qPromptText}>
  73 + {number + 1}/{questions.length}
  74 + </Text>
63 </View> 75 </View>
64 <View style={styles.qQuestionContainer}> 76 <View style={styles.qQuestionContainer}>
65 - <Text style={styles.qQuestion}>{number + 1}. {questions[number].question}</Text> 77 + <Text style={styles.qQuestion}>
  78 + {number + 1}. {questions[number].question}
  79 + </Text>
66 </View> 80 </View>
67 <View style={styles.qOptionContainer}> 81 <View style={styles.qOptionContainer}>
68 - <TouchableOpacity style={styles.qOption} onPress={() => { pressHandler(questions[number].score) }}> 82 + <TouchableOpacity
  83 + style={styles.qOption}
  84 + onPress={() => {
  85 + pressHandler(questions[number].score);
  86 + }}
  87 + >
69 <Text style={styles.qOptionText}>符合</Text> 88 <Text style={styles.qOptionText}>符合</Text>
70 </TouchableOpacity> 89 </TouchableOpacity>
71 - <TouchableOpacity style={styles.qOption} onPress={() => { pressHandler(0) }}> 90 + <TouchableOpacity
  91 + style={styles.qOption}
  92 + onPress={() => {
  93 + pressHandler(0);
  94 + }}
  95 + >
72 <Text style={styles.qOptionText}>不符合</Text> 96 <Text style={styles.qOptionText}>不符合</Text>
73 </TouchableOpacity> 97 </TouchableOpacity>
74 </View> 98 </View>
@@ -83,9 +107,19 @@ class Result extends Component { @@ -83,9 +107,19 @@ class Result extends Component {
83 <View style={styles.container}> 107 <View style={styles.container}>
84 <View style={styles.rContainer}> 108 <View style={styles.rContainer}>
85 <Text style={styles.rTitle}>检测结果</Text> 109 <Text style={styles.rTitle}>检测结果</Text>
86 - <Text style={styles.rDetail}>hhggdsdfghkjkhggv</Text> 110 + <Text style={styles.minTitle}>分析结果：</Text>
  111 + <Text style={styles.rDetail}>{this.props.resultText}</Text>
  112 + <Text style={styles.minTitle}>可能原因：</Text>
  113 + <Text style={styles.rDetail}>{this.props.reason}</Text>
  114 + <Text style={styles.minTitle}>健康建议：</Text>
  115 + <Text style={styles.rDetail}>{this.props.advice}</Text>
87 </View> 116 </View>
88 - <TouchableOpacity style={styles.rResetBtn} onPress={()=> { this.props.onReset() }}> 117 + <TouchableOpacity
  118 + style={styles.rResetBtn}
  119 + onPress={() => {
  120 + this.props.onReset();
  121 + }}
  122 + >
89 <Text style={styles.rResetText}>重新检测</Text> 123 <Text style={styles.rResetText}>重新检测</Text>
90 </TouchableOpacity> 124 </TouchableOpacity>
91 </View> 125 </View>
@@ -100,14 +134,21 @@ class HealthQuestionnaire extends Component { @@ -100,14 +134,21 @@ class HealthQuestionnaire extends Component {
100 stage: 0, 134 stage: 0,
101 score: 0, 135 score: 0,
102 currentNumber: 0, 136 currentNumber: 0,
  137 + resultText:"",
  138 + reason:"",
  139 + advice:""
103 }; 140 };
104 } 141 }
105 142
106 render() { 143 render() {
107 const { stage } = this.state; 144 const { stage } = this.state;
108 - return stage == 0 ? 145 + return stage == 0 ? (
109 - <Start onStart={() => { this.setState({ stage: 1 }) }} /> 146 + <Start
110 - : stage == 1 ? 147 + onStart={() => {
  148 + this.setState({ stage: 1 });
  149 + }}
  150 + />
  151 + ) : stage == 1 ? (
111 <Question 152 <Question
112 pressHandler={score => { 153 pressHandler={score => {
113 const old = this.state; 154 const old = this.state;
@@ -117,117 +158,151 @@ class HealthQuestionnaire extends Component { @@ -117,117 +158,151 @@ class HealthQuestionnaire extends Component {
117 }; 158 };
118 if (old.currentNumber == questions.length - 1) { 159 if (old.currentNumber == questions.length - 1) {
119 tmp.stage = old.stage + 1; 160 tmp.stage = old.stage + 1;
  161 + post(
  162 + `/test/insurance/questionnaire`,
  163 + {
  164 + score: tmp.score
  165 + },
  166 + res => {
  167 + this.setState({
  168 + resultText: res.data.result,
  169 + reason:res.data.reason,
  170 + advice:res.data.advice,
  171 + })
  172 +
  173 + },
  174 + err => {
  175 + console.log(err);
  176 + }
  177 + );
120 } 178 }
121 this.setState({ 179 this.setState({
122 - ...tmp, 180 + ...tmp
123 }); 181 });
124 }} 182 }}
125 number={this.state.currentNumber} 183 number={this.state.currentNumber}
126 - /> : 184 + />
127 - <Result score={this.state.score} onReset={() => { this.setState({ score: 0, stage: 0, currentNumber: 0 }) }} /> 185 + ) : (
  186 + <Result
  187 + score={this.state.score}
  188 + resultText={this.state.resultText}
  189 + reason={this.state.reason}
  190 + advice={this.state.advice}
  191 + onReset={() => {
  192 + this.setState({ score: 0, stage: 0, currentNumber: 0 });
  193 + }}
  194 +
  195 + />
  196 + );
128 } 197 }
129 } 198 }
130 199
131 - 200 +const { width } = Dimensions.get("window");
132 -const { width } = Dimensions.get('window');  
133 201
134 const styles = StyleSheet.create({ 202 const styles = StyleSheet.create({
135 container: { 203 container: {
136 flex: 1, 204 flex: 1,
137 - alignItems: 'stretch', 205 + alignItems: "stretch",
138 - paddingHorizontal: 12, 206 + paddingHorizontal: 12
139 }, 207 },
140 startImage: { 208 startImage: {
141 width: width - 140, 209 width: width - 140,
142 height: (width - 140) / 454 * 208, 210 height: (width - 140) / 454 * 208,
143 - marginVertical: 100, 211 + marginVertical: 100
144 }, 212 },
145 startBtn: { 213 startBtn: {
146 width: width - 80, 214 width: width - 80,
147 height: 45, 215 height: 45,
148 - justifyContent: 'center', 216 + justifyContent: "center",
149 - alignItems: 'center', 217 + alignItems: "center",
150 - backgroundColor: '#1b9341', 218 + backgroundColor: "#1b9341",
151 - borderRadius: 5, 219 + borderRadius: 5
152 }, 220 },
153 startBtnText: { 221 startBtnText: {
154 fontSize: 16, 222 fontSize: 16,
155 - color: 'white', 223 + color: "white"
156 }, 224 },
157 startComment: { 225 startComment: {
158 marginTop: 8, 226 marginTop: 8,
159 fontSize: 13, 227 fontSize: 13,
160 - color: '#727272', 228 + color: "#727272"
161 }, 229 },
162 qPromptContainer: { 230 qPromptContainer: {
163 height: 36, 231 height: 36,
164 - flexDirection: 'row', 232 + flexDirection: "row",
165 - justifyContent: 'space-between', 233 + justifyContent: "space-between",
166 - alignItems: 'center', 234 + alignItems: "center"
167 }, 235 },
168 qPromptText: { 236 qPromptText: {
169 fontSize: 13, 237 fontSize: 13,
170 - color: '#7a7a7a' 238 + color: "#7a7a7a"
171 }, 239 },
172 qQuestionContainer: { 240 qQuestionContainer: {
173 padding: 12, 241 padding: 12,
174 flex: 1, 242 flex: 1,
175 - backgroundColor: 'white', 243 + backgroundColor: "white",
176 - borderRadius: 5, 244 + borderRadius: 5
177 }, 245 },
178 qQuestion: { 246 qQuestion: {
179 fontSize: 15, 247 fontSize: 15,
180 - color: '#242424', 248 + color: "#242424"
181 }, 249 },
182 qOptionContainer: { 250 qOptionContainer: {
183 marginVertical: 14, 251 marginVertical: 14,
184 - flexDirection: 'row', 252 + flexDirection: "row",
185 - justifyContent: 'space-between', 253 + justifyContent: "space-between",
186 borderTopWidth: 0.5, 254 borderTopWidth: 0.5,
187 - borderColor: '#e6e6e6' 255 + borderColor: "#e6e6e6"
188 }, 256 },
189 qOption: { 257 qOption: {
190 - justifyContent: 'center', 258 + justifyContent: "center",
191 - alignItems: 'center', 259 + alignItems: "center",
192 borderRadius: 5, 260 borderRadius: 5,
193 - backgroundColor: '#1b9341', 261 + backgroundColor: "#1b9341",
194 height: 44, 262 height: 44,
195 - width: (width - 28 - 14) / 2, 263 + width: (width - 28 - 14) / 2
196 }, 264 },
197 qOptionText: { 265 qOptionText: {
198 fontSize: 15, 266 fontSize: 15,
199 - color: 'white', 267 + color: "white"
200 }, 268 },
201 rContainer: { 269 rContainer: {
202 flex: 1, 270 flex: 1,
203 borderRadius: 5, 271 borderRadius: 5,
204 - backgroundColor: 'white', 272 + backgroundColor: "white",
205 marginTop: 15, 273 marginTop: 15,
206 paddingHorizontal: 24, 274 paddingHorizontal: 24,
207 - paddingBottom: 38, 275 + paddingBottom: 38
208 }, 276 },
209 rTitle: { 277 rTitle: {
210 marginVertical: 37, 278 marginVertical: 37,
211 - alignSelf: 'center', 279 + alignSelf: "center",
212 fontSize: 20, 280 fontSize: 20,
213 - fontWeight: 'bold', 281 + fontWeight: "bold"
  282 + },
  283 + minTitle: {
  284 + marginVertical: 15,
  285 + alignSelf: "flex-start",
  286 + fontSize: 16,
  287 + fontWeight: "bold"
214 }, 288 },
215 rDetail: { 289 rDetail: {
216 fontSize: 15, 290 fontSize: 15,
217 - color: '#242424' 291 + color: "#242424",
  292 + marginBottom: 10,
218 }, 293 },
219 rResetBtn: { 294 rResetBtn: {
220 - justifyContent: 'center', 295 + justifyContent: "center",
221 - alignItems: 'center', 296 + alignItems: "center",
222 marginVertical: 25, 297 marginVertical: 25,
223 - backgroundColor: '#1b9341', 298 + backgroundColor: "#1b9341",
224 height: 45, 299 height: 45,
225 - borderRadius: 5, 300 + borderRadius: 5
226 }, 301 },
227 rResetText: { 302 rResetText: {
228 fontSize: 16, 303 fontSize: 16,
229 - color: 'white', 304 + color: "white"
230 - }, 305 + }
231 }); 306 });
232 307
233 export default HealthQuestionnaire; 308 export default HealthQuestionnaire;