feat: login rest
This commit is contained in:
Blizzard
@@ -0,0 +1,79 @@
|
||||
import request from '../../../../utils/request';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
levels: [],
|
||||
currentSunlight: 0,
|
||||
currentLevel: 0
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
let sunlight;
|
||||
if (options.sunlight !== undefined) {
|
||||
sunlight = parseInt(options.sunlight, 10);
|
||||
if (!isNaN(sunlight)) {
|
||||
this.setData({ currentSunlight: sunlight });
|
||||
} else {
|
||||
sunlight = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
this.fetchData(sunlight);
|
||||
},
|
||||
|
||||
async fetchData(passedSunlight) {
|
||||
wx.showLoading({ title: '加载中...' });
|
||||
try {
|
||||
// Fetch levels
|
||||
const levelRes = await request.get('/config/level/list');
|
||||
console.log('Level Detail - API Response:', levelRes);
|
||||
|
||||
let list = [];
|
||||
if (levelRes) {
|
||||
if (Array.isArray(levelRes)) {
|
||||
list = levelRes;
|
||||
} else if (Array.isArray(levelRes.list)) {
|
||||
list = levelRes.list;
|
||||
} else if (levelRes.data && Array.isArray(levelRes.data.list)) {
|
||||
list = levelRes.data.list;
|
||||
} else if (levelRes.data && Array.isArray(levelRes.data)) {
|
||||
list = levelRes.data;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Level Detail - Parsed List:', list);
|
||||
list.sort((a, b) => a.minSunlight - b.minSunlight);
|
||||
|
||||
// Fetch profile if sunlight not passed
|
||||
let currentSunlight = passedSunlight;
|
||||
if (currentSunlight === undefined) {
|
||||
const profileRes = await request.get('/profile/detail');
|
||||
console.log('Level Detail - Profile:', profileRes);
|
||||
currentSunlight = profileRes.totalSunlight || 0;
|
||||
this.setData({ currentSunlight });
|
||||
}
|
||||
|
||||
// Calculate current level
|
||||
let currentLevel = 0;
|
||||
// Iterate finding the highest level where minSunlight <= currentSunlight
|
||||
for (let i = list.length - 1; i >= 0; i--) {
|
||||
if (currentSunlight >= list[i].minSunlight) {
|
||||
currentLevel = list[i].level;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Level Detail - Calculated Level:', currentLevel);
|
||||
|
||||
this.setData({
|
||||
levels: list,
|
||||
currentLevel
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Fetch level detail failed', e);
|
||||
wx.showToast({ title: '数据加载失败', icon: 'none' });
|
||||
} finally {
|
||||
wx.hideLoading();
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "等级说明",
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
<view class="level-detail-page">
|
||||
<view class="header-card">
|
||||
<view class="header-title">累计阳光值</view>
|
||||
<view class="header-value">{{currentSunlight}}</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="timeline-scroll">
|
||||
<view class="timeline">
|
||||
<view wx:for="{{levels}}" wx:key="level" class="timeline-item {{item.level <= currentLevel ? 'active' : ''}}">
|
||||
<view class="timeline-left">
|
||||
<view class="dot-line-top"></view>
|
||||
<view class="status-dot">
|
||||
<t-icon wx:if="{{item.level <= currentLevel}}" name="check" size="24rpx" color="#fff" />
|
||||
</view>
|
||||
<view class="dot-line-bottom"></view>
|
||||
</view>
|
||||
<view class="timeline-content">
|
||||
<view class="level-card {{item.level === currentLevel ? 'current' : ''}}">
|
||||
<view class="card-header">
|
||||
<text class="card-lv">Lv.{{item.level}}</text>
|
||||
<text class="card-title">{{item.title}}</text>
|
||||
<view class="flex-spacer"></view>
|
||||
<text class="card-sun">{{item.minSunlight}} 阳光</text>
|
||||
</view>
|
||||
<view class="card-perks" wx:if="{{item.perks}}">{{item.perks}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 60rpx;"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@@ -0,0 +1,179 @@
|
||||
page {
|
||||
background: #F4F6F0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.level-detail-page {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header-card {
|
||||
background: linear-gradient(135deg, #2c3e50, #4ca1af);
|
||||
padding: 60rpx 40rpx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 0 0 40rpx 40rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(44, 62, 80, 0.2);
|
||||
margin-bottom: 40rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.header-value {
|
||||
font-size: 64rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.timeline-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: 140rpx;
|
||||
}
|
||||
|
||||
.timeline-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.dot-line-top, .dot-line-bottom {
|
||||
width: 4rpx;
|
||||
background: #E0E0E0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.timeline-item:first-child .dot-line-top {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.timeline-item:last-child .dot-line-bottom {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: #E0E0E0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 8rpx 0;
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.timeline-item.active .status-dot {
|
||||
background: #4CAF50;
|
||||
box-shadow: 0 0 0 6rpx rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
/* Logic for lines:
|
||||
The top line of THIS item should be green if THIS item is active.
|
||||
Wait, if item 2 is active, item 1 is also active.
|
||||
Line connecting 1 and 2 is bottom of 1 and top of 2.
|
||||
If 2 is active, top of 2 is green.
|
||||
If 1 is active, bottom of 1 is green?
|
||||
Easier: make lines background #E0E0E0.
|
||||
Use a pseudo element or simply rely on active class.
|
||||
*/
|
||||
|
||||
.timeline-item.active .dot-line-top {
|
||||
background: #4CAF50;
|
||||
}
|
||||
|
||||
/* If next item is active, make this item's bottom line green */
|
||||
/* CSS cannot select based on next sibling easily without :has */
|
||||
/* So just color top line of active item green. Bottom line stays gray? No. */
|
||||
/* Just color all lines of active items green, EXCEPT the line connecting active to inactive. */
|
||||
/* For simplicity, let's keep lines gray or improve logic. */
|
||||
/* If I color .timeline-item.active .dot-line-bottom green, then if next is NOT active, it looks weird. */
|
||||
/* Correct way: .timeline-item.active .dot-line-top is Green. */
|
||||
|
||||
.timeline-content {
|
||||
flex: 1;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.level-card {
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
border: 2rpx solid transparent;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.level-card.current {
|
||||
border-color: #4CAF50;
|
||||
background: #F1F8E9;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.card-lv {
|
||||
background: #eceff1;
|
||||
color: #546e7a;
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 700;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.timeline-item.active .card-lv {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.flex-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-sun {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-perks {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
padding-top: 16rpx;
|
||||
border-top: 2rpx dashed #eee;
|
||||
}
|
||||
|
||||
.level-card.current .card-perks {
|
||||
border-top-color: rgba(76, 175, 80, 0.2);
|
||||
color: #388E3C;
|
||||
}
|
||||
Reference in New Issue
Block a user