qxy/quanxiyun-app
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
hanleng
2026-09-16 15:04:08 +08:00
commit 43d095ea0f
117 changed files with 31982 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/b-team/index.vue
+345
View File
@@ -0,0 +1,345 @@
<template>
<view class="page-container">
<BTopBar title="团队" :showBell="false" />
<!-- 采用 flex: 1 动态自适应屏幕剩余高度 -->
<scroll-view
scroll-y
class="page-content"
:refresher-enabled="true"
:refresher-triggered="refreshing"
@refresherrefresh="onRefresh"
>
<view class="content-pad">
<!-- Team Stats Hero -->
<view class="team-hero">
<view class="team-hero-top">
<view class="th-left">
<text class="th-label">下属用户总数</text>
<text class="th-val">{{ teamStats.userCount }}<text class="th-unit"> 人</text></text>
</view>
<view class="th-right">
<text class="th-label">团队总贡献积分</text>
<text class="th-val2">{{ teamStats.totalContribution }}</text>
</view>
</view>
<view class="team-hero-stats">
<view class="ths-item">
<text class="ths-val">{{ teamStats.directPush }}</text>
<text class="ths-label">团长直接推荐C端</text>
</view>
<view class="ths-item">
<text class="ths-val">{{ teamStats.deviceCount }}</text>
<text class="ths-label">设备总数(台)</text>
</view>
<view class="ths-item">
<text class="ths-val">{{ teamStats.totalSpend }}</text>
<text class="ths-label">总消费金额</text>
</view>
</view>
</view>
<!-- Tab -->
<view class="tabs">
<view class="tab active">直接推荐C端 ({{ teamMembers.length }})</view>
</view>
<!-- Summary Card -->
<view class="summary-card">
<text class="summary-title">直接推荐C端用户·贡献收益汇总</text>
<view class="summary-badges">
<text class="badge badge-blue">直接推荐C端 {{ teamMembers.length }}人</text>
<text class="badge badge-gray">设备总数 {{ teamStats.deviceCount }}台</text>
</view>
</view>
<!-- User List -->
<view class="list-group">
<!-- 缺省状态处理 -->
<view v-if="teamMembers.length === 0" class="empty-holder">
<text class="empty-text">暂无下属成员记录</text>
</view>
<view class="list-item" v-for="(member, idx) in teamMembers" :key="idx">
<view class="member-avatar" :style="{ background: member.avatarBg }">
{{ member.avatar }}
</view>
<view class="li-body">
<text class="li-title">{{ member.name }}</text>
<text class="li-sub">由团长"{{ member.promoter }}"直接推荐 · {{ member.devices }}台设备</text>
</view>
<view class="li-right">
<text class="li-points">{{ formatThousands(member.points) }}</text>
<text class="li-sub-label">贡献积分</text>
</view>
</view>
</view>
</view>
<!-- 底部安全区占位（兼容 CustomTabBar 高度） -->
<view class="safe-bottom-spacer"></view>
</scroll-view>
<custom-tab-bar :current="1"></custom-tab-bar>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import BTopBar from '@/components/BTopBar.vue'
import CustomTabBar from '@/components/CustomTabBar.vue'
import request from '@/utils/request'
import { formatThousands } from '@/utils/util'
const refreshing = ref(false)
const teamStats = ref({
userCount: 0,
totalContribution: '0',
directPush: 0,
deviceCount: 0,
totalSpend: '0'
})
const teamMembers = ref([])
const AVATAR_BGS = [
'linear-gradient(135deg,#1677FF,#4096FF)'
]
const fetchTeam = async () => {
try {
const res = await request.get('/c/leader/team', { showLoading: false })
if (res.data) {
const d = res.data
teamStats.value = {
userCount: d.stats?.user_count || 0,
totalContribution: formatThousands(d.stats?.total_contribution || 0),
directPush: d.stats?.direct_push || 0,
deviceCount: d.stats?.device_count || 0,
totalSpend: formatThousands(d.stats?.total_spend || 0)
}
teamMembers.value = (d.members || []).map((m, idx) => ({
name: m.name,
avatar: m.avatar || (m.name || '用')[0],
avatarBg: AVATAR_BGS[idx % AVATAR_BGS.length],
promoter: m.promoter || '--',
devices: m.device_count || 0,
points: m.contribution || 0
}))
}
} catch (e) { console.error('获取团队数据失败', e) }
}
onMounted(() => { fetchTeam() })
const onRefresh = () => {
refreshing.value = true
fetchTeam().finally(() => { refreshing.value = false })
}
onShow(() => {
uni.$emit('pageShow')
})
</script>
<style lang="scss" scoped>
/* 全局盒模型规则[cite: 7] */
view, text, scroll-view {
box-sizing: border-box;
}
.page-container {
height: 100vh;
display: flex;
flex-direction: column;
background: #F2F4F8;
overflow: hidden;
}
.page-content {
flex: 1;
height: 0; /* 触发 flex 压缩，保证跨端自适应不溢出 */
}
.content-pad { padding: 24rpx; }
/* Team Hero */
.team-hero {
background: linear-gradient(135deg, #0A1733 0%, #0D2B6E 50%, #1677FF 100%);
border-radius: 28rpx;
padding: 32rpx;
color: #fff;
position: relative;
overflow: hidden;
margin-bottom: 20rpx;
box-shadow: 0 12rpx 36rpx rgba(13,43,110,.2);
}
.team-hero-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24rpx;
position: relative;
z-index: 1;
}
.th-label { font-size: 24rpx; opacity: 0.65; display: block; }
.th-val { font-size: 56rpx; font-weight: 800; font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; }
.th-unit { font-size: 26rpx; font-weight: 400; opacity: 0.7; }
.th-val2 { font-size: 40rpx; font-weight: 700; color: #7FFFD4; font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; display: block; margin-top: 4rpx; }
.team-hero-stats {
display: flex;
gap: 16rpx;
position: relative;
z-index: 1;
}
.ths-item {
flex: 1;
background: rgba(255,255,255,.08);
border-radius: 20rpx;
padding: 16rpx;
text-align: center;
backdrop-filter: blur(4px);
}
.ths-val { font-size: 36rpx; font-weight: 700; font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; display: block; }
.ths-label { font-size: 20rpx; opacity: 0.65; display: block; margin-top: 4rpx; }
/* Tabs */
.tabs {
display: flex;
gap: 0;
border-bottom: 1rpx solid #EAEDF3;
margin-bottom: 24rpx;
}
.tab {
padding: 22rpx 0;
font-size: 26rpx;
font-weight: 600;
color: #1677FF;
position: relative;
}
.tab::after {
content: '';
position: absolute;
bottom: -1rpx;
left: 50%;
transform: translateX(-50%);
width: 44rpx;
height: 5rpx;
background: linear-gradient(90deg, #4096FF, #1677FF);
border-radius: 4rpx;
box-shadow: 0 0 12rpx rgba(22,119,255,.4);
}
/* Summary Card */
.summary-card {
background: linear-gradient(135deg, #F9F0FF, #FAF5FF);
border-radius: 28rpx;
padding: 28rpx;
text-align: center;
margin-bottom: 20rpx;
}
.summary-title {
font-size: 26rpx;
color: #1677FF;
line-height: 1.6;
font-weight: 600;
display: block;
margin-bottom: 12rpx;
}
.summary-badges {
display: flex;
gap: 16rpx;
justify-content: center;
}
.badge {
display: inline-block;
padding: 6rpx 16rpx;
border-radius: 10rpx;
font-size: 22rpx;
font-weight: 500;
}
.badge-blue { background: #E6F4FF; color: #1677FF; }
.badge-gray { background: #F3F5F9; color: #5A6072; }
/* List Group */
.list-group {
background: #fff;
border-radius: 28rpx;
overflow: hidden;
box-shadow: 0 2rpx 6rpx rgba(15,18,38,.04);
}
.empty-holder {
padding: 60rpx 0;
text-align: center;
}
.empty-text {
font-size: 24rpx;
color: #BCC2CE;
}
.list-item {
display: flex;
align-items: center;
padding: 28rpx 32rpx;
gap: 24rpx;
transition: background 0.15s;
&:active { background: #F8F9FC; }
}
.list-item + .list-item { border-top: 1rpx solid #F3F5F9; }
.member-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-weight: 700;
flex-shrink: 0;
}
.li-body { flex: 1; min-width: 0; }
.li-title {
font-size: 28rpx;
font-weight: 500;
color: #0F1226;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.li-sub { font-size: 22rpx; color: #8B91A1; margin-top: 4rpx; display: block; }
.li-right { text-align: right; flex-shrink: 0; }
.li-points { font-size: 26rpx; font-weight: 700; color: #1677FF; font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif; display: block; }
.li-sub-label { font-size: 20rpx; color: #BCC2CE; display: block; margin-top: 2rpx; }
.safe-bottom-spacer {
height: calc(140rpx + env(safe-area-inset-bottom));
}
</style>