罗广聪

OK

import React, { Component } from 'react';
import React, { Component } from "react";
import {
Dimensions,
Image,
... ... @@ -6,50 +6,60 @@ import {
Text,
TouchableOpacity,
TouchableWithoutFeedback,
View,
} from 'react-native';
View
} from "react-native";
import post from "../../utils/fetch";
const questions = [
{ question: '早上起床时,有持续的发丝掉落。', score: 5 },
{ question: '情绪抑郁,会对着天空发呆。', score: 3 },
{ question: '记不起昨天想好的事,而且最近经常有这种现象出现。', score: 10 },
{ question: '上班途中,害怕走进办公室,觉得工作令人厌倦。', score: 5 },
{ question: '不想面对同事和上司,有一种自闭倾向。', score: 5 },
{ question: '工作效率明显下降,上司已表达了对你的不满。', score: 5 },
{ question: '每天工作一小时,就感身体倦怠,胸闷气短。', score: 10 },
{ question: '工作情绪始终无法高涨,最令自己不解的是无名的火气很大,但又没有精力发作。', score: 5 },
{ question: '每天进餐少,即使口味非常适合自己的菜肴,也食不知味。', score: 5 },
{ question: '盼望早点逃离办公室,能够回家躺在床上多休息。', score: 5 },
{ question: '对城市的污染、噪声非常敏感,比常人渴望清幽,希望到宁静的山水处,使身心得以休息。', score: 5 },
{ question: '不再像以前一样热衷于朋友的聚会,有一种强打起精神勉强应酬的感觉。', score: 2 },
{ question: '晚上经常睡不着觉,即使睡着了,又老是在做梦状态,睡眠状态很糟。', score: 10 },
{ question: '体重明显下降,早上起来,发现眼眶深陷,下巴突出。', score: 10 },
{ question: '感觉免疫力下降,容易伤风感冒。', score: 5 },
{ question: '性能力下降。昨天配偶对你明显表示有性要求,你却感到疲惫不堪,毫无性欲,令配偶怀疑你有外遇。', score: 10 },
{ question: "早上起床时,有持续的发丝掉落。", score: 5 },
{ question: "情绪抑郁,会对着天空发呆。", score: 3 },
{ question: "记不起昨天想好的事,而且最近经常有这种现象出现。", score: 10 },
{ question: "上班途中,害怕走进办公室,觉得工作令人厌倦。", score: 5 },
{ question: "不想面对同事和上司,有一种自闭倾向。", score: 5 },
{ question: "工作效率明显下降,上司已表达了对你的不满。", score: 5 },
{ question: "每天工作一小时,就感身体倦怠,胸闷气短。", score: 10 },
{ question: "工作情绪始终无法高涨,最令自己不解的是无名的火气很大,但又没有精力发作。", score: 5 },
{ question: "每天进餐少,即使口味非常适合自己的菜肴,也食不知味。", score: 5 },
{ question: "盼望早点逃离办公室,能够回家躺在床上多休息。", score: 5 },
{ question: "对城市的污染、噪声非常敏感,比常人渴望清幽,希望到宁静的山水处,使身心得以休息。", score: 5 },
{ question: "不再像以前一样热衷于朋友的聚会,有一种强打起精神勉强应酬的感觉。", score: 2 },
{ question: "晚上经常睡不着觉,即使睡着了,又老是在做梦状态,睡眠状态很糟。", score: 10 },
{ question: "体重明显下降,早上起来,发现眼眶深陷,下巴突出。", score: 10 },
{ question: "感觉免疫力下降,容易伤风感冒。", score: 5 },
{ question: "性能力下降。昨天配偶对你明显表示有性要求,你却感到疲惫不堪,毫无性欲,令配偶怀疑你有外遇。", score: 10 }
];
class Start extends Component {
render() {
return (
<View style={[styles.container, { backgroundColor: 'white', alignItems: 'center' }]}>
<Image style={styles.startImage} source={require('../../assets/home/questionnaire.png')} resizeMode='contain' />
<TouchableOpacity style={styles.startBtn} onPress={() => this.props.onStart()}>
<View
style={[
styles.container,
{ backgroundColor: "white", alignItems: "center" }
]}
>
<Image
style={styles.startImage}
source={require("../../assets/home/questionnaire.png")}
resizeMode="contain"
/>
<TouchableOpacity
style={styles.startBtn}
onPress={() => this.props.onStart()}
>
<Text style={styles.startBtnText}>开始测试</Text>
</TouchableOpacity>
<Text style={styles.startComment}>已有276</Text>
</View>
);
}
}
class Question extends Component {
constructor(props) {
super(props);
this.state = {
answer: null,
answer: null
};
}
... ... @@ -59,16 +69,30 @@ class Question extends Component {
<View style={styles.container}>
<View style={styles.qPromptContainer}>
<Text style={styles.qPromptText}>请根据您的真实情况选择</Text>
<Text style={styles.qPromptText}>{number + 1}/{questions.length}</Text>
<Text style={styles.qPromptText}>
{number + 1}/{questions.length}
</Text>
</View>
<View style={styles.qQuestionContainer}>
<Text style={styles.qQuestion}>{number + 1}. {questions[number].question}</Text>
<Text style={styles.qQuestion}>
{number + 1}. {questions[number].question}
</Text>
</View>
<View style={styles.qOptionContainer}>
<TouchableOpacity style={styles.qOption} onPress={() => { pressHandler(questions[number].score) }}>
<TouchableOpacity
style={styles.qOption}
onPress={() => {
pressHandler(questions[number].score);
}}
>
<Text style={styles.qOptionText}>符合</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.qOption} onPress={() => { pressHandler(0) }}>
<TouchableOpacity
style={styles.qOption}
onPress={() => {
pressHandler(0);
}}
>
<Text style={styles.qOptionText}>不符合</Text>
</TouchableOpacity>
</View>
... ... @@ -83,9 +107,19 @@ class Result extends Component {
<View style={styles.container}>
<View style={styles.rContainer}>
<Text style={styles.rTitle}>检测结果</Text>
<Text style={styles.rDetail}>hhggdsdfghkjkhggv</Text>
<Text style={styles.minTitle}>分析结果:</Text>
<Text style={styles.rDetail}>{this.props.resultText}</Text>
<Text style={styles.minTitle}>可能原因:</Text>
<Text style={styles.rDetail}>{this.props.reason}</Text>
<Text style={styles.minTitle}>健康建议:</Text>
<Text style={styles.rDetail}>{this.props.advice}</Text>
</View>
<TouchableOpacity style={styles.rResetBtn} onPress={()=> { this.props.onReset() }}>
<TouchableOpacity
style={styles.rResetBtn}
onPress={() => {
this.props.onReset();
}}
>
<Text style={styles.rResetText}>重新检测</Text>
</TouchableOpacity>
</View>
... ... @@ -100,134 +134,175 @@ class HealthQuestionnaire extends Component {
stage: 0,
score: 0,
currentNumber: 0,
resultText:"",
reason:"",
advice:""
};
}
render() {
const { stage } = this.state;
return stage == 0 ?
<Start onStart={() => { this.setState({ stage: 1 }) }} />
: stage == 1 ?
<Question
pressHandler={score => {
const old = this.state;
let tmp = {
score: old.score + score,
currentNumber: old.currentNumber + 1
};
if (old.currentNumber == questions.length - 1) {
tmp.stage = old.stage + 1;
}
this.setState({
...tmp,
});
}}
number={this.state.currentNumber}
/> :
<Result score={this.state.score} onReset={() => { this.setState({ score: 0, stage: 0, currentNumber: 0 }) }} />
return stage == 0 ? (
<Start
onStart={() => {
this.setState({ stage: 1 });
}}
/>
) : stage == 1 ? (
<Question
pressHandler={score => {
const old = this.state;
let tmp = {
score: old.score + score,
currentNumber: old.currentNumber + 1
};
if (old.currentNumber == questions.length - 1) {
tmp.stage = old.stage + 1;
post(
`/test/insurance/questionnaire`,
{
score: tmp.score
},
res => {
this.setState({
resultText: res.data.result,
reason:res.data.reason,
advice:res.data.advice,
})
},
err => {
console.log(err);
}
);
}
this.setState({
...tmp
});
}}
number={this.state.currentNumber}
/>
) : (
<Result
score={this.state.score}
resultText={this.state.resultText}
reason={this.state.reason}
advice={this.state.advice}
onReset={() => {
this.setState({ score: 0, stage: 0, currentNumber: 0 });
}}
/>
);
}
}
const { width } = Dimensions.get('window');
const { width } = Dimensions.get("window");
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'stretch',
paddingHorizontal: 12,
alignItems: "stretch",
paddingHorizontal: 12
},
startImage: {
width: width - 140,
height: (width - 140) / 454 * 208,
marginVertical: 100,
marginVertical: 100
},
startBtn: {
width: width - 80,
height: 45,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#1b9341',
borderRadius: 5,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#1b9341",
borderRadius: 5
},
startBtnText: {
fontSize: 16,
color: 'white',
color: "white"
},
startComment: {
marginTop: 8,
fontSize: 13,
color: '#727272',
color: "#727272"
},
qPromptContainer: {
height: 36,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
qPromptText: {
fontSize: 13,
color: '#7a7a7a'
color: "#7a7a7a"
},
qQuestionContainer: {
padding: 12,
flex: 1,
backgroundColor: 'white',
borderRadius: 5,
backgroundColor: "white",
borderRadius: 5
},
qQuestion: {
fontSize: 15,
color: '#242424',
color: "#242424"
},
qOptionContainer: {
marginVertical: 14,
flexDirection: 'row',
justifyContent: 'space-between',
flexDirection: "row",
justifyContent: "space-between",
borderTopWidth: 0.5,
borderColor: '#e6e6e6'
borderColor: "#e6e6e6"
},
qOption: {
justifyContent: 'center',
alignItems: 'center',
justifyContent: "center",
alignItems: "center",
borderRadius: 5,
backgroundColor: '#1b9341',
backgroundColor: "#1b9341",
height: 44,
width: (width - 28 - 14) / 2,
width: (width - 28 - 14) / 2
},
qOptionText: {
fontSize: 15,
color: 'white',
color: "white"
},
rContainer: {
flex: 1,
borderRadius: 5,
backgroundColor: 'white',
backgroundColor: "white",
marginTop: 15,
paddingHorizontal: 24,
paddingBottom: 38,
paddingBottom: 38
},
rTitle: {
marginVertical: 37,
alignSelf: 'center',
alignSelf: "center",
fontSize: 20,
fontWeight: 'bold',
fontWeight: "bold"
},
minTitle: {
marginVertical: 15,
alignSelf: "flex-start",
fontSize: 16,
fontWeight: "bold"
},
rDetail: {
fontSize: 15,
color: '#242424'
color: "#242424",
marginBottom: 10,
},
rResetBtn: {
justifyContent: 'center',
alignItems: 'center',
justifyContent: "center",
alignItems: "center",
marginVertical: 25,
backgroundColor: '#1b9341',
backgroundColor: "#1b9341",
height: 45,
borderRadius: 5,
borderRadius: 5
},
rResetText: {
fontSize: 16,
color: 'white',
},
color: "white"
}
});
export default HealthQuestionnaire;
\ No newline at end of file
export default HealthQuestionnaire;
... ...