107 lines
5.5 KiB
Plaintext
107 lines
5.5 KiB
Plaintext
<view class="container">
|
||
<!-- 顶部身份行：头像 + 昵称左对齐浮在纸面上，与下方三个区块共用同一条
|
||
左基线；无卡片，与下方三张功能卡形成"无框 / 有框"的区分
|
||
（按硬约束 3，区分优先改结构而非加颜色）。
|
||
上距 176rpx 是微信胶囊/状态栏安全距（navigationStyle: custom），
|
||
下限约 160rpx，不是设计留白；省下来的高度只来自头像与纵向内距。
|
||
已登录：整行可点，右侧 chevron 即点击暗示——它同时承接「个人信息」，
|
||
所以「我的服务」里不再重复放个人信息项（同一意图只留一个入口）；
|
||
未登录时 onTapProfile 直接 return，不会弹出要求登录的资料窗。
|
||
未登录：昵称位改显「未登录」，不用"用户"冒充真昵称；
|
||
右侧放本页唯一的实心暖橙胶囊 -->
|
||
<view
|
||
class="header-card"
|
||
hover-class="{{userInfo.isLoggedIn ? 'header-card-hover' : 'none'}}"
|
||
bindtap="onTapProfile"
|
||
>
|
||
<!-- 默认头像：浅橙衬底 + 居中暖陶土 user 线标，走项目既有的「图标衬底」档。
|
||
t-icon 的 color 读不到 CSS 变量，只能硬编码，
|
||
取值须与令牌同步（DESIGN.md §2.2 允许的三个值之一 #9B4508）；
|
||
有真头像时才换成位图 -->
|
||
<view class="avatar avatar-default" wx:if="{{!userInfo.avatar}}">
|
||
<t-icon name="user" size="72rpx" color="#9B4508" />
|
||
</view>
|
||
<image class="avatar" wx:else src="{{userInfo.avatar}}" mode="aspectFill"></image>
|
||
<!-- 文字块为上下两行（昵称 / 账号），与微信「我」页同一结构：
|
||
主行深墨加粗、贴近头像上沿，副行 muted 小字、贴近头像下沿；
|
||
未登录时只剩一行，加 header-info-single 改回居中 -->
|
||
<view class="header-info {{userInfo.isLoggedIn ? '' : 'header-info-single'}}">
|
||
<text class="user-name">{{userInfo.isLoggedIn ? userInfo.name : '未登录'}}</text>
|
||
<text class="user-account" wx:if="{{userInfo.isLoggedIn}}">{{userInfo.account}}</text>
|
||
</view>
|
||
<t-icon
|
||
wx:if="{{userInfo.isLoggedIn}}"
|
||
class="header-arrow"
|
||
name="chevron-right"
|
||
size="36rpx"
|
||
/>
|
||
<button
|
||
wx:else
|
||
class="login-btn"
|
||
open-type="getPhoneNumber"
|
||
bindgetphonenumber="handleLogin"
|
||
>
|
||
登录
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 菜单按用途分三组，组之间靠"通栏白块 + 纸面留白 + 上下发丝线"分界，
|
||
不再另设区块抬头：卡片改通栏后，边界本身已经承担了分组功能，
|
||
再加「我的服务 / 帮助与支持 / 其他」这类泛称标题只是重复页面自己的名字，
|
||
还要占掉约 276rpx 首屏。groupName 仍保留，作用转为列表 key。
|
||
requiresLogin 的组在未登录时整组隐藏（而不是只放行「其他」组） -->
|
||
<view
|
||
class="section"
|
||
wx:for="{{menuGroups}}"
|
||
wx:key="groupName"
|
||
wx:if="{{!item.requiresLogin || userInfo.isLoggedIn}}"
|
||
>
|
||
<!-- 通栏白块：白面 + 上下 2rpx 发丝线 + 紧阴影（无圆角） -->
|
||
<view class="menu-list">
|
||
<view
|
||
class="menu-item"
|
||
wx:for="{{item.items}}"
|
||
wx:for-item="menuItem"
|
||
wx:key="name"
|
||
hover-class="menu-item-hover"
|
||
bindtap="{{menuItem.bindtap}}"
|
||
>
|
||
<t-icon name="{{menuItem.icon}}" class="menu-icon" size="40rpx" />
|
||
<text class="menu-text">{{menuItem.name}}</text>
|
||
<t-icon name="chevron-right" class="menu-arrow" size="36rpx" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 退出登录：它是一个"动作"，不是导航入口。按硬约束「需区分时先改结构，
|
||
不要加颜色」，它不进上面三组菜单——那里每行都是"图标 + 名称 + chevron
|
||
= 去另一个页面"，混进去会被读成又一个导航项，且与「关于我们」同形、
|
||
同热区，是最容易点错的位置。
|
||
状态色不得用于按钮（DESIGN.md §三），所以退出不走红/橙，
|
||
区分只靠两件事：独立一块 + 居中一行、无图标无 chevron。
|
||
未登录时整块隐藏（没登录就无所谓"退出"） -->
|
||
<view class="logout-block" wx:if="{{userInfo.isLoggedIn}}" bindtap="onLogout" hover-class="logout-block-hover">
|
||
<text class="logout-text">退出登录</text>
|
||
</view>
|
||
|
||
<view class="footer-section">
|
||
<!-- B 端合作入口：与首页页脚取同一组三条。
|
||
原先本页是「企业/机构合作 · 陪诊师入驻 · 商务合作」，
|
||
其中前两条同义（都转同一个服务电话），
|
||
违反「同一意图只保留一个入口」，故整体对齐首页那组 -->
|
||
<view class="footer-links">
|
||
<text class="footer-link" bindtap="onFooterTap">商务合作</text>
|
||
<view class="footer-sep"></view>
|
||
<text class="footer-link" bindtap="onFooterTap">陪诊师入驻</text>
|
||
<view class="footer-sep"></view>
|
||
<text class="footer-link" bindtap="onFooterTap">陪诊师考证</text>
|
||
</view>
|
||
<!-- 版本与版权合并为一行：两行元信息体量都很小，分行只制造空白；
|
||
中间复用 .footer-sep 细竖线，与上方链接行同一分隔语言（不用中点字符） -->
|
||
<view class="footer-meta">
|
||
<text class="copyright">© 2026 北京奕华盛科技 版权所有</text>
|
||
<view class="footer-sep"></view>
|
||
<text class="version">版本号：V 1.1.3</text>
|
||
</view>
|
||
</view>
|
||
</view> |