feat: redesign activity and profile tabs
This commit is contained in:
Codex
@@ -18,6 +18,13 @@ Page({
|
||||
loadingMore: false,
|
||||
hasMore: true,
|
||||
firstLoaded: false,
|
||||
activeCategory: 'all',
|
||||
categories: [
|
||||
{ code: 'all', label: '全部' },
|
||||
{ code: 'matchmaking', label: '公益联谊' },
|
||||
{ code: 'classroom', label: '婚恋课堂' },
|
||||
{ code: 'anti_fraud', label: '反诈宣传' },
|
||||
],
|
||||
/** @type {{title:string, description:string, illustration:string, actions:Array}} */
|
||||
emptyConfig: {
|
||||
title: '暂无进行中的活动',
|
||||
@@ -56,6 +63,7 @@ Page({
|
||||
this.setData({ loading: true });
|
||||
try {
|
||||
await activityStore.fetchActivities();
|
||||
this.applyActivityFilter();
|
||||
this.setData({
|
||||
loading: false,
|
||||
firstLoaded: true,
|
||||
@@ -73,6 +81,7 @@ Page({
|
||||
this.setData({ loadingMore: true });
|
||||
try {
|
||||
await activityStore.loadMoreActivities();
|
||||
this.applyActivityFilter();
|
||||
this.setData({
|
||||
loadingMore: false,
|
||||
hasMore: activityStore.state.activitiesHasMore,
|
||||
@@ -93,6 +102,21 @@ Page({
|
||||
this.loadMore();
|
||||
},
|
||||
|
||||
onCategoryTap(e) {
|
||||
this.setData({ activeCategory: e.currentTarget.dataset.code });
|
||||
this.applyActivityFilter();
|
||||
},
|
||||
|
||||
applyActivityFilter() {
|
||||
const source = activityStore.state.activities || [];
|
||||
const { activeCategory } = this.data;
|
||||
this.setData({
|
||||
activities: activeCategory === 'all'
|
||||
? source
|
||||
: source.filter((item) => (item.activityType || item.category) === activeCategory),
|
||||
});
|
||||
},
|
||||
|
||||
/** 点击活动卡片 → 跳转详情 */
|
||||
onActivityTap(e) {
|
||||
const activityId = e.detail.activityId;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "公益活动",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": true,
|
||||
"usingComponents": {
|
||||
"ui-section-header": "/components/section-header/index",
|
||||
|
||||
@@ -1,43 +1,35 @@
|
||||
<!-- 公益活动列表页 U31 -->
|
||||
<view class="act-page reference-page">
|
||||
<!-- 顶部区：标题 + 我的活动入口 -->
|
||||
<view class="act-page__topbar">
|
||||
<ui-section-header
|
||||
title="公益活动"
|
||||
subtitle="丹阳本地公益组织主办"
|
||||
action="我的活动"
|
||||
bind:action="onMyActivities"
|
||||
/>
|
||||
<!-- 公益活动列表页：仅展示与报名，不在列表创建 Match 或聊天 -->
|
||||
<view class="act-page app-page reference-page">
|
||||
<view class="activity-hero">
|
||||
<view class="activity-nav">
|
||||
<text class="activity-title">公益活动</text>
|
||||
<view class="activity-calendar" bindtap="onMyActivities">
|
||||
<image src="/assets/icons/home/activity.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="activity-categories">
|
||||
<view class="activity-category-row">
|
||||
<view wx:for="{{categories}}" wx:key="code" class="activity-category {{activeCategory === item.code ? 'active' : ''}}" data-code="{{item.code}}" bindtap="onCategoryTap">{{item.label}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="activity-heading">
|
||||
<view><text class="heading-title">丹阳公益活动</text><text class="heading-subtitle">丰富活动，连接更多可能</text></view>
|
||||
<text class="my-activity-link" bindtap="onMyActivities">我的活动</text>
|
||||
</view>
|
||||
|
||||
<!-- 首次加载 -->
|
||||
<view wx:if="{{loading && !firstLoaded}}" class="act-loading">
|
||||
<ui-loading mode="skeleton" rows="3" />
|
||||
</view>
|
||||
|
||||
<!-- 列表 -->
|
||||
<view wx:elif="{{activities.length}}" class="act-list">
|
||||
<ui-activity-card
|
||||
wx:for="{{activities}}"
|
||||
wx:key="activityId"
|
||||
activity="{{item}}"
|
||||
bind:tap="onActivityTap"
|
||||
/>
|
||||
<!-- 加载更多 -->
|
||||
<view wx:if="{{loadingMore}}" class="act-list__more">
|
||||
<ui-loading mode="spinner" inline text="加载更多活动…" />
|
||||
</view>
|
||||
<view wx:elif="{{!hasMore}}" class="act-list__end">已到底部</view>
|
||||
<ui-activity-card wx:for="{{activities}}" wx:key="activityId" activity="{{item}}" bind:tap="onActivityTap" />
|
||||
<view wx:if="{{loadingMore}}" class="act-list__more"><ui-loading mode="spinner" inline text="加载更多活动" /></view>
|
||||
<view wx:elif="{{!hasMore}}" class="act-list__end">更多公益活动正在筹备</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view wx:else class="act-empty">
|
||||
<ui-empty
|
||||
title="{{emptyConfig.title}}"
|
||||
description="{{emptyConfig.description}}"
|
||||
illustration="{{emptyConfig.illustration}}"
|
||||
actions="{{emptyConfig.actions}}"
|
||||
bind:action="onEmptyAction"
|
||||
/>
|
||||
<ui-empty title="{{emptyConfig.title}}" description="{{emptyConfig.description}}" illustration="{{emptyConfig.illustration}}" actions="{{emptyConfig.actions}}" bind:action="onEmptyAction" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,44 +1 @@
|
||||
/**
|
||||
* 公益活动列表页 U31
|
||||
*/
|
||||
|
||||
.act-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: var(--spacing-section);
|
||||
}
|
||||
|
||||
.act-page__topbar {
|
||||
padding: var(--spacing-3) var(--spacing-page-x) var(--spacing-1);
|
||||
}
|
||||
|
||||
/* ============ 加载骨架 ============ */
|
||||
.act-loading {
|
||||
padding: var(--spacing-3) var(--spacing-page-x);
|
||||
}
|
||||
|
||||
/* ============ 列表 ============ */
|
||||
.act-list {
|
||||
padding: var(--spacing-2) var(--spacing-page-x) 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.act-list__more {
|
||||
padding: var(--spacing-3) 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.act-list__end {
|
||||
padding: var(--spacing-3) 0;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-placeholder);
|
||||
}
|
||||
|
||||
/* ============ 空状态 ============ */
|
||||
.act-empty {
|
||||
padding-top: 160rpx;
|
||||
}
|
||||
.act-page{min-height:100vh;padding-bottom:40rpx;background:#F4F5FA}.activity-hero{padding:env(safe-area-inset-top) 24rpx 26rpx;border-radius:0 0 36rpx 36rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.activity-nav{position:relative;display:flex;align-items:center;justify-content:center;height:88rpx}.activity-title{color:#fff;font-size:31rpx;font-weight:700}.activity-calendar{position:absolute;right:0;display:flex;align-items:center;justify-content:center;width:62rpx;height:62rpx;border:1rpx solid rgba(255,255,255,.18);border-radius:31rpx;background:rgba(255,255,255,.1)}.activity-calendar image{width:34rpx;height:34rpx;filter:brightness(0) invert(1)}.activity-categories{white-space:nowrap}.activity-category-row{display:inline-flex;gap:12rpx}.activity-category{padding:11rpx 22rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:20rpx}.activity-category.active{background:#fff;color:var(--mini-accent-pink);font-weight:650}.activity-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:32rpx 28rpx 16rpx}.activity-heading>view{display:flex;flex-direction:column}.heading-title{color:#252A49;font-size:30rpx;font-weight:700}.heading-subtitle{margin-top:5rpx;color:#8A8FA4;font-size:20rpx}.my-activity-link{color:var(--mini-accent-pink);font-size:21rpx}.act-loading{padding:12rpx 24rpx}.act-list{display:flex;flex-direction:column;gap:20rpx;padding:8rpx 24rpx 0}.act-list__more{display:flex;justify-content:center;padding:24rpx 0}.act-list__end{text-align:center;padding:24rpx 0;color:#9A9EB0;font-size:20rpx}.act-empty{padding-top:70rpx}
|
||||
|
||||
Reference in New Issue
Block a user