[义诊] 计算是否正在接诊并显示标签

wuhan2020 · Feb 6, 2020 · e4b8f1b · e4b8f1b
1 parent 550d4db
commit e4b8f1b
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 33 deletions.
diff --git a/source/page/Clinic/index.tsx b/source/page/Clinic/index.tsx
@@ -5,6 +5,7 @@ import { Card } from 'boot-cell/source/Content/Card';
 
 import { CardsPage, AuditBar } from '../../component';
 import { clinic, Clinic } from '../../model';
+import { getIsLive } from './time';
 
 @observer
 @component({
@@ -24,38 +25,39 @@ export class ClinicList extends CardsPage<Clinic> {
         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}>
-                                <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>}
+    }: Clinic) => {
+        const isLive = getIsLive(startTime, endTime);
+        return <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}{isLive?<span>正在接诊</span>:null}
+                </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>
-    );
+                <AuditBar scope="clinic" model={clinic} {...rest} />
+            </Card>
+    };
 }
diff --git a/source/page/Clinic/time.ts b/source/page/Clinic/time.ts
@@ -0,0 +1,22 @@
+// 目前的时间格式为 hh:mm 的 String, 该方法将其转化为当天的该时间
+export const getTimeFromTimeStr = (timeStr:string) => {
+    const [hours, minutes] = timeStr.split(':').map(parseInt)
+    const time = new Date();
+    if(hours){
+        time.setHours(hours);
+    }
+    if(minutes) {
+        time.setMinutes(minutes)
+    }
+    return time;
+}
+
+// 计算当前时间是否介于起始与结束算出时间内
+export const getIsLive = (startTimeStr:string, endTimeStr:string) => {
+    const now = new Date().getTime();
+    const startTime = getTimeFromTimeStr(startTimeStr).getTime();
+    const endTime = getTimeFromTimeStr(endTimeStr).getTime();
+    return now > startTime && now < endTime;
+}
+
+