Commit ff93c591 authored by marsandheart's avatar marsandheart

去掉节点二、三、四、五

parent 010ac2c3
......@@ -25,7 +25,7 @@ const showPDF = () => {
// question不一定都是问题,也可能是答案,其实分为需要读/不需要读 和 需要操作/不需要操作
const defaultSteps = [
{
id: 1,
id: '1',
label: '节点一',
titleText: '开场',
questions: [
......@@ -98,72 +98,72 @@ const defaultSteps = [
}
]
},
// {
// id: '2',
// label: '节点二',
// titleText: '告知声明',
// questions: [
// {
// questionId: '',
// needPlay: false,
// needCheck: false,
// playStatus: '0',
// checked: false,
// text: '',
// voice: ''
// }
// ]
// },
// {
// id: '3',
// label: '节点三',
// titleText: '确认购买产品关键要素及风险提示(第一部分:投保信息真实性及犹豫期)',
// questions: [
// {
// questionId: '',
// needPlay: false,
// needCheck: false,
// playStatus: '0',
// checked: false,
// text: '',
// voice: ''
// }
// ]
// },
// {
// id: '4',
// label: '节点四',
// titleText: '确认购买产品关键要素及风险提示(第二部分:产品类型及缴费方式)',
// questions: [
// {
// questionId: '',
// needPlay: false,
// needCheck: false,
// playStatus: '0',
// checked: false,
// text: '',
// voice: ''
// }
// ]
// },
// {
// id: '5',
// label: '节点五',
// titleText: '确认购买产品关键要素及风险提示(保险责任、利益不确定性及观察期)',
// questions: [
// {
// questionId: '',
// needPlay: false,
// needCheck: false,
// playStatus: '0',
// checked: false,
// text: '',
// voice: ''
// }
// ]
// },
{
id: 2,
label: '节点二',
titleText: '告知声明',
questions: [
{
questionId: '',
needPlay: false,
needCheck: false,
playStatus: '0',
checked: false,
text: '',
voice: ''
}
]
},
{
id: 3,
label: '节点三',
titleText: '确认购买产品关键要素及风险提示(第一部分:投保信息真实性及犹豫期)',
questions: [
{
questionId: '',
needPlay: false,
needCheck: false,
playStatus: '0',
checked: false,
text: '',
voice: ''
}
]
},
{
id: 4,
label: '节点四',
titleText: '确认购买产品关键要素及风险提示(第二部分:产品类型及缴费方式)',
questions: [
{
questionId: '',
needPlay: false,
needCheck: false,
playStatus: '0',
checked: false,
text: '',
voice: ''
}
]
},
{
id: 5,
label: '节点五',
titleText: '确认购买产品关键要素及风险提示(保险责任、利益不确定性及观察期)',
questions: [
{
questionId: '',
needPlay: false,
needCheck: false,
playStatus: '0',
checked: false,
text: '',
voice: ''
}
]
},
{
id: 6,
id: '6',
label: '节点六',
titleText:
'确认购买产品关键要素及风险提示(人身保险投保提示书、计划建议书、免责条款书面说明、风险提示及签字)',
......@@ -189,7 +189,7 @@ const defaultSteps = [
]
},
{
id: 7,
id: '7',
label: '节点七',
titleText: '签字确认',
questions: [
......@@ -211,7 +211,7 @@ const defaultSteps = [
export default function(props) {
const [steps, updateSteps] = useState(defaultSteps);
const [imgSrc, setImgSrc] = useState('');
const [stepId, setStepId] = useState(1);
const [stepId, setStepId] = useState('1');
const [questionId, setQuestionId] = useState('1');
// const [signVisible, setSignVisible] = useState(false);
......@@ -227,7 +227,7 @@ export default function(props) {
// 朗读当前问题
const playQuestion = (questionId) => {
const targetQuestion = currentStep.questions.find((q) => q.questionId === questionId);
if (!targetQuestion || !targetQuestion.needPlay) {
if (!targetQuestion || !targetQuestion.needPlay || targetQuestion.playStatus === '3') {
return;
}
......@@ -279,11 +279,13 @@ export default function(props) {
// console.log(checked);
};
// 勾选,然后去下一个问题
const setCheckThenNextQuestion = () => {
setChecked(questionId, true);
goNextQuestion();
};
// 同时修改两个state,应该有更好的办法,不用写在一个方法里面
const setPlayStatusAndChecked = (qId, playStatus, checked) => {
const newSteps = steps.map((stp) => ({
...stp,
......@@ -426,31 +428,42 @@ export default function(props) {
const lastStep = () => {
setPlayStatus(questionId, '3');
voiceStop();
if (stepId === 1) {
if (stepId === '1') {
window.history.go(-1);
} else {
setStepId(stepId - 1);
const currentStepIdx = steps.findIndex((s) => s.id === stepId);
const lastStepId = steps[currentStepIdx - 1].id;
setStepId(lastStepId);
setQuestionId('1');
}
};
// 下一个节点,如果是最后节点则前往保户服务页面
const nextStep = () => {
if (currentStep.questions.some((q) => !q.checked)) {
alert('当前节点问题尚未全部确认');
return;
}
setPlayStatus(questionId, '3');
voiceStop();
if (stepId === 7) {
// setSignVisible(true);
return;
} else {
setStepId(stepId + 1);
const currentStepIdx = steps.findIndex((s) => s.id === stepId);
const nextStepId = steps[currentStepIdx + 1].id;
setStepId(nextStepId);
setQuestionId('1');
}
};
const toStep = (sId) => {
setStepId(sId);
setQuestionId('1');
};
// 前往某个节点 暂时不使用
// const toStep = (sId) => {
// setStepId(sId);
// setQuestionId('1');
// };
return (
<div className={styles.page}>
......@@ -464,19 +477,16 @@ export default function(props) {
<div className={styles.main}>
<div className={styles.stepArea}>
{steps.map((item) => (
<TouchOpacity
<div
key={item.id}
className={stepId === item.id ? styles.stepIndexSelected : styles.stepIndex}
onClick={() => {
toStep(item.id);
}}
>
<img
src={stepId === item.id ? IconPositionSelected : IconPosition}
alt="icon-position"
></img>
<span>{item.label}</span>
</TouchOpacity>
</div>
))}
</div>
<div className={styles.questionArea}>
......
......@@ -52,7 +52,7 @@
background-color: #ECE9EC;
font-size: 0.16rem;
color: #999999;
padding: 0.1rem 0.2rem;
padding: 0.1rem 0.8rem;
border-top: 3px solid #bcbcbc;
border-radius: 3px;
img{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment