feat(cas): 售后公共组件迁移，急救待办页面完善

杜志良
1 parent d6c39a10
Showing 6 changed files with 115 additions and 21 deletions
src/components/CardView/index.tsx
src/components/CardView/style.less
src/components/RowText/index.tsx
src/components/RowText/style.less
src/routes/rescue/handle/page.tsx
src/style/global.scss
+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>
+  );
+}
+.card-view {
+  padding: 15px;
+  border-bottom: 1px solid #eee;
+  background-color: #fff;
+}
+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>
+  );
+}
+.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;
+}
-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 = () =&gt; {
   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>
   );
 };
@@ -51,3 +51,7 @@ body {
     height: 100%;
   }
 }
+
+.bg-color {
+  background-color: #f4f6fa;
+}