[义诊] 根据接诊时间计算目前是否正在接诊并显示

source/page/Clinic/index.css

@@ -0,0 +1,11 @@
+.clinic-card__live-label {
+    display: flex;
+    justify-content: center ;
+    justify-items: center;
+    width: 60px;
+    height: 20px;
+    background-color: #00fa9a;
+    font-size: 12px;
+    color:white;
+    border-radius: 2px;
+}

source/page/Clinic/index.tsx

@@ -1,68 +1,64 @@
-import { component, createCell } from 'web-cell';
-import { observer } from 'mobx-web-cell';
-
-import { Card, CardFooter } from 'boot-cell/source/Content/Card';
-import { BGIcon } from 'boot-cell/source/Reminder/FAIcon';
-
-import { CardsPage, AuditBar } from '../../component';
-import { clinic, Clinic } from '../../model';
-
-@observer
-@component({
-    tagName: 'clinic-list',
-    renderTarget: 'children'
-})
-export class ClinicList extends CardsPage<Clinic> {
-    scope = 'clinic';
-    model = clinic;
-    name = '义诊服务';
-
-    renderItem = ({
-        url,
-        name,
-        startTime,
-        endTime,
-        contacts,
-        remark,
-        ...rest
-    }: Clinic) => (
-        <Card
-            className="mx-auto mb-4 mx-sm-1"
-            style={{ minWidth: '20rem', maxWidth: '20rem' }}
-            title={
-                url ? (
-                    <a target="_blank" href={url}>
-                        {name}
-                    </a>
-                ) : (
-                    name
-                )
-            }
-        >
-            <p>
-                每日接诊起止时间：{startTime} ~ {endTime}
-            </p>
-            {contacts[0] && (
-                <ol className="list-unstyled">
-                    {contacts.map(({ name, phone }) => (
-                        <li>
-                            <a href={'tel:' + phone}>
-                                <BGIcon
-                                    type="square"
-                                    name="phone"
-                                    color="primary"
-                                    className="d-inline-block"
-                                />{' '}
-                                {name}：{phone}
-                            </a>
-                        </li>
-                    ))}
-                </ol>
-            )}
-            {remark && <p className="text-muted">{remark}</p>}
-            <CardFooter>
-                <AuditBar scope="clinic" model={clinic} {...rest} />
-            </CardFooter>
-        </Card>
-    );
-}
+import { component, createCell } from 'web-cell';
+import { observer } from 'mobx-web-cell';
+
+import { Card, CardFooter } from 'boot-cell/source/Content/Card';
+
+import { CardsPage, AuditBar } from '../../component';
+import { clinic, Clinic } from '../../model';
+import { getIsLive } from './time';
+import './index.css'
+
+@observer
+@component({
+    tagName: 'clinic-list',
+    renderTarget: 'children'
+})
+export class ClinicList extends CardsPage<Clinic> {
+    scope = 'clinic';
+    model = clinic;
+    name = '义诊服务';
+
+    renderItem = ({
+        url,
+        name,
+        startTime,
+        endTime,
+        contacts,
+        remark,
+        ...rest
+    }: Clinic) => (
+        <Card
+                className="mx-auto mb-4 mx-sm-1"
+                style={{ minWidth: '20rem', maxWidth: '20rem' }}
+                title={
+                    url ? (
+                        <a target="_blank" href={url}>
+                            {name}
+                        </a>
+                    ) : (
+                        name
+                    )
+                }
+            >
+                {getIsLive(startTime, endTime) && <div className="clinic-card__live-label">正在接诊</div>}
+                <p>
+                    每日接诊起止时间：{startTime} ~ {endTime}
+                </p>
+                {contacts[0] && (
+                    <ol className="list-unstyled">
+                        {contacts.map(({ name, phone }) => (
+                            <li>
+                                <a href={'tel:' + phone}>
+                                    <i className="fa fa-phone d-inline-block bg-primary text-white p-1 rounded" />{' '}
+                                    {name}：{phone}
+                                </a>
+                            </li>
+                        ))}
+                    </ol>
+                )}
+                {remark && <p className="text-muted">{remark}</p>}
+
+                <AuditBar scope="clinic" model={clinic} {...rest} />
+            </Card>
+    );
+}

source/page/Clinic/time.ts

@@ -0,0 +1,13 @@
+// 目前的时间格式为 hh:mm 的 String, 该方法将其转化为当天的该时间
+export const getTimeFromTimeStr = (timeStr: string) =>
+    new Date(new Date().toJSON().split('T')[0] + 'T' + timeStr);
+
+// 计算当前时间是否介于起始与结束算出时间内
+export const getIsLive = (startTimeStr: string, endTimeStr: string) => {
+    const now = Date.now(),
+        startTime = +getTimeFromTimeStr(startTimeStr),
+        endTime = +getTimeFromTimeStr(endTimeStr);
+
+    return now > startTime && now < endTime;
+}
+