JoyD/Claw/client/wechat_app/pages/index/index.wxml

<!-- 首页 - 深色主题信息流布局 -->
<view class="home-page">

  <!-- 内容滚动区域 -->
  <scroll-view class="content-scroll" scroll-y="{{true}}">
    
    <!-- 时间分隔线 -->
    <view class="time-divider">
      <text class="time-text">{{currentTime}}</text>
    </view>

    <!-- 用户信息卡片 -->
    <view class="user-card">
      <!-- 卡片头部 -->
      <view class="user-card-header">
        <text class="user-card-title">账户信息</text>
        <text class="user-card-subtitle" wx:if="{{!hasUserInfo}}">点击按钮获取信息</text>
        <text class="user-card-subtitle status-ok" wx:if="{{hasUserInfo}}">已获取</text>
      </view>

      <!-- 已登录：展示所有可获取信息 -->
      <block wx:if="{{hasUserInfo}}">
        <!-- 头像 + 昵称区域 -->
        <view class="user-profile-row">
          <view class="avatar-wrap">
            <open-data type="userAvatarUrl" class="open-avatar"></open-data>
          </view>
          <view class="user-basic-info">
            <view class="info-row">
              <text class="info-label">昵称</text>
              <text class="info-value受限">暂时受限</text>
              <text class="info-status error">❌</text>
            </view>
            <view class="info-row">
              <text class="info-label">头像</text>
              <text class="info-value受限">暂时受限</text>
              <text class="info-status error">❌</text>
            </view>
            <view class="info-row">
              <text class="info-label">OpenID</text>
              <text class="info-value" selectable="true">{{openId || '加载中...'}}</text>
              <text class="info-status ok">✅</text>
            </view>
          </view>
        </view>

        <!-- 信息列表 -->
        <view class="info-list">
          <view class="info-row">
            <text class="info-label">UnionID</text>
            <text class="info-value受限">{{unionId}}</text>
            <text class="info-status error">❌</text>
          </view>
          <view class="info-row">
            <text class="info-label">手机号</text>
            <text class="info-value" wx:if="{{phoneNumber}}" selectable="true">{{phoneNumber}}</text>
            <text class="info-value hint" wx:if="{{!phoneNumber}}">点击下方按钮获取</text>
            <text class="info-status ok">✅</text>
          </view>
          <view class="info-row">
            <text class="info-label">性别</text>
            <text class="info-value受限">暂时受限</text>
            <text class="info-status error">❌</text>
          </view>
          <view class="info-row">
            <text class="info-label">地区</text>
            <text class="info-value受限">暂时受限</text>
            <text class="info-status error">❌</text>
          </view>
          <view class="info-row">
            <text class="info-label">设备</text>
            <text class="info-value" wx:if="{{systemInfo}}">{{systemInfo.brand}} {{systemInfo.model}}</text>
            <text class="info-value hint" wx:if="{{!systemInfo}}">加载中...</text>
            <text class="info-status ok">✅</text>
          </view>
          <view class="info-row">
            <text class="info-label">系统</text>
            <text class="info-value" wx:if="{{systemInfo}}">{{systemInfo.system}} {{systemInfo.version}}</text>
            <text class="info-value hint" wx:if="{{!systemInfo}}">加载中...</text>
            <text class="info-status ok">✅</text>
          </view>
          <view class="info-row">
            <text class="info-label">微信版本</text>
            <text class="info-value" wx:if="{{wxVersion}}">{{wxVersion}}</text>
            <text class="info-value hint" wx:if="{{!wxVersion}}">加载中...</text>
            <text class="info-status ok">✅</text>
          </view>
          <view class="info-row">
            <text class="info-label">小程序版本</text>
            <text class="info-value" wx:if="{{accountInfo}}">{{accountInfo.miniProgram.version}}</text>
            <text class="info-value hint" wx:if="{{!accountInfo}}">加载中...</text>
            <text class="info-status ok">✅</text>
          </view>
          <view class="info-row">
            <text class="info-label">网络</text>
            <text class="info-value" wx:if="{{networkType}}">{{networkType}}</text>
            <text class="info-value hint" wx:if="{{!networkType}}">加载中...</text>
            <text class="info-status ok">✅</text>
          </view>
          <view class="info-row">
            <text class="info-label">位置</text>
            <text class="info-value受限" wx:if="{{!locationInfo}}">授权后获取</text>
            <text class="info-value" wx:if="{{locationInfo}}">{{locationInfo.latitude?.toFixed(4)}}, {{locationInfo.longitude?.toFixed(4)}}</text>
            <text class="info-status error">⚠️</text>
          </view>
          <view class="info-row">
            <text class="info-label">剪贴板</text>
            <text class="info-value" wx:if="{{clipboardData}}">{{clipboardData}}</text>
            <text class="info-value hint" wx:if="{{!clipboardData}}">未授权</text>
            <text class="info-status ok">✅</text>
          </view>
        </view>

        <!-- 手机号获取按钮 -->
        <view class="phone-btn-wrap" wx:if="{{!phoneNumber}}">
          <button 
            class="phone-btn"
            open-type="getPhoneNumber"
            bindgetphonenumber="onGetPhoneNumber"
          >
            📱 获取手机号
          </button>
        </view>
        <view class="phone-btn-wrap" wx:if="{{phoneNumber}}">
          <view class="phone-btn-done">✅ 手机号已绑定：{{phoneNumber}}</view>
        </view>
      </block>

      <!-- 未登录 -->
      <block wx:if="{{!hasUserInfo}}">
        <view class="not-logged-in">
          <view class="open-data-info">
            <open-data type="userAvatarUrl" class="open-avatar-large"></open-data>
          </view>
          <text class="not-logged-hint">微信昵称暂时受限，请先登录</text>
          <view class="info-list">
            <view class="info-row">
              <text class="info-label">OpenID</text>
              <text class="info-value受限">登录后获取</text>
              <text class="info-status error">❌</text>
            </view>
            <view class="info-row">
              <text class="info-label">手机号</text>
              <text class="info-value受限">登录后获取</text>
              <text class="info-status error">❌</text>
            </view>
            <view class="info-row">
              <text class="info-label">设备</text>
              <text class="info-value受限">登录后获取</text>
              <text class="info-status error">❌</text>
            </view>
            <view class="info-row">
              <text class="info-label">系统</text>
              <text class="info-value受限">登录后获取</text>
              <text class="info-status error">❌</text>
            </view>
            <view class="info-row">
              <text class="info-label">网络</text>
              <text class="info-value受限">登录后获取</text>
              <text class="info-status error">❌</text>
            </view>
          </view>
          <button class="login-btn" bindtap="onLogin">微信登录，获取 OpenID</button>
        </view>
      </block>
    </view>

    <!-- 轮播Banner -->
    <swiper 
      class="banner-swiper" 
      indicator-dots="{{false}}" 
      autoplay="{{true}}" 
      interval="{{5000}}" 
      duration="{{500}}"
      circular="{{true}}"
    >
      <swiper-item wx:for="{{banners}}" wx:key="id">
        <view class="banner-item" style="background-image: url('{{item.image}}');">
          <view class="banner-content">
            <view class="banner-tag-row">
              <text class="banner-tag">{{item.tag}}</text>
            </view>
            <text class="banner-title">{{item.title}}</text>
            <text class="banner-desc" wx:if="{{item.desc}}">{{item.desc}}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <!-- 信息流卡片列表 -->
    <view class="news-list">
      
      <!-- 卡片项1 -->
      <view class="news-card" bindtap="onNewsTap" data-id="1">
        <view class="card-main">
          <view class="card-category">【省医药事】</view>
          <text class="card-title">硝酸甘油vs速效救心丸：心脏急救药，用对才救命！</text>
        </view>
        <view class="card-tag tag-blue">
          <text class="tag-text">省医药事</text>
        </view>
      </view>

      <!-- 卡片项2 -->
      <view class="news-card" bindtap="onNewsTap" data-id="2">
        <view class="card-main">
          <view class="card-category">【科普小站】</view>
          <text class="card-title">守护"星星的孩子"笑容：孤独症患儿口腔保健全攻略</text>
        </view>
        <view class="card-tag tag-cyan">
          <text class="tag-text">科普小站</text>
        </view>
      </view>

    </view>

    <!-- 第二个时间分隔线 -->
    <view class="time-divider">
      <text class="time-text">{{yesterdayTime}}</text>
    </view>

    <!-- 第二个轮播Banner（喜报类型） -->
    <swiper 
      class="banner-swiper banner-red" 
      indicator-dots="{{false}}" 
      autoplay="{{true}}" 
      interval="{{6000}}"
      duration="{{500}}"
      circular="{{true}}"
    >
      <swiper-item wx:for="{{redBanners}}" wx:key="id">
        <view class="banner-item banner-red-item" style="background-image: url('{{item.image}}');">
          <view class="banner-content">
            <view class="banner-decoration">喜报</view>
            <text class="banner-title banner-white-title">{{item.title}}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <!-- 更多信息流卡片 -->
    <view class="news-list">

      <!-- 卡片项3 -->
      <view class="news-card" bindtap="onNewsTap" data-id="3">
        <view class="card-main">
          <view class="card-category">【线上义诊】</view>
          <text class="card-title">连续三天！全国肿瘤防治宣传周在线义诊来啦~！</text>
        </view>
        <view class="card-tag tag-red">
          <text class="tag-text">义诊信息</text>
        </view>
      </view>

      <!-- 卡片项4 -->
      <view class="news-card" bindtap="goToChat">
        <view class="card-main">
          <view class="card-category">【智能服务】</view>
          <text class="card-title">AI智能助手在线，随时随地解答健康疑问</text>
        </view>
        <view class="card-tag tag-purple">
          <text class="tag-text">AI助手</text>
        </view>
      </view>

      <!-- 卡片项5 -->
      <view class="news-card" bindtap="goToTask">
        <view class="card-main">
          <view class="card-category">【任务中心】</view>
          <text class="card-title">查看您的待办事项和预约提醒</text>
        </view>
        <view class="card-tag tag-green">
          <text class="tag-text">任务中心</text>
        </view>
      </view>

    </view>

    <!-- 底部占位 -->
    <view class="bottom-placeholder"></view>
  </scroll-view>

</view>