feat: redesign public relationship services

This commit is contained in:
Codex
2026-09-14 08:51:26 +08:00
parent a6037ded59
commit 1aea6f7791
13 changed files with 178 additions and 199 deletions
+2 -1
View File
@@ -7,6 +7,7 @@
"ui-matchmaker-card": "/components/matchmaker-card/index",
"ui-button": "/components/button/index",
"ui-loading": "/components/loading/index",
"ui-empty": "/components/empty/index"
"ui-empty": "/components/empty/index",
"ui-service-hero": "/components/service-hero/index"
}
}
+20 -70
View File
@@ -1,89 +1,39 @@
<!-- 公益红娘服务页 U33 -->
<view class="mm-page reference-page">
<ui-nav-bar
title="公益红娘"
status-bar-height="{{statusBarHeight}}"
nav-bar-height="{{navBarHeight}}"
bind:back="onBack"
/>
<view class="mm-page app-page reference-page">
<ui-nav-bar title="公益红娘" status-bar-height="{{statusBarHeight}}" nav-bar-height="{{navBarHeight}}" bind:back="onBack" />
<ui-service-hero eyebrow="专业牵线 · 公益助力" title="公益红娘" subtitle="认真倾听你的期待,帮助你认识更合适的人" image-src="/assets/service/matchmaker-hero.jpg" tone="rose" />
<!-- 首次加载 -->
<view wx:if="{{loading && !firstLoaded}}" class="mm-loading">
<ui-loading mode="skeleton" rows="2" />
<view class="mm-promises">
<view class="mm-promise"><image src="/assets/icons/home/matchmaker.png" mode="aspectFit" /><text class="mm-promise__title">公益免费</text><text>不收取服务费用</text></view>
<view class="mm-promise"><image src="/assets/icons/home/find-object.png" mode="aspectFit" /><text class="mm-promise__title">真实匹配</text><text>基于审核资料推荐</text></view>
<view class="mm-promise"><image src="/assets/icons/home/anti-fraud.png" mode="aspectFit" /><text class="mm-promise__title">隐私保护</text><text>由你本人决定意向</text></view>
</view>
<view wx:if="{{loading && !firstLoaded}}" class="mm-loading"><ui-loading mode="skeleton" rows="2" /></view>
<view wx:else class="mm-body">
<!-- 进行中的服务 -->
<view wx:if="{{activeService}}" class="mm-section">
<ui-section-header title="我的服务" subtitle="当前进行中" />
<ui-matchmaker-card
service="{{activeService}}"
show-recommendations="{{showRecommendations}}"
bind:view="onViewService"
bind:recommendations="onViewRecommendations"
/>
</view>
<!-- 无活跃服务:空状态 + 申请入口 -->
<view wx:else class="mm-empty">
<ui-empty
title="还没有红娘服务"
description="公益红娘可以基于你的择偶条件,为你推荐合适的对象"
illustration="default"
actions="{{emptyActions}}"
bind:action="onEmptyAction"
/>
</view>
<!-- 申请红娘帮助 CTA(无活跃服务时主入口;有活跃服务时仍可重新申请) -->
<view class="mm-section">
<ui-button
variant="{{activeService ? 'secondary' : 'primary'}}"
size="lg"
block
bind:tap="onApplyService"
>{{activeService ? '提交新的红娘需求' : '申请红娘帮助'}}</ui-button>
<ui-section-header title="申请状态" subtitle="红娘不会代替你表达喜欢" />
<ui-matchmaker-card wx:if="{{activeService}}" service="{{activeService}}" show-recommendations="{{showRecommendations}}" bind:view="onViewService" bind:recommendations="onViewRecommendations" />
<view wx:else class="mm-no-service"><image src="/assets/icons/home/matchmaker.png" mode="aspectFit" /><view><text class="mm-no-service__title">暂未申请红娘服务</text><text class="mm-no-service__desc">提交需求后,工作人员会根据你的择偶条件提供公益协助</text></view></view>
</view>
<!-- 红娘能力说明(AGENTS 第 1 条:公益免费,无付费/会员差异化) -->
<view class="mm-section">
<view class="mm-cap card-base">
<ui-section-header title="红娘能帮您什么?" />
<view class="mm-cap__list">
<view wx:for="{{capabilities}}" wx:key="*this" class="mm-cap__item">
<view class="mm-cap__dot"></view>
<text class="mm-cap__text">{{item}}</text>
</view>
</view>
<view class="mm-cap__note">
<text>公益服务,全程免费。</text>
</view>
<ui-section-header title="红娘可以如何帮助" subtitle="陪伴沟通,尊重你的每次决定" />
<view class="mm-capability-grid">
<view wx:for="{{capabilities}}" wx:key="*this" class="mm-capability"><image src="/assets/icons/home/counseling.png" mode="aspectFit" /><text>{{item}}</text></view>
</view>
</view>
<!-- 历史服务列表 -->
<view wx:if="{{historyServices.length}}" class="mm-section">
<ui-section-header title="历史服务" subtitle="共 {{historyServices.length}} 条" />
<view class="mm-history">
<view
wx:for="{{historyServices}}"
wx:key="serviceId"
class="mm-history__item card-base"
data-service-id="{{item.serviceId}}"
bindtap="onHistoryTap"
>
<view class="mm-history__row">
<text class="mm-history__title">公益红娘服务</text>
<text class="mm-history__status mm-history__status--{{item.status}}">{{item.statusText || item.status}}</text>
</view>
<view wx:if="{{item.matchmakerName}}" class="mm-history__meta">
红娘:{{item.matchmakerName}}
</view>
<view wx:if="{{item.lastFollowUpAtText || item.lastFollowUpAt}}" class="mm-history__meta">
最近跟进:{{item.lastFollowUpAtText || item.lastFollowUpAt}}
</view>
<view wx:for="{{historyServices}}" wx:key="serviceId" class="mm-history__item" data-service-id="{{item.serviceId}}" bindtap="onHistoryTap">
<view><text class="mm-history__title">公益红娘服务</text><text wx:if="{{item.matchmakerName}}" class="mm-history__meta">红娘:{{item.matchmakerName}}</text></view>
<text class="mm-history__status">{{item.statusText || item.status}}</text>
<image src="/assets/icons/ui/chevron-right.png" mode="aspectFit" />
</view>
</view>
</view>
</view>
<view class="mm-fixed-action"><view class="mm-apply" bindtap="onApplyService">{{activeService ? '提交新的红娘需求' : '申请红娘服务'}}</view></view>
</view>
+1 -113
View File
@@ -1,113 +1 @@
/**
* 公益红娘服务页 U33
*/
.mm-page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: var(--spacing-section);
}
/* ============ 加载 ============ */
.mm-loading {
padding: var(--spacing-3) var(--spacing-page-x);
}
.mm-body {
padding-top: var(--spacing-2);
}
.mm-section {
padding: var(--spacing-2) var(--spacing-page-x);
}
/* ============ 空状态 ============ */
.mm-empty {
padding-top: 80rpx;
}
/* ============ 红娘能力说明 ============ */
.mm-cap {
margin-top: var(--spacing-2);
}
.mm-cap__list {
margin-top: var(--spacing-3);
}
.mm-cap__item {
display: flex;
align-items: flex-start;
gap: var(--spacing-2);
padding: var(--spacing-1) 0;
}
.mm-cap__dot {
width: 12rpx;
height: 12rpx;
margin-top: 14rpx;
border-radius: 50%;
background: var(--color-primary);
flex-shrink: 0;
}
.mm-cap__text {
flex: 1;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.mm-cap__note {
margin-top: var(--spacing-3);
padding-top: var(--spacing-3);
border-top: var(--border-width) solid var(--color-divider);
font-size: var(--font-size-xs);
color: var(--color-success);
}
/* ============ 历史服务 ============ */
.mm-history {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
margin-top: var(--spacing-2);
}
.mm-history__item {
padding: var(--spacing-3);
}
.mm-history__row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-1);
}
.mm-history__title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.mm-history__status {
font-size: var(--font-size-xs);
padding: var(--spacing-1) var(--spacing-2);
border-radius: var(--radius-sm);
background: var(--color-bg-disabled);
color: var(--color-text-tertiary);
}
.mm-history__status--completed,
.mm-history__status--cancelled {
background: var(--color-bg-disabled);
color: var(--color-text-disabled);
}
.mm-history__meta {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
line-height: var(--line-height-normal);
margin-top: var(--spacing-1);
}
.mm-page{min-height:100vh;padding-bottom:calc(136rpx + env(safe-area-inset-bottom));background:#F4F5FA}.mm-promises{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);margin:-22rpx 24rpx 0;padding:22rpx 8rpx;border-radius:28rpx;background:#fff;box-shadow:var(--mini-shadow)}.mm-promise{display:flex;flex-direction:column;align-items:center;padding:0 8rpx;text-align:center;color:#8A8FA4;font-size:17rpx;line-height:1.35}.mm-promise image{width:46rpx;height:46rpx;margin-bottom:8rpx}.mm-promise__title{margin-bottom:4rpx;color:#303654;font-size:21rpx;font-weight:650}.mm-loading{padding:30rpx 24rpx}.mm-body{padding-top:8rpx}.mm-section{padding:8rpx 24rpx}.mm-no-service{display:flex;align-items:center;gap:18rpx;margin-top:10rpx;padding:24rpx;border-radius:26rpx;background:#fff;box-shadow:0 8rpx 28rpx rgba(35,35,95,.06)}.mm-no-service image{width:68rpx;height:68rpx}.mm-no-service>view{display:flex;flex:1;flex-direction:column}.mm-no-service__title{color:#283056;font-size:25rpx;font-weight:650}.mm-no-service__desc{margin-top:7rpx;color:#858A9E;font-size:20rpx;line-height:1.5}.mm-capability-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14rpx;margin-top:10rpx}.mm-capability{display:flex;align-items:center;gap:12rpx;min-height:88rpx;padding:16rpx;border-radius:22rpx;background:#fff;color:#555D79;font-size:20rpx;line-height:1.4;box-shadow:0 8rpx 24rpx rgba(35,35,95,.05)}.mm-capability image{width:36rpx;height:36rpx;flex:none}.mm-history{overflow:hidden;margin-top:10rpx;border-radius:24rpx;background:#fff}.mm-history__item{display:flex;align-items:center;min-height:92rpx;padding:0 20rpx;border-bottom:1rpx solid #EFF0F5}.mm-history__item:last-child{border-bottom:0}.mm-history__item>view{display:flex;flex:1;flex-direction:column}.mm-history__title{color:#303654;font-size:23rpx;font-weight:600}.mm-history__meta{margin-top:5rpx;color:#8A8FA4;font-size:18rpx}.mm-history__status{margin-right:8rpx;color:#8A6F91;font-size:19rpx}.mm-history__item>image{width:24rpx;height:24rpx}.mm-fixed-action{position:fixed;z-index:100;right:0;bottom:0;left:0;padding:18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));border-top:1rpx solid #EFF0F5;background:rgba(255,255,255,.96)}.mm-apply{display:flex;align-items:center;justify-content:center;height:88rpx;border-radius:44rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:28rpx;font-weight:650;box-shadow:0 10rpx 24rpx rgba(255,92,130,.22)}