chore: establish V1.1 recovery baseline
This commit is contained in:
@@ -0,0 +1,190 @@
|
||||
/**
|
||||
* 我的缘分页 U22（重构：用 matchStore + ui-user-card + ui-nav-bar）
|
||||
*
|
||||
* 3 Tab：互相喜欢（Mutual）/ 我喜欢的 / 喜欢我的（脱敏）
|
||||
* 游标分页：下拉刷新 + onReachBottom 加载更多
|
||||
* like-back：喜欢我的人 → 表达喜欢 → 若 Mutual 自动跳聊天
|
||||
*
|
||||
* 不变量（AGENTS.md）：
|
||||
* - 第 3 条：Mutual Match 后才能聊天——Mutual Tab 点击进入会话；未 Mutual 不可发起会话。
|
||||
* - 第 6 条：单向意向不泄露——"喜欢我的"仅展示后端返回的脱敏字段（昵称/年龄/地区/是否已 Mutual），
|
||||
* Store 与页面均不做二次身份还原。
|
||||
* - 第 5 条：红娘不可替用户 Like——like-back 仅当前用户本人操作。
|
||||
* - 第 9 条：PostgreSQL 是 Source of Truth——列表状态以 matchStore 同步服务端返回为准。
|
||||
*/
|
||||
const { matchStore, appStore, likeUser } = require('../../stores');
|
||||
const { to, ROUTE } = require('../../constants');
|
||||
|
||||
const TAB_MUTUAL = 'mutual';
|
||||
const TAB_LIKED = 'liked';
|
||||
const TAB_LIKERS = 'likers';
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
Page({
|
||||
data: {
|
||||
activeTab: TAB_MUTUAL,
|
||||
|
||||
// 来自 matchStore 的列表（bindToPage 同步）
|
||||
mutualList: [],
|
||||
mutualHasMore: true,
|
||||
likedList: [],
|
||||
likedHasMore: true,
|
||||
likersList: [],
|
||||
likersHasMore: true,
|
||||
likersCount: 0,
|
||||
|
||||
// 页面局部状态
|
||||
loading: false,
|
||||
loadingMore: false,
|
||||
actionLoadingUserId: '',
|
||||
statusBarHeight: 20,
|
||||
navBarHeight: 44,
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
try {
|
||||
const info = (wx.getWindowInfo && wx.getWindowInfo()) || wx.getSystemInfoSync();
|
||||
this.setData({
|
||||
statusBarHeight: info.statusBarHeight || 20,
|
||||
navBarHeight: info.platform === 'android' ? 48 : 44,
|
||||
});
|
||||
} catch (e) { /* 使用默认值 */ }
|
||||
|
||||
// 绑定 matchStore 列表字段到页面
|
||||
this._unsub = matchStore.bindToPage(this, {
|
||||
mutualList: 'mutualList',
|
||||
mutualHasMore: 'mutualHasMore',
|
||||
likedList: 'likedList',
|
||||
likedHasMore: 'likedHasMore',
|
||||
likersList: 'likersList',
|
||||
likersHasMore: 'likersHasMore',
|
||||
likersCount: 'likersCount',
|
||||
});
|
||||
|
||||
this._fetchTab(TAB_MUTUAL, true);
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
if (this._unsub) this._unsub();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 返回页面时刷新当前 Tab（状态可能已变化）
|
||||
this._fetchTab(this.data.activeTab, true);
|
||||
},
|
||||
|
||||
// ============ Tab 切换 ============
|
||||
|
||||
onTabChange(e) {
|
||||
const tab = e.currentTarget.dataset.tab;
|
||||
if (!tab || tab === this.data.activeTab) return;
|
||||
this.setData({ activeTab: tab });
|
||||
this._fetchTab(tab, true);
|
||||
},
|
||||
|
||||
/** 按当前 Tab 拉取首页 */
|
||||
async _fetchTab(tab, first) {
|
||||
if (this.data.loading) return;
|
||||
this.setData({ loading: true });
|
||||
try {
|
||||
const params = { pageSize: PAGE_SIZE };
|
||||
if (tab === TAB_MUTUAL) {
|
||||
await matchStore.fetchMutualList(params);
|
||||
} else if (tab === TAB_LIKED) {
|
||||
await matchStore.fetchLikedList(params);
|
||||
} else if (tab === TAB_LIKERS) {
|
||||
await matchStore.fetchLikersList(params);
|
||||
}
|
||||
} catch (err) {
|
||||
appStore.toastError(err);
|
||||
} finally {
|
||||
this.setData({ loading: false });
|
||||
}
|
||||
},
|
||||
|
||||
// ============ 列表交互 ============
|
||||
|
||||
onPullDownRefresh() {
|
||||
this._fetchTab(this.data.activeTab, true).finally(() => wx.stopPullDownRefresh());
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.data.loadingMore) return;
|
||||
const tab = this.data.activeTab;
|
||||
const hasMore = tab === TAB_MUTUAL ? this.data.mutualHasMore
|
||||
: tab === TAB_LIKED ? this.data.likedHasMore
|
||||
: this.data.likersHasMore;
|
||||
if (!hasMore) return;
|
||||
this.setData({ loadingMore: true });
|
||||
(async () => {
|
||||
try {
|
||||
if (tab === TAB_MUTUAL) await matchStore.loadMoreMutualList();
|
||||
else if (tab === TAB_LIKED) await matchStore.loadMoreLikedList();
|
||||
else await matchStore.loadMoreLikersList();
|
||||
} catch (err) {
|
||||
appStore.toastError(err);
|
||||
} finally {
|
||||
this.setData({ loadingMore: false });
|
||||
}
|
||||
})();
|
||||
},
|
||||
|
||||
// ============ 卡片操作 ============
|
||||
|
||||
/**
|
||||
* 互相喜欢 / 我喜欢的 → 查看资料详情
|
||||
* 互相喜欢还可直接进入会话（已 Mutual，允许聊天）
|
||||
*/
|
||||
onViewDetail(e) {
|
||||
const userId = e.detail && e.detail.userId;
|
||||
if (!userId) return;
|
||||
wx.navigateTo({ url: to.detail(userId) });
|
||||
},
|
||||
|
||||
/** 互相喜欢 → 开始聊天（已 Mutual，符合第 3 条） */
|
||||
onStartChat(e) {
|
||||
const conversationId = e.currentTarget.dataset.conversationId;
|
||||
if (!conversationId) return;
|
||||
wx.navigateTo({ url: to.chat(conversationId) });
|
||||
},
|
||||
|
||||
/**
|
||||
* 喜欢我的人 → 喜欢 TA（like-back）
|
||||
* 若达成 Mutual，likeUser 会自动刷新会话列表，此处跳转到聊天
|
||||
*/
|
||||
async onLikeBack(e) {
|
||||
const userId = e.currentTarget.dataset.userId;
|
||||
if (!userId || this.data.actionLoadingUserId) return;
|
||||
this.setData({ actionLoadingUserId: userId });
|
||||
try {
|
||||
const result = await likeUser(userId);
|
||||
// 从"喜欢我的"列表移除（已做出判断）
|
||||
matchStore.setState({
|
||||
likersList: matchStore.state.likersList.filter((u) => u.userId !== userId),
|
||||
});
|
||||
if (result && result.mutualMatch) {
|
||||
appStore.toastSuccess('双向喜欢！可以开始聊天了');
|
||||
// 刷新互相喜欢列表
|
||||
try { await matchStore.fetchMutualList({ pageSize: PAGE_SIZE }); } catch (e2) { /* ignore */ }
|
||||
if (result.matchedConversationId) {
|
||||
wx.navigateTo({ url: to.chat(result.matchedConversationId) });
|
||||
}
|
||||
} else {
|
||||
appStore.toastSuccess('已表达喜欢');
|
||||
}
|
||||
} catch (err) {
|
||||
appStore.toastError(err);
|
||||
} finally {
|
||||
this.setData({ actionLoadingUserId: '' });
|
||||
}
|
||||
},
|
||||
|
||||
onBack() {
|
||||
wx.navigateBack();
|
||||
},
|
||||
|
||||
/** 空状态动作 */
|
||||
onEmptyAction() {
|
||||
wx.switchTab({ url: ROUTE.TAB.DISCOVER });
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "我的缘分",
|
||||
"enablePullDownRefresh": true,
|
||||
"backgroundColor": "#FFF8F7",
|
||||
"backgroundTextStyle": "dark",
|
||||
"usingComponents": {
|
||||
"ui-nav-bar": "/components/nav-bar/index",
|
||||
"ui-user-card": "/components/user-card/index",
|
||||
"ui-loading": "/components/loading/index",
|
||||
"ui-empty": "/components/empty/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
<!-- 我的缘分页 U22（重构：ui-nav-bar + ui-user-card + matchStore） -->
|
||||
<view class="page">
|
||||
<ui-nav-bar
|
||||
title="我的缘分"
|
||||
show-back="{{true}}"
|
||||
status-bar-height="{{statusBarHeight}}"
|
||||
nav-bar-height="{{navBarHeight}}"
|
||||
bind:back="onBack"
|
||||
/>
|
||||
|
||||
<!-- Tab 切换 -->
|
||||
<view class="tabs" style="top: {{statusBarHeight + navBarHeight}}px;">
|
||||
<view class="tab {{activeTab === 'mutual' ? 'active' : ''}}" data-tab="mutual" bindtap="onTabChange">
|
||||
互相喜欢
|
||||
<text class="tab-count" wx:if="{{mutualList.length > 0}}">{{mutualList.length}}</text>
|
||||
</view>
|
||||
<view class="tab {{activeTab === 'liked' ? 'active' : ''}}" data-tab="liked" bindtap="onTabChange">
|
||||
我喜欢的
|
||||
<text class="tab-count" wx:if="{{likedList.length > 0}}">{{likedList.length}}</text>
|
||||
</view>
|
||||
<view class="tab {{activeTab === 'likers' ? 'active' : ''}}" data-tab="likers" bindtap="onTabChange">
|
||||
喜欢我的
|
||||
<text class="tab-count" wx:if="{{likersCount > 0}}">{{likersCount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-wrap">
|
||||
<!-- 首次加载 -->
|
||||
<ui-loading wx:if="{{loading}}" mode="skeleton" rows="4" />
|
||||
|
||||
<block wx:elif="{{activeTab === 'mutual'}}">
|
||||
<block wx:if="{{mutualList.length > 0}}">
|
||||
<view class="list">
|
||||
<view class="item" wx:for="{{mutualList}}" wx:key="conversationId">
|
||||
<ui-user-card user="{{item}}" bind:tap="onViewDetail">
|
||||
<view slot="actions">
|
||||
<button class="btn-primary" catchtap="onStartChat" data-conversation-id="{{item.conversationId}}">开始聊天</button>
|
||||
</view>
|
||||
</ui-user-card>
|
||||
</view>
|
||||
</view>
|
||||
<ui-loading wx:if="{{loadingMore}}" mode="skeleton" rows="2" />
|
||||
</block>
|
||||
<ui-empty
|
||||
wx:else
|
||||
illustration="heart"
|
||||
title="还没有互相喜欢的人"
|
||||
description="去「找对象」遇见合适的人，互相喜欢就能聊天啦"
|
||||
actions="{{[{text:'去「找对象', event:'discover', variant:'primary'}]}}"
|
||||
bind:action="onEmptyAction"
|
||||
/>
|
||||
</block>
|
||||
|
||||
<block wx:elif="{{activeTab === 'liked'}}">
|
||||
<block wx:if="{{likedList.length > 0}}">
|
||||
<view class="list">
|
||||
<view class="item" wx:for="{{likedList}}" wx:key="userId">
|
||||
<ui-user-card user="{{item}}">
|
||||
<view slot="actions">
|
||||
<view class="status-waiting">已表达喜欢，等待回应</view>
|
||||
</view>
|
||||
</ui-user-card>
|
||||
</view>
|
||||
</view>
|
||||
<ui-loading wx:if="{{loadingMore}}" mode="skeleton" rows="2" />
|
||||
</block>
|
||||
<ui-empty
|
||||
wx:else
|
||||
illustration="heart"
|
||||
title="还没有喜欢过任何人"
|
||||
description="去「找对象」看看，遇到心仪的人就表达喜欢吧"
|
||||
actions="{{[{text:'去「找对象', event:'discover', variant:'primary'}]}}"
|
||||
bind:action="onEmptyAction"
|
||||
/>
|
||||
</block>
|
||||
|
||||
<block wx:elif="{{activeTab === 'likers'}}">
|
||||
<block wx:if="{{likersList.length > 0}}">
|
||||
<view class="list">
|
||||
<view class="item" wx:for="{{likersList}}" wx:key="userId">
|
||||
<ui-user-card user="{{item}}">
|
||||
<view slot="actions">
|
||||
<button
|
||||
class="btn-like-back {{actionLoadingUserId === item.userId ? 'disabled' : ''}}"
|
||||
catchtap="onLikeBack"
|
||||
data-user-id="{{item.userId}}"
|
||||
disabled="{{actionLoadingUserId === item.userId}}"
|
||||
>喜欢TA</button>
|
||||
</view>
|
||||
</ui-user-card>
|
||||
</view>
|
||||
</view>
|
||||
<ui-loading wx:if="{{loadingMore}}" mode="skeleton" rows="2" />
|
||||
</block>
|
||||
<ui-empty
|
||||
wx:else
|
||||
illustration="heart"
|
||||
title="还没有人喜欢你"
|
||||
description="完善资料、上传真实生活照，更容易被合适的人看到"
|
||||
actions="{{[{text:'去「找对象', event:'discover', variant:'primary'}]}}"
|
||||
bind:action="onEmptyAction"
|
||||
/>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,119 @@
|
||||
/* 我的缘分页 U22 — Design Tokens */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F7;
|
||||
}
|
||||
|
||||
/* Tab 切换栏（粘性吸附在自定义导航栏下方） */
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
position: sticky;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 28rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
position: relative;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #E96B6B;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 48rpx;
|
||||
height: 4rpx;
|
||||
background: #E96B6B;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.tab-count {
|
||||
display: inline-block;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-left: 8rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 列表容器 */
|
||||
.list-wrap {
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.btn-primary {
|
||||
flex-shrink: 0;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 32rpx;
|
||||
font-size: 24rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-like-back {
|
||||
flex-shrink: 0;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 32rpx;
|
||||
font-size: 24rpx;
|
||||
background: #FFF3F2;
|
||||
color: #E96B6B;
|
||||
border: 2rpx solid #E96B6B;
|
||||
}
|
||||
|
||||
.btn-like-back::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-like-back.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 等待回应状态 */
|
||||
.status-waiting {
|
||||
flex-shrink: 0;
|
||||
font-size: 22rpx;
|
||||
color: #E96B6B;
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FFF3F2;
|
||||
border-radius: 8rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
Reference in New Issue
Block a user