保存页面添加轨型选择

src/pages/MeasureSave.tsx

@@ -1,34 +1,52 @@
-import { NavBar } from 'antd-mobile';
+import { NavBar, Picker } from 'antd-mobile';
 import { useNavigate } from 'react-router';
 import icon_arr_r from '../assets/icon_arr_s_r.svg';
+import { railTypes } from '../utils/constant';
+import { useState } from 'react';
 
 export default function MeasureSave() {
   const navigate = useNavigate();
   const back = () => navigate(-1);
 
+  const [railPickerVisible, setRailPickerVisible] = useState(false);
+  const [railId, setRailId] = useState<(number | string | null)[]>([1]);
+
   return (
-    <div>
-      <NavBar className="bg-white" onBack={back}>
-        测量参数
-      </NavBar>
-      <div className="main-page-content overflow-x-hidden overflow-y-auto">
-        <div className="bg-white px-5 text-sm text-text mt-2">
-          <div className="h-12 flex items-center border-b border-[#eee]">
-            <span>测量名称</span>
-            <input
-              type="text"
-              placeholder="请填写"
-              className="border-0 outline-none self-stretch text-right flex-1 ml-4"
-            />
-          </div>
-          <div className="h-12 flex items-center ">
-            <span>轨型</span>
-            <span className="ml-auto mr-4">60轨</span>
-            <img src={icon_arr_r} alt="arr" />
+    <>
+      <div>
+        <NavBar className="bg-white" onBack={back}>
+          测量参数
+        </NavBar>
+        <div className="main-page-content overflow-x-hidden overflow-y-auto">
+          <div className="bg-white px-5 text-sm text-text mt-2">
+            <div className="h-12 flex items-center border-b border-[#eee]">
+              <span>测量名称</span>
+              <input
+                type="text"
+                placeholder="请填写"
+                className="border-0 outline-none self-stretch text-right flex-1 ml-4"
+              />
+            </div>
+            <div className="h-12 flex items-center " onClick={()=>setRailPickerVisible(true)}>
+              <span>轨型</span>
+              <span className="ml-auto mr-4">{railTypes.find(r => r.id === railId[0])?.name || ""}</span>
+              <img src={icon_arr_r} alt="arr" />
+            </div>
           </div>
+          <div className="btn-contained rounded-md h-12 mx-9 my-8 text-base font-medium">确定</div>
         </div>
-        <div className="btn-contained rounded-md h-12 mx-9 my-8 text-base font-medium">确定</div>
       </div>
-    </div>
+      <Picker
+        columns={[railTypes.map(t => ({ ...t, label: t.name, value: t.id }))]}
+        visible={railPickerVisible}
+        onClose={() => {
+          setRailPickerVisible(false);
+        }}
+        value={railId}
+        onConfirm={v => {
+          setRailId(v);
+        }}
+      />
+    </>
   );
 }