Initial commit
This commit is contained in:
yuchenglong
71
src/pages/U1/u1.css
Normal file
71
src/pages/U1/u1.css
Normal file
@@ -0,0 +1,71 @@
|
||||
.u1-root{
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 45%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.u1-title {
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 88px;
|
||||
font-family: NotoSansCJKsc-Bold;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
line-height: 114px;
|
||||
}
|
||||
|
||||
.u1-instruction {
|
||||
width: 374px;
|
||||
height: 33px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 34px;
|
||||
font-family: NotoSansCJKsc-Medium;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 44px;
|
||||
margin-bottom: 20%;
|
||||
}
|
||||
.u1-decor-line{
|
||||
margin-top: 3%;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
.u1-button-text-wrapper {
|
||||
display: flex;
|
||||
height: 108px;
|
||||
width: 594px;
|
||||
background: url(../../assets/buttons/button.png)
|
||||
100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u1-button-text {
|
||||
width: 192px;
|
||||
height: 48px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 49px;
|
||||
font-family: NotoSansCJKsc-Bold;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
line-height: 49px;
|
||||
}
|
||||
|
||||
|
||||
.u1-semicircle {
|
||||
position: absolute;
|
||||
left: 27%;
|
||||
transform: translateX(-50%);
|
||||
top: 810px;
|
||||
width: 578px;
|
||||
height: 588px;
|
||||
z-index: -1;
|
||||
}
|
||||
90
src/pages/U1/u1.tsx
Normal file
90
src/pages/U1/u1.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import "./u1.css";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
// import { invoke } from "@tauri-apps/api/core";
|
||||
// import { listen } from "@tauri-apps/api/event";
|
||||
import idcard from "../../assets/idcard.png";
|
||||
import semicircle from "../../assets/semicircle.png";
|
||||
import LongButton from "../../components/LongButton";
|
||||
import LongButtonLoading from "../../components/LongButtonLoading";
|
||||
import DecorLine from "../../components/DecorLine";
|
||||
|
||||
const U1: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [reading, setReading] = useState(false);
|
||||
const timerRef = useRef<number | null>(null);
|
||||
|
||||
const handleStart = () => {
|
||||
if (reading) return; // 避免重复点击
|
||||
setReading(true);
|
||||
// 启动后端监听
|
||||
// invoke("start_idcard_listen").catch((e) => {
|
||||
// console.error("start_idcard_listen failed", e);
|
||||
// });
|
||||
// 6 秒超时恢复
|
||||
timerRef.current = window.setTimeout(() => {
|
||||
if (reading) {
|
||||
console.warn("未在 6 秒内读取到身份证信息，恢复初始状态");
|
||||
setReading(false);
|
||||
// invoke("stop_idcard_listen").catch(() => {});
|
||||
}
|
||||
}, 6000);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!reading) return;
|
||||
// let unlisten: (() => void) | null = null;
|
||||
// (async () => {
|
||||
// try {
|
||||
// const off = await listen("idcard-data", (e) => {
|
||||
// const payload: any = e.payload;
|
||||
// console.log("[idcard-data]", payload);
|
||||
// // 成功：清理定时器，停止监听，跳转并传递身份证号
|
||||
// if (timerRef.current) {
|
||||
// clearTimeout(timerRef.current);
|
||||
// timerRef.current = null;
|
||||
// }
|
||||
// invoke("stop_idcard_listen").catch(() => {});
|
||||
// setReading(false);
|
||||
// navigate("/u2", {
|
||||
// state: { idCardNo: payload?.id_card_no, cardData: payload },
|
||||
// });
|
||||
// });
|
||||
// unlisten = off;
|
||||
// } catch (err) {
|
||||
// console.error("listen idcard-data failed", err);
|
||||
// }
|
||||
// })();
|
||||
return () => {
|
||||
// if (unlisten) unlisten();
|
||||
};
|
||||
}, [reading, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
// 页面卸载时清理
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
timerRef.current = null;
|
||||
// if (reading) invoke("stop_idcard_listen").catch(() => {});
|
||||
};
|
||||
}, [reading]);
|
||||
|
||||
return (
|
||||
<div className="u1-root">
|
||||
<span className="u1-title">
|
||||
欢迎使用圆和医疗
|
||||
<br />
|
||||
自助签到系统
|
||||
</span>
|
||||
<DecorLine />
|
||||
<img alt="card reader" src={idcard} />
|
||||
<span className="u1-instruction">请放置身份证在读卡区域</span>
|
||||
<img className="u1-semicircle" alt="start button" src={semicircle} />
|
||||
{!reading && <LongButton text="开始签到" onClick={handleStart} />}
|
||||
{reading && <LongButtonLoading text="身份信息读取中..." />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default U1;
|
||||
131
src/pages/U2/u2.css
Normal file
131
src/pages/U2/u2.css
Normal file
@@ -0,0 +1,131 @@
|
||||
.u2-root {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 45%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.u2-title {
|
||||
width: 875px;
|
||||
height: 60px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 57px;
|
||||
font-family: NotoSansCJKsc-Bold;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.u2-info-card {
|
||||
position: relative;
|
||||
margin: 40px auto 0 auto;
|
||||
width: 896px;
|
||||
height: 607px;
|
||||
background: url(../../assets/u2-card.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 40px 48px;
|
||||
}
|
||||
|
||||
.u2-avatar {
|
||||
max-width: 290px;
|
||||
height: auto;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.u2-details-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.u2-detail-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u2-detail-bar {
|
||||
width: 6px;
|
||||
height: 39px;
|
||||
background: rgba(0, 45, 93, 0.9);
|
||||
border-radius: 3px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.u2-detail-text {
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 35px;
|
||||
font-family: NotoSansCJKsc-Regular;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.u2-user-details {
|
||||
width: 435px;
|
||||
height: auto;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 35px;
|
||||
font-family: NotoSansCJKsc-Regular;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
line-height: 42px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.u2-decor-1 {
|
||||
position: absolute;
|
||||
left: 249px;
|
||||
top: 452px;
|
||||
width: 398px;
|
||||
height: 209px;
|
||||
}
|
||||
|
||||
.u2-decor-2 {
|
||||
position: absolute;
|
||||
left: 381px;
|
||||
top: -47px;
|
||||
width: 124px;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.u2-instruction {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 15%;
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.u2-asterisk {
|
||||
color: red;
|
||||
margin-right: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.u2-confirm-section {
|
||||
width: 896px;
|
||||
margin: 32px auto 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u2-semicircle {
|
||||
position: absolute;
|
||||
left: 27%;
|
||||
transform: translateX(-50%);
|
||||
top: 810px;
|
||||
width: 578px;
|
||||
height: 588px;
|
||||
z-index: -1;
|
||||
}
|
||||
86
src/pages/U2/u2.tsx
Normal file
86
src/pages/U2/u2.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import React from "react";
|
||||
import "./u2.css";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import DecorLine from "../../components/DecorLine";
|
||||
import avatar from "../../assets/avatar.png";
|
||||
import semicircle from "../../assets/semicircle.png";
|
||||
import BackButton from "../../components/BackButton";
|
||||
import ConfirmButton from "../../components/ConfirmButton";
|
||||
const U2: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const idCardNo = (location.state as any)?.idCardNo;
|
||||
const handleBack = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
//判断是否为太平VIP客户
|
||||
const isVIP = true; // 这里可以替换为实际的判断逻辑
|
||||
if (isVIP) {
|
||||
navigate("/u3");
|
||||
return;
|
||||
} else {
|
||||
// 是否套餐待定
|
||||
const isPackageUndecided = false; // 这里可以替换为实际的判断逻辑
|
||||
if (isPackageUndecided) {
|
||||
navigate("/u4");
|
||||
} else {
|
||||
navigate("/u5");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="u2-root">
|
||||
<span className="u2-title">尊敬的张先生/女士，欢迎您的到来：</span>
|
||||
<DecorLine />
|
||||
<div className="u2-info-card">
|
||||
<img className="u2-avatar" src={avatar} alt="avatar" />
|
||||
<div className="u2-details-list">
|
||||
<div className="u2-detail-row">
|
||||
<div className="u2-detail-bar" />
|
||||
<div className="u2-detail-text">姓名：xxx</div>
|
||||
</div>
|
||||
|
||||
<div className="u2-detail-row">
|
||||
<div className="u2-detail-bar" />
|
||||
<div className="u2-detail-text">性别：x</div>
|
||||
</div>
|
||||
|
||||
<div className="u2-detail-row">
|
||||
<div className="u2-detail-bar" />
|
||||
<div className="u2-detail-text">年龄：56岁</div>
|
||||
</div>
|
||||
|
||||
<div className="u2-detail-row">
|
||||
<div className="u2-detail-bar" />
|
||||
<div className="u2-detail-text">
|
||||
证件号：{idCardNo ?? "xxxxxxxxxxxxxx"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="u2-detail-row">
|
||||
<div className="u2-detail-bar" />
|
||||
<div className="u2-detail-text">手机号：166xxxxxxxx</div>
|
||||
</div>
|
||||
|
||||
<div className="u2-detail-row">
|
||||
<div className="u2-detail-bar" />
|
||||
<div className="u2-detail-text">婚姻状况：未婚</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="u2-instruction">
|
||||
<span className="u2-asterisk">*</span> 如信息有误，请联系前台
|
||||
</span>
|
||||
<img className="u2-semicircle" alt="start button" src={semicircle} />
|
||||
<div className="u2-confirm-section">
|
||||
<BackButton text="返回" onClick={handleBack} />
|
||||
<ConfirmButton text="确认" onClick={handleConfirm} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default U2;
|
||||
65
src/pages/U3/u3.css
Normal file
65
src/pages/U3/u3.css
Normal file
@@ -0,0 +1,65 @@
|
||||
.u3-root {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 45%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.u3-title {
|
||||
width: 690px;
|
||||
height: 88px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 92px;
|
||||
font-family: NotoSansCJKsc-Bold;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.u3-text {
|
||||
width: 628px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 57px;
|
||||
font-family: NotoSansCJKsc-Bold;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
.u3-instruction {
|
||||
width: 393px;
|
||||
height: 34px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 35px;
|
||||
font-family: NotoSansCJKsc-Medium;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 46px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.u3-confirm-section {
|
||||
width: 896px;
|
||||
margin: 32px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u3-qrcode {
|
||||
width: 284px;
|
||||
height: 284px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.u3-success-img {
|
||||
width: 358px;
|
||||
height: 358px;
|
||||
margin: 110px 0;
|
||||
}
|
||||
54
src/pages/U3/u3.tsx
Normal file
54
src/pages/U3/u3.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import React from "react";
|
||||
import "./u3.css";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import DecorLine from "../../components/DecorLine";
|
||||
|
||||
import BackButton from "../../components/BackButton";
|
||||
import ConfirmButton from "../../components/ConfirmButton";
|
||||
import QR from "../../assets/QR.png";
|
||||
import success from "../../assets/success.png";
|
||||
const U3: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
// 是否认证成功
|
||||
const isAuthenticated = false;
|
||||
const handleBack = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
// 是否套餐待定
|
||||
const isPackageUndecided = true;
|
||||
if (isPackageUndecided) {
|
||||
navigate("/u4");
|
||||
} else {
|
||||
navigate("/u5");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="u3-root">
|
||||
<span className="u3-title">太平VIP客户认证</span>
|
||||
<DecorLine />
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<span className="u3-text">认证成功</span>
|
||||
<img className="u3-success-img" src={success} alt="success" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="u3-text">检测到您是太平VIP客户</span>
|
||||
<span className="u3-text">需要完成身份认证后继续</span>
|
||||
{/* 认证二维码 */}
|
||||
<img className="u3-qrcode" src={QR} alt="二维码位置" />
|
||||
<span className="u3-instruction">请使用微信扫码实名认证</span>
|
||||
</>
|
||||
)}
|
||||
<div className="u3-confirm-section">
|
||||
<BackButton text="返回" onClick={handleBack} />
|
||||
<ConfirmButton text="确认" onClick={handleConfirm} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default U3;
|
||||
122
src/pages/U4/u4.css
Normal file
122
src/pages/U4/u4.css
Normal file
@@ -0,0 +1,122 @@
|
||||
.u4-root {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 45%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.u4-title {
|
||||
width: 690px;
|
||||
height: 88px;
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 92px;
|
||||
font-family: NotoSansCJKsc-Bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
.u4-text {
|
||||
width: 628px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 57px;
|
||||
font-family: NotoSansCJKsc-Bold;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.u4-subtitle {
|
||||
width: 496px;
|
||||
height: 35px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 35px;
|
||||
font-family: NotoSansCJKsc-Medium;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
margin-top: 5%;
|
||||
margin-bottom: 18%;
|
||||
}
|
||||
|
||||
.u4-card-grid {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u4-card {
|
||||
width: 445px;
|
||||
min-height: 526px;
|
||||
background-image: url("../../assets/u4-card.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-color: transparent;
|
||||
border-radius: 16px;
|
||||
padding: 80px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.u4-card:hover {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
.u4-card.selected {
|
||||
box-shadow: 0 10px 26px rgba(11, 42, 82, 0.18);
|
||||
border: 2px solid rgba(214, 30, 54, 0.15);
|
||||
}
|
||||
|
||||
.u4-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.u4-radio {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.u4-card-title {
|
||||
font-size: 36px;
|
||||
color: rgba(0, 45, 93, 0.95);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.u4-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.u4-detail-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.u4-detail-bar {
|
||||
width: 6px;
|
||||
height: 39px;
|
||||
background: rgba(0, 45, 93, 0.9);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.u4-detail-text {
|
||||
color: rgba(0, 45, 93, 0.95);
|
||||
font-size: 30px;
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
.u4-confirm-wrapper {
|
||||
margin-top: 12px;
|
||||
}
|
||||
85
src/pages/U4/u4.tsx
Normal file
85
src/pages/U4/u4.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import React from "react";
|
||||
import "./u4.css";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import DecorLine from "../../components/DecorLine";
|
||||
import LongButton from "../../components/LongButton";
|
||||
import radio0 from "../../assets/radio-0.png";
|
||||
import radio1 from "../../assets/radio-1.png";
|
||||
interface testType {
|
||||
id: number;
|
||||
title: string;
|
||||
desc: string;
|
||||
taboo: string;
|
||||
}
|
||||
|
||||
const U4: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [test, setTest] = React.useState<testType[]>([]);
|
||||
const handleConfirm = () => {
|
||||
navigate("/u5");
|
||||
};
|
||||
React.useEffect(() => {
|
||||
setTest([
|
||||
{
|
||||
id: 1,
|
||||
title: "乳腺 B 超",
|
||||
desc: "适合 40 岁",
|
||||
taboo: "无特别限制",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "乳腺钼靶",
|
||||
desc: "适合40岁以上",
|
||||
taboo: "孕期、哺乳期",
|
||||
},
|
||||
]);
|
||||
}, []);
|
||||
const [selectedId, setSelectedId] = React.useState<number | null>(1);
|
||||
|
||||
React.useEffect(() => {
|
||||
console.log("选择的项目", selectedId);
|
||||
}, [selectedId]);
|
||||
return (
|
||||
<div className="u4-root">
|
||||
<span className="u4-title">请确认体检选项</span>
|
||||
<DecorLine />
|
||||
|
||||
<div className="u4-card-grid">
|
||||
{test.map((t) => (
|
||||
<div
|
||||
key={t.id}
|
||||
className="u4-card"
|
||||
onClick={() => setSelectedId(t.id)}
|
||||
>
|
||||
<div className="u4-card-header">
|
||||
<img
|
||||
className={
|
||||
"u4-radio " + (selectedId === t.id ? "selected" : "")
|
||||
}
|
||||
src={selectedId === t.id ? radio1 : radio0}
|
||||
alt={selectedId === t.id ? "已选" : "未选"}
|
||||
/>
|
||||
<div className="u4-card-title">{t.title}</div>
|
||||
</div>
|
||||
|
||||
<div className="u4-card-body">
|
||||
<div className="u4-detail-row">
|
||||
<div className="u4-detail-bar" />
|
||||
<div className="u4-detail-text">{t.desc}</div>
|
||||
</div>
|
||||
<div className="u4-detail-row">
|
||||
<div className="u4-detail-bar" />
|
||||
<div className="u4-detail-text">禁忌：{t.taboo}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className="u4-subtitle">请根据自身状态选择合适的项目</span>
|
||||
|
||||
<LongButton text="确认选择" onClick={handleConfirm} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default U4;
|
||||
78
src/pages/UI6/UI6.css
Normal file
78
src/pages/UI6/UI6.css
Normal file
@@ -0,0 +1,78 @@
|
||||
.ui6-table-container {
|
||||
width: 754px;
|
||||
max-height: 881px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
/* 隐藏滚动条但保持滚动功能 */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE 和 Edge */
|
||||
}
|
||||
|
||||
.ui6-table-container::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, Opera */
|
||||
}
|
||||
|
||||
.ui6-table {
|
||||
width: 754px;
|
||||
border-collapse: collapse;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.ui6-table-header {
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 32px;
|
||||
font-family: NotoSansCJKsc-Bold;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(0, 45, 93, 0.2);
|
||||
background-color: rgba(233, 242, 245, 1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.ui6-table-dept {
|
||||
width: 200px;
|
||||
background-color: #b12651;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ui6-table-project {
|
||||
width: 554px;
|
||||
background-color: #053875;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ui6-table-row {
|
||||
border-bottom: 2px solid #d3d3d3;
|
||||
border-right: 2px solid #d3d3d3;
|
||||
}
|
||||
|
||||
.ui6-table-dept-cell {
|
||||
color: black;
|
||||
background-color: #daeef2;
|
||||
font-size: 24px;
|
||||
font-family: NotoSansCJKsc-Medium;
|
||||
font-weight: 500;
|
||||
padding-left: 20px;
|
||||
border-right: 2px solid #d3d3d3;
|
||||
border-left: 2px solid #d3d3d3;
|
||||
}
|
||||
|
||||
.ui6-table-project-cell {
|
||||
color: black;
|
||||
font-size: 24px;
|
||||
padding: 0;
|
||||
font-family: NotoSansCJKsc-Regular;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ui6-project-item {
|
||||
border-bottom: 2px solid #d3d3d3;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ui6-project-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
112
src/pages/UI6/UI6.tsx
Normal file
112
src/pages/UI6/UI6.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import React from "react";
|
||||
import "./UI6.css";
|
||||
import "../../assets/css/basic.css";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import BackButton from "../../components/BackButton";
|
||||
import ConfirmButton from "../../components/ConfirmButton";
|
||||
import DecorLine from "../../components/DecorLine";
|
||||
|
||||
const UI6: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleBack = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
navigate("/UI7");
|
||||
};
|
||||
|
||||
const testData = [
|
||||
{
|
||||
"department": "B超科室",
|
||||
"project": ["甲状腺B超", "腹部B超" , "乳腺B超"]
|
||||
},
|
||||
{
|
||||
"department": "血常规科室",
|
||||
"project": ["血常规", "血型"]
|
||||
},
|
||||
{
|
||||
"department": "心电图科室",
|
||||
"project": ["心电图", "心电图"]
|
||||
},
|
||||
{
|
||||
"department": "心电图科室",
|
||||
"project": ["心电图", "心电图"]
|
||||
},
|
||||
{
|
||||
"department": "心电图科室",
|
||||
"project": ["心电图", "心电图"]
|
||||
},
|
||||
{
|
||||
"department": "心电图科室",
|
||||
"project": ["心电图", "心电图"]
|
||||
},
|
||||
{
|
||||
"department": "心电图科室",
|
||||
"project": ["心电图", "心电图"]
|
||||
},
|
||||
{
|
||||
"department": "心电图科室",
|
||||
"project": ["心电图", "心电图"]
|
||||
},
|
||||
{
|
||||
"department": "心电图科室",
|
||||
"project": ["心电图", "心电图"]
|
||||
},
|
||||
{
|
||||
"department": "心电图科室",
|
||||
"project": ["心电图", "心电图","心电图", "心电图","心电图", "心电图","心电图", "心电图","心电图", "心电图"]
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="basic-root">
|
||||
<div className="basic-white-block">
|
||||
<div className="basic-content">
|
||||
<span className="basic-title">体检套餐确认</span>
|
||||
<DecorLine />
|
||||
|
||||
<span className="basic-paragraph">
|
||||
张哈哈女士定制套餐
|
||||
<br />
|
||||
<br />
|
||||
已帮您成功预约2022-02-219:00-9:30的体检，以下是体检套餐详情和价格。
|
||||
</span>
|
||||
|
||||
<div className="ui6-table-container">
|
||||
<table className="ui6-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="ui6-table-header ui6-table-dept">科室</th>
|
||||
<th className="ui6-table-header ui6-table-project">检查项目</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{testData.map((item, index) => (
|
||||
<tr key={index} className="ui6-table-row">
|
||||
<td className="ui6-table-dept-cell">{item.department}</td>
|
||||
<td className="ui6-table-project-cell">
|
||||
{item.project.map((project, pIndex) => (
|
||||
<div key={pIndex} className="ui6-project-item">
|
||||
<span style={{ paddingLeft: 20 }}>{project}</span>
|
||||
</div>
|
||||
))}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="basic-confirm-section">
|
||||
<BackButton text="返回" onClick={handleBack} />
|
||||
<ConfirmButton text="签名" onClick={handleConfirm} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UI6;
|
||||
100
src/pages/UI7/UI7.css
Normal file
100
src/pages/UI7/UI7.css
Normal file
@@ -0,0 +1,100 @@
|
||||
.ui7-text-wrapper {
|
||||
height: 623px;
|
||||
width: 975px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 30px;
|
||||
color: #000;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
/* 隐藏滚动条但保持滚动功能 */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE 和 Edge */
|
||||
}
|
||||
|
||||
.ui7-text-wrapper::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, Opera */
|
||||
}
|
||||
|
||||
.ui7-text-content {
|
||||
padding: 32px 42px;
|
||||
}
|
||||
|
||||
.ui7-text-content .paragraph_1 {
|
||||
font-family: NotoSansCJKsc-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.ui7-text_4 {
|
||||
width: 393px;
|
||||
height: 35px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(0, 45, 93, 1);
|
||||
font-size: 32px;
|
||||
font-family: NotoSansCJKsc-Medium;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
line-height: 46px;
|
||||
margin: 12px 0 22px 0;
|
||||
}
|
||||
|
||||
.ui7-signature-wrapper {
|
||||
height: 338px;
|
||||
width: 975px;
|
||||
border-radius: 30px;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
||||
color: #000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui7-signature-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: crosshair;
|
||||
touch-action: none;
|
||||
/* 优化图像渲染，使用高质量抗锯齿 */
|
||||
image-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
transform: translateZ(0);
|
||||
will-change: contents;
|
||||
}
|
||||
|
||||
.ui7-clear-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
padding: 8px 16px;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-family: NotoSansCJKsc-Regular;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.ui7-clear-button:hover {
|
||||
color: #000;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ui7-clear-button:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ui7-clear-button:active {
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
284
src/pages/UI7/UI7.tsx
Normal file
284
src/pages/UI7/UI7.tsx
Normal file
@@ -0,0 +1,284 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import "./UI7.css";
|
||||
import "../../assets/css/basic.css";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import BackButton from "../../components/BackButton";
|
||||
import ConfirmButton from "../../components/ConfirmButton";
|
||||
import DecorLine from "../../components/DecorLine";
|
||||
import WaitButton from "../../components/WaitButton";
|
||||
|
||||
const UI6: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [countdown, setCountdown] = useState(5);
|
||||
const [showWaitButton, setShowWaitButton] = useState(true);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [isDrawing, setIsDrawing] = useState(false);
|
||||
const dprRef = useRef<number>(1);
|
||||
const lastPointRef = useRef<{ x: number; y: number } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (countdown > 0) {
|
||||
const timer = setTimeout(() => {
|
||||
setCountdown(countdown - 1);
|
||||
}, 1000);
|
||||
return () => clearTimeout(timer);
|
||||
} else {
|
||||
setShowWaitButton(false);
|
||||
}
|
||||
}, [countdown]);
|
||||
|
||||
useEffect(() => {
|
||||
const initCanvas = () => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d", {
|
||||
willReadFrequently: false,
|
||||
alpha: true
|
||||
});
|
||||
if (!ctx) return;
|
||||
|
||||
// 获取 canvas 的显示尺寸
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
// 使用更高的缩放倍数（3倍）来提高分辨率
|
||||
const scale = 3;
|
||||
dprRef.current = scale;
|
||||
|
||||
// 设置 canvas 内部尺寸（高分辨率，3倍）
|
||||
canvas.width = rect.width * scale;
|
||||
canvas.height = rect.height * scale;
|
||||
|
||||
// 缩放上下文以匹配显示尺寸
|
||||
ctx.scale(scale, scale);
|
||||
|
||||
// 设置 canvas 的 CSS 尺寸为显示尺寸
|
||||
canvas.style.width = `${rect.width}px`;
|
||||
canvas.style.height = `${rect.height}px`;
|
||||
|
||||
// 设置绘制样式（启用抗锯齿，优化参数）
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineCap = "round";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
ctx.imageSmoothingQuality = "high";
|
||||
ctx.globalCompositeOperation = "source-over";
|
||||
};
|
||||
|
||||
// 延迟初始化以确保 DOM 完全渲染
|
||||
const timer = setTimeout(initCanvas, 100);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const getCoordinates = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return { x: 0, y: 0 };
|
||||
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
if ("touches" in e) {
|
||||
return {
|
||||
x: e.touches[0].clientX - rect.left,
|
||||
y: e.touches[0].clientY - rect.top,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const startDrawing = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
|
||||
e.preventDefault();
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const { x, y } = getCoordinates(e);
|
||||
|
||||
// 记录起始点
|
||||
lastPointRef.current = { x, y };
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
setIsDrawing(true);
|
||||
};
|
||||
|
||||
const draw = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
|
||||
e.preventDefault();
|
||||
if (!isDrawing || !lastPointRef.current) return;
|
||||
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const { x, y } = getCoordinates(e);
|
||||
const lastPoint = lastPointRef.current;
|
||||
|
||||
// 使用二次贝塞尔曲线平滑绘制
|
||||
const midX = (lastPoint.x + x) / 2;
|
||||
const midY = (lastPoint.y + y) / 2;
|
||||
|
||||
ctx.quadraticCurveTo(lastPoint.x, lastPoint.y, midX, midY);
|
||||
ctx.stroke();
|
||||
|
||||
// 更新最后一个点
|
||||
lastPointRef.current = { x, y };
|
||||
};
|
||||
|
||||
const stopDrawing = () => {
|
||||
setIsDrawing(false);
|
||||
lastPointRef.current = null;
|
||||
};
|
||||
|
||||
const clearCanvas = () => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
// 清除整个 canvas（使用显示坐标系统）
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
ctx.clearRect(0, 0, rect.width, rect.height);
|
||||
|
||||
// 重新初始化绘制样式
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineCap = "round";
|
||||
ctx.lineJoin = "round";
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) {
|
||||
navigate("/UI7");
|
||||
return;
|
||||
}
|
||||
|
||||
// 下载签名图片
|
||||
canvas.toBlob((blob) => {
|
||||
if (!blob) return;
|
||||
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = `签名_${new Date().getTime()}.png`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
}, "image/png");
|
||||
|
||||
navigate("/UI7");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="basic-root">
|
||||
<div className="basic-white-block">
|
||||
<div className="basic-content">
|
||||
<span className="basic-title">体检知情同意书确认</span>
|
||||
<DecorLine />
|
||||
|
||||
<div className="ui7-text-wrapper">
|
||||
<div className="ui7-text-content">
|
||||
<span className="paragraph_1">
|
||||
尊敬的受检者：
|
||||
<br />
|
||||
<br />
|
||||
欢迎您参加本次健康体检！为保障您的合法权益，现就体检相关事项告知如下，请您认真阅读并确认签署。
|
||||
<br />
|
||||
一、体检目的
|
||||
<br />
|
||||
<br />
|
||||
本次健康体检旨在通过常规医学检查，了解您的身体健康状况，发现潜在的疾病风险，供您及医生进行健康指导与干预。
|
||||
<br />
|
||||
1.
|
||||
<br />
|
||||
体检结果仅供参考，不等同于临床诊断。如发现异常，请及时到相关专科医院进一步检查与治疗。
|
||||
<br />
|
||||
2.
|
||||
<br />
|
||||
二、体检须知
|
||||
<br />
|
||||
3.
|
||||
<br />
|
||||
空腹要求：抽血、腹部B超等项目需空腹8小时以上。
|
||||
<br />
|
||||
4.
|
||||
<br />
|
||||
女性注意事项：经期及妊娠期女性请提前告知医护人员，避免放射类检查（如胸片、CT等）。
|
||||
<br />
|
||||
5.
|
||||
<br />
|
||||
贵重物品：请妥善保管个人物品，中心不承担遗失责任。
|
||||
<br />
|
||||
身体状况告知：如有重大疾病史、药物过敏史、手术史等，请提前告知医护人员。
|
||||
<br />
|
||||
体检安全：如在体检过程中出现不适，应立即告知现场医护人员。
|
||||
<br />
|
||||
<br />
|
||||
三、隐私与信息保护
|
||||
<br />
|
||||
1.
|
||||
<br />
|
||||
体检机构将严格遵守国家相关法律法规，对您的个人信息和体检资料予以保密，未经本人授权，不会向第三方泄露。
|
||||
<br />
|
||||
2.
|
||||
<br />
|
||||
四、体检风险告知
|
||||
<br />
|
||||
3.
|
||||
<br />
|
||||
部分检查（如抽血、X射线、CT、宫颈刮片等）可能带来轻微不适或风险。
|
||||
<br />
|
||||
体检结果可能存在一定误差，需结合临床进一步判断。
|
||||
<br />
|
||||
若因个人隐瞒病史或未遵守体检要求导致结果偏差，责任由受检者自
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<span className="ui7-text_4">请阅读后在下方签名确认</span>
|
||||
|
||||
<div className="ui7-signature-wrapper">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="ui7-signature-canvas"
|
||||
onMouseDown={startDrawing}
|
||||
onMouseMove={draw}
|
||||
onMouseUp={stopDrawing}
|
||||
onMouseLeave={stopDrawing}
|
||||
onTouchStart={startDrawing}
|
||||
onTouchMove={draw}
|
||||
onTouchEnd={stopDrawing}
|
||||
/>
|
||||
<button className="ui7-clear-button" onClick={clearCanvas}>
|
||||
清除
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="basic-confirm-section">
|
||||
<BackButton text="返回" onClick={handleBack} />
|
||||
{showWaitButton ? (
|
||||
<WaitButton text={`等待(${countdown})S`} onClick={handleConfirm} />
|
||||
) : (
|
||||
<ConfirmButton text="提交" onClick={handleConfirm} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UI6;
|
||||
Reference in New Issue
Block a user