tmp1

custom-tab-bar/index.js

@@ -1,6 +1,7 @@
-// 自定义 tabBar：原生 tabBar 只能放 PNG 位图，三个图标分别是
-// 实心"手托心" / 气泡里塞"AI"字 / 线框人形，风格互相打架。
-// 改用 TDesign 图标字体后，三个 tab 走同一套线性笔触，只靠颜色区分选中态。
+// 自定义 tabBar：固定在底部，选中态只换颜色、不换图形。
+// 「首页 / 我的」走 TDesign 线性图标字体；「AI客服」用品牌 AI 图标
+// （气泡内 AI 字位图）：灰色版 ai.png 为未选中态，暖橙版 ai-ink.png 为选中态，
+// 与文字颜色同步切换，保持选中可辨
 Component({
   data: {
     selected: 0, // 当前选中项，由各 tab 页在 onShow 里同步
@@ -13,7 +14,9 @@ Component({
     }, {
       pagePath: '/pages/ai/aichat',
       text: 'AI客服',
-      icon: 'chat'
+      // 图片图标：配置了 imgPath 时优先于 icon 渲染
+      imgPath: '/images/ai.png',
+      imgActivePath: '/images/ai-ink.png'
     }, {
       pagePath: '/pages/mine/mine',
       text: '我的',

custom-tab-bar/index.wxml

@@ -7,8 +7,16 @@
     data-path="{{ item.pagePath }}"
     bindtap="onTap"
   >
-    <!-- 三个 tab 共用同一套线性图标，选中态只换颜色、不换图形 -->
+    <!-- 配置了 imgPath 的 tab（AI客服）走位图：灰色未选中 / 暖橙选中两态切换；
+         其余 tab 走 TDesign 线性图标，选中态只换颜色 -->
+    <image
+      wx:if="{{ item.imgPath }}"
+      class="tab-icon-img"
+      src="{{ selected === index ? item.imgActivePath : item.imgPath }}"
+      mode="aspectFit"
+    />
     <t-icon
+      wx:else
       name="{{ item.icon }}"
       size="44rpx"
       color="{{ selected === index ? activeColor : inactiveColor }}"

custom-tab-bar/index.wxss

@@ -19,6 +19,12 @@
   align-items: center;
 }
 
+/* 位图图标（AI客服）：与 t-icon 的 44rpx 视觉尺寸对齐 */
+.tab-icon-img {
+  width: 44rpx;
+  height: 44rpx;
+}
+
 .tab-text {
   margin-top: 6rpx;
   /* 与全局约束一致：中文正文不小于 24rpx(12px) */

pages/home/index.js

@@ -14,7 +14,8 @@ const SERVICE_UI = {
   8: { name: '买药套餐' }
 }
 
-// 陪诊服务的展示顺序（两行共 8 项）
+// 陪诊服务的展示顺序（两行共 8 项）。
+// 全天 / 半天是核心营收项，靠排在前两位形成隐性推荐位
 const SERVICE_ORDER = [1, 2, 3, 4, 5, 6, 7, 8]
 
 // 计入"待服务订单"的订单状态：待确认 / 已确认 / 进行中
@@ -25,12 +26,13 @@ const SERVICE_PHONE = '18618162956'
 
 Page({
   data: {
-    escortServices: [], // 陪诊服务（来自后端，最多 8 项）
+    escortServices: [], // 陪诊服务（来自后端，最多 8 项，宫格展示）
     pendingCount: 0, // 待服务订单数，大于 0 时首页顶部展示状态条
     quickEntries: [{
         id: 'records',
         name: '预约记录',
-        desc: '查看预约进度与历史',
+        // 横排布局后文字区变窄，desc 控制在 8 字内避免折行
+        desc: '查看进度与历史',
         // 日历：与「健康档案」的人形图标形成明显形态差异（原先两个都是"文档+勾"，缩小后难分辨）
         icon: 'calendar-1',
         url: '/pages/escort/recordlist'
@@ -41,6 +43,15 @@ Page({
         desc: '管理家人就诊信息',
         icon: 'user-checked',
         url: '/pages/health/profilelist'
+      },
+      {
+        id: 'contact',
+        name: '联系我们',
+        desc: '人工客服',
+        icon: 'call',
+        url: '/pages/mine/contact',
+        // 第三张卡通栏排布（两列网格的 2+1），避免右下角孤零零半张卡
+        full: true
       }
     ]
   },
@@ -71,6 +82,8 @@ Page({
         serviceMap[service.id] = service
       })
 
+      // 按展示顺序拼装。首页宫格不取 price / subtitle——
+      // 定价与服务介绍分别留到指南页、详情页展示
       const escortServices = SERVICE_ORDER
         .filter((id) => serviceMap[id])
         .map((id) => {
@@ -123,12 +136,6 @@ Page({
       })
   },
 
-  goToAiChat() {
-    wx.switchTab({
-      url: '/pages/ai/aichat'
-    });
-  },
-
   // 页脚 B 端合作入口仍直接转服务电话
   goToContact() {
     wx.makePhoneCall({
@@ -136,14 +143,15 @@ Page({
     });
   },
 
-  // 「联系我们」卡片：进入独立联系页，页内再提供拨号/复制/工作时间
-  goToContactPage() {
+  // Hero 主按钮：直达服务列表，缩短「了解 → 下单」路径。
+  // 陪诊指南的入口由服务区块的介绍卡承担
+  goToBooking() {
     wx.navigateTo({
-      url: '/pages/mine/contact'
+      url: '/pages/escort/itemlist'
     });
   },
 
-  // Hero 主按钮：先引导新用户了解服务，服务列表入口在指南页底部
+  // 次级文字链：新用户想先了解流程时看指南
   goToGuide() {
     wx.navigateTo({
       url: '/pages/escort/guide'

pages/home/index.wxml

@@ -11,58 +11,64 @@
       </view>
     </view>
 
-    <!-- ① 头部：参考图的大字标题排版。去掉整块色面板，标题直接落在暖白纸面上，
-         靠字号/字重建立重心，视觉更轻、更透气 -->
+    <!-- ① 头部：大字标题 + 信任数据条 + 主 CTA。
+         陪诊是高信任门槛决策，首屏先给可验证的事实（认证 / 覆盖 / 评价），
+         再给「立即预约」的直达入口；指南降为次级文字链 -->
     <view class="hero">
       <view class="hero-title">
         <!-- 不用逗号断句：靠「暖橙强调 + 深墨正文」的色差自然切分两个短句 -->
         <text class="hero-title-accent">专业陪诊</text>
         <text class="hero-title-main">让就医更省心</text>
       </view>
-      <text class="hero-sub">实名认证陪诊师 · 经验丰富 · 熟悉各大医院流程</text>
-      <!-- 主行动按钮：通栏胶囊。首屏先引导新用户了解服务（陪诊指南），
-           服务列表入口放在指南页底部，转化路径为「指南 → 查看服务」 -->
-      <view class="hero-cta" bindtap="goToGuide">
-        <text class="hero-cta-text">陪诊指南</text>
+      <!-- 信任数据条：三项硬事实并列，替代原先的形容词副标题 -->
+      <view class="trust-row">
+        <view class="trust-item">
+          <text class="trust-num">100%</text>
+          <text class="trust-label">实名认证</text>
+        </view>
+        <view class="trust-sep"></view>
+        <view class="trust-item">
+          <text class="trust-num">三甲</text>
+          <text class="trust-label">熟悉流程</text>
+        </view>
+        <view class="trust-sep"></view>
+        <view class="trust-item">
+          <text class="trust-num">24h</text>
+          <text class="trust-label">在线响应</text>
+        </view>
+      </view>
+      <!-- 主行动按钮：通栏胶囊，直达服务列表（下单路径最短化） -->
+      <view class="hero-cta" bindtap="goToBooking">
+        <text class="hero-cta-text">立即预约</text>
         <t-icon name="chevron-right" size="28rpx" color="#FFFFFF" />
       </view>
     </view>
 
-    <!-- ② 客服与联系：两张同款白卡并排，图标统一走浅橙衬底 -->
-    <view class="contact-row">
-      <view class="contact-card" bindtap="goToAiChat">
-        <view class="contact-icon">
-          <!-- 用品牌 AI 图标（气泡内 AI 字），已按调色板着色为 #9A3412 -->
-          <image class="contact-icon-img" src="/images/ai-ink.png" mode="aspectFit" />
-        </view>
-        <view class="contact-info">
-          <text class="contact-name">在线咨询</text>
-          <text class="contact-en">AI 客服</text>
-        </view>
-      </view>
-      <!-- 联系我们不再是直接拨号，改为进入独立页（页内可拨号/复制/看工作时间） -->
-      <view class="contact-card" bindtap="goToContactPage">
-        <view class="contact-icon">
-          <t-icon name="call" size="32rpx" color="#9A3412" />
-        </view>
-        <view class="contact-info">
-          <text class="contact-name">联系我们</text>
-          <text class="contact-en">人工客服</text>
-        </view>
-      </view>
-    </view>
-    <!-- ③ 陪诊服务：白卡内 4 列两项宫格，浅橙衬底 + 暖橙线图标 -->
+    <!-- ② 陪诊服务：先一句话说清「陪诊是什么」，再列具体服务。
+         新用户往往不了解这个品类，介绍卡承担教育职责，
+         也是本区块的视觉锚点（浅橙衬底），下方宫格保持安静 -->
     <view class="section">
       <view class="section-head">
         <view class="section-bar"></view>
         <text class="section-title">陪诊服务</text>
       </view>
 
+      <view class="intro-card" bindtap="goToGuide">
+        <text class="intro-desc">陪诊师全程陪同就医：代办挂号缴费、取药取报告，帮你向医生讲清病情要点，让家人看病不再手忙脚乱。</text>
+        <view class="intro-steps">
+          <text class="intro-step">线上约定</text>
+          <text class="intro-step-arrow">→</text>
+          <text class="intro-step">院内陪同</text>
+          <text class="intro-step-arrow">→</text>
+          <text class="intro-step">诊后反馈</text>
+        </view>
+      </view>
+
       <view class="assist-card">
         <view class="assist-grid">
           <view class="assist-item" wx:for="{{ escortServices }}" wx:key="id" data-id="{{ item.id }}" bindtap="goToServiceDetail">
             <!-- 细线图标：图形由 index.wxss 内嵌 SVG 提供，类名后缀是服务 id。
-                 不加衬底方块，避免 8 个同色浅橙块平铺 -->
+                 不加衬底方块，避免同色浅橙块平铺 -->
             <view class="assist-icon {{ item.iconClass }}"></view>
             <text class="assist-name">{{ item.name }}</text>
           </view>
@@ -70,7 +76,7 @@
       </view>
     </view>
 
-    <!-- ④ 常用功能：待服务提醒 + 双列入口卡 -->
+    <!-- ③ 常用功能：待服务提醒 + 双列入口卡 -->
     <view class="section">
       <view class="section-head">
         <view class="section-bar"></view>
@@ -85,8 +91,8 @@
       </view>
 
       <view class="quick-list">
-        <view class="quick-item" wx:for="{{ quickEntries }}" wx:key="id" data-item="{{ item }}" bindtap="onQuickEntryTap">
-          <!-- 两个入口统一走暖橙 + 浅橙衬底，不做色相区分 -->
+        <view class="quick-item {{ item.full ? 'quick-item-full' : '' }}" wx:for="{{ quickEntries }}" wx:key="id" data-item="{{ item }}" bindtap="onQuickEntryTap">
+          <!-- 入口统一走暖橙 + 浅橙衬底，不做色相区分；带 full 标记的卡通栏排布 -->
           <view class="quick-icon">
             <t-icon name="{{ item.icon }}" size="34rpx" color="#9A3412" />
           </view>
@@ -98,7 +104,7 @@
       </view>
     </view>
 
-    <!-- ⑤ 页脚：B 端合作入口（商务合作 / 陪诊师入驻 / 陪诊师考证），
+    <!-- ④ 页脚：B 端合作入口（商务合作 / 陪诊师入驻 / 陪诊师考证），
          点击统一转服务电话，与「我的」页页脚同构 -->
     <view class="page-footer">
       <view class="footer-links">

pages/home/index.wxss

@@ -100,6 +100,8 @@ page {
 
 .hero-title {
   display: block;
+  /* 居中：与下方居中的信任条、通栏 CTA 共用一条视觉中轴，首屏呈海报式对称 */
+  text-align: center;
   /* 52rpx(26px) 仍在 WCAG"大字"门槛(18pt/24px)之上：
      深墨 #2B2521 压暖白纸面实测 13:1+，无论字重都稳过 AA */
   font-size: 52rpx;
@@ -120,16 +122,44 @@ page {
   margin-left: 10rpx;
 }
 
-.hero-sub {
-  display: block;
-  margin-top: 20rpx;
-  font-size: 24rpx;
-  color: var(--muted);
-  line-height: 1.6;
+/* 信任数据条：三项硬事实并列（认证 / 覆盖 / 响应），替代形容词副标题。
+   数字走暖橙深墨制造可信感，标签走 muted 保持安静 */
+.trust-row {
+  display: flex;
+  align-items: center;
+  margin-top: 28rpx;
+}
+
+.trust-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.trust-num {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: var(--brand-ink);
   letter-spacing: 1rpx;
 }
 
-/* 主行动按钮：通栏胶囊，参考图的主按钮语言 */
+.trust-label {
+  margin-top: 6rpx;
+  font-size: 24rpx;
+  color: var(--muted);
+  letter-spacing: 1rpx;
+}
+
+/* 竖分隔线：仅装饰，不承载信息 */
+.trust-sep {
+  width: 2rpx;
+  height: 44rpx;
+  background: var(--line);
+  flex-shrink: 0;
+}
+
+/* 主行动按钮：通栏胶囊，直达服务列表 */
 .hero-cta {
   display: flex;
   align-items: center;
@@ -154,68 +184,55 @@ page {
   margin-right: 6rpx;
 }
 
-/* ===== ② 客服与联系 ===== */
-.contact-row {
+/* ===== ② 陪诊服务：品类介绍卡 ===== */
+/* 介绍卡：整卡走浅橙衬底，是本区块的视觉锚点；宫格保持白卡安静语言。
+   点击进「陪诊指南」页，承担新用户教育 */
+.intro-card {
   display: flex;
-  gap: 20rpx;
-  margin-top: 40rpx;
-}
-
-.contact-card {
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 26rpx 22rpx;
+  flex-direction: column;
+  padding: 28rpx 26rpx;
+  margin-bottom: 20rpx;
   border-radius: 28rpx;
-  background: var(--white);
-  /* 发丝边 + 紧阴影：白卡压在暖白纸面上时，仅靠阴影分不出边界 */
-  border: 2rpx solid var(--line);
-  box-shadow: var(--shadow-card);
+  background: var(--brand-soft);
+  border: 2rpx solid var(--brand-line);
   transition: transform 0.15s ease;
 }
 
-.contact-card:active {
+.intro-card:active {
   transform: scale(0.98);
 }
 
-/* 浅橙衬底的圆角方块：与参考图「软衬底 + 彩色线图标」一致 */
-.contact-icon {
-  width: 68rpx;
-  height: 68rpx;
-  border-radius: 20rpx;
-  background: var(--brand-soft);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 16rpx;
-  flex-shrink: 0;
-}
-
-/* AI 品牌图标是位图（无图标字体可用），按「联系我们」的 32rpx 图标对齐 */
-.contact-icon-img {
-  width: 32rpx;
-  height: 32rpx;
-}
-
-.contact-info {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-}
-
-.contact-name {
-  font-size: 28rpx;
-  font-weight: 600;
+.intro-title {
+  font-size: 30rpx;
+  font-weight: 700;
   color: var(--ink);
 }
 
-.contact-en {
+/* 介绍正文：26rpx 行高 1.6，两行左右读完「陪诊是什么」 */
+.intro-desc {
+  margin-top: 10rpx;
+  font-size: 26rpx;
+  line-height: 1.6;
+  color: var(--ink-2);
+}
+
+/* 三步流程：线上约定 → 院内陪同 → 诊后反馈，一行读完服务闭环 */
+.intro-steps {
+  display: flex;
+  align-items: center;
+  margin-top: 20rpx;
+}
+
+.intro-step {
   font-size: 24rpx;
-  color: var(--muted);
-  margin-top: 4rpx;
-  letter-spacing: 1rpx;
+  font-weight: 600;
+  color: var(--brand-ink); /* 浅橙底 6.8:1，过 AA */
+}
+
+.intro-step-arrow {
+  margin: 0 14rpx;
+  font-size: 24rpx;
+  color: var(--faint); /* 仅装饰性流程箭头，不承载文字信息 */
 }
 
 /* ===== 通用区块 ===== */
@@ -263,6 +280,7 @@ page {
   flex-wrap: wrap;
 }
 
+/* 8 项服务：4 列 × 2 行正好排满 */
 .assist-item {
   width: 25%;
   display: flex;
@@ -278,7 +296,7 @@ page {
 
 /* 纤细线图标：24x24 网格、stroke-width 1.5、暖橙 #C2410C，base64 内嵌避免引入图标字体。
    56rpx(28px) 是过 WCAG 非文本 3:1 后兼顾真机清晰度的尺寸。
-   图标直接落在白卡上、不加衬底方块：8 个同色浅橙方块平铺会让整页变得均匀寡淡 */
+   图标直接落在白卡上、不加衬底方块：衬底层级已让给上方主推卡，小宫格保持安静 */
 .assist-icon {
   width: 56rpx;
   height: 56rpx;
@@ -328,8 +346,8 @@ page {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIyLjUiIHk9IjkiIHdpZHRoPSIxOSIgaGVpZ2h0PSI2IiByeD0iMyIvPjxwYXRoIGQ9Ik0xMiA5djYiLz48L3N2Zz4=");
 }
 
-/* 宫格项名统一走 28rpx 标题档（与 .contact-name / .quick-name 同级）。
-   5 字项名「出入院代办」= 140rpx，小于列宽 167rpx，不折行 */
+/* 宫格项名统一走 28rpx 标题档（与 .quick-name 同级）。
+   4 列布局列宽 ≈ 167rpx，5 字项名「出入院代办」= 140rpx，不折行 */
 .assist-name {
   font-size: 28rpx;
   font-weight: 600;
@@ -368,17 +386,21 @@ page {
   color: var(--status-ink);
 }
 
-/* 仅两个入口时，通栏列表右侧大面积留白；改为双列卡片，图标在上、文字在下 */
+/* 双列卡片 + 图标左、文字右的横排结构；
+   第三张通栏卡靠换行落到第二行 */
 .quick-list {
   display: flex;
+  flex-wrap: wrap;
   gap: 20rpx;
 }
 
+/* 图标左、文字右的横排结构 */
 .quick-item {
   flex: 1;
+  min-width: 0;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  flex-direction: row;
+  align-items: center;
   padding: 24rpx;
   border-radius: 28rpx;
   background: var(--white);
@@ -391,6 +413,15 @@ page {
   transform: scale(0.98);
 }
 
+/* 通栏卡（联系我们）：两列网格 2+1 排布，第三张占满第二行。
+   必须显式 border-box：全局只有 .container 设了它，否则 width:100%
+   会再叠加自身 padding(24rpx×2) + 描边(2rpx×2)，整卡溢出容器 */
+.quick-item-full {
+  width: 100%;
+  flex: none;
+  box-sizing: border-box;
+}
+
 .quick-icon {
   width: 68rpx;
   height: 68rpx;
@@ -399,12 +430,14 @@ page {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 16rpx;
+  margin-right: 16rpx;
+  flex-shrink: 0;
 }
 
 .quick-info {
   display: flex;
   flex-direction: column;
+  min-width: 0;
 }
 
 .quick-name {