Skip to content

Feat/home loading experience #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Cheems-sudo merged 2 commits into from
Sep 14, 2026
Merged

Feat/home loading experience #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec1ef2d
feat: improve home loading and initialization
Cheems-sudo Sep 14, 2026
5164491
feat: unify identity loading experience
Cheems-sudo Sep 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions miniprogram/components/class-box-loading/class-box-loading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Component({});
3 changes: 3 additions & 0 deletions miniprogram/components/class-box-loading/class-box-loading.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"component": true
}
24 changes: 24 additions & 0 deletions miniprogram/components/class-box-loading/class-box-loading.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<view class="class-box-loading" aria-hidden="true">
<view class="box-loader">
<view class="falling-card card-one">
<view class="card-accent"></view>
<view class="card-line line-long"></view>
<view class="card-line line-short"></view>
</view>
<view class="falling-card card-two">
<view class="card-accent"></view>
<view class="card-line line-long"></view>
<view class="card-line line-short"></view>
</view>
<view class="falling-card card-three">
<view class="card-accent"></view>
<view class="card-line line-long"></view>
<view class="card-line line-short"></view>
</view>
<view class="loader-box">
<view class="box-back"></view>
<view class="box-front"></view>
<view class="box-rim"></view>
</view>
</view>
</view>
154 changes: 154 additions & 0 deletions miniprogram/components/class-box-loading/class-box-loading.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
:host {
display: block;
width: 100%;
}

.class-box-loading {
min-height: 100vh;
background: #f5f7fb;
display: flex;
align-items: center;
justify-content: center;
}

.box-loader {
position: relative;
width: 210rpx;
height: 240rpx;
transform: translateY(-22rpx);
}

.falling-card {
position: absolute;
z-index: 1;
top: 8rpx;
left: 50%;
width: 102rpx;
height: 66rpx;
padding: 13rpx 14rpx;
border-radius: 10rpx;
box-sizing: border-box;
background: #ffffff;
border: 1rpx solid #dbe7f6;
box-shadow: 0 8rpx 18rpx rgba(30, 41, 59, 0.08);
opacity: 0;
transform: translate3d(-50%, -38rpx, 0) scale(0.94);
animation: card-drop 2.2s cubic-bezier(0.35, 0, 0.25, 1) infinite;
}

.card-two {
animation-delay: 0.42s;
}

.card-three {
animation-delay: 0.84s;
}

.card-accent {
width: 24rpx;
height: 7rpx;
border-radius: 999rpx;
background: #2563eb;
}

.card-two .card-accent {
background: #10b981;
}

.card-three .card-accent {
background: #8b5cf6;
}

.card-line {
height: 6rpx;
margin-top: 9rpx;
border-radius: 999rpx;
background: #dbe4ef;
}

.line-long {
width: 72rpx;
}

.line-short {
width: 48rpx;
margin-top: 7rpx;
}

.loader-box {
position: absolute;
z-index: 2;
left: 50%;
bottom: 8rpx;
width: 176rpx;
height: 104rpx;
transform: translate3d(-50%, 0, 0);
transform-origin: 50% 100%;
animation: box-settle 2.2s ease-in-out infinite;
}

.box-back,
.box-front,
.box-rim {
position: absolute;
left: 0;
width: 100%;
box-sizing: border-box;
}

.box-back {
top: 13rpx;
height: 38rpx;
border-radius: 14rpx 14rpx 5rpx 5rpx;
background: #dceaff;
border: 2rpx solid #8ab7f2;
}

.box-front {
z-index: 3;
bottom: 0;
height: 78rpx;
border-radius: 8rpx 8rpx 18rpx 18rpx;
background: #eaf2ff;
border: 2rpx solid #8ab7f2;
box-shadow: 0 12rpx 24rpx rgba(37, 99, 235, 0.12);
}

.box-rim {
z-index: 4;
top: 22rpx;
height: 15rpx;
border-radius: 999rpx;
background: #ffffff;
border: 2rpx solid #8ab7f2;
}

