feat: login rest
This commit is contained in:
@@ -0,0 +1,105 @@
|
||||
|
||||
import request from '../../../utils/request';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
userLevel: 0,
|
||||
userLevelTag: '',
|
||||
currentExp: 0,
|
||||
maxExp: 1000,
|
||||
maxExp: 1000,
|
||||
nextLevelExp: 1000,
|
||||
showLevelsPopup: false,
|
||||
allLevels: [],
|
||||
|
||||
badges: [
|
||||
{ id: 1, name: '初级播种者', desc: '成功种植第一棵植物', iconName: 'flower', color: '#4CAF50', unlocked: true },
|
||||
{ id: 2, name: '勤劳园丁', desc: '总养护次数达到10次', iconName: 'tools', color: '#2196F3', unlocked: true },
|
||||
{ id: 3, name: '植物专家', desc: '成功识别50种植物', iconName: 'scan', color: '#9C27B0', unlocked: false, progress: '12/50' },
|
||||
{ id: 4, name: '全勤奖', desc: '连续30天打卡', iconName: 'calendar', color: '#FF9800', unlocked: false, progress: '5/30' },
|
||||
{ id: 5, name: '分享大师', desc: '发布10条动态', iconName: 'share', color: '#E91E63', unlocked: false, progress: '3/10' },
|
||||
{ id: 6, name: '收藏家', desc: '收藏20个植物百科', iconName: 'star', color: '#FFC107', unlocked: false, progress: '8/20' }
|
||||
]
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.fetchData();
|
||||
},
|
||||
|
||||
async fetchData() {
|
||||
wx.showLoading({ title: '加载中...' });
|
||||
try {
|
||||
const [levelRes, profileRes] = await Promise.all([
|
||||
request.get('/config/level/list'),
|
||||
request.get('/profile/detail')
|
||||
]);
|
||||
this.processData(levelRes, profileRes);
|
||||
} catch (e) {
|
||||
console.error('Fetch badges data failed', e);
|
||||
wx.showToast({ title: '加载失败', icon: 'none' });
|
||||
} finally {
|
||||
wx.hideLoading();
|
||||
}
|
||||
},
|
||||
|
||||
processData(levelsData, profile) {
|
||||
const levelList = levelsData && levelsData.list ? levelsData.list : [];
|
||||
levelList.sort((a, b) => a.minSunlight - b.minSunlight); // Ensure sorted by threshold
|
||||
|
||||
const totalSunlight = profile.totalSunlight || 0;
|
||||
|
||||
// Find current level: highest level where minSunlight <= totalSunlight
|
||||
let currentLevelConfig = null;
|
||||
for (let i = levelList.length - 1; i >= 0; i--) {
|
||||
if (totalSunlight >= levelList[i].minSunlight) {
|
||||
currentLevelConfig = levelList[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Check if no level matched (e.g. 0 sunlight but level 1 starts at 0? Logic handles it if sorted)
|
||||
if (!currentLevelConfig && levelList.length > 0) {
|
||||
// Fallback to absolute lowest or specific logic
|
||||
// Assuming level 1 starts at 0, it should be caught.
|
||||
currentLevelConfig = levelList[0];
|
||||
}
|
||||
|
||||
const currentLevelVal = currentLevelConfig ? currentLevelConfig.level : 0;
|
||||
|
||||
// Find next level
|
||||
const nextLevelConfig = levelList.find(l => l.minSunlight > totalSunlight);
|
||||
|
||||
let maxExp = 0;
|
||||
let nextPerk = '';
|
||||
|
||||
if (nextLevelConfig) {
|
||||
maxExp = nextLevelConfig.minSunlight;
|
||||
nextPerk = nextLevelConfig.perks;
|
||||
} else {
|
||||
// Max level
|
||||
maxExp = totalSunlight > 0 ? totalSunlight : 100;
|
||||
nextPerk = '已达到最高等级';
|
||||
}
|
||||
|
||||
// Sanity
|
||||
if (maxExp < totalSunlight) maxExp = totalSunlight;
|
||||
|
||||
const tag = currentLevelConfig ? `Lv.${currentLevelVal} ${currentLevelConfig.title}` : 'Lv.0 园艺新手';
|
||||
|
||||
this.setData({
|
||||
userLevel: currentLevelVal,
|
||||
userLevelTag: tag,
|
||||
currentExp: totalSunlight,
|
||||
maxExp: maxExp,
|
||||
nextLevelExp: Math.max(0, maxExp - totalSunlight),
|
||||
nextPerk: nextPerk,
|
||||
allLevels: levelList // Save for popup
|
||||
});
|
||||
},
|
||||
|
||||
showLevelList() {
|
||||
wx.navigateTo({
|
||||
url: `/pages/profile/badges/level-detail/index?sunlight=${this.data.currentExp}`
|
||||
});
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "成就徽章",
|
||||
"navigationBarBackgroundColor": "#F4F6F0",
|
||||
"navigationBarTextStyle": "black",
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<view class="badges-page">
|
||||
<scroll-view scroll-y class="badges-scroll" enhanced show-scrollbar="{{false}}">
|
||||
<!-- Level Card -->
|
||||
<view class="level-card-large" bindtap="showLevelList">
|
||||
<view class="level-card-bg"></view>
|
||||
<view class="level-header">
|
||||
<view class="level-info-large">
|
||||
<text class="level-label">当前等级</text>
|
||||
<text class="level-value">{{userLevelTag}}</text>
|
||||
</view>
|
||||
<t-icon name="trophy" size="80rpx" color="#FFD700" />
|
||||
</view>
|
||||
<view class="level-progress-section">
|
||||
<view class="progress-text">
|
||||
<text>阳光值</text>
|
||||
<text>{{currentExp}} / {{maxExp}}</text>
|
||||
</view>
|
||||
<view class="level-progress-bar-bg">
|
||||
<view class="level-progress-bar-fill" style="width: {{currentExp * 100 / maxExp}}%;"></view>
|
||||
</view>
|
||||
<text class="next-level-tip">距离下一级还需要 {{nextLevelExp}} 阳光</text>
|
||||
<text class="next-level-perk" wx:if="{{nextPerk}}">下一级奖励: {{nextPerk}}</text>
|
||||
</view>
|
||||
<view class="click-hint">点击查看等级详情 ></view>
|
||||
</view>
|
||||
|
||||
<view class="section-title-badges">所有徽章 ({{badges.length}})</view>
|
||||
|
||||
<view class="badges-grid">
|
||||
<view wx:for="{{badges}}" wx:key="id" class="badge-item {{item.unlocked ? 'unlocked' : 'locked'}}">
|
||||
<view class="badge-icon-circle" style="background: {{item.unlocked ? item.color + '20' : '#F5F5F5'}}">
|
||||
<t-icon wx:if="{{item.unlocked}}" name="{{item.iconName}}" size="48rpx" color="{{item.color}}" />
|
||||
<t-icon wx:else name="lock-on" size="40rpx" color="#BDBDBD" />
|
||||
</view>
|
||||
<text class="badge-name">{{item.name}}</text>
|
||||
<text class="badge-desc">{{item.desc}}</text>
|
||||
<text wx:if="{{item.progress}}" class="badge-progress">{{item.progress}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 60rpx;"></view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
</view>
|
||||
@@ -0,0 +1,273 @@
|
||||
page {
|
||||
background: #F4F6F0;
|
||||
}
|
||||
.badges-page {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.badges-scroll {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Level Card */
|
||||
.level-card-large {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
|
||||
border-radius: 40rpx;
|
||||
padding: 40rpx;
|
||||
color: white;
|
||||
margin-bottom: 48rpx;
|
||||
box-shadow: 0 20rpx 40rpx rgba(44, 62, 80, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.level-card-bg {
|
||||
position: absolute;
|
||||
top: -100rpx;
|
||||
right: -100rpx;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.level-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 40rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.level-info-large {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.level-label {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 2rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.level-value {
|
||||
font-size: 48rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.level-progress-section {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 600;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.level-progress-bar-bg {
|
||||
height: 16rpx;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border: 2rpx solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.level-progress-bar-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #FFD700, #FDB931);
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 0 12rpx rgba(255, 215, 0, 0.4);
|
||||
}
|
||||
|
||||
.next-level-tip {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255,255,255,0.7);
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Click Hint */
|
||||
.click-hint {
|
||||
text-align: right;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255,255,255,0.7);
|
||||
margin-top: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.next-level-perk {
|
||||
font-size: 22rpx;
|
||||
color: #FFD700;
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Popup Styles */
|
||||
.level-popup-content {
|
||||
background: white;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding: 32rpx 40rpx;
|
||||
max-height: 80vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.level-list-scroll {
|
||||
max-height: 60vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.level-list-item {
|
||||
position: relative;
|
||||
background: #f9f9f9;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.level-list-item.achieved {
|
||||
background: #F1F8E9;
|
||||
border-color: #A5D6A7;
|
||||
}
|
||||
|
||||
.level-item-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.level-tag-badge {
|
||||
background: #CFD8DC;
|
||||
color: #546E7A;
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.achieved .level-tag-badge {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.level-item-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.level-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.level-item-req {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-weight: 600;
|
||||
}
|
||||
.achieved .level-item-req {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.level-item-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
padding-top: 12rpx;
|
||||
border-top: 2rpx dashed #eee;
|
||||
}
|
||||
.achieved .level-item-desc {
|
||||
border-top-color: rgba(76, 175, 80, 0.2);
|
||||
color: #388E3C;
|
||||
}
|
||||
|
||||
.level-achieve-icon {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
|
||||
.section-title-badges {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1F2937;
|
||||
margin-bottom: 32rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.badges-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.badge-item {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.badge-item.locked {
|
||||
background: #F8F9FA;
|
||||
border: 2rpx dashed #E5E7EB;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.badge-icon-circle {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.badge-name {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #374151;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.badge-desc {
|
||||
font-size: 20rpx;
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
.badge-progress {
|
||||
margin-top: 12rpx;
|
||||
font-size: 20rpx;
|
||||
background: #F3F4F6;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
color: #6B7280;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
+73
-56
@@ -40,58 +40,52 @@ Page({
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({ selected: 4 });
|
||||
}
|
||||
// Always fetch fresh profile data
|
||||
this.loadUserInfo();
|
||||
},
|
||||
|
||||
// ======== User Info ========
|
||||
loadUserInfo() {
|
||||
// Try to get from globalData or storage
|
||||
const userInfo = app.globalData.userInfo || wx.getStorageSync('userInfo');
|
||||
if (userInfo && userInfo.name) {
|
||||
this.setData({
|
||||
userName: userInfo.name || '植物爱好者',
|
||||
userAvatar: userInfo.avatarUrl || userInfo.avatar || ''
|
||||
});
|
||||
return; // Use cached data, no API call
|
||||
}
|
||||
request.get('/profile/detail').then(res => {
|
||||
if (!res) return;
|
||||
|
||||
// Map stats and level info
|
||||
const avatarUrl = res.avatar && res.avatar.url ? res.avatar.url : '';
|
||||
const levelInfo = res.level || {};
|
||||
const levelTag = levelInfo.level ? `Lv.${levelInfo.level} ${levelInfo.title || ''}` : '';
|
||||
|
||||
// Only fetch from backend if no cached info
|
||||
request.get('/user/info').then(user => {
|
||||
if (!user) return;
|
||||
const avatarUrl = user.avatar ? user.avatar.url : '';
|
||||
this.setData({
|
||||
userName: user.name || '植物爱好者',
|
||||
userAvatar: avatarUrl
|
||||
userName: res.nickname || '植物爱好者',
|
||||
userAvatar: avatarUrl,
|
||||
|
||||
// Stats
|
||||
plantCount: res.plantCount || 0,
|
||||
taskDoneCount: res.careCount || 0,
|
||||
postCount: res.postCount || 0,
|
||||
|
||||
// Level (if available)
|
||||
userLevel: levelInfo.level || 0,
|
||||
userLevelTag: levelTag,
|
||||
|
||||
// EXP / Sunlight
|
||||
userExp: res.currentSunlight || 0
|
||||
});
|
||||
|
||||
// Update global cache
|
||||
const info = {
|
||||
id: user.id,
|
||||
name: user.name,
|
||||
avatarUrl: avatarUrl,
|
||||
account: user.account,
|
||||
phone: user.phone,
|
||||
avatarId: user.avatarId
|
||||
...res,
|
||||
avatarId: res.avatarId || (res.avatar ? res.avatar.id : '')
|
||||
};
|
||||
app.globalData.userInfo = info;
|
||||
wx.setStorageSync('userInfo', info);
|
||||
}).catch(() => { });
|
||||
|
||||
}).catch(err => {
|
||||
console.error('Load profile failed', err);
|
||||
});
|
||||
},
|
||||
|
||||
// ======== Stats ========
|
||||
loadStats() {
|
||||
// Fetch plant count
|
||||
request.post('/plant/page', { current: 1, pageSize: 1 }).then(res => {
|
||||
this.setData({ plantCount: res.total || 0 });
|
||||
}).catch(() => { });
|
||||
|
||||
// Fetch post count - user's own posts
|
||||
request.post('/post/page', { current: 1, pageSize: 1, onlyMine: true }).then(res => {
|
||||
this.setData({ postCount: res.total || 0 });
|
||||
}).catch(() => { });
|
||||
|
||||
// Fetch completed tasks count
|
||||
request.get('/plant/taskCount').then(res => {
|
||||
this.setData({ taskDoneCount: res || 0 });
|
||||
}).catch(() => { });
|
||||
},
|
||||
|
||||
// ======== Navigation ========
|
||||
setView(e) {
|
||||
@@ -222,6 +216,10 @@ Page({
|
||||
wx.navigateTo({ url: '/pages/profile/identify-history/index' });
|
||||
},
|
||||
|
||||
goToBadges() {
|
||||
wx.navigateTo({ url: '/pages/profile/badges/index' });
|
||||
},
|
||||
|
||||
goToNotificationSettings() {
|
||||
// Open WeChat notification settings
|
||||
wx.openSetting({
|
||||
@@ -284,10 +282,14 @@ Page({
|
||||
},
|
||||
|
||||
async saveProfile() {
|
||||
const { tempAvatar, tempNickname } = this.data;
|
||||
const { tempAvatar, tempNickname, userName, userAvatar } = this.data;
|
||||
|
||||
if (!tempAvatar && !tempNickname) {
|
||||
wx.showToast({ title: '请选择头像或输入昵称', icon: 'none' });
|
||||
// Check if anything changed
|
||||
const isNameChanged = tempNickname && tempNickname !== userName;
|
||||
const isAvatarChanged = tempAvatar && tempAvatar !== userAvatar;
|
||||
|
||||
if (!isNameChanged && !isAvatarChanged) {
|
||||
this.setData({ showProfileEditor: false });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -297,36 +299,51 @@ Page({
|
||||
const updatePayload = {};
|
||||
|
||||
// 1. Upload avatar if changed
|
||||
if (tempAvatar) {
|
||||
const data = await request.upload(tempAvatar);
|
||||
const fileData = data?.file || {};
|
||||
if (fileData.id) {
|
||||
updatePayload.avatar_id = fileData.id;
|
||||
// Update local display
|
||||
this.setData({ userAvatar: fileData.url || tempAvatar });
|
||||
if (isAvatarChanged) {
|
||||
const uploadRes = await request.upload(tempAvatar);
|
||||
// Correctly extract ID from file object based on known API response
|
||||
let fileId = '';
|
||||
if (uploadRes && uploadRes.file && uploadRes.file.id) {
|
||||
fileId = uploadRes.file.id;
|
||||
} else if (uploadRes && uploadRes.id) {
|
||||
fileId = uploadRes.id;
|
||||
}
|
||||
|
||||
if (fileId) {
|
||||
updatePayload.avatarId = fileId;
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Set name if provided
|
||||
if (tempNickname) {
|
||||
updatePayload.name = tempNickname;
|
||||
this.setData({ userName: tempNickname });
|
||||
// 2. Set nickname if changed
|
||||
if (isNameChanged) {
|
||||
updatePayload.nickname = tempNickname;
|
||||
}
|
||||
|
||||
// 3. Call update API
|
||||
if (Object.keys(updatePayload).length > 0) {
|
||||
await request.post('/user/update', updatePayload);
|
||||
await request.post('/profile/update', updatePayload);
|
||||
}
|
||||
|
||||
wx.hideLoading();
|
||||
this.setData({ showProfileEditor: false });
|
||||
|
||||
// 4. Update local state
|
||||
this.setData({
|
||||
userName: tempNickname || userName,
|
||||
userAvatar: tempAvatar || userAvatar, // Use tempAvatar for immediate display
|
||||
showProfileEditor: false
|
||||
});
|
||||
|
||||
wx.showToast({ title: '资料已更新', icon: 'success' });
|
||||
|
||||
// Update globalData
|
||||
// 5. Update globalData
|
||||
const userInfo = app.globalData.userInfo || {};
|
||||
if (updatePayload.name) userInfo.name = updatePayload.name;
|
||||
if (updatePayload.avatar_id) userInfo.avatarId = updatePayload.avatar_id;
|
||||
if (updatePayload.nickname) userInfo.name = updatePayload.nickname;
|
||||
if (updatePayload.avatarId) userInfo.avatarId = updatePayload.avatarId;
|
||||
// Also update URL if we have it locally?
|
||||
// Better to re-fetch profile to get canonical URL, but optimistic update is fine.
|
||||
userInfo.avatar = tempAvatar;
|
||||
app.globalData.userInfo = userInfo;
|
||||
|
||||
} catch (err) {
|
||||
wx.hideLoading();
|
||||
console.error('Save profile failed', err);
|
||||
|
||||
@@ -61,51 +61,7 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- ======== BADGES VIEW ======== -->
|
||||
<view wx:elif="{{view === 'badges'}}" class="sub-view info-view-anim">
|
||||
<view class="sub-nav" bindtap="goBack">
|
||||
<t-icon name="chevron-left" size="40rpx" />
|
||||
<text class="sub-nav-title">成就徽章</text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="sub-scroll">
|
||||
<!-- Level Card -->
|
||||
<view class="level-card-large">
|
||||
<view class="level-card-bg"></view>
|
||||
<view class="level-header">
|
||||
<view class="level-info-large">
|
||||
<text class="level-label">当前等级</text>
|
||||
<text class="level-value">Lv.4 资深植人</text>
|
||||
</view>
|
||||
<t-icon name="trophy" size="80rpx" color="#FFD700" />
|
||||
</view>
|
||||
<view class="level-progress-section">
|
||||
<view class="progress-text">
|
||||
<text>经验值</text>
|
||||
<text>350 / 500</text>
|
||||
</view>
|
||||
<view class="level-progress-bar-bg">
|
||||
<view class="level-progress-bar-fill" style="width: 70%;"></view>
|
||||
</view>
|
||||
<text class="next-level-tip">距离 Lv.5 园艺大师 还需 150 经验</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-title-badges">所有徽章 (3/6)</view>
|
||||
|
||||
<view class="badges-grid">
|
||||
<view wx:for="{{badges}}" wx:key="id" class="badge-item {{item.unlocked ? 'unlocked' : 'locked'}}">
|
||||
<view class="badge-icon-circle" style="background: {{item.unlocked ? item.color + '20' : '#F5F5F5'}}">
|
||||
<t-icon wx:if="{{item.unlocked}}" name="{{item.iconName}}" size="48rpx" color="{{item.color}}" />
|
||||
<t-icon wx:else name="lock-on" size="40rpx" color="#BDBDBD" />
|
||||
</view>
|
||||
<text class="badge-name">{{item.name}}</text>
|
||||
<text class="badge-desc">{{item.desc}}</text>
|
||||
<text wx:if="{{item.progress}}" class="badge-progress">{{item.progress}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- ======== ABOUT VIEW ======== -->
|
||||
<view wx:elif="{{view === 'about'}}" class="sub-view info-view-anim">
|
||||
@@ -143,7 +99,7 @@
|
||||
</view>
|
||||
<view class="user-text" bindtap="openProfileEditor">
|
||||
<view class="user-name">{{userName}}</view>
|
||||
<view class="level-badge">Lv.4 资深植人</view>
|
||||
<view class="level-badge">{{userLevelTag || 'Lv.0 园艺新手'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="settings-btn" bindtap="goToNotificationSettings">
|
||||
@@ -206,7 +162,7 @@
|
||||
<t-icon name="chevron-right" size="36rpx" color="#ccc" />
|
||||
</view>
|
||||
|
||||
<view class="menu-item" bindtap="setView" data-view="badges">
|
||||
<view class="menu-item" bindtap="goToBadges">
|
||||
<view class="menu-left">
|
||||
<view class="menu-icon-bg" style="background: #F3E5F5">
|
||||
<t-icon name="award" size="36rpx" color="#9C27B0" />
|
||||
@@ -214,7 +170,7 @@
|
||||
<text class="menu-text">成就徽章</text>
|
||||
</view>
|
||||
<view class="menu-right-info">
|
||||
<text class="menu-badge-text">已获 3 个</text>
|
||||
<!-- <text class="menu-badge-text">已获 3 个</text> -->
|
||||
<t-icon name="chevron-right" size="36rpx" color="#ccc" />
|
||||
</view>
|
||||
</view>
|
||||
@@ -246,7 +202,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="edit-row" bindtap="onChooseAvatar">
|
||||
<button class="edit-row avatar-btn" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
|
||||
<text class="edit-row-label">头像</text>
|
||||
<view class="edit-row-right">
|
||||
<t-avatar
|
||||
@@ -257,7 +213,7 @@
|
||||
<t-avatar wx:else icon="user" size="96rpx" />
|
||||
<t-icon name="chevron-right" size="32rpx" color="#C5C5C5" />
|
||||
</view>
|
||||
</view>
|
||||
</button>
|
||||
|
||||
<view class="edit-row">
|
||||
<text class="edit-row-label">昵称</text>
|
||||
|
||||
@@ -621,3 +621,24 @@
|
||||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.02);
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* Avatar Button Reset */
|
||||
button.edit-row.avatar-btn {
|
||||
background: transparent;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
line-height: inherit;
|
||||
font-size: inherit;
|
||||
border-radius: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
button.edit-row.avatar-btn::after {
|
||||
border: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user