feat: login rest

2026-02-12 09:26:39 +08:00
parent e97fd30fa3
commit 5553e2711a
115 changed files with 4090 additions and 3499 deletions
@@ -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;
+}