我的列表项样式改版

src/assets/icon_upload_0.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="13" viewBox="0 0 14 13"><g><path d="M0.749,13C0.335339,13,0,12.6647,0,12.251L0,8.75102C1.19209e-7,8.33681,0.335786,8.00103,0.75,8.00103C1.16421,8.00103,1.5,8.33681,1.5,8.75102L1.5,11.502L12.5,11.502L12.5,8.75102C12.5,8.33681,12.8358,8.00103,13.25,8.00103C13.6642,8.00103,14,8.33681,14,8.75102L14,12.251C14,12.6647,13.6647,13,13.251,13L0.749,13ZM6.249,8.87602L6.249,2.37605L4.12,4.19504C3.98393,4.31131,3.81098,4.37546,3.632,4.37604C3.41289,4.3766,3.20483,4.2799,3.064,4.11204C2.79349,3.79775,2.83074,3.32327,3.147,3.05505L6.513,0.178062C6.79426,-0.059354,7.20574,-0.059354,7.487,0.178062L10.85,3.05505C11.1514,3.32731,11.1813,3.78997,10.9174,4.09875C10.6536,4.40752,10.192,4.45021,9.876,4.19504L7.747,2.37605L7.747,8.87602C7.747,9.29023,7.41121,9.62602,6.997,9.62602C6.58279,9.62602,6.247,9.29023,6.247,8.87602L6.249,8.87602Z" fill="#A3ACC0" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

src/assets/icon_upload_1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="13" viewBox="0 0 14 13"><g><path d="M0.749,13C0.335339,13,0,12.6647,0,12.251L0,8.75102C1.19209e-7,8.33681,0.335786,8.00103,0.75,8.00103C1.16421,8.00103,1.5,8.33681,1.5,8.75102L1.5,11.502L12.5,11.502L12.5,8.75102C12.5,8.33681,12.8358,8.00103,13.25,8.00103C13.6642,8.00103,14,8.33681,14,8.75102L14,12.251C14,12.6647,13.6647,13,13.251,13L0.749,13ZM6.249,8.87602L6.249,2.37605L4.12,4.19504C3.98393,4.31131,3.81098,4.37546,3.632,4.37604C3.41289,4.3766,3.20483,4.2799,3.064,4.11204C2.79349,3.79775,2.83074,3.32327,3.147,3.05505L6.513,0.178062C6.79426,-0.059354,7.20574,-0.059354,7.487,0.178062L10.85,3.05505C11.1514,3.32731,11.1813,3.78997,10.9174,4.09875C10.6536,4.40752,10.192,4.45021,9.876,4.19504L7.747,2.37605L7.747,8.87602C7.747,9.29023,7.41121,9.62602,6.997,9.62602C6.58279,9.62602,6.247,9.29023,6.247,8.87602L6.249,8.87602Z" fill="#3165D2" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

src/assets/icon_upload_2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="13" viewBox="0 0 14 13"><g><path d="M0.749,13C0.335339,13,0,12.6647,0,12.251L0,8.75102C1.19209e-7,8.33681,0.335786,8.00103,0.75,8.00103C1.16421,8.00103,1.5,8.33681,1.5,8.75102L1.5,11.502L12.5,11.502L12.5,8.75102C12.5,8.33681,12.8358,8.00103,13.25,8.00103C13.6642,8.00103,14,8.33681,14,8.75102L14,12.251C14,12.6647,13.6647,13,13.251,13L0.749,13ZM6.249,8.87602L6.249,2.37605L4.12,4.19504C3.98393,4.31131,3.81098,4.37546,3.632,4.37604C3.41289,4.3766,3.20483,4.2799,3.064,4.11204C2.79349,3.79775,2.83074,3.32327,3.147,3.05505L6.513,0.178062C6.79426,-0.059354,7.20574,-0.059354,7.487,0.178062L10.85,3.05505C11.1514,3.32731,11.1813,3.78997,10.9174,4.09875C10.6536,4.40752,10.192,4.45021,9.876,4.19504L7.747,2.37605L7.747,8.87602C7.747,9.29023,7.41121,9.62602,6.997,9.62602C6.58279,9.62602,6.247,9.29023,6.247,8.87602L6.249,8.87602Z" fill="#04CA17" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

