Просмотр исходного кода

feat(profile): 新增我的推荐人卡片与团队层级入口

Sisyphus 1 месяц назад
Родитель
Сommit
5eb95ad34e
1 измененных файлов с 105 добавлено и 4 удалено
  1. 105 4
      cfc-frontend/pages/profile-main/profile.vue

+ 105 - 4
cfc-frontend/pages/profile-main/profile.vue

@@ -87,6 +87,37 @@
         </view>
       </view>
 
+      <!-- 我的推荐人卡片 -->
+      <view class="referrer-card" v-if="myReferrer && myReferrer.hasReferrer">
+        <view class="referrer-header">
+          <text class="referrer-title">我的推荐人</text>
+        </view>
+        <view class="referrer-content">
+          <view class="referrer-avatar-wrap">
+            <image v-if="myReferrer.avatar" class="referrer-avatar" :src="myReferrer.avatar" mode="aspectFill"></image>
+            <text v-else class="referrer-avatar-text">{{ myReferrer.nickname ? myReferrer.nickname.charAt(0) : '?' }}</text>
+          </view>
+          <view class="referrer-info">
+            <text class="referrer-name">{{ myReferrer.nickname }}</text>
+            <text class="referrer-code">邀请码:{{ myReferrer.referralCode }}</text>
+            <text class="referrer-time" v-if="myReferrer.bindTime">{{ formatReferralTime(myReferrer.bindTime) }}</text>
+          </view>
+          <view class="referrer-copy-btn" @click="copyReferrerCode">
+            <text>复制</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 团队层级入口 -->
+      <view class="team-tree-entry" @click="goTeamTree">
+        <view class="entry-icon">🌳</view>
+        <view class="entry-text">
+          <text class="entry-title">团队层级</text>
+          <text class="entry-desc">查看团队结构与消费明细</text>
+        </view>
+        <text class="entry-arrow">›</text>
+      </view>
+
       <!-- 个人成就统计 -->
       <view class="achievement-section">
         <view class="section-header-row">
@@ -242,7 +273,7 @@ import {
   getTodayTasksByCategory, getChallengeList, getMyMembership,
   verifyPassword, getPointsBalance, getUserInfo,
   cartCount, getOrderCounts, getReferralSummary,
-  getProfileStats
+  getProfileStats, getMyReferrer
 } from '../../utils/api.js'
 
 export default {
@@ -276,6 +307,7 @@ export default {
       // 待办
       pendingTasks: 0,
       profileProgress: 0,
+      myReferrer: null,
       
     }
   },
@@ -313,8 +345,9 @@ export default {
     this.role = role
     this.isSwitchedChild = uni.getStorageSync('isSwitchedChild') || false
     this.nickname = (uni.getStorageSync('userInfo') || {}).nickname || ''
-    this.loadAllData()
-  },
+        this.loadAllData()
+        this.loadMyReferrer()
+      },
   methods: {
     loadAllData() {
       this.loadUserInfo()
@@ -423,7 +456,36 @@ export default {
         }
       }).catch(function() {})
     },
-    
+    async loadMyReferrer() {
+      try {
+        var res = await getMyReferrer()
+        if (res && res.code === 200 && res.data && res.data.hasReferrer) {
+          this.myReferrer = res.data
+        }
+      } catch (e) {
+        console.error('获取推荐人失败', e)
+      }
+    },
+    goTeamTree() {
+      uni.navigateTo({ url: '/pages/profile/team-tree' })
+    },
+    copyReferrerCode() {
+      if (!this.myReferrer || !this.myReferrer.referralCode) return
+      uni.setClipboardData({
+        data: this.myReferrer.referralCode,
+        success: function() {
+          uni.showToast({ title: '邀请码已复制', icon: 'success' })
+        }
+      })
+    },
+    formatReferralTime(ts) {
+      if (!ts) return ''
+      var d = ts
+      if (typeof d === 'string' && d.indexOf('T') > -1) {
+        d = d.substring(0, 16).replace('T', ' ')
+      }
+      return '绑定于 ' + d
+    },
     goLogin: function() {
       uni.navigateTo({ url: '/pages/login/login' })
     },
@@ -1067,4 +1129,43 @@ export default {
   color: #fff;
   font-weight: 600;
 }
+
+/* 我的推荐人卡片 */
+.referrer-card {
+  margin: 0 30rpx 20rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+}
+.referrer-header { margin-bottom: 16rpx; }
+.referrer-title { font-size: 28rpx; font-weight: 600; color: #1E293B; }
+.referrer-content { display: flex; align-items: center; gap: 20rpx; }
+.referrer-avatar-wrap {
+  width: 72rpx; height: 72rpx; border-radius: 50%; background: #FEF3C7;
+  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
+}
+.referrer-avatar { width: 72rpx; height: 72rpx; border-radius: 50%; }
+.referrer-avatar-text { font-size: 28rpx; color: #F97316; }
+.referrer-info { flex: 1; min-width: 0; }
+.referrer-name { font-size: 28rpx; font-weight: 500; color: #1E293B; display: block; }
+.referrer-code { font-size: 24rpx; color: #F97316; margin-top: 4rpx; display: block; }
+.referrer-time { font-size: 22rpx; color: #94A3B8; margin-top: 4rpx; display: block; }
+.referrer-copy-btn {
+  font-size: 26rpx; color: #F97316; padding: 8rpx 16rpx; border: 1rpx solid #FED7AA;
+  border-radius: 20rpx; flex-shrink: 0;
+}
+.team-tree-entry {
+  margin: 0 30rpx 20rpx;
+  background: linear-gradient(135deg, #FFF7ED, rgba(249,115,22,0.06));
+  border-radius: 20rpx; padding: 24rpx;
+  display: flex; align-items: center; gap: 20rpx;
+  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
+  border-left: 6rpx solid #F97316;
+}
+.entry-icon { font-size: 40rpx; }
+.entry-text { flex: 1; min-width: 0; }
+.entry-title { font-size: 28rpx; font-weight: 600; color: #1E293B; display: block; }
+.entry-desc { font-size: 22rpx; color: #94A3B8; margin-top: 4rpx; display: block; }
+.entry-arrow { font-size: 28rpx; color: #F97316; }
 </style>