284 lines
11 KiB
Plaintext
284 lines
11 KiB
Plaintext
<!-- 首页 - 深色主题信息流布局 -->
|
||
<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>
|