src/components/MeasureItem.tsx

@@ -1,6 +1,10 @@
 import icon_check_s from '../assets/icon_check_s_s.svg';
 import icon_check_u from '../assets/icon_check_s_u.svg';
 import icon_arr from '../assets/icon_arr_p_r.svg';
+import icon_pending from '../assets/icon_upload_0.svg';
+import icon_uploading from '../assets/icon_upload_1.svg';
+import icon_uploaded from '../assets/icon_upload_2.svg';
+
 /*
 name: '测量名称1',
 time: '03-02 10:20',
@@ -10,6 +14,8 @@ direction: '上行',
 railType: '60轨',
 */
 
+export type UpdateState = 'idle' | 'pending' | 'uploading' | 'uploaded';
+
 export default function MeasureItem(props: {
   name: string;
   time: string;
@@ -17,28 +23,29 @@ export default function MeasureItem(props: {
   segment: string;
   direction: string;
   railType: string;
+  uploadState: UpdateState;
   onDetail?: () => void;
 }) {
   return (
-    <div>
-      <section className="h-10 flex justify-between items-center px-2">
-        <h1 className="text-base font-medium ">{props.name}</h1>
-        <div className="self-stretch flex items-center" onClick={props.onDetail}>
-          <span className="mr-2 text-sm text-primary font-medium">查看</span>
-          <img src={icon_arr} alt="arr" className="h-[10px]" />
-        </div>
-      </section>
-
-      <section className="flex mx-2">
+    <div className="flex mx-2 gap-3">
+      <main className="flex-1">
+        <header className="flex items-center gap-2">
+          {props.uploadState === 'uploaded' && <img src={icon_uploaded} alt="icon" />}
+          <h1 className="text-[15px] font-medium ">{props.name}</h1>
+        </header>
+        <main className="flex my-2">
           <p className="flex-1 text-sm ">{`${props.line}`}</p>
           <p className="flex-1 text-sm ">{`${props.segment}`}</p>
-        <p className="flex-1 text-sm text-right">{`${props.direction}方向`}</p>
-      </section>
-
-      <section className="mx-2 text-sm  h-8 flex items-center justify-between">
-        <span>{props.railType}</span>
-        <span>{props.time}</span>
-      </section>
+          <p className="flex-1 text-sm ">{`${props.direction}方向`}</p>
+        </main>
+        <footer>
+          <span className="text-sm text-[#b7b7b7]">{props.time}</span>
+        </footer>
+      </main>
+      <aside className="flex items-center" onClick={props.onDetail}>
+        <span className="mr-2 text-sm text-primary font-medium">查看</span>
+        <img src={icon_arr} alt="arr" className="h-[10px]" />
+      </aside>
     </div>
   );
 }
@@ -51,38 +58,59 @@ export function MeasureItemEx(props: {
   direction: string;
   railType: string;
   selected: boolean;
+  uploadState: UpdateState;
   onSelected?: () => void;
   onDetail?: () => void;
 }) {
+  const stateImg = () => {
+    if (props.uploadState === 'idle') {
+      if (props.selected) {
+        return <img src={icon_check_s} alt="icon" />;
+      } else {
+        return <img src={icon_check_u} alt="icon" />;
+      }
+    } else if (props.uploadState === 'pending') {
+      return <img src={icon_pending} alt="icon" />;
+    } else if (props.uploadState === 'uploading') {
+      return <img src={icon_uploading} alt="icon" />;
+    } else if (props.uploadState === 'uploaded') {
+      return <img src={icon_uploaded} alt="icon" />;
+    }
+    return null;
+  };
+  const stateText = () => {
+    if (props.uploadState === 'pending') {
+      return <span className="text-[#A3ACC0] text-xs">等待中</span>;
+    } else if (props.uploadState === 'uploading') {
+      return <span className="text-primary text-xs">上传中</span>;
+    } else if (props.uploadState === 'uploaded') {
+      return <span className="text-[#04CA17] text-xs">上传完成</span>;
+    }
+    return null;
+  };
   return (
-    <div className="flex" onClick={props.onSelected}>
-      <div className="w-12 flex justify-center items-center">
-        {props.selected ? (
-          <img src={icon_check_s} alt="icon" />
-        ) : (
-          <img src={icon_check_u} alt="icon" />
-        )}
-      </div>
-      <div className="flex-1">
-        <section className="h-10 flex justify-between items-center px-2">
-          <h1 className="text-base font-medium ">{props.name}</h1>
-          <div className="self-stretch flex items-center" onClick={props.onDetail}>
-            <span className="mr-2 text-sm text-primary font-medium">查看</span>
-            <img src={icon_arr} alt="arr" className="h-[10px]" />
-          </div>
-        </section>
-
-        <section className="flex mx-2">
+    <div
+      className="relative flex mx-2 gap-3"
+      onClick={props.uploadState === 'idle' ? props.onSelected : undefined}>
+      <main className="flex-1">
+        <header className="flex items-center gap-2">
+          {stateImg()}
+          <h1 className="text-[15px] font-medium ">{props.name}</h1>
+        </header>
+        <main className="flex my-2">
           <p className="flex-1 text-sm ">{`${props.line}`}</p>
           <p className="flex-1 text-sm ">{`${props.segment}`}</p>
-          <p className="flex-1 text-sm text-right">{`${props.direction}方向`}</p>
-        </section>
-
-        <section className="mx-2 text-sm  h-8 flex items-center justify-between">
-          <span>{props.railType}</span>
-          <span>{props.time}</span>
-        </section>
-      </div>
+          <p className="flex-1 text-sm ">{`${props.direction}方向`}</p>
+        </main>
+        <footer>
+          <span className="text-sm text-[#b7b7b7]">{props.time}</span>
+        </footer>
+      </main>
+      <aside className="flex items-center" onClick={props.onDetail}>
+        <span className="mr-2 text-sm text-primary font-medium">查看</span>
+        <img src={icon_arr} alt="arr" className="h-[10px]" />
+      </aside>
+      <div className="absolute right-0 bottom-0">{stateText()}</div>
     </div>
   );
 }

src/index.tsx

@@ -27,7 +27,7 @@ const router = createHashRouter(
       </Route>
       <Route path="measure">
         <Route path="save" element={<MeasureSave />}></Route>
-        <Route path="record" element={<MeasureRecord />}></Route>
+        <Route path="record/:recordId" element={<MeasureRecord />}></Route>
       </Route>
     </Route>
   )

src/pages/MeasureRecord.tsx

@@ -1,8 +1,9 @@
 import { NavBar } from 'antd-mobile';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 export default function MeasureRecord() {
   const navigate = useNavigate();
+  const params = useParams();
   const back = () => navigate(-1);
   return (
     <div>
@@ -10,7 +11,7 @@ export default function MeasureRecord() {
         测量详情
       </NavBar>
       <div className="main-page-content overflow-x-hidden overflow-y-auto">
-        
+        <p>{params.recordId}</p>
       </div>
     </div>
   );

src/pages/Mine.tsx

@@ -91,7 +91,11 @@ export default function Mine() {
               <List>
                 {dataList.map(item => (
                   <List.Item key={item.id}>
-                    <MeasureItem {...item} onDetail={() => navigate('/measure/record', {})} />
+                    <MeasureItem
+                      {...item}
+                      uploadState="uploaded"
+                      onDetail={() => navigate(`/measure/record/${item.id}`)}
+                    />
                   </List.Item>
                 ))}
               </List>
@@ -113,8 +117,18 @@ export default function Mine() {
                     <List.Item key={item.id}>
                       <MeasureItemEx
                         {...item}
+                        uploadState={
+                          item.id === 1
+                            ? 'uploaded'
+                            : item.id === 2
+                            ? 'uploading'
+                            : item.id === 3
+                            ? 'pending'
+                            : 'idle'
+                        }
                         selected={selectIds.includes(item.id)}
                         onSelected={() => onItemSelected(item.id)}
+                        onDetail={() => navigate(`/measure/record/${item.id}`)}
                       />
                     </List.Item>
                   ))}