加项搜索&更新样式
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
import type { ExamClient, ExamModalTab } from '../../data/mockData';
|
import type { ExamClient, ExamModalTab } from '../../data/mockData';
|
||||||
import { Badge, Button } from '../ui';
|
import { Badge, Button, Input } from '../ui';
|
||||||
|
|
||||||
interface ExamModalProps {
|
interface ExamModalProps {
|
||||||
client: ExamClient;
|
client: ExamClient;
|
||||||
@@ -143,10 +143,10 @@ const ExamSignPanel = () => (
|
|||||||
<div className='p-4 rounded-2xl border bg-gray-50/60 flex flex-col gap-3'>
|
<div className='p-4 rounded-2xl border bg-gray-50/60 flex flex-col gap-3'>
|
||||||
<div className='font-medium'>体检知情同意书</div>
|
<div className='font-medium'>体检知情同意书</div>
|
||||||
<div className='text-xs text-gray-500'>点击后弹出知情同意书全文及签名区域,签署完成后回到签到页面。</div>
|
<div className='text-xs text-gray-500'>点击后弹出知情同意书全文及签名区域,签署完成后回到签到页面。</div>
|
||||||
<div className='flex gap-2 text-xs text-gray-600'>
|
{/* <div className='flex gap-2 text-xs text-gray-600'>
|
||||||
<Badge>阅读记录</Badge>
|
<Badge>阅读记录</Badge>
|
||||||
<Badge>签名图片</Badge>
|
<Badge>签名图片</Badge>
|
||||||
</div>
|
</div> */}
|
||||||
<Button className='py-1.5 px-3'>打开知情同意书并签署</Button>
|
<Button className='py-1.5 px-3'>打开知情同意书并签署</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -191,6 +191,14 @@ const ExamAddonPanel = ({ client }: { client: ExamClient }) => {
|
|||||||
const maxSelect = 15;
|
const maxSelect = 15;
|
||||||
const selectedCount = selectedIds.size;
|
const selectedCount = selectedIds.size;
|
||||||
|
|
||||||
|
const [addonSearch, setAddonSearch] = useState('');
|
||||||
|
|
||||||
|
const filteredAddons = addonSearch.trim()
|
||||||
|
? allAddons.filter(item =>
|
||||||
|
item.name.toLowerCase().includes(addonSearch.toLowerCase())
|
||||||
|
)
|
||||||
|
: allAddons;
|
||||||
|
|
||||||
const toggleSelect = (id: string) => {
|
const toggleSelect = (id: string) => {
|
||||||
if (selectedIds.has(id)) {
|
if (selectedIds.has(id)) {
|
||||||
setSelectedIds(prev => {
|
setSelectedIds(prev => {
|
||||||
@@ -247,7 +255,17 @@ const ExamAddonPanel = ({ client }: { client: ExamClient }) => {
|
|||||||
<div className='space-y-4'>
|
<div className='space-y-4'>
|
||||||
{/* 标题和说明 */}
|
{/* 标题和说明 */}
|
||||||
<div>
|
<div>
|
||||||
<h3 className='text-lg font-semibold text-gray-900 mb-2'>体检套餐加项选择</h3>
|
<div className='flex items-center justify-between mb-2 gap-3'>
|
||||||
|
<h3 className='text-lg font-semibold text-gray-900'>体检套餐加项选择</h3>
|
||||||
|
<div className='w-[260px]'>
|
||||||
|
<Input
|
||||||
|
placeholder='搜索 加项名称'
|
||||||
|
value={addonSearch}
|
||||||
|
onChange={(e) => setAddonSearch(e.target.value)}
|
||||||
|
className='text-sm'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div className='text-xs text-gray-600 space-y-1'>
|
<div className='text-xs text-gray-600 space-y-1'>
|
||||||
<div>最多可选 {maxSelect} 项 · 一排 5 个</div>
|
<div>最多可选 {maxSelect} 项 · 一排 5 个</div>
|
||||||
<div>已勾选 {selectedCount} 项,自费加项费用按渠道折扣价结算。</div>
|
<div>已勾选 {selectedCount} 项,自费加项费用按渠道折扣价结算。</div>
|
||||||
@@ -255,8 +273,8 @@ const ExamAddonPanel = ({ client }: { client: ExamClient }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 加项网格 */}
|
{/* 加项网格 */}
|
||||||
<div className='grid grid-cols-5 gap-3'>
|
<div className='grid grid-cols-5 gap-3 min-h-[142px]'>
|
||||||
{allAddons.map((item) => {
|
{filteredAddons.map((item) => {
|
||||||
const id = item.id || item.name;
|
const id = item.id || item.name;
|
||||||
const isSelected = selectedIds.has(id);
|
const isSelected = selectedIds.has(id);
|
||||||
const origPrice = parseFloat(item.originalPrice || '0');
|
const origPrice = parseFloat(item.originalPrice || '0');
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ export const HomeSection = () => (
|
|||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>营收数据统计</CardHeader>
|
<CardHeader>今日营收数据统计</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className='grid grid-cols-3 gap-3'>
|
<div className='grid grid-cols-3 gap-3'>
|
||||||
{REVENUE_STATS.map(([label, value]) => (
|
{REVENUE_STATS.map(([label, value]) => (
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ export const TopBar = ({ search, onSearch, enableSearch = true, operatorName, on
|
|||||||
{enableSearch ? (
|
{enableSearch ? (
|
||||||
<div className='w-[420px] max-w-[60vw] flex items-center'>
|
<div className='w-[420px] max-w-[60vw] flex items-center'>
|
||||||
<Input
|
<Input
|
||||||
placeholder='搜索姓名 / 体检号 / 套餐'
|
placeholder='搜索 姓名 / 证件号 / 手机号'
|
||||||
value={search}
|
value={search}
|
||||||
onChange={(e) => onSearch(e.target.value)}
|
onChange={(e) => onSearch(e.target.value)}
|
||||||
className='text-sm'
|
className='text-sm'
|
||||||
|
|||||||
Reference in New Issue
Block a user