做题

src/assets/css/diagnosis.css

@@ -0,0 +1,8 @@
+.diagnosis-box {
+    width: 50%;
+    margin: 0 auto;
+    padding: 60px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

src/assets/css/talking.css

@@ -5,7 +5,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    /* justify-content: center; */
 }
 .question-option {
     display: flex;
@@ -31,6 +30,9 @@
     top: 0;
     border-radius: 10px;
 }
+.question-result {
+    font-size: 32px;
+}
 
 .question-bar {
     width: 50%;

src/pages/measurement/Diagnosis.jsx

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

src/pages/measurement/Result.jsx

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

src/pages/measurement/Talking.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Steps } from 'tdesign-react'
+import { Steps, Button } from 'tdesign-react'
+import { useNavigate } from 'react-router-dom'
 import MeasurementStep from '../../components/Steps/MeasurementStep'
 import '../../assets/css/talking.css'
 
@@ -23,36 +24,56 @@ const problems = [
 export default function Talking() {
   const [count, setCount] = useState(0);
 
+  const navigate = useNavigate()
+
   const changeProblems = (type) => {
-    console.log(type);
-    if (type == 'add') {
+    if (count < problems.length && type == 'add') {
       setCount(count + 1)
-    } else {
+    } else if (count > 0 && type == 'reduce') {
       setCount(count - 1)
     }
   }
 
-  return (
-    <>
+  let pro = problems[count];
+
+  if (count == problems.length) { // 答完题了
+    return (
       <div style={{ padding: '10px 20px' }}>
         <MeasurementStep current={0} />
-        <div className='question-box'>
-        <p>Count: {count}</p>
-          <h3>{problems[count] ? problems[count].ques : ''}?</h3>
-          <div className='question-option'>
-            111
-            {problems[0].options.map((tag, index) => (
-              <span key={index} onClick={changeProblems('add')}>{tag}</span>
-            ))}
-          </div>
-        </div>
 
-        <div className='question-bar'>
-          <span onClick={() => setCount(count - 1)}>上一题</span>
-          <span>1/3</span>
-          <span onClick={() => setCount(count + 1)}>下一题</span>
-        </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>
+              ))}
+            </div>
+          </div>
+  
+          <div className='question-bar'>
+            <span onClick={() => changeProblems('reduce')}>上一题</span>
+            <span>{count + 1}/{problems.length}</span>
+            <span></span>
+          </div>
+        </div>
+      </>
+    )
+  }
 }