|
|
@@ -1,244 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <!-- 顶部统计卡 -->
|
|
|
- <view class="stats-card">
|
|
|
- <view class="stat-item">
|
|
|
- <text class="stat-value orange">{{ fenToYuan(consumption.totalConsumption) }}</text>
|
|
|
- <text class="stat-label">团队总消费</text>
|
|
|
- </view>
|
|
|
- <view class="stat-divider"></view>
|
|
|
- <view class="stat-item">
|
|
|
- <text class="stat-value blue">{{ consumption.totalMembers }}</text>
|
|
|
- <text class="stat-label">团队人数</text>
|
|
|
- </view>
|
|
|
- <view class="stat-divider"></view>
|
|
|
- <view class="stat-item">
|
|
|
- <text class="stat-value green">{{ currentMaxLevel }}</text>
|
|
|
- <text class="stat-label">统计层级</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="level-counts" v-if="!loading && levelCounts.length > 0">
|
|
|
- <view class="level-count-chip" v-for="lc in levelCounts" :key="lc.level">
|
|
|
- <text class="level-count-num">L{{ lc.level }}</text>
|
|
|
- <text class="level-count-people">{{ lc.count }}人</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 层级切换 tabs -->
|
|
|
- <view class="level-tabs">
|
|
|
- <view class="level-tab" :class="{ active: currentMaxLevel === 1 }" @click="switchLevel(1)">1级</view>
|
|
|
- <view class="level-tab" :class="{ active: currentMaxLevel === 2 }" @click="switchLevel(2)">2级</view>
|
|
|
- <view class="level-tab" :class="{ active: currentMaxLevel === 3 }" @click="switchLevel(3)">3级</view>
|
|
|
- <view class="level-tab" :class="{ active: currentMaxLevel === 4 }" @click="switchLevel(4)">4级</view>
|
|
|
- <view class="level-tab" :class="{ active: currentMaxLevel === 5 }" @click="switchLevel(5)">5级</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 树形区域:扁平渲染,depth 控制缩进 -->
|
|
|
- <view class="tree-wrapper">
|
|
|
- <view class="tree-container" v-if="displayNodes.length > 0">
|
|
|
- <view v-for="item in displayNodes" :key="item.userId" class="tree-node"
|
|
|
- :style="{ paddingLeft: (item.depth * 32) + 'rpx' }">
|
|
|
- <view class="node-main" @click="item.hasChildren && toggleExpand(item.userId)">
|
|
|
- <image v-if="item.avatar" class="node-avatar" :src="item.avatar" mode="aspectFill" />
|
|
|
- <text v-else class="node-avatar-text">{{ item.nickname ? item.nickname.charAt(0) : '?' }}</text>
|
|
|
- <text class="node-name">{{ item.nickname }}</text>
|
|
|
- <text class="node-tag" v-if="item.level > 1">L{{ item.level }}</text>
|
|
|
- <view class="node-stats">
|
|
|
- <text class="node-stat consumption">消费 ¥{{ fenToYuan(item.memberConsumption) }}</text>
|
|
|
- <text class="node-stat my-cf">得CF ¥{{ fenToYuan(item.myCfEarnedFromMember) }}</text>
|
|
|
- </view>
|
|
|
- <text class="node-arrow" v-if="item.hasChildren">{{ expandedMap[item.userId] ? '▲' : '▼' }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="empty-state" v-if="!loading && displayNodes.length === 0">
|
|
|
- <text>暂无团队成员</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="loading-overlay" v-if="loading">
|
|
|
- <text>加载中...</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { getTeamTree, getTeamConsumption } from '@/utils/api.js'
|
|
|
-
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- nodes: [],
|
|
|
- levelCounts: [],
|
|
|
- consumption: { totalConsumption: 0, totalMembers: 0, maxLevel: 3 },
|
|
|
- currentMaxLevel: 3,
|
|
|
- loading: false,
|
|
|
- expandedMap: {}
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- displayNodes() {
|
|
|
- var self = this
|
|
|
- if (this.nodes.length === 0) return []
|
|
|
- var nodeMap = {}
|
|
|
- var i, n, roots = [], result = []
|
|
|
- for (i = 0; i < this.nodes.length; i++) {
|
|
|
- n = this.nodes[i]
|
|
|
- nodeMap[n.userId] = {
|
|
|
- userId: n.userId, nickname: n.nickname, avatar: n.avatar,
|
|
|
- memberConsumption: n.memberConsumption, myCfEarnedFromMember: n.myCfEarnedFromMember,
|
|
|
- level: n.level, _children: []
|
|
|
- }
|
|
|
- }
|
|
|
- for (i = 0; i < this.nodes.length; i++) {
|
|
|
- n = this.nodes[i]
|
|
|
- if (n.parentId && nodeMap[n.parentId] && nodeMap[n.userId]) {
|
|
|
- nodeMap[n.parentId]._children.push(nodeMap[n.userId])
|
|
|
- }
|
|
|
- }
|
|
|
- for (i = 0; i < this.nodes.length; i++) {
|
|
|
- if (this.nodes[i].level === 1 && nodeMap[this.nodes[i].userId]) {
|
|
|
- roots.push(nodeMap[this.nodes[i].userId])
|
|
|
- }
|
|
|
- }
|
|
|
- function flatten(list, depth) {
|
|
|
- for (var j = 0; j < list.length; j++) {
|
|
|
- var node = list[j]
|
|
|
- var hasChildren = node._children.length > 0
|
|
|
- result.push({
|
|
|
- userId: node.userId, nickname: node.nickname, avatar: node.avatar,
|
|
|
- memberConsumption: node.memberConsumption, myCfEarnedFromMember: node.myCfEarnedFromMember,
|
|
|
- level: node.level, depth: depth, hasChildren: hasChildren, childCount: node._children.length
|
|
|
- })
|
|
|
- if (hasChildren && self.expandedMap[node.userId]) {
|
|
|
- flatten(node._children, depth + 1)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- flatten(roots, 0)
|
|
|
- return result
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- this.loadData()
|
|
|
- this._onLoadFired = true
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- if (this._onLoadFired) {
|
|
|
- this._onLoadFired = false
|
|
|
- } else {
|
|
|
- this.loadData()
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async loadData() {
|
|
|
- this.loading = true
|
|
|
- try {
|
|
|
- var self = this
|
|
|
- var treeRes = await getTeamTree(self.currentMaxLevel)
|
|
|
- var consumptionRes = await getTeamConsumption(self.currentMaxLevel)
|
|
|
- if (treeRes && treeRes.data && treeRes.data.nodes) {
|
|
|
- self.nodes = treeRes.data.nodes
|
|
|
- }
|
|
|
- if (consumptionRes && consumptionRes.data) {
|
|
|
- self.consumption = consumptionRes.data
|
|
|
- self.consumption.maxLevel = self.consumption.maxLevel || self.currentMaxLevel
|
|
|
- }
|
|
|
- self.buildLevelCounts()
|
|
|
- } catch (e) {
|
|
|
- console.error('加载团队树失败', e)
|
|
|
- }
|
|
|
- this.loading = false
|
|
|
- },
|
|
|
- buildLevelCounts() {
|
|
|
- var max = this.consumption.maxLevel || this.currentMaxLevel || 3
|
|
|
- var counts = []
|
|
|
- var i
|
|
|
- for (i = 1; i <= max; i++) counts.push({ level: i, count: 0 })
|
|
|
- this.nodes.forEach(function(n) {
|
|
|
- if (n && n.level && n.level >= 1 && n.level <= max) {
|
|
|
- counts[n.level - 1].count++
|
|
|
- }
|
|
|
- })
|
|
|
- this.levelCounts = counts
|
|
|
- },
|
|
|
- switchLevel(level) {
|
|
|
- if (this.currentMaxLevel === level) return
|
|
|
- this.currentMaxLevel = level
|
|
|
- this.loadData()
|
|
|
- },
|
|
|
- toggleExpand(userId) {
|
|
|
- this.$set(this.expandedMap, userId, !this.expandedMap[userId])
|
|
|
- },
|
|
|
- fenToYuan(fen) {
|
|
|
- if (fen === null || fen === undefined) return '0.00'
|
|
|
- var num = Number(fen)
|
|
|
- if (isNaN(num)) return '0.00'
|
|
|
- return (num / 100).toFixed(2)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.container { min-height: 100vh; background: #FFF7ED; padding-bottom: 40rpx; }
|
|
|
-.stats-card {
|
|
|
- background: #fff; border-radius: 20rpx; padding: 30rpx; margin: 20rpx 30rpx 16rpx;
|
|
|
- display: flex; align-items: center; box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
|
|
|
-}
|
|
|
-.stat-item { flex: 1; text-align: center; }
|
|
|
-.stat-value { font-size: 36rpx; font-weight: bold; display: block; }
|
|
|
-.stat-value.orange { color: #F97316; }
|
|
|
-.stat-value.blue { color: #0EA5E9; }
|
|
|
-.stat-value.green { color: #10B981; }
|
|
|
-.stat-label { font-size: 22rpx; color: #94A3B8; margin-top: 4rpx; display: block; }
|
|
|
-.stat-divider { width: 1rpx; height: 48rpx; background: #FED7AA; }
|
|
|
-.level-tabs {
|
|
|
- display: flex; padding: 0 30rpx; margin-bottom: 16rpx; overflow-x: auto; gap: 12rpx;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-.level-tab {
|
|
|
- flex-shrink: 0; padding: 12rpx 24rpx; border-radius: 20rpx;
|
|
|
- font-size: 24rpx; color: #64748B; background: #F1F5F9;
|
|
|
-}
|
|
|
-.level-tab.active { background: #F97316; color: #fff; font-weight: 600; }
|
|
|
-.tree-wrapper { padding: 0 30rpx; }
|
|
|
-.tree-container { min-height: 300rpx; }
|
|
|
-.tree-node { margin-bottom: 16rpx; }
|
|
|
-.node-main {
|
|
|
- display: flex; align-items: center; gap: 16rpx;
|
|
|
- background: #fff; border-radius: 16rpx; padding: 20rpx;
|
|
|
- box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
|
|
|
-}
|
|
|
-.node-avatar { width: 60rpx; height: 60rpx; border-radius: 50%; background: #FEF3C7; flex-shrink: 0; }
|
|
|
-.node-avatar-text {
|
|
|
- width: 60rpx; height: 60rpx; border-radius: 50%; background: #FEF3C7;
|
|
|
- display: flex; align-items: center; justify-content: center;
|
|
|
- font-size: 24rpx; color: #F97316; flex-shrink: 0;
|
|
|
-}
|
|
|
-.node-name { flex: 1; min-width: 0; font-size: 26rpx; color: #1E293B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
-.node-tag { font-size: 20rpx; background: #FFF7ED; color: #F97316; padding: 2rpx 8rpx; border-radius: 8rpx; flex-shrink: 0; }
|
|
|
-.node-stats { flex-shrink: 0; text-align: right; margin-right: 8rpx; }
|
|
|
-.node-stat { font-size: 20rpx; display: block; line-height: 1.5; }
|
|
|
-.node-stat.consumption { color: #F97316; }
|
|
|
-.node-stat.my-cf { color: #0EA5E9; }
|
|
|
-.node-arrow { font-size: 20rpx; color: #94A3B8; flex-shrink: 0; }
|
|
|
-.empty-state { text-align: center; padding: 80rpx; color: #94A3B8; font-size: 28rpx; }
|
|
|
-.loading-overlay {
|
|
|
- position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
|
|
- background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center;
|
|
|
- z-index: 999; font-size: 28rpx; color: #94A3B8;
|
|
|
-}
|
|
|
-.level-counts {
|
|
|
- display: flex; padding: 0 30rpx; margin-bottom: 16rpx; gap: 12rpx;
|
|
|
- flex-wrap: wrap; align-items: center;
|
|
|
-}
|
|
|
-.level-count-chip {
|
|
|
- flex-shrink: 0; display: flex; align-items: center; gap: 6rpx;
|
|
|
- background: #fff; border-radius: 16rpx; padding: 10rpx 20rpx;
|
|
|
- box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
|
|
|
-}
|
|
|
-.level-count-num { font-size: 24rpx; font-weight: 600; color: #F97316; }
|
|
|
-.level-count-people { font-size: 24rpx; color: #64748B; }
|
|
|
-</style>
|