1333 行
34 KiB
Vue
1333 行
34 KiB
Vue
<template>
|
||
<view class="promote-page" :class="['theme-' + currentThemeKey]" :style="navStyle">
|
||
<!-- 顶部沉浸式自定义导航栏 -->
|
||
<view class="custom-nav-bar">
|
||
<view class="nav-content">
|
||
<view class="btn-nav-back btn-active" @click="handleBack">
|
||
<image class="nav-back-icon" :src="ICONS.chevronLeft" mode="aspectFit" />
|
||
</view>
|
||
<view class="nav-title-wrap">
|
||
<text class="nav-title">推广赚钱</text>
|
||
</view>
|
||
<!-- 胶囊右侧对称避让占位 -->
|
||
<view class="nav-capsule-placeholder"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 主体滚动区域 -->
|
||
<scroll-view
|
||
scroll-y
|
||
class="page-scroll-body"
|
||
refresher-enabled
|
||
:refresher-triggered="isRefreshing"
|
||
@refresherrefresh="onRefresh"
|
||
>
|
||
<view class="promote-content-body">
|
||
<!-- 1. 顶部分销佣金与团队概览卡片 -->
|
||
<view class="dist-summary-banner">
|
||
<view class="dist-stat-col">
|
||
<text class="dist-stat-val tabular-num">¥{{ userCommission }}</text>
|
||
<text class="dist-stat-lbl">可提现佣金</text>
|
||
</view>
|
||
<view class="dist-stat-divider"></view>
|
||
<view class="dist-stat-col">
|
||
<text class="dist-stat-val tabular-num">{{ totalTeamCount }} 人</text>
|
||
<text class="dist-stat-lbl">下级团队成员</text>
|
||
</view>
|
||
<view class="dist-stat-divider"></view>
|
||
<view class="dist-stat-col">
|
||
<view class="code-box btn-active" @click="copyInviteCode">
|
||
<text class="code-txt">PW{{ user.id || 2006 }}</text>
|
||
<text class="copy-tag">一键复制</text>
|
||
</view>
|
||
<text class="dist-stat-lbl">专属邀请码</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 2. 四大功能选项卡 -->
|
||
<view class="dist-tabs-row">
|
||
<view
|
||
v-for="tab in tabs"
|
||
:key="tab.key"
|
||
class="dist-tab-pill btn-active"
|
||
:class="{ active: distActiveTab === tab.key }"
|
||
@click="distActiveTab = tab.key"
|
||
>
|
||
{{ tab.name }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 3. Tab 内容区 -->
|
||
<!-- Tab 1: 专属太阳码海报 -->
|
||
<view class="tab-pane-poster" v-if="distActiveTab === 'poster'">
|
||
<view class="poster-preview-card">
|
||
<view class="poster-badge">官方认证邀请码</view>
|
||
<text class="poster-hero-title">电竞陪伴 · 同城玩乐</text>
|
||
<text class="poster-hero-sub">寻找心仪陪伴师，立享新人首单礼包</text>
|
||
|
||
<view class="suncode-box">
|
||
<view class="suncode-ring">
|
||
<view class="sun-dot" v-for="d in 12" :key="d"></view>
|
||
<view class="suncode-center">
|
||
<image class="suncode-avatar" :src="user.avatar || defaultAvatar" mode="aspectFill" />
|
||
</view>
|
||
</view>
|
||
<text class="suncode-hint">微信长按或扫码进入</text>
|
||
</view>
|
||
|
||
<view class="poster-footer-code">
|
||
<text class="lbl">邀请码：</text>
|
||
<text class="val">PW{{ user.id || 2006 }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="poster-actions-row">
|
||
<button class="btn-poster-action secondary btn-active" @click="copyInviteLink">复制邀请链接</button>
|
||
<button class="btn-poster-action primary btn-active" @click="savePosterImage">保存海报至相册</button>
|
||
</view>
|
||
|
||
<view class="bind-inviter-card" style="margin-top: 24rpx; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20rpx; padding: 20rpx 24rpx; display: flex; align-items: center; justify-content: space-between;">
|
||
<text style="font-size: 24rpx; color: #94A3B8;">{{ user.inviterId ? ('已绑定上级邀请人：PW' + user.inviterId) : '填写好友邀请码绑定上下级关系' }}</text>
|
||
<view v-if="!user.inviterId" style="display: flex; align-items: center; gap: 12rpx;">
|
||
<input v-model="bindCodeInput" placeholder="如 PW2001" placeholder-class="field-placeholder" style="width: 180rpx; height: 56rpx; background: rgba(0,0,0,0.25); border-radius: 12rpx; padding: 0 16rpx; font-size: 24rpx; color: #F8FAFC;" />
|
||
<button class="btn-active" style="margin: 0; height: 56rpx; line-height: 56rpx; padding: 0 24rpx; font-size: 24rpx; border-radius: 12rpx; background: #6366F1; color: #FFFFFF;" @click="handleBindInviteCode">绑定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Tab 2: 下级团队列表 -->
|
||
<view class="tab-pane-team" v-if="distActiveTab === 'team'">
|
||
<view class="team-subtabs">
|
||
<view
|
||
class="subtab-item btn-active"
|
||
:class="{ active: teamLevelTab === 1 }"
|
||
@click="teamLevelTab = 1"
|
||
>
|
||
一级直推 ({{ distributionTeam.directCount || 0 }}人 · 5%)
|
||
</view>
|
||
<view
|
||
class="subtab-item btn-active"
|
||
:class="{ active: teamLevelTab === 2 }"
|
||
@click="teamLevelTab = 2"
|
||
>
|
||
二级间推 ({{ distributionTeam.indirectCount || 0 }}人 · 2%)
|
||
</view>
|
||
</view>
|
||
|
||
<view class="team-list-wrap">
|
||
<view
|
||
class="team-member-row"
|
||
v-for="m in currentTeamList"
|
||
:key="m.id"
|
||
>
|
||
<image class="m-avatar" :src="m.avatar || defaultAvatar" mode="aspectFill" />
|
||
<view class="m-info">
|
||
<view class="m-top">
|
||
<text class="m-name">{{ m.nickname }}</text>
|
||
<text class="m-level-badge">LV{{ m.level || teamLevelTab }} 好友</text>
|
||
</view>
|
||
<text class="m-time">加入时间：{{ m.createdAt }}</text>
|
||
</view>
|
||
<view class="m-contribute">
|
||
<text class="m-val tabular-num">¥{{ m.totalContribute || '0.00' }}</text>
|
||
<text class="m-lbl">贡献收益</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="currentTeamList.length === 0" class="empty-state">
|
||
<image class="empty-icon" :src="ICONS.teamUp" mode="aspectFit" />
|
||
<text class="empty-txt">暂无此类下级成员，快去分享海报发展团队吧</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Tab 3: 返佣订单明细 -->
|
||
<view class="tab-pane-records" v-if="distActiveTab === 'records'">
|
||
<view class="records-list-wrap">
|
||
<view class="record-card" v-for="r in distributionRecords" :key="r.id">
|
||
<view class="rec-top">
|
||
<text class="rec-sn">{{ r.orderNo }}</text>
|
||
<text class="rec-status-tag">{{ r.status || '已入账' }}</text>
|
||
</view>
|
||
<view class="rec-mid">
|
||
<view class="rec-from">
|
||
<text class="rec-name">{{ r.fromUserName || '团队好友' }}</text>
|
||
<text class="rec-type">{{ r.level === 1 ? '直推订单' : '间推订单' }}</text>
|
||
</view>
|
||
<view class="rec-amount-box">
|
||
<text class="rec-comm tabular-num">+¥{{ r.commission }}</text>
|
||
<text class="rec-rate">提成 {{ r.ratePercent || (r.level === 1 ? 5 : 2) }}%</text>
|
||
</view>
|
||
</view>
|
||
<view class="rec-bot">
|
||
<text class="rec-time">{{ r.createdAt }}</text>
|
||
<text class="rec-ord-fee">消费：¥{{ r.orderAmount }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="distributionRecords.length === 0" class="empty-state">
|
||
<image class="empty-icon" :src="ICONS.chart" mode="aspectFit" />
|
||
<text class="empty-txt">暂无返佣订单记录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Tab 4: 快速佣金提现 -->
|
||
<view class="tab-pane-withdraw" v-if="distActiveTab === 'withdraw'">
|
||
<view class="dist-wd-box">
|
||
<view class="wd-box-head">
|
||
<text class="dist-wd-label">提现金额 (元)</text>
|
||
<view class="wd-history-link btn-active" @click="goToWithdrawRecords">
|
||
<text class="wd-history-txt">提现记录</text>
|
||
<image class="wd-history-arrow" :src="ICONS.chevronRight" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
<view class="dist-input-row">
|
||
<text class="symbol">¥</text>
|
||
<input
|
||
type="digit"
|
||
class="dist-amount-input"
|
||
v-model="distWithdrawAmount"
|
||
placeholder="请输入提现金额"
|
||
placeholder-class="field-placeholder"
|
||
/>
|
||
<text class="btn-all btn-active" @click="handleFillAllCommission">全部提现</text>
|
||
</view>
|
||
<view class="dist-wd-tip">
|
||
<text class="tip-txt">支持自动提现至绑定微信零钱，平台免收手续费，T+0 快速审核到账。</text>
|
||
</view>
|
||
<button
|
||
class="btn-submit-dist-wd btn-active"
|
||
:disabled="submittingDistWithdraw"
|
||
@click="submitDistWithdraw"
|
||
>
|
||
{{ submittingDistWithdraw ? '正在提交...' : '确认发起提现' }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue';
|
||
import { onShow } from '@dcloudio/uni-app';
|
||
import {
|
||
getUserProfile,
|
||
getDistributionTeam,
|
||
getDistributionRecords,
|
||
withdrawCommission,
|
||
bindInviteCode
|
||
} from '@/common/api.js';
|
||
import { ICONS } from '@/common/icons.js';
|
||
import { getCurrentThemeKey, applyThemeToNativeUI } from '@/common/theme.js';
|
||
import { getNavBarInfo } from '@/common/nav.js';
|
||
|
||
const currentThemeKey = ref(getCurrentThemeKey());
|
||
const navInfo = ref(getNavBarInfo());
|
||
const isRefreshing = ref(false);
|
||
const bindCodeInput = ref('');
|
||
|
||
const defaultAvatar = 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200';
|
||
|
||
const user = ref({
|
||
id: 2006,
|
||
nickname: '苏苏学姐',
|
||
avatar: defaultAvatar,
|
||
commission: '0.00',
|
||
invitedCount: 5
|
||
});
|
||
|
||
const distActiveTab = ref('poster');
|
||
const teamLevelTab = ref(1);
|
||
|
||
const tabs = [
|
||
{ key: 'poster', name: '推广海报' },
|
||
{ key: 'team', name: '下级团队' },
|
||
{ key: 'records', name: '返佣订单' },
|
||
{ key: 'withdraw', name: '佣金提现' }
|
||
];
|
||
|
||
const distributionTeam = ref({
|
||
directCount: 3,
|
||
indirectCount: 2,
|
||
totalTeamCount: 5,
|
||
directList: [
|
||
{ id: 3001, nickname: '晨光玩家', avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200', level: 1, createdAt: '2026-10-08 14:20', totalContribute: '48.50' },
|
||
{ id: 3002, nickname: '风暴骑士', avatar: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=200', level: 1, createdAt: '2026-10-09 11:35', totalContribute: '32.00' },
|
||
{ id: 3003, nickname: '月下独酌', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200', level: 1, createdAt: '2026-10-10 09:12', totalContribute: '19.80' }
|
||
],
|
||
indirectList: [
|
||
{ id: 4001, nickname: '极光闪电', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200', level: 2, createdAt: '2026-10-11 16:45', totalContribute: '12.60' },
|
||
{ id: 4002, nickname: '晴空万里', avatar: 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=200', level: 2, createdAt: '2026-10-12 18:02', totalContribute: '8.40' }
|
||
]
|
||
});
|
||
|
||
const distributionRecords = ref([
|
||
{ id: 'REC_101', orderNo: 'ORD_2026101201', fromUserName: '晨光玩家', level: 1, ratePercent: 5, commission: '25.00', orderAmount: '500.00', status: '已入账', createdAt: '2026-10-12 20:30' },
|
||
{ id: 'REC_102', orderNo: 'ORD_2026101102', fromUserName: '风暴骑士', level: 1, ratePercent: 5, commission: '16.00', orderAmount: '320.00', status: '已入账', createdAt: '2026-10-11 19:15' },
|
||
{ id: 'REC_103', orderNo: 'ORD_2026101003', fromUserName: '极光闪电', level: 2, ratePercent: 2, commission: '6.40', orderAmount: '320.00', status: '已入账', createdAt: '2026-10-10 15:00' }
|
||
]);
|
||
|
||
const distWithdrawAmount = ref('');
|
||
const submittingDistWithdraw = ref(false);
|
||
|
||
const navStyle = computed(() => {
|
||
return {
|
||
'--safe-header-gap': `${navInfo.value.safeHeaderGap}px`,
|
||
'--capsule-right-space': `${navInfo.value.capsuleRightSpace}px`,
|
||
'--capsule-height': `${navInfo.value.capsuleHeight}px`
|
||
};
|
||
});
|
||
|
||
const userCommission = computed(() => {
|
||
const comm = Number(user.value.commission || 0);
|
||
return isNaN(comm) ? '0.00' : comm.toFixed(2);
|
||
});
|
||
|
||
const totalTeamCount = computed(() => {
|
||
return distributionTeam.value.totalTeamCount ||
|
||
((distributionTeam.value.directCount || 0) + (distributionTeam.value.indirectCount || 0)) ||
|
||
(user.value.invitedCount || 0);
|
||
});
|
||
|
||
const currentTeamList = computed(() => {
|
||
if (teamLevelTab.value === 1) {
|
||
return distributionTeam.value.directList || [];
|
||
}
|
||
return distributionTeam.value.indirectList || [];
|
||
});
|
||
|
||
const handleBack = () => {
|
||
const pages = getCurrentPages();
|
||
if (pages && pages.length > 1) {
|
||
uni.navigateBack();
|
||
} else {
|
||
uni.switchTab({
|
||
url: '/pages/user/index'
|
||
});
|
||
}
|
||
};
|
||
|
||
const copyInviteCode = () => {
|
||
const code = `PW${user.value.id || 2006}`;
|
||
uni.setClipboardData({
|
||
data: code,
|
||
success: () => {
|
||
uni.showToast({ title: '邀请码已复制', icon: 'success' });
|
||
}
|
||
});
|
||
};
|
||
|
||
const copyInviteLink = () => {
|
||
const link = `https://peiww.gynhc.com/invite?code=PW${user.value.id || 2006}`;
|
||
uni.setClipboardData({
|
||
data: link,
|
||
success: () => {
|
||
uni.showToast({ title: '邀请链接已复制', icon: 'success' });
|
||
}
|
||
});
|
||
};
|
||
|
||
const savePosterImage = () => {
|
||
uni.showToast({ title: '海报已保存至相册', icon: 'success' });
|
||
};
|
||
|
||
const handleBindInviteCode = async () => {
|
||
const code = bindCodeInput.value.trim();
|
||
if (!code) {
|
||
uni.showToast({ title: '请输入好友邀请码', icon: 'none' });
|
||
return;
|
||
}
|
||
try {
|
||
const uid = user.value.id || 2006;
|
||
const res = await bindInviteCode(uid, code);
|
||
user.value.inviterId = res.inviterId;
|
||
bindCodeInput.value = '';
|
||
uni.showToast({ title: `成功绑定上级：${res.inviterName || code}`, icon: 'success' });
|
||
loadData();
|
||
} catch (err) {
|
||
uni.showToast({ title: err.message || '绑定失败', icon: 'none' });
|
||
}
|
||
};
|
||
|
||
const handleFillAllCommission = () => {
|
||
const comm = Number(user.value.commission || 0);
|
||
if (comm <= 0) {
|
||
uni.showToast({ title: '当前无可用提现佣金', icon: 'none' });
|
||
return;
|
||
}
|
||
distWithdrawAmount.value = String(comm);
|
||
};
|
||
|
||
const goToWithdrawRecords = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/user/withdraw-records'
|
||
});
|
||
};
|
||
|
||
const submitDistWithdraw = async () => {
|
||
const amount = Number(distWithdrawAmount.value);
|
||
if (!amount || amount <= 0) {
|
||
uni.showToast({ title: '请输入有效提现金额', icon: 'none' });
|
||
return;
|
||
}
|
||
const currentComm = Number(user.value.commission || 0);
|
||
if (amount > currentComm) {
|
||
uni.showToast({ title: '提现金额超出可用佣金', icon: 'none' });
|
||
return;
|
||
}
|
||
submittingDistWithdraw.value = true;
|
||
uni.showLoading({ title: '正在提交申请...' });
|
||
try {
|
||
const uid = user.value.id || 2006;
|
||
await withdrawCommission(uid, amount, { channel: 'WECHAT' });
|
||
user.value.commission = (currentComm - amount).toFixed(2);
|
||
distWithdrawAmount.value = '';
|
||
uni.hideLoading();
|
||
uni.showToast({ title: '提现申请已提交', icon: 'success' });
|
||
await loadData();
|
||
} catch (err) {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: err.message || '提现提交失败', icon: 'none' });
|
||
} finally {
|
||
submittingDistWithdraw.value = false;
|
||
}
|
||
};
|
||
|
||
const loadData = async () => {
|
||
const uid = uni.getStorageSync('userId') || 2006;
|
||
try {
|
||
const [profile, teamData, records] = await Promise.all([
|
||
getUserProfile(uid).catch(() => null),
|
||
getDistributionTeam(uid).catch(() => null),
|
||
getDistributionRecords(uid).catch(() => null)
|
||
]);
|
||
|
||
if (profile) {
|
||
user.value = {
|
||
...user.value,
|
||
...profile
|
||
};
|
||
}
|
||
if (teamData) {
|
||
distributionTeam.value = {
|
||
...distributionTeam.value,
|
||
...teamData
|
||
};
|
||
}
|
||
if (Array.isArray(records) && records.length > 0) {
|
||
distributionRecords.value = records;
|
||
}
|
||
} catch (_) {
|
||
} finally {
|
||
isRefreshing.value = false;
|
||
}
|
||
};
|
||
|
||
const onRefresh = async () => {
|
||
isRefreshing.value = true;
|
||
await loadData();
|
||
};
|
||
|
||
onMounted(() => {
|
||
navInfo.value = getNavBarInfo();
|
||
currentThemeKey.value = getCurrentThemeKey();
|
||
applyThemeToNativeUI(currentThemeKey.value);
|
||
loadData();
|
||
});
|
||
|
||
onShow(() => {
|
||
currentThemeKey.value = getCurrentThemeKey();
|
||
applyThemeToNativeUI(currentThemeKey.value);
|
||
loadData();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.promote-page {
|
||
min-height: 100vh;
|
||
background-color: #0A0F1D;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
/* 顶部沉浸式自定义顶栏 */
|
||
.custom-nav-bar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
padding-top: var(--safe-header-gap, 44px);
|
||
background: rgba(10, 15, 29, 0.92);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
|
||
.nav-content {
|
||
position: relative;
|
||
height: var(--capsule-height, 44px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
|
||
.btn-nav-back {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
|
||
.nav-back-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
|
||
.nav-title-wrap {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
text-align: center;
|
||
|
||
.nav-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
}
|
||
|
||
.nav-capsule-placeholder {
|
||
width: var(--capsule-right-space, 96px);
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 滚动区 */
|
||
.page-scroll-body {
|
||
flex: 1;
|
||
height: 0;
|
||
}
|
||
|
||
.promote-content-body {
|
||
padding: 24rpx 32rpx calc(80rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
/* 1. 顶部佣金总览卡片 */
|
||
.dist-summary-banner {
|
||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
border-radius: 24rpx;
|
||
padding: 32rpx 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 28rpx;
|
||
box-shadow: 0 8rpx 28rpx rgba(0, 0, 0, 0.2);
|
||
|
||
.dist-stat-col {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
|
||
.dist-stat-val {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.dist-stat-lbl {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
}
|
||
|
||
.code-box {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
background: rgba(99, 102, 241, 0.2);
|
||
border: 1px solid rgba(99, 102, 241, 0.4);
|
||
padding: 6rpx 14rpx;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 8rpx;
|
||
|
||
.code-txt {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
color: #818CF8;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.copy-tag {
|
||
font-size: 18rpx;
|
||
color: #F8FAFC;
|
||
background: #6366F1;
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dist-stat-divider {
|
||
width: 1px;
|
||
height: 48rpx;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
}
|
||
|
||
/* 2. 选项卡切换行 */
|
||
.dist-tabs-row {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
margin-bottom: 28rpx;
|
||
background: #151D30;
|
||
padding: 8rpx;
|
||
border-radius: 20rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
||
.dist-tab-pill {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 18rpx 0;
|
||
font-size: 26rpx;
|
||
color: #94A3B8;
|
||
border-radius: 14rpx;
|
||
font-weight: 500;
|
||
transition: all 0.2s;
|
||
|
||
&.active {
|
||
color: #FFFFFF;
|
||
background: linear-gradient(135deg, #6366F1, #8B5CF6);
|
||
font-weight: 700;
|
||
box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.35);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 3. Tab 1: 推广海报 */
|
||
.tab-pane-poster {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.poster-preview-card {
|
||
width: 100%;
|
||
background: linear-gradient(180deg, #151D30 0%, #0D1424 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 24rpx;
|
||
padding: 40rpx 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.3);
|
||
|
||
.poster-badge {
|
||
font-size: 20rpx;
|
||
color: #6366F1;
|
||
background: rgba(99, 102, 241, 0.15);
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
padding: 6rpx 18rpx;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 18rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.poster-hero-title {
|
||
font-size: 34rpx;
|
||
font-weight: 800;
|
||
color: #F8FAFC;
|
||
letter-spacing: 2rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.poster-hero-sub {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
margin-bottom: 36rpx;
|
||
}
|
||
|
||
.suncode-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
|
||
.suncode-ring {
|
||
width: 240rpx;
|
||
height: 240rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx dashed #6366F1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
margin-bottom: 16rpx;
|
||
|
||
.sun-dot {
|
||
position: absolute;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
background: #818CF8;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.suncode-center {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #6366F1;
|
||
overflow: hidden;
|
||
|
||
.suncode-avatar {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.suncode-hint {
|
||
font-size: 22rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
|
||
.poster-footer-code {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 14rpx;
|
||
padding: 12rpx 28rpx;
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 10rpx;
|
||
|
||
.lbl {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
}
|
||
|
||
.val {
|
||
font-size: 28rpx;
|
||
font-weight: 800;
|
||
color: #F59E0B;
|
||
font-family: monospace;
|
||
}
|
||
}
|
||
}
|
||
|
||
.poster-actions-row {
|
||
width: 100%;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
.btn-poster-action {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
border-radius: 44rpx;
|
||
text-align: center;
|
||
margin: 0;
|
||
|
||
&.secondary {
|
||
background: #1E293B;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
color: #94A3B8;
|
||
}
|
||
|
||
&.primary {
|
||
background: linear-gradient(135deg, #6366F1, #8B5CF6);
|
||
color: #FFFFFF;
|
||
box-shadow: 0 8rpx 24rpx rgba(99, 102, 241, 0.4);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 4. Tab 2: 下级团队 */
|
||
.tab-pane-team {
|
||
.team-subtabs {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
margin-bottom: 24rpx;
|
||
|
||
.subtab-item {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
padding: 16rpx 0;
|
||
border-radius: 12rpx;
|
||
color: #94A3B8;
|
||
background: #151D30;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
||
&.active {
|
||
color: #818CF8;
|
||
background: rgba(99, 102, 241, 0.18);
|
||
border-color: rgba(99, 102, 241, 0.4);
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
.team-list-wrap {
|
||
.team-member-row {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #151D30;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 18rpx;
|
||
padding: 22rpx 24rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.m-avatar {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 44rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.m-info {
|
||
flex: 1;
|
||
|
||
.m-top {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
margin-bottom: 6rpx;
|
||
|
||
.m-name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
.m-level-badge {
|
||
font-size: 20rpx;
|
||
color: #818CF8;
|
||
background: rgba(99, 102, 241, 0.15);
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.m-time {
|
||
font-size: 22rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
|
||
.m-contribute {
|
||
text-align: right;
|
||
|
||
.m-val {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
display: block;
|
||
}
|
||
|
||
.m-lbl {
|
||
font-size: 20rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 5. Tab 3: 返佣订单明细 */
|
||
.tab-pane-records {
|
||
.records-list-wrap {
|
||
.record-card {
|
||
background: #151D30;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 18rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 18rpx;
|
||
|
||
.rec-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
.rec-sn {
|
||
font-size: 22rpx;
|
||
color: #64748B;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.rec-status-tag {
|
||
font-size: 20rpx;
|
||
color: #10B981;
|
||
background: rgba(16, 185, 129, 0.12);
|
||
border: 1px solid rgba(16, 185, 129, 0.25);
|
||
padding: 2rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.rec-mid {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
.rec-from {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 12rpx;
|
||
|
||
.rec-name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
.rec-type {
|
||
font-size: 20rpx;
|
||
color: #818CF8;
|
||
}
|
||
}
|
||
|
||
.rec-amount-box {
|
||
text-align: right;
|
||
|
||
.rec-comm {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #F59E0B;
|
||
display: block;
|
||
}
|
||
|
||
.rec-rate {
|
||
font-size: 20rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rec-bot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 22rpx;
|
||
color: #64748B;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||
padding-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 6. Tab 4: 快速佣金提现 */
|
||
.tab-pane-withdraw {
|
||
.dist-wd-box {
|
||
background: #151D30;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 24rpx;
|
||
padding: 32rpx;
|
||
|
||
.wd-box-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
.dist-wd-label {
|
||
font-size: 26rpx;
|
||
color: #94A3B8;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.wd-history-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
|
||
.wd-history-txt {
|
||
font-size: 24rpx;
|
||
color: #6366F1;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.wd-history-arrow {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dist-input-row {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 16rpx;
|
||
padding: 0 20rpx;
|
||
height: 96rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.symbol {
|
||
font-size: 38rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.dist-amount-input {
|
||
flex: 1;
|
||
font-size: 38rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
.btn-all {
|
||
font-size: 24rpx;
|
||
color: #6366F1;
|
||
font-weight: 600;
|
||
padding-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.dist-wd-tip {
|
||
margin-bottom: 32rpx;
|
||
|
||
.tip-txt {
|
||
font-size: 22rpx;
|
||
color: #64748B;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
|
||
.btn-submit-dist-wd {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background: linear-gradient(135deg, #10B981, #059669);
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
border-radius: 44rpx;
|
||
text-align: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.35);
|
||
margin: 0;
|
||
|
||
&[disabled] {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 60rpx 0;
|
||
|
||
.empty-icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
opacity: 0.4;
|
||
margin: 0 auto 16rpx;
|
||
display: block;
|
||
}
|
||
|
||
.empty-txt {
|
||
font-size: 24rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
|
||
/* 暖阳浅色主题 (theme-warm) */
|
||
.promote-page.theme-warm {
|
||
background-color: #FFFDF9;
|
||
color: #1C1917;
|
||
|
||
.custom-nav-bar {
|
||
background: rgba(255, 253, 249, 0.95);
|
||
border-bottom: 1px solid rgba(234, 88, 12, 0.1);
|
||
|
||
.nav-content {
|
||
.btn-nav-back {
|
||
background: #FFF7ED;
|
||
border-color: #FED7AA;
|
||
}
|
||
|
||
.nav-title-wrap .nav-title {
|
||
color: #1C1917;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dist-summary-banner {
|
||
background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
|
||
border-color: #FED7AA;
|
||
box-shadow: 0 8rpx 28rpx rgba(234, 88, 12, 0.08);
|
||
|
||
.dist-stat-col {
|
||
.dist-stat-val {
|
||
color: #EA580C;
|
||
}
|
||
|
||
.dist-stat-lbl {
|
||
color: #78716C;
|
||
}
|
||
|
||
.code-box {
|
||
background: #FFFFFF;
|
||
border-color: #FDBA74;
|
||
|
||
.code-txt {
|
||
color: #EA580C;
|
||
}
|
||
|
||
.copy-tag {
|
||
background: #EA580C;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dist-stat-divider {
|
||
background: #FED7AA;
|
||
}
|
||
}
|
||
|
||
.dist-tabs-row {
|
||
background: #FFFFFF;
|
||
border-color: #FED7AA;
|
||
|
||
.dist-tab-pill {
|
||
color: #78716C;
|
||
|
||
&.active {
|
||
color: #FFFFFF;
|
||
background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
|
||
box-shadow: 0 4rpx 16rpx rgba(234, 88, 12, 0.3);
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-pane-poster {
|
||
.poster-preview-card {
|
||
background: #FFFFFF;
|
||
border-color: #FED7AA;
|
||
box-shadow: 0 10rpx 32rpx rgba(28, 25, 23, 0.06);
|
||
|
||
.poster-badge {
|
||
color: #EA580C;
|
||
background: #FFF7ED;
|
||
border-color: #FDBA74;
|
||
}
|
||
|
||
.poster-hero-title {
|
||
color: #1C1917;
|
||
}
|
||
|
||
.poster-hero-sub {
|
||
color: #78716C;
|
||
}
|
||
|
||
.suncode-box {
|
||
.suncode-ring {
|
||
border-color: #EA580C;
|
||
|
||
.sun-dot {
|
||
background: #F97316;
|
||
}
|
||
|
||
.suncode-center {
|
||
border-color: #EA580C;
|
||
}
|
||
}
|
||
|
||
.suncode-hint {
|
||
color: #78716C;
|
||
}
|
||
}
|
||
|
||
.poster-footer-code {
|
||
background: #FFF7ED;
|
||
border-color: #FED7AA;
|
||
|
||
.lbl {
|
||
color: #78716C;
|
||
}
|
||
|
||
.val {
|
||
color: #EA580C;
|
||
}
|
||
}
|
||
}
|
||
|
||
.poster-actions-row {
|
||
.btn-poster-action {
|
||
&.secondary {
|
||
background: #FFFFFF;
|
||
border-color: #FED7AA;
|
||
color: #78716C;
|
||
}
|
||
|
||
&.primary {
|
||
background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
|
||
box-shadow: 0 8rpx 24rpx rgba(234, 88, 12, 0.35);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-pane-team {
|
||
.team-subtabs {
|
||
.subtab-item {
|
||
background: #FFFFFF;
|
||
border-color: #FED7AA;
|
||
color: #78716C;
|
||
|
||
&.active {
|
||
color: #EA580C;
|
||
background: #FFF7ED;
|
||
border-color: #FDBA74;
|
||
}
|
||
}
|
||
}
|
||
|
||
.team-list-wrap {
|
||
.team-member-row {
|
||
background: #FFFFFF;
|
||
border-color: #FED7AA;
|
||
|
||
.m-info {
|
||
.m-top {
|
||
.m-name {
|
||
color: #1C1917;
|
||
}
|
||
|
||
.m-level-badge {
|
||
color: #EA580C;
|
||
background: #FFF7ED;
|
||
border-color: #FDBA74;
|
||
}
|
||
}
|
||
|
||
.m-time {
|
||
color: #78716C;
|
||
}
|
||
}
|
||
|
||
.m-contribute {
|
||
.m-val {
|
||
color: #059669;
|
||
}
|
||
|
||
.m-lbl {
|
||
color: #78716C;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-pane-records {
|
||
.records-list-wrap {
|
||
.record-card {
|
||
background: #FFFFFF;
|
||
border-color: #FED7AA;
|
||
|
||
.rec-top {
|
||
.rec-sn {
|
||
color: #78716C;
|
||
}
|
||
|
||
.rec-status-tag {
|
||
color: #059669;
|
||
background: #ECFDF5;
|
||
border-color: #A7F3D0;
|
||
}
|
||
}
|
||
|
||
.rec-mid {
|
||
.rec-from {
|
||
.rec-name {
|
||
color: #1C1917;
|
||
}
|
||
|
||
.rec-type {
|
||
color: #EA580C;
|
||
}
|
||
}
|
||
|
||
.rec-amount-box {
|
||
.rec-comm {
|
||
color: #EA580C;
|
||
}
|
||
|
||
.rec-rate {
|
||
color: #78716C;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rec-bot {
|
||
color: #78716C;
|
||
border-top-color: #F5F2EC;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-pane-withdraw {
|
||
.dist-wd-box {
|
||
background: #FFFFFF;
|
||
border-color: #FED7AA;
|
||
|
||
.wd-box-head {
|
||
.dist-wd-label {
|
||
color: #78716C;
|
||
}
|
||
|
||
.wd-history-link {
|
||
.wd-history-txt {
|
||
color: #EA580C;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dist-input-row {
|
||
background: #FFFDF9;
|
||
border-color: #FED7AA;
|
||
|
||
.symbol,
|
||
.dist-amount-input {
|
||
color: #1C1917;
|
||
}
|
||
|
||
.btn-all {
|
||
color: #EA580C;
|
||
}
|
||
}
|
||
|
||
.dist-wd-tip .tip-txt {
|
||
color: #78716C;
|
||
}
|
||
|
||
.btn-submit-dist-wd {
|
||
background: linear-gradient(135deg, #10B981, #059669);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|