feature: 添加页面跳转按钮

src/components/Steps/CounselingStep.jsx

@@ -5,7 +5,7 @@ const { StepItem } = Steps
 
 export default function CounselingStep({ current, style }) {
   return (
-    <div style={{ padding: '0 360px', marginTop: 20, ...style }}>
+    <div style={{ padding: '0 260px', marginTop: 20, ...style }}>
       <Steps current={current}>
         <StepItem title="摄入性会谈" />
         <StepItem title="鉴别诊断" />

src/pages/counseling/Catharsis.jsx

@@ -1,10 +1,20 @@
 import React from 'react'
 import CounselingStep from '../../components/Steps/CounselingStep'
+import { Button } from 'tdesign-react'
+import { useNavigate } from 'react-router-dom'
 
 export default function Catharsis() {
+  const navigate = useNavigate()
   return (
     <div style={{ padding: '10px 20px' }}>
       <CounselingStep current={2} />
+      <Button block variant="base" style={{ width: '30%', margin: '40px auto' }}
+        onClick={() => {
+          navigate('/solve_c', {
+            replace: true
+          })
+        }}
+      > 下一步 </Button>
     </div>
   )
 }

src/pages/counseling/DiagnosisC.jsx

@@ -1,10 +1,24 @@
 import React from 'react'
 import CounselingStep from '../../components/Steps/CounselingStep'
+import { Button } from 'tdesign-react'
+import { useNavigate } from 'react-router-dom'
 
 export default function DiagnosisC() {
+  const navigate = useNavigate()
   return (
     <div style={{ padding: '10px 20px' }}>
       <CounselingStep current={1} />
+      <div className='diagnosis-box'>
+
+      </div>
+
+      <Button block variant="base" style={{ width: '30%', margin: '40px auto' }}
+        onClick={() => {
+          navigate('/catharsis_c', {
+            replace: true
+          })
+        }}
+      > 下一步 </Button>
     </div>
   )
 }

src/pages/counseling/Solve.jsx

@@ -1,10 +1,20 @@
 import React from 'react'
 import CounselingStep from '../../components/Steps/CounselingStep'
+import { Button } from 'tdesign-react'
+import { useNavigate } from 'react-router-dom'
 
 export default function Solve() {
+  const navigate = useNavigate()
   return (
     <div style={{ padding: '10px 20px' }}>
       <CounselingStep current={3} />
+      <Button block variant="base" style={{ width: '30%', margin: '40px auto' }}
+        onClick={() => {
+          navigate('/transform_c', {
+            replace: true
+          })
+        }}
+      > 下一步 </Button>
     </div>
   )
 }

src/pages/counseling/TalkingC.jsx

@@ -1,13 +1,74 @@
-import React from 'react'
-import { Steps } from 'tdesign-react'
+import React, { useState } from 'react'
+import { Button, Steps } from 'tdesign-react'
 import CounselingStep from '../../components/Steps/CounselingStep'
+import { useNavigate } from 'react-router-dom'
+import '../../assets/css/talking.css'
 
 const { StepItem } = Steps
 
+const problems = [
+  {
+    ques: '忙碌了一天回到家中，已经很疲惫了，你会',
+    options: ['再累也要收拾整齐了再去睡', '扔下包倒头就睡下']
+  },
+  {
+    ques: '我常会站在对方角度去思考而模糊了自己的立场',
+    options: ['是的', '不是']
+  },
+  {
+    ques: '若我有时间和金钱，我的朋友邀请我到国外或者异地度假，并且在一天前才通知，我会',
+    options: ['必须先检查我的时间表', '立即收拾行装']
+  }
+]
+
 export default function TalkingC() {
+  const [count, setCount] = useState(0);
+
+  const navigate = useNavigate()
+
+  const changeProblems = (type) => {
+    if (count < problems.length && type == 'add') {
+      setCount(count + 1)
+    } else if (count > 0 && type == 'reduce') {
+      setCount(count - 1)
+    }
+  }
+
+  let pro = problems[count];
   return (
     <div style={{ padding: '10px 20px' }}>
       <CounselingStep current={0} />
+      {
+        count === problems.length ? (<>
+
+          <div className='question-box question-result'>这是测试结果</div>
+
+          <Button block variant="base" style={{ width: '30%', margin: '40px auto' }}
+            onClick={() => {
+              navigate('/diagnosis_c', {
+                replace: true
+              })
+            }}
+          > 下一步 </Button>
+        </>) : (
+          <>
+            <div className='question-box'>
+              <h3>{pro.ques}?</h3>
+              <div className='question-option'>
+                {problems[count].options.map((tag, index) => (
+                  <span key={index} onClick={() => changeProblems('add')}>{tag}</span>
+                ))}
+              </div>
+            </div>
+
+            <div className='question-bar'>
+              <span onClick={() => changeProblems('reduce')}>上一题</span>
+              <span>{count + 1}/{problems.length}</span>
+              <span></span>
+            </div>
+          </>
+        )
+      }
     </div>
   )
 }

src/pages/measurement/Talking.jsx

@@ -12,7 +12,7 @@ const problems = [
     options: ['再累也要收拾整齐了再去睡', '扔下包倒头就睡下']
   },
   {
-    ques: '你常会站在对方角度去思考而模糊了自己的立场',
+    ques: '我常会站在对方角度去思考而模糊了自己的立场',
     options: ['是的', '不是']
   },
   {
@@ -36,44 +36,41 @@ export default function Talking() {
 
   let pro = problems[count];
 
-  if (count == problems.length) { // 答完题了
-    return (
-      <div style={{ padding: '10px 20px' }}>
-        <MeasurementStep current={0} />
+  return (
+    <div style={{ padding: '10px 20px' }}>
+      <MeasurementStep current={0} />
+      {
+        count === problems.length ? (<>
 
-        <div className='question-box question-result'>这是测试结果</div>
+          <div className='question-box question-result'>这是测试结果</div>
 
-        <Button block variant="base" style={{ width: '30%', margin: '40px auto' }}
-          onClick={() => {
-            navigate('/diagnosis_m', {
-              replace: true
-            })
-          }}
-        > 下一步 </Button>
-      </div>
-    )
-  } else {
-    return (
-      <>
-        <div style={{ padding: '10px 20px' }}>
-          <MeasurementStep current={0} />
-  
-          <div className='question-box'>
-            <h3>{pro.ques}?</h3>
-            <div className='question-option'>
-              {problems[count].options.map((tag, index) => (
-                <span key={index} onClick={() => changeProblems('add')}>{tag}</span>
-              ))}
+          <Button block variant="base" style={{ width: '30%', margin: '40px auto' }}
+            onClick={() => {
+              navigate('/diagnosis_m', {
+                replace: true
+              })
+            }}
+          > 下一步 </Button>
+        </>) : (
+          <>
+            <div className='question-box'>
+              <h3>{pro.ques}?</h3>
+              <div className='question-option'>
+                {problems[count].options.map((tag, index) => (
+                  <span key={index} onClick={() => changeProblems('add')}>{tag}</span>
+                ))}
+              </div>
             </div>
-          </div>
-  
-          <div className='question-bar'>
-            <span onClick={() => changeProblems('reduce')}>上一题</span>
-            <span>{count + 1}/{problems.length}</span>
-            <span></span>
-          </div>
-        </div>
-      </>
-    )
-  }
+
+            <div className='question-bar'>
+              <span onClick={() => changeProblems('reduce')}>上一题</span>
+              <span>{count + 1}/{problems.length}</span>
+              <span></span>
+            </div>
+          </>
+        )
+      }
+    </div>
+  )
+
 }

src/routes/index.jsx

@@ -1,10 +1,14 @@
 import SelectPage from '../pages/SelectPage'
 import SubmitForm from '../pages/SubmitForm'
+import DiagnosisC from '../pages/counseling/DiagnosisC'
 import TalkingC from '../pages/counseling/TalkingC'
 import Diagnosis from '../pages/measurement/Diagnosis'
 import Result from '../pages/measurement/Result'
 import Starting from '../pages/measurement/Starting'
 import Talking from '../pages/measurement/Talking'
+import Catharsis from '../pages/counseling/Catharsis'
+import Solve from '../pages/counseling/Solve'
+import Transform from '../pages/counseling/Transform'
 
 const routes = [
   {
@@ -35,6 +39,22 @@ const routes = [
   {
     path: '/talking_c',
     element: <TalkingC />
+  },
+  {
+    path: '/diagnosis_c',
+    element: <DiagnosisC />
+  },
+  {
+    path: '/catharsis_c',
+    element: <Catharsis />
+  },
+  {
+    path: '/solve_c',
+    element: <Solve />
+  },
+  {
+    path: '/transform_c',
+    element: <Transform />
   }
 ]