加项样式

src/components/exam/ExamModal.tsx

@@ -30,49 +30,79 @@ export const ExamModal = ({ client, tab, onTabChange, onClose }: ExamModalProps)
   };
 
   return (
-    <div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
-      <div className='w-[720px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
-        <div className='px-4 py-3 border-b flex items-center justify-between'>
-          <div className='flex items-center gap-3'>
-            <span className='font-semibold'>{client.name}</span>
-            <span className='text-xs text-gray-500'>体检号：{client.id}</span>
-            <Badge>{client.level}</Badge>
+    <div className='fixed inset-0 z-40 flex items-center justify-center bg-black/50'>
+      <div className='w-[960px] max-w-[95vw] bg-white rounded-2xl shadow-xl overflow-hidden text-sm'>
+
+        {/* Header 区域：增加了内边距 padding */}
+        <div className='px-8 pt-6 pb-2'>
+          <div className='flex items-center justify-between'>
+            {/* 左侧：姓名 + VIP + 体检号 */}
+            <div className='flex items-end gap-3'>
+              <span className='text-2xl font-bold text-gray-900 leading-none'>
+                {client.name}
+              </span>
+              {/* VIP 徽章样式优化：紫色背景 + 左右内边距 */}
+              <span className='inline-flex items-center justify-center bg-indigo-100 text-indigo-600 text-[11px] font-bold px-2 py-0.5 rounded h-5 align-bottom'>
+                VIP
+              </span>
+              <span className='text-sm text-gray-400 ml-1 leading-none mb-0.5'>
+                体检号：{client.id}
+              </span>
+            </div>
+
+            {/* 右侧：仅保留关闭按钮 */}
+            <button
+              className='text-gray-400 hover:text-gray-600 transition-colors text-sm'
+              onClick={onClose}
+            >
+              关闭
+            </button>
           </div>
-          <button className='text-xs text-gray-500' onClick={onClose}>
-            关闭
-          </button>
         </div>
-        <div className='px-4 py-2 border-b flex items-center gap-2 text-xs'>
-          {tabs.map((t) => {
-            const isActive = tab === t.key;
-            const isDone = tabDone[t.key];
-            return (
-              <button
-                key={t.key}
-                onClick={() => onTabChange(t.key)}
-                className={`px-3 py-1 rounded-2xl border text-xs ${
-                  isActive
-                    ? 'bg-gray-900 text-white border-gray-900'
+
+        {/* Tabs 区域 */}
+        <div className='px-8 py-4 flex items-center justify-between'>
+          <div className='flex items-center gap-3'>
+            {tabs.map((t) => {
+              const isActive = tab === t.key;
+              const isDone = tabDone[t.key];
+              return (
+                <button
+                  key={t.key}
+                  onClick={() => onTabChange(t.key)}
+                  // 样式修改：rounded-full (完全圆角), border 颜色调整, 增加选中时的阴影
+                  className={`px-5 py-2 rounded-2xl border text-sm transition-all duration-200 ${isActive
+                    ? 'bg-blue-600 text-white border-blue-600 shadow-md shadow-blue-200'
                     : isDone
-                    ? 'bg-gray-100 text-gray-400 border-gray-200'
-                    : 'bg-white text-gray-700'
-                }`}
-              >
-                {t.label}
-                {t.key === 'addon' && (client.addonCount || 0) > 0 && (
-                  <span className='ml-1 text-[10px] opacity-80'>({client.addonCount})</span>
-                )}
-                {((t.key === 'sign' && signDone) || (t.key === 'print' && printDone)) && <span className='ml-1'>✅</span>}
-              </button>
-            );
-          })}
+                      ? 'bg-gray-50 text-gray-400 border-gray-100'
+                      : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
+                    }`}
+                >
+                  {t.label}
+                  {/* 这里保留了原有逻辑，但微调了样式 */}
+                  {t.key === 'addon' && (client.addonCount || 0) > 0 && (
+                    <span className={`text-xs ${isActive ? 'text-blue-100' : 'text-gray-400'}`}>
+                      ({client.addonCount})
+                    </span>
+                  )}
+                  {((t.key === 'sign' && signDone) || (t.key === 'print' && printDone)) && (
+                    <span className=''></span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+
+          {/* 按钮部分：将原本在 Tab 右侧的任何操作可以放这里，或者留空 */}
         </div>
+
         <div className='px-4 py-4 bg-gray-50/60'>
           {tab === 'detail' && <ExamDetailInfo client={client} />}
           {tab === 'sign' && <ExamSignPanel />}
           {tab === 'addon' && <ExamAddonPanel client={client} />}
           {tab === 'print' && <ExamPrintPanel client={client} />}
         </div>
+
       </div>
     </div>
   );
@@ -101,32 +131,195 @@ const ExamSignPanel = () => (
   </div>
 );
 
-const ExamAddonPanel = ({ client }: { client: ExamClient }) => (
-  <div className='grid grid-cols-2 gap-6 text-sm'>
-    <div>
-      <div className='font-medium mb-2'>当前套餐项目</div>
-      <ul className='space-y-1 text-xs text-gray-600'>
-        {client.checkedItems.concat(client.pendingItems).map((item, idx) => (
-          <li key={idx} className='flex items-center justify-between'>
-            <span>{item}</span>
-            <span className='text-gray-400 text-[11px]'>{client.checkedItems.includes(item) ? '已检查' : '未检查'}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
-    <div>
-      <div className='font-medium mb-2'>可选加项</div>
-      <div className='space-y-2 text-xs text-gray-600'>
-        {['肿瘤标志物筛查', '甲状腺彩超', '骨密度检测'].map((label) => (
-          <label key={label} className='flex items-center gap-2'>
-            <input type='checkbox' className='rounded' /> {label}
-          </label>
-        ))}
+interface AddonTag {
+  title: string;
+  type: 1 | 2 | 3 | 4; // 1: 热门(红), 2: 普通(灰), 3: 医生推荐(蓝), 4: 折扣信息
+}
+
+interface AddonItem {
+  id?: string;
+  name: string;
+  paid?: boolean;
+  tags?: AddonTag[];
+  originalPrice?: string;
+  currentPrice?: string;
+  price?: number; // 兼容 addonOptions 结构
+}
+
+const ExamAddonPanel = ({ client }: { client: ExamClient }) => {
+  // 从 client 获取加项选项数据
+  const addonOptions = (client['addonOptions' as keyof ExamClient] as AddonItem[] | undefined) || [];
+  const addonSummary = (client['addonSummary' as keyof ExamClient] as AddonItem[] | undefined) || [];
+
+  // 合并数据，优先使用 addonOptions，如果没有则使用 addonSummary
+  const allAddons: AddonItem[] = addonOptions.length > 0
+    ? addonOptions.map(item => ({
+      id: item.id || `addon_${item.name}`,
+      name: item.name,
+      paid: item.paid || false,
+      tags: item.tags || [],
+      originalPrice: item.originalPrice || (item.price ? item.price.toFixed(2) : '0.00'),
+      currentPrice: item.currentPrice || (item.price ? item.price.toFixed(2) : '0.00'),
+    }))
+    : addonSummary;
+
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(
+    new Set(allAddons.filter(item => item.paid).map(item => item.id || item.name))
+  );
+
+  const maxSelect = 15;
+  const selectedCount = selectedIds.size;
+
+  const toggleSelect = (id: string) => {
+    if (selectedIds.has(id)) {
+      setSelectedIds(prev => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    } else {
+      if (selectedCount < maxSelect) {
+        setSelectedIds(prev => new Set(prev).add(id));
+      }
+    }
+  };
+
+  // 计算价格汇总
+  const selectedItems = allAddons.filter(item => selectedIds.has(item.id || item.name));
+  const totalOriginal = selectedItems.reduce((sum, item) => {
+    return sum + parseFloat(item.originalPrice || item.currentPrice || '0');
+  }, 0);
+  const totalCurrent = selectedItems.reduce((sum, item) => {
+    return sum + parseFloat(item.currentPrice || item.originalPrice || '0');
+  }, 0);
+  const discount = totalOriginal - totalCurrent;
+
+  // 获取标签样式
+  const getTagStyle = (tag: AddonTag) => {
+    switch (tag.type) {
+      case 1: // 热门
+        return 'bg-[#FDF0F0] text-[#BC4845]';
+      case 3: // 医生推荐
+        return 'bg-[#ECF0FF] text-[#6A6AE5]';
+      case 4: // 折扣信息
+        return 'bg-[#4C5460] text-[#F1F2F5]';
+      default: // 2: 普通
+        return 'bg-[#F1F2F5] text-[#464E5B]';
+    }
+  };
+
+  // 获取折扣信息文字（从 tags 中提取 type 4 的标签，或计算折扣）
+  const getDiscountText = (item: AddonItem) => {
+    const discountTag = item.tags?.find(t => t.type === 4);
+    if (discountTag) return discountTag.title;
+
+    const orig = parseFloat(item.originalPrice || '0');
+    const curr = parseFloat(item.currentPrice || '0');
+    if (orig > 0 && curr < orig) {
+      const percent = Math.round((curr / orig) * 100);
+      return `渠道 ${percent} 折`;
+    }
+    return '渠道价';
+  };
+
+  return (
+    <div className='space-y-4'>
+      {/* 标题和说明 */}
+      <div>
+        <h3 className='text-lg font-semibold text-gray-900 mb-2'>体检套餐加项选择</h3>
+        <div className='text-xs text-gray-600 space-y-1'>
+          <div>最多可选 {maxSelect} 项 · 一排 5 个</div>
+          <div>已勾选 {selectedCount} 项,自费加项费用按渠道折扣价结算。</div>
+        </div>
+      </div>
+
+      {/* 加项网格 */}
+      <div className='grid grid-cols-5 gap-3'>
+        {allAddons.map((item) => {
+          const id = item.id || item.name;
+          const isSelected = selectedIds.has(id);
+          const origPrice = parseFloat(item.originalPrice || '0');
+          const currPrice = parseFloat(item.currentPrice || '0');
+
+          return (
+            <div
+              key={id}
+              className={`border rounded-lg p-3 cursor-pointer transition-all'
+                }`}
+              onClick={() => toggleSelect(id)}
+            >
+              {/* 复选框 */}
+              <div className='flex items-start gap-2 mb-2'>
+                <input
+                  type='checkbox'
+                  checked={isSelected}
+                  onChange={() => toggleSelect(id)}
+                  onClick={(e) => e.stopPropagation()}
+                  className='mt-0.5 w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500'
+                />
+                <div className='flex-1 min-w-0'>
+                  {/* 项目名称 */}
+                  <div className='font-semibold text-[14px] text-gray-900 mb-1'>{item.name}</div>
+
+                  {/* 标签 */}
+                  {item.tags && item.tags.length > 0 && (
+                    <div className='flex flex-wrap gap-1 mb-2'>
+                      {item.tags
+                        .filter(t => t.type !== 4) // 折扣信息单独显示
+                        .map((tag, idx) => (
+                          <span
+                            key={idx}
+                            className={`text-[10px] px-2 rounded-full ${getTagStyle(tag)}`}
+                          >
+                            {tag.title}
+                          </span>
+                        ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* 价格信息 */}
+              <div className='mt-2'>
+                <div className='flex flex-col'>
+                  {origPrice > 0 && origPrice > currPrice && (
+                    <span className='text-xs text-gray-400 line-through'>¥{origPrice.toFixed(0)}</span>
+                  )}
+                  <div className='flex items-center justify-between gap-2'>
+                    <span className='text-[14px] font-bold text-red-600'>¥{currPrice.toFixed(0)}</span>
+                    <span className={`text-[10px] px-2 rounded-full bg-[#EAFCF1] text-[#447955] whitespace-nowrap`}>{getDiscountText(item)}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 底部汇总和支付 */}
+      <div className='border-t pt-4 mt-6 flex items-center justify-between'>
+        <div className='space-y-1 text-sm'>
+          <div className='text-gray-600'>
+            加项原价合计: <span className='text-gray-900'>¥{totalOriginal.toFixed(0)}</span>
+          </div>
+          <div className='text-gray-600'>
+            渠道折扣价: <span className='text-xl font-bold text-red-600'>¥{totalCurrent.toFixed(0)}</span>
+            {discount > 0 && (
+              <span className='text-gray-500 ml-1'>已优惠 ¥{discount.toFixed(0)}</span>
+            )}
+          </div>
+          <div className='text-xs text-gray-500'>结算方式: 个人支付 (微信 / 支付宝)</div>
+        </div>
+        <Button
+          className='bg-green-600 hover:bg-green-700 text-white px-6 py-3 text-base font-medium'
+          disabled={selectedCount === 0}
+        >
+          确认支付 ¥{totalCurrent.toFixed(0)}
+        </Button>
       </div>
-      <Button className='mt-3'>确认加项并生成费用</Button>
     </div>
-  </div>
-);
+  );
+};
 
 const ExamDetailInfo = ({ client }: { client: ExamClient }) => {
   const [phone, setPhone] = useState((client['mobile' as keyof ExamClient] as string | undefined) || '137****9988');