From 7528c134f6e7e71371365c057d48108f2bec3911 Mon Sep 17 00:00:00 2001
From: 杜志良 <duzhiliang@feewee.cn>
Date: Wed, 9 Oct 2024 15:59:46 +0800
Subject: [PATCH] feat(cas): 售后公共组件迁移，急救待办页面完善

---
 src/components/CardView/index.tsx  | 15 +++++++++++++++
 src/components/CardView/style.less |  5 +++++
 src/components/RowText/index.tsx   | 26 ++++++++++++++++++++++++++
 src/components/RowText/style.less  | 29 +++++++++++++++++++++++++++++
 src/routes/rescue/handle/page.tsx  | 57 ++++++++++++++++++++++++++++++++++++---------------------
 src/style/global.scss              |  4 ++++
 6 files changed, 115 insertions(+), 21 deletions(-)
 create mode 100644 src/components/CardView/index.tsx
 create mode 100644 src/components/CardView/style.less
 create mode 100644 src/components/RowText/index.tsx
 create mode 100644 src/components/RowText/style.less

diff --git a/src/components/CardView/index.tsx b/src/components/CardView/index.tsx
new file mode 100644
index 0000000..c62c1e3
--- /dev/null
+++ b/src/components/CardView/index.tsx
@@ -0,0 +1,15 @@
+import type React from 'react';
+import './style.less';
+
+interface Props {
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export default function CardView({ style, children }: Props) {
+  return (
+    <div className="card-view" style={style}>
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/CardView/style.less b/src/components/CardView/style.less
new file mode 100644
index 0000000..e595fb1
--- /dev/null
+++ b/src/components/CardView/style.less
@@ -0,0 +1,5 @@
+.card-view {
+  padding: 15px;
+  border-bottom: 1px solid #eee;
+  background-color: #fff;
+}
diff --git a/src/components/RowText/index.tsx b/src/components/RowText/index.tsx
new file mode 100644
index 0000000..209a39d
--- /dev/null
+++ b/src/components/RowText/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import type { CSSProperties } from 'react';
+import { Row } from '@feewee/h5app-common';
+
+import './style.less';
+
+interface ComponentProps {
+  title: string;
+  content: string | number;
+  rowStyle?: CSSProperties;
+  titleStyle?: CSSProperties;
+  contentStyle?: CSSProperties;
+}
+
+export default function RowText({ title, content, rowStyle, titleStyle, contentStyle }: ComponentProps) {
+  return (
+    <Row className="row-wrapper" style={rowStyle}>
+      <span className="label" style={titleStyle}>
+        {title}：
+      </span>
+      <span className="content" style={contentStyle}>
+        {content}
+      </span>
+    </Row>
+  );
+}
diff --git a/src/components/RowText/style.less b/src/components/RowText/style.less
new file mode 100644
index 0000000..216d95e
--- /dev/null
+++ b/src/components/RowText/style.less
@@ -0,0 +1,29 @@
+.row-wrapper {
+  margin-bottom: 10px;
+}
+
+.label {
+  color: #666;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 500;
+}
+
+.content {
+  color: #666;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 500;
+  flex: 1;
+}
+
+.labelBold {
+  color: #333;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.contentBold {
+  .labelBold;
+  flex: 1;
+}
diff --git a/src/routes/rescue/handle/page.tsx b/src/routes/rescue/handle/page.tsx
index 73aea97..8db2325 100644
--- a/src/routes/rescue/handle/page.tsx
+++ b/src/routes/rescue/handle/page.tsx
@@ -1,8 +1,11 @@
-import { helper, ListRow, Radio, IconFont, Space, PageProvider, Form, Input, TextArea, Uploader } from '@feewee/h5app-common';
-import { useSafeState } from 'ahooks';
 import { useEffect } from 'react';
+import { useSafeState } from 'ahooks';
+import { helper, ListRow, Radio, IconFont, Space, PageProvider, Form, Input, TextArea, Uploader } from '@feewee/h5app-common';
 import { useNavigate } from '@modern-js/runtime/router';
 
+import CardView from '@/components/CardView';
+import RowText from '@/components/RowText';
+
 const RadioGroup = Radio.Group;
 
 const Index = () => {
@@ -11,26 +14,38 @@ const Index = () => {
 
   return (
     <PageProvider tittle="急救处理" loading={false} onBackClick={() => helper.checkBack(() => navigate(-1))}>
-      <ListRow title="车牌号" extra="aa" />
-      <ListRow title="车主" extra="aa" />
-      <ListRow title="车辆" extra="aa" />
-      <ListRow title="急救发起时间" extra="aa" />
-      <ListRow title="救援位置" extra="aa" />
+      <div className="bg-color">
+        <CardView style={{ marginBottom: 10 }}>
+          <RowText title="车牌号" content="aa" titleStyle={{ fontSize: 15, color: '#333' }} contentStyle={{ fontSize: 15, color: '#333' }} />
+          <RowText title="车主" content="aa" />
+          <RowText title="车辆" content="aa" />
+          <RowText title="急救发起时间" content="aa" />
+          <RowText title="救援位置" content="aa" rowStyle={{ marginBottom: 0 }} />
+        </CardView>
+
+        <div className="p-[15px] mb-[10px] border-b-[#eee] bg-white">
+          <RowText title="车牌号" content="aa" titleStyle={{ fontSize: 15, color: '#333' }} contentStyle={{ fontSize: 15, color: '#333' }} />
+          <RowText title="车主" content="aa" />
+          <RowText title="车辆" content="aa" />
+          <RowText title="急救发起时间" content="aa" />
+          <RowText title="救援位置" content="aa" rowStyle={{ marginBottom: 0 }} />
+        </div>
 
-      <Form form={form} labelPosition="left" initialValues={{ type: 1 }}>
-        <Form.Item name="type" label="救援方式">
-          <RadioGroup>
-            <Radio value={1}>拖车</Radio>
-            <Radio value={2}>现场维修</Radio>
-          </RadioGroup>
-        </Form.Item>
-        <Form.Item name="remark" label="备注" labelPosition="top">
-          <TextArea placeholder="请输入备注" maxLength={256} showCount autoSize />
-        </Form.Item>
-        <Form.Item name="attachments" label="附件" labelPosition="top">
-          <Uploader showTitle={false} url="/api2/file/upload" style={{ padding: 0 }} />
-        </Form.Item>
-      </Form>
+        <Form form={form} labelPosition="left" initialValues={{ type: 1 }}>
+          <Form.Item name="type" label="救援方式">
+            <RadioGroup>
+              <Radio value={1}>拖车</Radio>
+              <Radio value={2}>现场维修</Radio>
+            </RadioGroup>
+          </Form.Item>
+          <Form.Item name="remark" label="备注" labelPosition="top">
+            <TextArea placeholder="请输入备注" maxLength={256} showCount autoSize />
+          </Form.Item>
+          <Form.Item name="attachments" label="附件" labelPosition="top">
+            <Uploader showTitle={false} url="/api2/file/upload" style={{ padding: 0 }} />
+          </Form.Item>
+        </Form>
+      </div>
     </PageProvider>
   );
 };
diff --git a/src/style/global.scss b/src/style/global.scss
index aa857d8..ab87728 100644
--- a/src/style/global.scss
+++ b/src/style/global.scss
@@ -51,3 +51,7 @@ body {
     height: 100%;
   }
 }
+
+.bg-color {
+  background-color: #f4f6fa;
+}
--
libgit2 0.22.2