215 lines
7.9 KiB
Plaintext
215 lines
7.9 KiB
Plaintext
<!-- U18 首页 - V1.1 新版结构 -->
|
||
<view class="page">
|
||
|
||
<!-- ========== 品牌区 ========== -->
|
||
<view class="brand-bar">
|
||
<view class="brand-info">
|
||
<text class="brand-name">善缘丹阳</text>
|
||
<text class="brand-slogan">丹阳公益婚恋服务平台</text>
|
||
</view>
|
||
<view class="brand-actions">
|
||
<view class="bell-btn" bindtap="onMessages">
|
||
<text class="bell-icon">🔔</text>
|
||
<block wx:if="{{unreadCount > 0}}">
|
||
<text class="badge">{{unreadCount > 9 ? '9+' : unreadCount}}</text>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ========== 用户状态条 ========== -->
|
||
<view class="status-strip" wx:if="{{userState}}">
|
||
<!-- 未完成准入 -->
|
||
<block wx:if="{{isOnboarding}}">
|
||
<view class="status-prompt">
|
||
<text class="prompt-text">{{onboardingMessage}}</text>
|
||
<view class="prompt-actions" wx:if="{{onboardingActions.length > 0}}">
|
||
<view
|
||
wx:for="{{onboardingActions}}"
|
||
wx:key="event"
|
||
class="prompt-btn {{item.variant}}"
|
||
bindtap="onEmptyAction"
|
||
data-event="{{item.event}}"
|
||
>{{item.text}}</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<!-- 已验证 -->
|
||
<block wx:elif="{{isVerified}}">
|
||
<view class="status-checks">
|
||
<text class="status-check {{item.done ? 'done' : 'pending'}}"
|
||
wx:for="{{statusChecks}}" wx:key="label">
|
||
{{item.done ? '✓' : '○'}} {{item.label}}
|
||
</text>
|
||
</view>
|
||
</block>
|
||
<!-- 已暂停 -->
|
||
<block wx:elif="{{isPaused}}">
|
||
<view class="paused-hint">
|
||
<text>你已暂停新的对象推荐</text>
|
||
<view class="resume-btn" bindtap="onResume">恢复寻找</view>
|
||
</view>
|
||
</block>
|
||
<!-- 已成功牵手 -->
|
||
<block wx:elif="{{isSuccessful}}">
|
||
<view class="successful-hint">
|
||
<text>祝福你们正在认真了解彼此</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- ========== Banner 轮播 ========== -->
|
||
<view class="banner-section" wx:if="{{banners.length > 0}}">
|
||
<swiper
|
||
class="banner-swiper"
|
||
indicator-dots
|
||
autoplay
|
||
circular
|
||
interval="4500"
|
||
indicator-active-color="#E96B6B"
|
||
bindchange="onBannerChange"
|
||
>
|
||
<swiper-item wx:for="{{banners}}" wx:key="id">
|
||
<view class="banner-card" bindtap="onBannerTap" data-item="{{item}}">
|
||
<image wx:if="{{item.imageFileId}}"
|
||
src="{{item.imageFileId}}"
|
||
mode="aspectFill"
|
||
class="banner-img" />
|
||
<view class="banner-overlay">
|
||
<text class="banner-title">{{item.title}}</text>
|
||
<text class="banner-subtitle" wx:if="{{item.subtitle}}">{{item.subtitle}}</text>
|
||
<view class="banner-btn" wx:if="{{item.buttonText}}">{{item.buttonText}}</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- ========== 8个核心入口 ========== -->
|
||
<view class="entries-section">
|
||
<view class="entries-grid">
|
||
<view
|
||
wx:for="{{quickEntries}}"
|
||
wx:key="code"
|
||
class="entry-item {{!item.enabled ? 'disabled' : ''}}"
|
||
bindtap="onEntryTap"
|
||
data-entry="{{item}}"
|
||
>
|
||
<view class="entry-icon-bg {{item.iconClass}}">
|
||
<text class="entry-icon">{{item.icon}}</text>
|
||
</view>
|
||
<text class="entry-label">{{item.label}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ========== 今日推荐 ========== -->
|
||
<view class="section" wx:if="{{recommendations.length > 0 || recState === 'loading'}}">
|
||
<ui-section-header title="今日推荐"
|
||
subtitle="根据双方条件，为你筛选更合适的人"
|
||
more="{{true}}"
|
||
bind:more="onSeeMore" />
|
||
<block wx:if="{{recState === 'loading' && recommendations.length === 0}}">
|
||
<view class="skeleton-card" wx:for="{{3}}" wx:key="index">
|
||
<view class="skeleton-avatar"></view>
|
||
<view class="skeleton-info">
|
||
<view class="skeleton-line w60"></view>
|
||
<view class="skeleton-line w40"></view>
|
||
<view class="skeleton-line w80"></view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block wx:elif="{{recommendations.length > 0}}">
|
||
<view wx:for="{{recommendations}}" wx:key="userId" class="rec-card">
|
||
<ui-recommend-card
|
||
recommendation="{{item}}"
|
||
action-loading="{{actionLoadingUserId === item.userId}}"
|
||
bind:view="onViewDetail"
|
||
bind:like="onLike"
|
||
bind:pass="onPass"
|
||
/>
|
||
</view>
|
||
</block>
|
||
<view wx:if="{{recState === 'finished' && recommendations.length > 0}}" class="end-tip">
|
||
已展示今日全部推荐 · 明天再来看看
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ========== 无推荐空状态 ========== -->
|
||
<view class="section" wx:if="{{!isOnboarding && recommendations.length === 0 && recState !== 'loading'}}">
|
||
<ui-empty
|
||
illustration="heart"
|
||
title="暂时没有找到完全符合双方条件的人"
|
||
description="你可以调整择偶条件，或申请公益红娘帮你推荐"
|
||
actions="{{emptyActions}}"
|
||
bind:action="onEmptyAction"
|
||
/>
|
||
</view>
|
||
|
||
<!-- ========== 善缘公益服务 ========== -->
|
||
<view class="section service-reco-section" wx:if="{{serviceRecommendations.length > 0}}">
|
||
<ui-section-header title="善缘公益服务" />
|
||
<view wx:for="{{serviceRecommendations}}" wx:key="type"
|
||
class="service-card" bindtap="onServiceTap" data-type="{{item.type}}">
|
||
<view class="service-card-inner">
|
||
<text class="service-title">{{item.title}}</text>
|
||
<text class="service-desc">{{item.description}}</text>
|
||
<view class="service-cta">{{item.ctaText}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ========== 近期公益活动 ========== -->
|
||
<view class="section activity-section" wx:if="{{activities.length > 0}}">
|
||
<ui-section-header title="近期公益活动" more="{{true}}"
|
||
bind:more="onSeeAllActivities" />
|
||
<scroll-view scroll-x class="activity-scroll">
|
||
<view wx:for="{{activities}}" wx:key="id"
|
||
class="activity-h-card" bindtap="onActivityTap" data-id="{{item.id}}">
|
||
<image wx:if="{{item.coverFileId}}" src="{{item.coverFileId}}"
|
||
mode="aspectFill" class="activity-cover" />
|
||
<view class="activity-info">
|
||
<text class="activity-title">{{item.title}}</text>
|
||
<text class="activity-meta" wx:if="{{item.startAt}}">{{formatDate(item.startAt)}}</text>
|
||
<text class="activity-meta" wx:if="{{item.locationName}}">{{item.locationName}}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- ========== 善缘服务站 ========== -->
|
||
<view class="section" wx:if="{{serviceLocation}}">
|
||
<view class="station-card" bindtap="onStationTap">
|
||
<view class="station-card-inner">
|
||
<view class="station-icon-area">
|
||
<text class="station-icon">📍</text>
|
||
</view>
|
||
<view class="station-info">
|
||
<text class="station-name">{{serviceLocation.name}}</text>
|
||
<text class="station-short">{{serviceLocation.shortName}}</text>
|
||
<view class="station-services">
|
||
<text wx:for="{{serviceLocation.services}}" wx:key="*this"
|
||
class="station-tag">{{item}}</text>
|
||
</view>
|
||
</view>
|
||
<text class="station-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ========== 安全提醒 ========== -->
|
||
<view class="safety-notice">
|
||
<view class="safety-notice-inner">
|
||
<text class="safety-icon">🛡</text>
|
||
<view class="safety-text-area">
|
||
<text class="safety-title">善缘提醒</text>
|
||
<text class="safety-body">{{safetyNotice.text}}</text>
|
||
</view>
|
||
<text class="safety-cta" bindtap="onSafetyTap">{{safetyNotice.ctaText}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部安全区 -->
|
||
<view class="safe-area-bottom"></view>
|
||
</view>
|