去掉节点二、三、四、五

src/pages/DoubleRecord.jsx

@@ -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}>

src/pages/DoubleRecord.module.scss

@@ -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{