@keyframes card-drop {
0%, 8% {
opacity: 0;
transform: translate3d(-50%, -38rpx, 0) scale(0.94);
}
14% {
opacity: 1;
}
48% {
opacity: 1;
transform: translate3d(-50%, 80rpx, 0) scale(1);
}
62%, 100% {
opacity: 0;
transform: translate3d(-50%, 128rpx, 0) scale(0.9);
}
}

@keyframes box-settle {
0%, 46%, 56%, 65%, 75%, 84%, 94%, 100% {
transform: translate3d(-50%, 0, 0) scale(1);
}
50%, 69%, 88% {
transform: translate3d(-50%, 5rpx, 0) scale(1.025, 0.97);
}
53%, 72%, 91% {
transform: translate3d(-50%, -2rpx, 0) scale(0.99, 1.015);
}
}
5 changes: 4 additions & 1 deletion miniprogram/pages/admin-auth/admin-auth.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"navigationBarTitleText": "管理员认证"
"navigationBarTitleText": "管理员认证",
"usingComponents": {
"class-box-loading": "/components/class-box-loading/class-box-loading"
}
}
9 changes: 3 additions & 6 deletions miniprogram/pages/admin-auth/admin-auth.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
<!-- 页面结构：组织 admin-auth 页面的内容区域与交互控件。 -->
<view class="page">
<view class="auth-card" wx:if="{{authLoading}}">
<view class="page-title">管理员认证</view>
<view class="page-desc">身份检查中...</view>
</view>
<class-box-loading wx:if="{{authLoading}}" />

<view class="auth-card" wx:elif="{{!verified}}">
<view class="page" wx:else>
<view class="auth-card" wx:if="{{!verified}}">
<view class="page-title">请先完成班级身份验证</view>
<view class="page-desc">完成验证后，班委可通过一次性邀请码开通管理员权限。</view>
<button class="secondary-button" bindtap="goMemberVerify">去验证</button>
Expand Down
5 changes: 4 additions & 1 deletion miniprogram/pages/class-assistant/class-assistant.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
{
"navigationBarTitleText": "班级助手",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"usingComponents": {
"class-box-loading": "/components/class-box-loading/class-box-loading"
}
}
11 changes: 4 additions & 7 deletions miniprogram/pages/class-assistant/class-assistant.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<!-- 页面结构：组织 class-assistant 页面的内容区域与交互控件。 -->
<view class="page">
<class-box-loading wx:if="{{authLoading}}" />

<view class="page" wx:else>
<scroll-view
class="message-scroll"
style="padding-bottom: {{scrollBottomPadding}}rpx;"
Expand All @@ -8,12 +10,7 @@
scroll-into-view="{{scrollIntoView}}"
enhanced
>
<view class="state-card" wx:if="{{authLoading}}">
<view class="state-title">身份检查中...</view>
<view class="state-desc">正在确认班级成员身份</view>
</view>

<view class="state-card verify-card" wx:elif="{{!verified && !isGuest}}">
<view class="state-card verify-card" wx:if="{{!verified && !isGuest}}">
<view class="state-title">请先完成身份认证</view>
<view class="state-desc">认证后即可使用班级助手</view>
<button class="verify-button" bindtap="goMemberVerify" hover-class="button-pressed" hover-stay-time="80">去认证</button>
Expand Down
5 changes: 4 additions & 1 deletion miniprogram/pages/detail/detail.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"navigationBarTitleText": "详情"
"navigationBarTitleText": "详情",
"usingComponents": {
"class-box-loading": "/components/class-box-loading/class-box-loading"
}
}
8 changes: 3 additions & 5 deletions miniprogram/pages/detail/detail.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
<!-- 页面结构：组织 detail 页面的内容区域与交互控件。 -->
<view class="page">
<view class="content-card verify-card" wx:if="{{authLoading}}">
<view class="section-title">身份检查中...</view>
</view>
<class-box-loading wx:if="{{authLoading}}" />

