feat: deliver V1.1 dual-client UI fidelity milestone

This commit is contained in:
2026-09-10 16:06:11 +08:00
parent 5b51d5b3f1
commit 45ca118453
82 changed files with 682 additions and 1167 deletions
+33 -202
View File
@@ -1,214 +1,45 @@
<!-- 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><text class="brand-name">善缘丹阳</text><text class="brand-slogan">真实相识 · 公益牵线</text></view>
<view class="brand-mark">公益服务</view>
<view class="bell-btn" bindtap="onMessages"><text>消息</text><text wx:if="{{unreadCount}}" class="badge">{{unreadCount}}</text></view>
</view>
<view wx:if="{{previewMode}}" class="preview-note">界面预览数据</view>
<!-- 用户状态条 -->
<view class="status-strip">
<view wx:if="{{isOnboarding}}" class="status-main"><text class="status-title">完善资料,开启安心相遇</text><text class="status-desc">{{onboardingMessage}}</text><view class="status-action" bindtap="onEmptyAction" data-event="{{onboardingActions[0].event}}">{{onboardingActions[0].text}}</view></view>
<view wx:elif="{{isPaused}}" class="status-main"><text class="status-title">已暂停新的对象推荐</text><view class="status-action" bindtap="onResume">恢复寻找</view></view>
<view wx:elif="{{isSuccessful}}" class="status-main"><text class="status-title">祝福你们正在认真了解彼此</text><text class="status-desc">愿真诚与尊重陪伴你们继续前行</text></view>
<view wx:else class="status-checks"><text wx:for="{{statusChecks}}" wx:key="label" class="status-check {{item.done ? 'done' : ''}}">{{item.done ? '✓' : '○'}} {{item.label}}</text></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"><swiper class="banner-swiper" indicator-dots autoplay circular interval="4500" indicator-active-color="#E96B6B"><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-art"><view class="heart-line">♡</view></view><view class="banner-copy"><text class="banner-title">{{item.title}}</text><text class="banner-subtitle">{{item.subtitle}}</text><view class="banner-btn">{{item.buttonText || '查看详情'}} <text>›</text></view></view></view></swiper-item></swiper></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-card"><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 tone-{{item.tone}}">{{item.icon}}</view><text class="entry-label">{{item.label}}</text></view></view></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 wx:if="{{loadError}}" class="section"><ui-error-state title="暂时无法加载首页" description="请检查网络后重试" bind:retry="onRetry"/></view>
<block wx:else>
<!-- 今日推荐 -->
<view class="section"><ui-section-header title="今日推荐" subtitle="根据双方条件,为你认真筛选" action="查看更多" bind:action="onSeeMore"/><ui-loading wx:if="{{loading}}" mode="skeleton" rows="2"/><view wx:elif="{{recommendations.length}}" wx:for="{{recommendations}}" wx:key="userId" class="rec-wrap"><ui-recommend-card recommendation="{{item}}" action-loading="{{actionLoadingUserId === item.userId}}" bind:view="onViewDetail" bind:like="onLike" bind:pass="onPass"/></view><ui-empty wx:else illustration="heart" title="暂时没有完全符合双方条件的人" description="可以调整择偶条件,或申请公益红娘协助推荐" actions="{{emptyActions}}" bind:action="onEmptyAction"/></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"><ui-section-header title="善缘公益服务" subtitle="需要时,我们在这里陪伴你"/><view wx:for="{{serviceRecommendations}}" wx:key="type" class="service-card" bindtap="onServiceTap" data-type="{{item.type}}"><view><text class="service-title">{{item.title}}</text><text class="service-desc">{{item.description}}</text></view><view class="text-link">{{item.ctaText}} ›</view></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"><ui-section-header title="近期公益活动" action="全部活动" bind:action="onSeeAllActivities"/><scroll-view scroll-x class="activity-scroll"><view wx:for="{{activities}}" wx:key="id" class="activity-card" bindtap="onActivityTap" data-id="{{item.id}}"><view class="activity-cover"><text class="activity-tag">{{item.typeLabel || '公益活动'}}</text><text class="activity-symbol">相遇</text></view><view class="activity-info"><text class="activity-title">{{item.title}}</text><text class="activity-meta">9月20日 14:00 · {{item.locationName}}</text></view></view></scroll-view></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"><ui-section-header title="善缘服务站" subtitle="就在身边的公益婚恋服务阵地"/><view class="station-card" bindtap="onStationTap"><view class="station-pin">站</view><view class="station-info"><text class="station-name">{{serviceLocation.name}}</text><text class="station-desc">{{serviceLocation.shortName}}</text><view><text wx:for="{{serviceLocation.services}}" wx:key="*this" class="mini-tag">{{item}}</text></view></view><text class="arrow">›</text></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"><ui-section-header title="婚恋课堂" subtitle="学会认识自己,也学会理解关系" action="更多内容" bind:action="onEntryTap" data-entry="{{quickEntries[4]}}"/><view class="article-list"><view wx:for="{{articles}}" wx:key="id" class="article-row" bindtap="onArticleTap" data-id="{{item.id}}"><view class="article-icon">读</view><view class="article-info"><text class="article-title">{{item.title}}</text><text class="article-meta">{{item.categoryName}} · {{item.readTime}}</text></view><text class="arrow">›</text></view></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="section safety-card" bindtap="onSafetyTap"><view class="shield">安</view><view class="safety-info"><text class="safety-title">善缘提醒</text><text class="safety-body">{{safetyNotice.text}}</text><text class="safety-link">{{safetyNotice.ctaText}} ›</text></view></view>
</block>
<view class="safe-area-bottom"></view>
</view>
</view>