1399 行
41 KiB
Vue
1399 行
41 KiB
Vue
<!-- 团队作战管理中心 -->
|
||
<template>
|
||
<s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner">
|
||
<!-- 头部看板区 -->
|
||
<view
|
||
class="header-box"
|
||
:style="[
|
||
{
|
||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
||
},
|
||
]"
|
||
>
|
||
<!-- 推荐人 -->
|
||
<view v-if="userInfo.parent_user" class="referrer-box ss-flex ss-col-center">
|
||
<text class="referrer-label">推荐人：</text>
|
||
<image
|
||
class="referrer-avatar ss-m-r-10"
|
||
:src="sheep.$url.cdn(userInfo.parent_user.avatar)"
|
||
mode="aspectFill"
|
||
></image>
|
||
<text class="referrer-name">{{ userInfo.parent_user.nickname }}</text>
|
||
</view>
|
||
|
||
<!-- 团队核心数据总览卡片 -->
|
||
<view class="team-data-box ss-flex ss-col-center ss-row-between">
|
||
<!-- 团队总人数卡片 -->
|
||
<view
|
||
class="data-card"
|
||
:class="{ 'card-active': state.currentFilter === 'all' && state.currentLevelTab === 'all' }"
|
||
@tap="onSelectHeaderTab('all', 'all')"
|
||
>
|
||
<view class="total-item">
|
||
<view class="item-title">团队总人数（人）</view>
|
||
<view class="total-num">{{ headerNum('child_user_count_all') }}</view>
|
||
</view>
|
||
<view class="category-item ss-flex">
|
||
<view
|
||
class="ss-flex-1 sub-tab-item"
|
||
:class="{ 'sub-active': state.currentLevelTab === '1' && state.currentFilter !== 'partner' }"
|
||
@tap.stop="onSelectHeaderTab('1', 'all')"
|
||
>
|
||
<view class="item-title">一级直推</view>
|
||
<view class="category-num">{{ headerNum('child_user_count_1') }}</view>
|
||
</view>
|
||
<view
|
||
class="ss-flex-1 sub-tab-item"
|
||
:class="{ 'sub-active': state.currentLevelTab === '2' && state.currentFilter !== 'partner' }"
|
||
@tap.stop="onSelectHeaderTab('2', 'all')"
|
||
>
|
||
<view class="item-title">二级间推</view>
|
||
<view class="category-num">{{ headerNum('child_user_count_2') }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 团队合伙股东人数卡片 -->
|
||
<view
|
||
class="data-card"
|
||
:class="{ 'card-active': state.currentFilter === 'partner' }"
|
||
@tap="onSelectHeaderTab('all', 'partner')"
|
||
>
|
||
<view class="total-item">
|
||
<view class="item-title">合伙股东总数（人）</view>
|
||
<view class="total-num text-gold">{{ headerNum('child_agent_count_all') }}</view>
|
||
</view>
|
||
<view class="category-item ss-flex">
|
||
<view
|
||
class="ss-flex-1 sub-tab-item"
|
||
:class="{ 'sub-active': state.currentFilter === 'partner' && state.currentLevelTab === '1' }"
|
||
@tap.stop="onSelectHeaderTab('1', 'partner')"
|
||
>
|
||
<view class="item-title">一级合伙</view>
|
||
<view class="category-num text-gold">{{ headerNum('child_agent_count_1') }}</view>
|
||
</view>
|
||
<view
|
||
class="ss-flex-1 sub-tab-item"
|
||
:class="{ 'sub-active': state.currentFilter === 'partner' && state.currentLevelTab === '2' }"
|
||
@tap.stop="onSelectHeaderTab('2', 'partner')"
|
||
>
|
||
<view class="item-title">二级合伙</view>
|
||
<view class="category-num text-gold">{{ headerNum('child_agent_count_2') }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 30天自购保活健康度胶囊条 -->
|
||
<view class="health-bar ss-flex ss-row-between ss-col-center">
|
||
<view class="health-title">保活健康度：</view>
|
||
<view class="health-pills ss-flex ss-col-center">
|
||
<view
|
||
class="health-pill pill-active"
|
||
:class="{ 'pill-selected': state.currentFilter === 'active' }"
|
||
@tap="onToggleStatusFilter('active')"
|
||
>
|
||
<text class="status-dot dot-green"></text>
|
||
<text class="pill-label">正常活跃 {{ state.summary.active_count || 0 }}</text>
|
||
</view>
|
||
<view
|
||
class="health-pill pill-expiring"
|
||
:class="{ 'pill-selected': state.currentFilter === 'expiring' }"
|
||
@tap="onToggleStatusFilter('expiring')"
|
||
>
|
||
<text class="status-dot dot-yellow"></text>
|
||
<text class="pill-label">临期预警 {{ state.summary.expiring_count || 0 }}</text>
|
||
</view>
|
||
<view
|
||
class="health-pill pill-inactive"
|
||
:class="{ 'pill-selected': state.currentFilter === 'inactive' }"
|
||
@tap="onToggleStatusFilter('inactive')"
|
||
>
|
||
<text class="status-dot dot-gray"></text>
|
||
<text class="pill-label">已暂停 {{ state.summary.inactive_count || 0 }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 吸顶控制台（搜索 + 层级Tab + 快捷筛选） -->
|
||
<su-sticky bgColor="#ffffff">
|
||
<view class="control-panel">
|
||
<!-- 搜索输入栏 -->
|
||
<view class="search-bar-box ss-flex ss-col-center">
|
||
<view class="search-input-wrap ss-flex ss-col-center ss-flex-1">
|
||
<uni-icons type="search" size="18" color="#999999"></uni-icons>
|
||
<input
|
||
class="search-input"
|
||
type="text"
|
||
v-model="state.keyword"
|
||
confirm-type="search"
|
||
placeholder="搜索成员昵称 / 手机号 / ID"
|
||
placeholder-class="search-placeholder"
|
||
@confirm="onSearchConfirm"
|
||
/>
|
||
<view v-if="state.keyword" class="clear-btn" @tap="onClearKeyword">
|
||
<uni-icons type="clear" size="16" color="#bbbbbb"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<button class="ss-reset-button search-btn" @tap="onSearchConfirm">搜索</button>
|
||
</view>
|
||
|
||
<!-- 层级 Tab 切换栏 -->
|
||
<view class="level-tabs ss-flex">
|
||
<view
|
||
v-for="tab in levelTabs"
|
||
:key="tab.value"
|
||
class="level-tab-item ss-flex-1"
|
||
:class="{ 'level-tab-active': state.currentLevelTab === tab.value }"
|
||
@tap="onLevelTabChange(tab.value)"
|
||
>
|
||
{{ tab.name }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 快捷多维胶囊筛选条 -->
|
||
<scroll-view class="filter-scroll-wrap" scroll-x :show-scrollbar="false">
|
||
<view class="filter-scroll-content ss-flex ss-col-center">
|
||
<view
|
||
v-for="pill in filterPills"
|
||
:key="pill.value"
|
||
class="filter-chip"
|
||
:class="{ 'chip-active': state.currentFilter === pill.value && state.currentSort === 'createtime' }"
|
||
@tap="onFilterChipChange(pill.value)"
|
||
>
|
||
{{ pill.label }}
|
||
</view>
|
||
<view class="chip-divider"></view>
|
||
<view
|
||
v-for="sortItem in sortOptions"
|
||
:key="sortItem.value"
|
||
class="filter-chip sort-chip"
|
||
:class="{ 'chip-active': state.currentSort === sortItem.value }"
|
||
@tap="onSortOptionChange(sortItem.value)"
|
||
>
|
||
{{ sortItem.label }}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</su-sticky>
|
||
|
||
<!-- 成员卡片列表 -->
|
||
<view class="member-list-box ss-p-t-20">
|
||
<view
|
||
v-for="item in state.pagination.data"
|
||
:key="item.id"
|
||
class="member-card"
|
||
@tap="onOpenMemberDetail(item)"
|
||
>
|
||
<!-- 成员卡片头部 -->
|
||
<view class="member-card-header ss-flex ss-col-center ss-row-between">
|
||
<view class="member-base ss-flex ss-col-center">
|
||
<image
|
||
class="member-avatar"
|
||
:src="sheep.$url.cdn(item.avatar)"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="member-profile ss-m-l-16">
|
||
<view class="member-name-row ss-flex ss-col-center">
|
||
<text class="member-name ss-line-1">{{ item.nickname || '微信用户' }}</text>
|
||
<text
|
||
class="level-badge"
|
||
:class="item.team_level === 1 ? 'badge-direct' : 'badge-indirect'"
|
||
>
|
||
{{ item.team_level === 1 ? '一级直推' : '二级间推' }}
|
||
</text>
|
||
</view>
|
||
<view class="member-meta-row ss-flex ss-col-center ss-m-t-8">
|
||
<!-- 身份徽章 -->
|
||
<view v-if="memberLevelName(item)" class="tag-box ss-flex ss-col-center">
|
||
<image
|
||
v-if="item.agent?.level_info?.image"
|
||
class="tag-img"
|
||
:src="sheep.$url.cdn(item.agent.level_info.image)"
|
||
mode="aspectFill"
|
||
></image>
|
||
<text class="tag-title">{{ memberLevelName(item) }}</text>
|
||
</view>
|
||
<view
|
||
v-if="item.agent?.is_venue || item.agent?.identities?.includes('venue')"
|
||
class="mini-tag tag-venue"
|
||
>
|
||
酒道馆
|
||
</view>
|
||
<view
|
||
v-if="item.agent?.is_county || item.agent?.identities?.includes('county')"
|
||
class="mini-tag tag-county"
|
||
>
|
||
区县代理
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 活跃状态指示灯 -->
|
||
<view class="status-indicator">
|
||
<view v-if="item.active_status === 'active'" class="status-pill pill-green">
|
||
<text class="status-dot dot-green"></text>
|
||
<text>活跃中</text>
|
||
</view>
|
||
<view v-else-if="item.active_status === 'expiring'" class="status-pill pill-amber">
|
||
<text class="status-dot dot-yellow"></text>
|
||
<text>剩 {{ item.days_remaining }} 天</text>
|
||
</view>
|
||
<view v-else class="status-pill pill-gray">
|
||
<text class="status-dot dot-gray"></text>
|
||
<text>奖励已暂停</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 间推成员归属信息条 -->
|
||
<view
|
||
v-if="item.team_level === 2 && item.parent_user"
|
||
class="referral-trace-bar ss-flex ss-col-center ss-m-t-16"
|
||
>
|
||
<text class="trace-label">所属推荐人：</text>
|
||
<image
|
||
class="trace-avatar ss-m-r-8"
|
||
:src="sheep.$url.cdn(item.parent_user.avatar)"
|
||
mode="aspectFill"
|
||
></image>
|
||
<text class="trace-name">{{ item.parent_user.nickname }}（直推一级）</text>
|
||
</view>
|
||
|
||
<!-- 经营指标看板 -->
|
||
<view class="metrics-grid ss-flex ss-col-center ss-row-between ss-m-t-20">
|
||
<view class="metric-col ss-flex-col ss-col-center">
|
||
<view class="metric-val">{{ item.child_user_count_1 || 0 }}</view>
|
||
<view class="metric-lbl">推荐好友(人)</view>
|
||
</view>
|
||
<view class="metric-divider"></view>
|
||
<view class="metric-col ss-flex-col ss-col-center">
|
||
<view class="metric-val">{{ item.order_count || 0 }}</view>
|
||
<view class="metric-lbl">累计订单(单)</view>
|
||
</view>
|
||
<view class="metric-divider"></view>
|
||
<view class="metric-col ss-flex-col ss-col-center">
|
||
<view class="metric-val">¥{{ item.consume_amount || '0.00' }}</view>
|
||
<view class="metric-lbl">自购业绩(元)</view>
|
||
</view>
|
||
<view class="metric-divider"></view>
|
||
<view class="metric-col ss-flex-col ss-col-center">
|
||
<view class="metric-val">
|
||
{{ item.agent?.direct_order_seq !== undefined ? '第' + item.agent.direct_order_seq + '单' : '--' }}
|
||
</view>
|
||
<view class="metric-lbl">开拓循环序号</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部快捷触达与操作栏 -->
|
||
<view class="member-card-footer ss-flex ss-col-center ss-row-between ss-m-t-20">
|
||
<view class="register-time">
|
||
注册时间：{{ formatTime(item.createtime) }}
|
||
</view>
|
||
<view class="actions-wrap ss-flex ss-col-center">
|
||
<button
|
||
v-if="item.mobile_raw"
|
||
class="ss-reset-button action-btn btn-call"
|
||
@tap.stop="onMakePhoneCall(item.mobile_raw)"
|
||
>
|
||
<uni-icons type="phone-filled" size="14" color="#ff6000"></uni-icons>
|
||
<text class="ss-m-l-6">拨打</text>
|
||
</button>
|
||
<button
|
||
v-if="item.mobile_raw"
|
||
class="ss-reset-button action-btn btn-copy ss-m-l-12"
|
||
@tap.stop="onCopyText(item.mobile_raw, '手机号已复制')"
|
||
>
|
||
<uni-icons type="paperclip" size="14" color="#666666"></uni-icons>
|
||
<text class="ss-m-l-6">复制手机</text>
|
||
</button>
|
||
<button
|
||
class="ss-reset-button action-btn btn-detail ss-m-l-12"
|
||
@tap.stop="onOpenMemberDetail(item)"
|
||
>
|
||
<text>详情</text>
|
||
<uni-icons type="right" size="12" color="#999999"></uni-icons>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态处理与行动引导 -->
|
||
<view v-if="state.pagination.total === 0 && state.loadStatus !== 'loading'" class="empty-wrap">
|
||
<!-- 搜索或筛选结果为空 -->
|
||
<view v-if="state.keyword || state.currentFilter !== 'all' || state.currentLevelTab !== 'all'" class="filter-empty ss-flex-col ss-col-center">
|
||
<s-empty icon="/static/data-empty.png" text="未找到符合条件的成员"></s-empty>
|
||
<button class="ss-reset-button reset-filter-btn ss-m-t-20" @tap="resetFilters">
|
||
重置所有筛选
|
||
</button>
|
||
</view>
|
||
<!-- 真实无团队成员空状态：引导裂变海报 -->
|
||
<view v-else class="team-empty ss-flex-col ss-col-center ss-p-b-60">
|
||
<s-empty icon="/static/data-empty.png" text="您还没有团队成员，快去邀请好友加入吧！"></s-empty>
|
||
<button class="ss-reset-button invite-cta-btn ss-m-t-30" @tap="onOpenShareModal">
|
||
<text class="cicon-forward ss-m-r-10"></text>
|
||
立即生成邀请海报
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载更多指示器 -->
|
||
<uni-load-more
|
||
v-if="state.pagination.total > 0"
|
||
:status="state.loadStatus"
|
||
:content-text="{
|
||
contentdown: '上拉加载更多',
|
||
contentrefresh: '正在加载...',
|
||
nomore: '没有更多成员了',
|
||
}"
|
||
/>
|
||
|
||
<!-- 成员画像与经营管理抽屉 -->
|
||
<su-popup
|
||
:show="state.showDetail"
|
||
type="bottom"
|
||
round="24"
|
||
@close="state.showDetail = false"
|
||
showClose
|
||
>
|
||
<view v-if="state.currentMember" class="drawer-content ss-p-x-32 ss-p-b-40 ss-p-t-30">
|
||
<view class="drawer-header ss-flex ss-col-center ss-m-b-24">
|
||
<image
|
||
class="drawer-avatar ss-m-r-20"
|
||
:src="sheep.$url.cdn(state.currentMember.avatar)"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="drawer-user-info">
|
||
<view class="drawer-nickname ss-flex ss-col-center">
|
||
<text class="ss-font-32 ss-bold ss-m-r-12">{{ state.currentMember.nickname }}</text>
|
||
<text
|
||
class="level-badge"
|
||
:class="state.currentMember.team_level === 1 ? 'badge-direct' : 'badge-indirect'"
|
||
>
|
||
{{ state.currentMember.team_level === 1 ? '直推一级' : '间推二级' }}
|
||
</text>
|
||
</view>
|
||
<view class="drawer-sub ss-flex ss-col-center ss-m-t-8">
|
||
<text class="user-id">ID: {{ state.currentMember.id }}</text>
|
||
<text class="dot-split">·</text>
|
||
<text class="join-time">{{ formatTime(state.currentMember.createtime) }} 加入</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 身份体系卡 -->
|
||
<view class="drawer-section ss-m-b-24">
|
||
<view class="section-title">业务身份</view>
|
||
<view class="section-box identity-box ss-flex ss-col-center ss-flex-wrap">
|
||
<view class="id-pill tag-box ss-flex ss-col-center ss-m-r-12 ss-m-b-10">
|
||
<image
|
||
v-if="state.currentMember.agent?.level_info?.image"
|
||
class="tag-img"
|
||
:src="sheep.$url.cdn(state.currentMember.agent.level_info.image)"
|
||
mode="aspectFill"
|
||
></image>
|
||
<text class="tag-title">{{ memberLevelName(state.currentMember) || '普通会员' }}</text>
|
||
</view>
|
||
<view
|
||
v-if="state.currentMember.agent?.is_venue || state.currentMember.agent?.identities?.includes('venue')"
|
||
class="id-pill mini-tag tag-venue ss-m-r-12 ss-m-b-10"
|
||
>
|
||
酒道馆
|
||
</view>
|
||
<view
|
||
v-if="state.currentMember.agent?.is_county || state.currentMember.agent?.identities?.includes('county')"
|
||
class="id-pill mini-tag tag-county ss-m-r-12 ss-m-b-10"
|
||
>
|
||
区县代理
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 30天自购保活详情 -->
|
||
<view class="drawer-section ss-m-b-24">
|
||
<view class="section-title ss-flex ss-row-between ss-col-center">
|
||
<text>30天自购保活状态</text>
|
||
<text
|
||
class="status-text-bold"
|
||
:class="{
|
||
'text-green': state.currentMember.active_status === 'active',
|
||
'text-yellow': state.currentMember.active_status === 'expiring',
|
||
'text-gray': state.currentMember.active_status === 'inactive',
|
||
}"
|
||
>
|
||
{{
|
||
state.currentMember.active_status === 'active'
|
||
? '正常领取中'
|
||
: state.currentMember.active_status === 'expiring'
|
||
? '临期预警（剩' + state.currentMember.days_remaining + '天）'
|
||
: '业务奖励已暂停'
|
||
}}
|
||
</text>
|
||
</view>
|
||
<view class="section-box active-detail-box">
|
||
<view class="detail-line ss-flex ss-row-between">
|
||
<text class="line-label">最近本人下单时间：</text>
|
||
<text class="line-val">
|
||
{{ formatLastOrderTime(state.currentMember.agent?.last_self_order_time) }}
|
||
</text>
|
||
</view>
|
||
<view class="detail-line ss-flex ss-row-between ss-m-t-12">
|
||
<text class="line-label">推荐开拓序号：</text>
|
||
<text class="line-val">
|
||
{{ state.currentMember.agent?.direct_order_seq !== undefined ? '当前第 ' + state.currentMember.agent.direct_order_seq + ' 单' : '0 单' }}
|
||
</text>
|
||
</view>
|
||
<view class="notice-tip ss-m-t-16">
|
||
💡 规则提示：近 30 日内需有本人订单方可正常享受收益。如已暂停，次日完成自购后即可自动恢复。
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 经营产出看板 -->
|
||
<view class="drawer-section ss-m-b-30">
|
||
<view class="section-title">团队与业绩产出</view>
|
||
<view class="section-box performance-box ss-flex ss-row-between">
|
||
<view class="perf-col ss-flex-col ss-col-center">
|
||
<view class="perf-num">{{ state.currentMember.child_user_count_1 || 0 }}</view>
|
||
<view class="perf-lbl">直推下级(人)</view>
|
||
</view>
|
||
<view class="perf-col ss-flex-col ss-col-center">
|
||
<view class="perf-num">{{ state.currentMember.order_count || 0 }}</view>
|
||
<view class="perf-lbl">累计成单(笔)</view>
|
||
</view>
|
||
<view class="perf-col ss-flex-col ss-col-center">
|
||
<view class="perf-num">¥{{ state.currentMember.consume_amount || '0.00' }}</view>
|
||
<view class="perf-lbl">自购贡献(元)</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 触达与管理动作条 -->
|
||
<view class="drawer-actions ss-flex ss-col-center ss-row-between">
|
||
<button
|
||
v-if="state.currentMember.mobile_raw"
|
||
class="ss-reset-button drawer-btn drawer-btn-primary ss-flex-1 ss-m-r-16"
|
||
@tap="onMakePhoneCall(state.currentMember.mobile_raw)"
|
||
>
|
||
<uni-icons type="phone-filled" size="16" color="#ffffff"></uni-icons>
|
||
<text class="ss-m-l-8">呼叫成员</text>
|
||
</button>
|
||
<button
|
||
v-if="state.currentMember.mobile_raw"
|
||
class="ss-reset-button drawer-btn drawer-btn-sub ss-flex-1 ss-m-r-16"
|
||
@tap="onCopyText(state.currentMember.mobile_raw, '手机号已复制')"
|
||
>
|
||
<uni-icons type="paperclip" size="16" color="#ff6000"></uni-icons>
|
||
<text class="ss-m-l-8">复制电话</text>
|
||
</button>
|
||
<button
|
||
class="ss-reset-button drawer-btn drawer-btn-outline ss-flex-1"
|
||
@tap="onJumpRewards(state.currentMember.id)"
|
||
>
|
||
<uni-icons type="list" size="16" color="#666666"></uni-icons>
|
||
<text class="ss-m-l-8">查收益流水</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</su-popup>
|
||
</s-layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import sheep from '@/sheep';
|
||
import { onLoad, onShow, onReachBottom, onPullDownRefresh, onPageScroll } from '@dcloudio/uni-app';
|
||
import { computed, reactive } from 'vue';
|
||
import { showShareModal } from '@/sheep/hooks/useModal';
|
||
import _ from 'lodash';
|
||
|
||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||
const agentInfo = computed(() => sheep.$store('user').agentInfo);
|
||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||
const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/user/withdraw_bg.png');
|
||
|
||
// 控制吸顶及页面滚动
|
||
onPageScroll((e) => {
|
||
state.scrollTop = e.scrollTop > 100;
|
||
});
|
||
|
||
const levelTabs = [
|
||
{ name: '全部成员', value: 'all' },
|
||
{ name: '一级直推', value: '1' },
|
||
{ name: '二级间推', value: '2' },
|
||
];
|
||
|
||
const filterPills = [
|
||
{ label: '全部', value: 'all' },
|
||
{ label: '合伙股东', value: 'partner' },
|
||
{ label: '正常活跃', value: 'active' },
|
||
{ label: '临期预警', value: 'expiring' },
|
||
{ label: '已暂停', value: 'inactive' },
|
||
];
|
||
|
||
const sortOptions = [
|
||
{ label: '最新加入', value: 'createtime' },
|
||
{ label: '裂变最多', value: 'child_count' },
|
||
{ label: '消费最高', value: 'consume' },
|
||
];
|
||
|
||
const state = reactive({
|
||
scrollTop: false,
|
||
keyword: '',
|
||
currentLevelTab: 'all', // all, '1', '2'
|
||
currentFilter: 'all', // all, partner, active, expiring, inactive
|
||
currentSort: 'createtime', // createtime, child_count, consume
|
||
showDetail: false,
|
||
currentMember: null,
|
||
summary: {
|
||
total_count: 0,
|
||
active_count: 0,
|
||
expiring_count: 0,
|
||
inactive_count: 0,
|
||
partner_count: 0,
|
||
},
|
||
pagination: {
|
||
data: [],
|
||
current_page: 1,
|
||
total: 0,
|
||
last_page: 1,
|
||
},
|
||
loadStatus: '',
|
||
});
|
||
|
||
function headerNum(field) {
|
||
const stored = Number(agentInfo.value?.[field] || 0);
|
||
if (stored > 0) {
|
||
return stored;
|
||
}
|
||
const listTotal = Number(state.pagination.total || 0);
|
||
if (
|
||
listTotal > 0 &&
|
||
['child_user_count_1', 'child_user_count_all', 'child_agent_count_1', 'child_agent_count_all'].includes(field)
|
||
) {
|
||
return listTotal;
|
||
}
|
||
return 0;
|
||
}
|
||
|
||
function memberLevelName(item) {
|
||
return (
|
||
item?.agent?.level_info?.name ||
|
||
item?.agent?.maker_level_name ||
|
||
item?.agent?.identity_text ||
|
||
''
|
||
);
|
||
}
|
||
|
||
function formatTime(timestamp) {
|
||
if (!timestamp) return '--';
|
||
const date = new Date(Number(timestamp) * 1000);
|
||
const y = date.getFullYear();
|
||
const m = String(date.getMonth() + 1).padStart(2, '0');
|
||
const d = String(date.getDate()).padStart(2, '0');
|
||
return `${y}-${m}-${d}`;
|
||
}
|
||
|
||
function formatLastOrderTime(timestamp) {
|
||
if (!timestamp || Number(timestamp) === 0) {
|
||
return '近 30 日内暂无本人自购记录';
|
||
}
|
||
const date = new Date(Number(timestamp) * 1000);
|
||
const y = date.getFullYear();
|
||
const m = String(date.getMonth() + 1).padStart(2, '0');
|
||
const d = String(date.getDate()).padStart(2, '0');
|
||
const h = String(date.getHours()).padStart(2, '0');
|
||
const min = String(date.getMinutes()).padStart(2, '0');
|
||
return `${y}-${m}-${d} ${h}:${min}`;
|
||
}
|
||
|
||
// 头部卡片联动
|
||
function onSelectHeaderTab(level, filter) {
|
||
state.currentLevelTab = level;
|
||
state.currentFilter = filter;
|
||
state.currentSort = 'createtime';
|
||
getTeamList(1);
|
||
}
|
||
|
||
// 状态胶囊切换
|
||
function onToggleStatusFilter(status) {
|
||
if (state.currentFilter === status) {
|
||
state.currentFilter = 'all';
|
||
} else {
|
||
state.currentFilter = status;
|
||
}
|
||
getTeamList(1);
|
||
}
|
||
|
||
// 层级Tab切换
|
||
function onLevelTabChange(level) {
|
||
if (state.currentLevelTab === level) return;
|
||
state.currentLevelTab = level;
|
||
getTeamList(1);
|
||
}
|
||
|
||
// 筛选胶囊切换
|
||
function onFilterChipChange(filter) {
|
||
if (state.currentFilter === filter && state.currentSort === 'createtime') return;
|
||
state.currentFilter = filter;
|
||
state.currentSort = 'createtime';
|
||
getTeamList(1);
|
||
}
|
||
|
||
// 排序切换
|
||
function onSortOptionChange(sort) {
|
||
if (state.currentSort === sort) return;
|
||
state.currentSort = sort;
|
||
getTeamList(1);
|
||
}
|
||
|
||
// 搜索处理
|
||
function onSearchConfirm() {
|
||
getTeamList(1);
|
||
}
|
||
|
||
function onClearKeyword() {
|
||
state.keyword = '';
|
||
getTeamList(1);
|
||
}
|
||
|
||
function resetFilters() {
|
||
state.keyword = '';
|
||
state.currentLevelTab = 'all';
|
||
state.currentFilter = 'all';
|
||
state.currentSort = 'createtime';
|
||
getTeamList(1);
|
||
}
|
||
|
||
// 触达动作
|
||
function onMakePhoneCall(phone) {
|
||
if (!phone) {
|
||
sheep.$helper.toast('未提供联系电话');
|
||
return;
|
||
}
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone,
|
||
fail: () => {
|
||
sheep.$helper.toast('取消拨打');
|
||
},
|
||
});
|
||
}
|
||
|
||
function onCopyText(text, tip = '已复制') {
|
||
if (!text) return;
|
||
sheep.$helper.copyText(text);
|
||
}
|
||
|
||
function onOpenMemberDetail(item) {
|
||
state.currentMember = item;
|
||
state.showDetail = true;
|
||
}
|
||
|
||
function onJumpRewards(buyerId) {
|
||
state.showDetail = false;
|
||
sheep.$router.go(`/pages/commission/rewards?buyer_id=${buyerId}`);
|
||
}
|
||
|
||
function onOpenShareModal() {
|
||
showShareModal();
|
||
}
|
||
|
||
// 列表数据请求
|
||
async function getTeamList(page = 1, list_rows = 10) {
|
||
state.loadStatus = 'loading';
|
||
const params = {
|
||
page,
|
||
list_rows,
|
||
level_type: state.currentLevelTab,
|
||
filter_type: state.currentFilter,
|
||
sort: state.currentSort,
|
||
keyword: state.keyword,
|
||
};
|
||
let res = await sheep.$api.commission.team(params);
|
||
if (res.code === 1) {
|
||
const rows = res.data?.data || [];
|
||
state.pagination = {
|
||
...res.data,
|
||
data: page === 1 ? rows : _.concat(state.pagination.data, rows),
|
||
};
|
||
if (res.data?.summary) {
|
||
state.summary = res.data.summary;
|
||
}
|
||
if (state.pagination.current_page < state.pagination.last_page) {
|
||
state.loadStatus = 'more';
|
||
} else {
|
||
state.loadStatus = 'noMore';
|
||
}
|
||
} else {
|
||
state.loadStatus = 'noMore';
|
||
}
|
||
}
|
||
|
||
async function refreshHeader() {
|
||
await Promise.all([sheep.$store('user').getAgentInfo(), sheep.$store('user').getInfo()]);
|
||
}
|
||
|
||
async function refreshPage() {
|
||
await Promise.all([refreshHeader(), getTeamList(1)]);
|
||
}
|
||
|
||
onLoad(() => {
|
||
refreshPage();
|
||
});
|
||
|
||
onShow(() => {
|
||
refreshHeader();
|
||
});
|
||
|
||
onPullDownRefresh(async () => {
|
||
await refreshPage();
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
|
||
onReachBottom(() => {
|
||
if (state.loadStatus !== 'noMore') {
|
||
getTeamList(state.pagination.current_page + 1);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.header-box {
|
||
box-sizing: border-box;
|
||
padding: 0 20rpx 24rpx 20rpx;
|
||
width: 750rpx;
|
||
z-index: 3;
|
||
position: relative;
|
||
background: v-bind(headerBg) no-repeat,
|
||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||
background-size: 750rpx 100%;
|
||
|
||
// 推荐人
|
||
.referrer-box {
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
padding: 10rpx 8rpx 20rpx 8rpx;
|
||
|
||
.referrer-avatar {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.6);
|
||
}
|
||
.referrer-name {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
// 团队信息总览
|
||
.team-data-box {
|
||
.data-card {
|
||
width: 340rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx 22rpx;
|
||
box-sizing: border-box;
|
||
border: 2rpx solid transparent;
|
||
transition: all 0.2s;
|
||
|
||
&.card-active {
|
||
border-color: #ff6000;
|
||
box-shadow: 0 4rpx 16rpx rgba(255, 96, 0, 0.15);
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
color: #999999;
|
||
line-height: 30rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.total-item {
|
||
margin-bottom: 22rpx;
|
||
}
|
||
|
||
.total-num {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
font-family: OPPOSANS;
|
||
line-height: 44rpx;
|
||
}
|
||
|
||
.text-gold {
|
||
color: #c48a3a !important;
|
||
}
|
||
|
||
.category-item {
|
||
border-top: 1rpx solid #f2f2f2;
|
||
padding-top: 14rpx;
|
||
|
||
.sub-tab-item {
|
||
padding: 4rpx 8rpx;
|
||
border-radius: 8rpx;
|
||
transition: all 0.2s;
|
||
|
||
&.sub-active {
|
||
background: #fff5eb;
|
||
.item-title {
|
||
color: #ff6000;
|
||
font-weight: bold;
|
||
}
|
||
.category-num {
|
||
color: #ff6000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.category-num {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
font-family: OPPOSANS;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 健康度胶囊条
|
||
.health-bar {
|
||
margin-top: 20rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 36rpx;
|
||
padding: 10rpx 18rpx;
|
||
|
||
.health-title {
|
||
font-size: 22rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.health-pills {
|
||
gap: 10rpx;
|
||
|
||
.health-pill {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 6rpx 14rpx;
|
||
border-radius: 20rpx;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
font-size: 20rpx;
|
||
line-height: 22rpx;
|
||
color: #444444;
|
||
transition: all 0.2s;
|
||
|
||
&.pill-selected {
|
||
background: #ffffff;
|
||
font-weight: bold;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
|
||
transform: scale(1.04);
|
||
}
|
||
|
||
.pill-label {
|
||
margin-left: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 状态圆点
|
||
.status-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
|
||
&.dot-green {
|
||
background: #10b981;
|
||
box-shadow: 0 0 6rpx #10b981;
|
||
}
|
||
&.dot-yellow {
|
||
background: #f59e0b;
|
||
box-shadow: 0 0 6rpx #f59e0b;
|
||
}
|
||
&.dot-gray {
|
||
background: #9ca3af;
|
||
}
|
||
}
|
||
|
||
// 控制台
|
||
.control-panel {
|
||
background: #ffffff;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
|
||
// 搜索框
|
||
.search-bar-box {
|
||
padding: 18rpx 24rpx 12rpx 24rpx;
|
||
|
||
.search-input-wrap {
|
||
background: #f5f5f7;
|
||
border-radius: 32rpx;
|
||
height: 64rpx;
|
||
padding: 0 20rpx;
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
margin-left: 12rpx;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.search-placeholder {
|
||
color: #a0a0a0;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.clear-btn {
|
||
padding: 8rpx;
|
||
}
|
||
}
|
||
|
||
.search-btn {
|
||
margin-left: 16rpx;
|
||
font-size: 26rpx;
|
||
color: #ff6000;
|
||
font-weight: 500;
|
||
padding: 8rpx 12rpx;
|
||
}
|
||
}
|
||
|
||
// 层级 Tab
|
||
.level-tabs {
|
||
border-bottom: 1rpx solid #f2f2f2;
|
||
|
||
.level-tab-item {
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
color: #666666;
|
||
padding: 18rpx 0;
|
||
position: relative;
|
||
|
||
&.level-tab-active {
|
||
color: #ff6000;
|
||
font-weight: bold;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 48rpx;
|
||
height: 4rpx;
|
||
background: #ff6000;
|
||
border-radius: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 筛选滚动条
|
||
.filter-scroll-wrap {
|
||
white-space: nowrap;
|
||
padding: 14rpx 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.filter-scroll-content {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.filter-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 8rpx 20rpx;
|
||
background: #f5f5f7;
|
||
border-radius: 24rpx;
|
||
font-size: 22rpx;
|
||
color: #666666;
|
||
transition: all 0.2s;
|
||
|
||
&.chip-active {
|
||
background: #fff0e6;
|
||
color: #ff6000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
&.sort-chip {
|
||
background: #f0f4f8;
|
||
color: #4a5568;
|
||
|
||
&.chip-active {
|
||
background: #e2e8f0;
|
||
color: #1a202c;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chip-divider {
|
||
width: 1rpx;
|
||
height: 28rpx;
|
||
background: #e2e8f0;
|
||
margin: 0 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 成员卡片列表
|
||
.member-list-box {
|
||
padding: 20rpx;
|
||
|
||
.member-card {
|
||
background: #ffffff;
|
||
border-radius: 18rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.03);
|
||
position: relative;
|
||
|
||
.member-card-header {
|
||
.member-avatar {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #ffefe0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.member-name-row {
|
||
.member-name {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
max-width: 220rpx;
|
||
}
|
||
|
||
.level-badge {
|
||
margin-left: 10rpx;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 20rpx;
|
||
line-height: 28rpx;
|
||
|
||
&.badge-direct {
|
||
background: #fff3e0;
|
||
color: #ff6f00;
|
||
}
|
||
&.badge-indirect {
|
||
background: #e0f2fe;
|
||
color: #0284c7;
|
||
}
|
||
}
|
||
}
|
||
|
||
.member-meta-row {
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.status-pill {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
|
||
&.pill-green {
|
||
background: #ecfdf5;
|
||
color: #059669;
|
||
border: 1rpx solid #a7f3d0;
|
||
}
|
||
&.pill-amber {
|
||
background: #fffbeb;
|
||
color: #d97706;
|
||
border: 1rpx solid #fde68a;
|
||
}
|
||
&.pill-gray {
|
||
background: #f3f4f6;
|
||
color: #6b7280;
|
||
border: 1rpx solid #e5e7eb;
|
||
}
|
||
|
||
text:last-child {
|
||
margin-left: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 间推推荐人轨迹条
|
||
.referral-trace-bar {
|
||
background: #f9fafb;
|
||
border-radius: 10rpx;
|
||
padding: 8rpx 14rpx;
|
||
font-size: 22rpx;
|
||
color: #6b7280;
|
||
|
||
.trace-avatar {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.trace-name {
|
||
color: #374151;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
// 指标网格
|
||
.metrics-grid {
|
||
background: #fafafc;
|
||
border-radius: 12rpx;
|
||
padding: 16rpx 10rpx;
|
||
|
||
.metric-col {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
.metric-val {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #222222;
|
||
font-family: OPPOSANS;
|
||
line-height: 34rpx;
|
||
}
|
||
|
||
.metric-lbl {
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
|
||
.metric-divider {
|
||
width: 1rpx;
|
||
height: 36rpx;
|
||
background: #ebebed;
|
||
}
|
||
}
|
||
|
||
// 底部操作栏
|
||
.member-card-footer {
|
||
border-top: 1rpx solid #f5f5f5;
|
||
padding-top: 16rpx;
|
||
|
||
.register-time {
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.actions-wrap {
|
||
.action-btn {
|
||
height: 48rpx;
|
||
padding: 0 16rpx;
|
||
border-radius: 24rpx;
|
||
font-size: 22rpx;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
|
||
&.btn-call {
|
||
background: #fff0e6;
|
||
color: #ff6000;
|
||
}
|
||
&.btn-copy {
|
||
background: #f3f4f6;
|
||
color: #4b5563;
|
||
}
|
||
&.btn-detail {
|
||
background: #ffffff;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 身份徽章样式
|
||
.tag-box {
|
||
background: #c48a3a;
|
||
border-radius: 18rpx;
|
||
padding: 2rpx 10rpx;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
|
||
.tag-img {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 6rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.tag-title {
|
||
font-size: 18rpx;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
line-height: 24rpx;
|
||
}
|
||
}
|
||
|
||
.mini-tag {
|
||
padding: 2rpx 10rpx;
|
||
height: 30rpx;
|
||
line-height: 30rpx;
|
||
border-radius: 15rpx;
|
||
font-size: 18rpx;
|
||
color: #ffffff;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
|
||
&.tag-venue {
|
||
background: #c48a3a;
|
||
}
|
||
&.tag-county {
|
||
background: #b45309;
|
||
}
|
||
}
|
||
|
||
// 空状态
|
||
.empty-wrap {
|
||
padding: 40rpx 0;
|
||
|
||
.reset-filter-btn {
|
||
padding: 14rpx 36rpx;
|
||
background: #f3f4f6;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
color: #4b5563;
|
||
}
|
||
|
||
.invite-cta-btn {
|
||
padding: 18rpx 50rpx;
|
||
background: linear-gradient(90deg, #ff6000, #ff8533);
|
||
color: #ffffff;
|
||
border-radius: 36rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
box-shadow: 0 6rpx 20rpx rgba(255, 96, 0, 0.25);
|
||
}
|
||
}
|
||
|
||
// 抽屉详情
|
||
.drawer-content {
|
||
.drawer-header {
|
||
.drawer-avatar {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #ffefe0;
|
||
}
|
||
.user-id {
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
}
|
||
.dot-split {
|
||
margin: 0 8rpx;
|
||
color: #bbbbbb;
|
||
}
|
||
.join-time {
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
}
|
||
}
|
||
|
||
.drawer-section {
|
||
.section-title {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.section-box {
|
||
background: #f9fafb;
|
||
border-radius: 14rpx;
|
||
padding: 20rpx;
|
||
|
||
&.active-detail-box {
|
||
.line-label {
|
||
font-size: 24rpx;
|
||
color: #6b7280;
|
||
}
|
||
.line-val {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #1f2937;
|
||
}
|
||
.notice-tip {
|
||
font-size: 22rpx;
|
||
color: #92400e;
|
||
background: #fef3c7;
|
||
border-radius: 8rpx;
|
||
padding: 10rpx 14rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
|
||
&.performance-box {
|
||
.perf-col {
|
||
flex: 1;
|
||
text-align: center;
|
||
.perf-num {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #111827;
|
||
font-family: OPPOSANS;
|
||
}
|
||
.perf-lbl {
|
||
font-size: 22rpx;
|
||
color: #6b7280;
|
||
margin-top: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.status-text-bold {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
|
||
&.text-green {
|
||
color: #059669;
|
||
}
|
||
&.text-yellow {
|
||
color: #d97706;
|
||
}
|
||
&.text-gray {
|
||
color: #6b7280;
|
||
}
|
||
}
|
||
|
||
.drawer-actions {
|
||
.drawer-btn {
|
||
height: 72rpx;
|
||
border-radius: 36rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&.drawer-btn-primary {
|
||
background: #ff6000;
|
||
color: #ffffff;
|
||
}
|
||
&.drawer-btn-sub {
|
||
background: #fff0e6;
|
||
color: #ff6000;
|
||
}
|
||
&.drawer-btn-outline {
|
||
background: #f3f4f6;
|
||
color: #4b5563;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|