<view class="content-card verify-card" wx:elif="{{!verified}}">
<view class="page" wx:else>
<view class="content-card verify-card" wx:if="{{!verified}}">
<view class="section-title">请先完成班级身份验证</view>
<view class="verify-desc">验证后即可查看事项详情</view>
<button class="verify-button" bindtap="goMemberVerify">去验证</button>
Expand Down
5 changes: 4 additions & 1 deletion miniprogram/pages/favorites/favorites.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"navigationBarTitleText": "我的收藏"
"navigationBarTitleText": "我的收藏",
"usingComponents": {
"class-box-loading": "/components/class-box-loading/class-box-loading"
}
}
10 changes: 4 additions & 6 deletions miniprogram/pages/favorites/favorites.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<!-- 页面结构：组织 favorites 页面的内容区域与交互控件。 -->
<view class="page">
<class-box-loading wx:if="{{authLoading}}" />

<view class="page" wx:else>
<view class="page-header">
<view class="page-title">我的收藏</view>
<button
Expand All @@ -11,11 +13,7 @@
</button>
</view>

<view class="state-card" wx:if="{{authLoading}}">
<view class="state-title">身份检查中...</view>
</view>

<view class="state-card" wx:elif="{{!verified}}">
<view class="state-card" wx:if="{{!verified}}">
<view class="state-title">请先完成班级身份验证</view>
<view class="state-desc">验证后即可查看已收藏的班级事项</view>
<button class="verify-button" bindtap="goMemberVerify">去验证</button>
Expand Down
5 changes: 4 additions & 1 deletion miniprogram/pages/feedback/feedback.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"navigationBarTitleText": "意见反馈"
"navigationBarTitleText": "意见反馈",
"usingComponents": {
"class-box-loading": "/components/class-box-loading/class-box-loading"
}
}
9 changes: 2 additions & 7 deletions miniprogram/pages/feedback/feedback.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
<!-- 页面结构：组织 feedback 页面的内容区域与交互控件。 -->
<view class="page">
<view class="state-card" wx:if="{{authLoading}}">
<view class="state-title">身份检查中...</view>
<view class="state-desc">正在确认班级成员身份</view>
</view>
<class-box-loading wx:if="{{authLoading}}" />

<block wx:else>
<view class="page" wx:else>
<view class="header">
<view class="title">意见反馈</view>
<view class="subtitle">欢迎提交你遇到的问题和建议</view>
Expand Down Expand Up @@ -38,5 +34,4 @@
>
{{submitting ? "提交中" : "提交反馈"}}
</button>
</block>
</view>
10 changes: 10 additions & 0 deletions miniprogram/pages/identity-select/identity-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,18 @@ Page({
this.pageAlive = true;
},
onShow() {
this.hideNativeHomeButton();
this.checkIdentity();
},
hideNativeHomeButton() {
if (typeof wx.hideHomeButton !== "function") {
return;
}

wx.hideHomeButton({
fail: () => {},
});
},
onUnload() {
this.pageAlive = false;
},
Expand Down
5 changes: 4 additions & 1 deletion miniprogram/pages/identity-select/identity-select.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"navigationBarTitleText": "选择使用方式"
"navigationBarTitleText": "选择使用方式",
"usingComponents": {
"class-box-loading": "/components/class-box-loading/class-box-loading"
}
}
11 changes: 4 additions & 7 deletions miniprogram/pages/identity-select/identity-select.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
<view class="page">
<class-box-loading wx:if="{{authLoading}}" />

<view class="page" wx:else>
<view class="page-head">
<view class="page-title">选择使用方式</view>
<view class="page-desc">请选择适合你的方式进入班级盒子</view>
</view>

<view class="state-card" wx:if="{{authLoading}}">
<view class="state-title">身份检查中...</view>
<view class="state-desc">正在确认你的使用方式</view>
</view>

<view class="option-list" wx:else>
<view class="option-list">
<view class="option-card">
<view class="option-title">班级成员</view>
<view class="option-desc">认证班级身份后，可使用班级通知、事项管理等完整功能。</view>
Expand Down
Loading
Loading