3492 行
96 KiB
Vue
3492 行
96 KiB
Vue
<template>
|
||
<view class="user-container" :class="{ 'theme-warm': currentThemeKey === 'warm' }" :style="navStyle">
|
||
<!-- 用户头部个人资料卡 -->
|
||
<view class="profile-card" @click="!isLoggedIn && openLoginModal()">
|
||
<image
|
||
class="user-avatar btn-active"
|
||
:src="isLoggedIn && user.avatar ? user.avatar : DEFAULT_GUEST_AVATAR"
|
||
mode="aspectFill"
|
||
@click.stop="handleAvatarOrNameClick"
|
||
@error="onAvatarError"
|
||
/>
|
||
<view class="user-info">
|
||
<!-- 顶层水平对齐行：昵称/VIP 与 月亮太阳切换/设置 在同一水平线 -->
|
||
<view class="user-top-row">
|
||
<view class="name-row btn-active" @click.stop="handleAvatarOrNameClick">
|
||
<text class="user-name">{{ isLoggedIn ? user.nickname : '点击登录 / 注册' }}</text>
|
||
<text class="vip-badge" v-if="isLoggedIn">VIP 黄金玩家</text>
|
||
<text class="guest-badge" v-else>未登录</text>
|
||
</view>
|
||
<view class="header-actions">
|
||
<!-- 核心优化：月亮与太阳快捷切换胶囊 (与左侧昵称在同一水平线上) -->
|
||
<view class="theme-quick-switch btn-active" @click.stop="toggleThemeDirectly" title="切换界面风格">
|
||
<view
|
||
class="switch-icon-btn moon-btn"
|
||
:class="{ active: currentThemeKey === 'cool' }"
|
||
@click.stop="switchThemeTo('cool')"
|
||
>
|
||
<image class="theme-icon-svg" :src="ICONS.moon" mode="aspectFit" />
|
||
</view>
|
||
<view
|
||
class="switch-icon-btn sun-btn"
|
||
:class="{ active: currentThemeKey === 'warm' }"
|
||
@click.stop="switchThemeTo('warm')"
|
||
>
|
||
<image class="theme-icon-svg" :src="ICONS.sun" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
<view class="edit-btn btn-active" v-if="isLoggedIn" @click.stop="editProfile" title="设置资料">
|
||
<image class="edit-svg" :src="ICONS.settings" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="uid-phone-row" @click.stop="handleAvatarOrNameClick">
|
||
<text class="user-uid">{{ isLoggedIn ? `UID: ${user.id}` : '登录后享受完整陪伴服务' }}</text>
|
||
<text class="user-phone-tag" v-if="isLoggedIn && displayPhone">{{ displayPhone }}</text>
|
||
</view>
|
||
<text class="user-signature-text" v-if="isLoggedIn && user.signature" @click.stop="handleAvatarOrNameClick">{{ user.signature }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 核心亮点：双身份流光切换卡 (纯矢量与流光动效) -->
|
||
<view class="role-switch-card identity-banner card-active" @click="toggleRole">
|
||
<view class="role-glow-border"></view>
|
||
<view class="role-content">
|
||
<view class="role-left">
|
||
<view class="role-title-row">
|
||
<view class="role-dot" :class="{ expert: currentRole === 'EXPERT' }"></view>
|
||
<text class="current-role-tag">
|
||
{{ currentRole === 'PLAYER' ? '当前身份：普通玩家' : '当前身份：接单大神' }}
|
||
</text>
|
||
</view>
|
||
<text class="role-sub">
|
||
{{ currentRole === 'PLAYER' ? '一键切换至大神接单工作台，开启派单收益' : '一键切换回玩家大厅，自由寻找开黑车队' }}
|
||
</text>
|
||
</view>
|
||
<button class="btn-switch-role btn-active">
|
||
{{ currentRole === 'PLAYER' ? '切换为大神' : '切回玩家端' }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 钱包与资产看板 -->
|
||
<view class="wallet-card">
|
||
<view class="wallet-head">
|
||
<text class="wallet-title">我的资产</text>
|
||
<text class="wallet-detail" @click="viewWalletLog">账单明细 ›</text>
|
||
</view>
|
||
|
||
<view class="asset-grid">
|
||
<view class="asset-col">
|
||
<text class="asset-label">可用余额 (元)</text>
|
||
<text class="asset-val green-val">{{ isLoggedIn ? `¥${user.balance}` : '--' }}</text>
|
||
<button class="asset-btn recharge btn-active" @click="handleRecharge">充值</button>
|
||
</view>
|
||
<view class="asset-divider"></view>
|
||
<view class="asset-col">
|
||
<text class="asset-label">分销佣金收益 (元)</text>
|
||
<text class="asset-val gold-val">{{ isLoggedIn ? `¥${user.commission}` : '--' }}</text>
|
||
<view class="asset-btn-group">
|
||
<button class="asset-btn withdraw btn-active" @click="openWithdrawModal">提现</button>
|
||
<button class="asset-btn records btn-active" @click="openWithdrawRecordsModal">记录</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 核心功能金刚区 (纯矢量SVG图标) -->
|
||
<view class="menu-grid-card">
|
||
<view class="menu-item btn-active" @click="navTo('/pages/activity/list?tab=MINE')">
|
||
<view class="menu-icon bg-indigo">
|
||
<image class="menu-svg" :src="ICONS.gameCrown" mode="aspectFit" />
|
||
</view>
|
||
<text class="menu-title">我的组局</text>
|
||
<text class="menu-desc">发单记录与管理</text>
|
||
</view>
|
||
<view class="menu-item btn-active" @click="navTo('/pages/activity/my-ticket')">
|
||
<view class="menu-icon bg-green">
|
||
<image class="menu-svg" :src="ICONS.ticket" mode="aspectFit" />
|
||
</view>
|
||
<text class="menu-title">我的门票</text>
|
||
<text class="menu-desc">4位核销码</text>
|
||
</view>
|
||
<view class="menu-item btn-active" @click="navTo('/pages/order/list')">
|
||
<view class="menu-icon bg-blue">
|
||
<image class="menu-svg" :src="ICONS.orderList" mode="aspectFit" />
|
||
</view>
|
||
<text class="menu-title">所有订单</text>
|
||
<text class="menu-desc">对局与退款</text>
|
||
</view>
|
||
<view class="menu-item btn-active" @click="showInvitePoster">
|
||
<view class="menu-icon bg-purple">
|
||
<image class="menu-svg" :src="ICONS.share" mode="aspectFit" />
|
||
</view>
|
||
<text class="menu-title">推广赚钱</text>
|
||
<text class="menu-desc">二级返佣</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 列表式功能菜单 (纯矢量SVG图标) -->
|
||
<view class="list-menu-card">
|
||
<view class="list-row btn-active" @click="openFavoritesModal">
|
||
<image class="row-svg" :src="ICONS.starFilled" mode="aspectFit" />
|
||
<text class="row-label">我的收藏</text>
|
||
<view class="row-badge" v-if="favoriteList.length > 0">{{ favoriteList.length }}</view>
|
||
<image class="row-arrow-svg" :src="ICONS.chevronRight" mode="aspectFit" />
|
||
</view>
|
||
<view class="list-row btn-active" @click="applyExpert">
|
||
<image class="row-svg" :src="ICONS.expertBadge" mode="aspectFit" />
|
||
<text class="row-label">大神入驻认证</text>
|
||
<image class="row-arrow-svg" :src="ICONS.chevronRight" mode="aspectFit" />
|
||
</view>
|
||
<view class="list-row btn-active" @click="openSettingsModal">
|
||
<image class="row-svg" :src="ICONS.settings" mode="aspectFit" />
|
||
<text class="row-label">系统与隐私设置</text>
|
||
<image class="row-arrow-svg" :src="ICONS.chevronRight" mode="aspectFit" />
|
||
</view>
|
||
<view class="list-row btn-active" @click="contactService">
|
||
<image class="row-svg" :src="ICONS.headphones" mode="aspectFit" />
|
||
<text class="row-label">官方在线客服</text>
|
||
<image class="row-arrow-svg" :src="ICONS.chevronRight" mode="aspectFit" />
|
||
</view>
|
||
<view class="list-row btn-active" @click="openNotice">
|
||
<image class="row-svg" :src="ICONS.bell" mode="aspectFit" />
|
||
<text class="row-label">平台消息与通知</text>
|
||
<image class="row-arrow-svg" :src="ICONS.chevronRight" mode="aspectFit" />
|
||
</view>
|
||
<view class="list-row btn-active" @click="openFaq">
|
||
<image class="row-svg" :src="ICONS.messageSquare" mode="aspectFit" />
|
||
<text class="row-label">帮助中心与常见问题</text>
|
||
<image class="row-arrow-svg" :src="ICONS.chevronRight" mode="aspectFit" />
|
||
</view>
|
||
<view class="list-row btn-active" @click="openAbout">
|
||
<image class="row-svg" :src="ICONS.shield" mode="aspectFit" />
|
||
<text class="row-label">平台规范与服务协议</text>
|
||
<image class="row-arrow-svg" :src="ICONS.chevronRight" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 退出登录与账号切换操作卡片 -->
|
||
<view class="account-actions-card" v-if="isLoggedIn">
|
||
<view class="account-btn-group">
|
||
<button class="btn-switch-account btn-active" @click="openLoginModal">切换账号</button>
|
||
<button class="btn-logout btn-active" @click="handleLogout">退出当前登录</button>
|
||
</view>
|
||
</view>
|
||
<view class="account-actions-card not-logged" v-else>
|
||
<button class="btn-primary-login btn-active" @click="openLoginModal">立即登录 / 注册</button>
|
||
</view>
|
||
|
||
<!-- 个人资料编辑设置弹窗 -->
|
||
<view class="profile-edit-modal-mask" v-if="showEditModal" @click="showEditModal = false">
|
||
<view class="profile-edit-modal" @click.stop>
|
||
<view class="modal-header">
|
||
<text class="modal-title">个人信息设置</text>
|
||
<view class="btn-close btn-active" @click="showEditModal = false">
|
||
<image class="close-svg" :src="ICONS.close" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-body">
|
||
<!-- 预设头像切换与真实上传 (支持微信官方头像与相册上传) -->
|
||
<view class="edit-avatar-section">
|
||
<image class="avatar-preview btn-active" :src="editForm.avatar" mode="aspectFill" @click="chooseCustomAvatar" />
|
||
<view class="avatar-meta">
|
||
<view class="avatar-label-row">
|
||
<text class="avatar-label">点击更换推荐头像</text>
|
||
<view class="avatar-action-links">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button class="btn-wechat-choose btn-active" open-type="chooseAvatar" @chooseavatar="onWechatChooseAvatar">
|
||
微信头像
|
||
</button>
|
||
<!-- #endif -->
|
||
<text class="btn-custom-upload btn-active" @click="chooseCustomAvatar">相册上传</text>
|
||
</view>
|
||
</view>
|
||
<view class="preset-avatars-row">
|
||
<image
|
||
v-for="(av, idx) in PRESET_AVATARS"
|
||
:key="idx"
|
||
class="preset-avatar-item btn-active"
|
||
:class="{ selected: editForm.avatar === av }"
|
||
:src="av"
|
||
mode="aspectFill"
|
||
@click="editForm.avatar = av"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 昵称输入 (支持微信官方 type="nickname" 快速轻触填入) -->
|
||
<view class="edit-field">
|
||
<text class="field-label">用户昵称</text>
|
||
<input
|
||
class="field-input"
|
||
type="nickname"
|
||
v-model="editForm.nickname"
|
||
maxlength="15"
|
||
placeholder="请输入新昵称或轻触填入微信昵称"
|
||
placeholder-class="field-placeholder"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 联系方式 -->
|
||
<view class="edit-field">
|
||
<text class="field-label">联系电话 / 微信号</text>
|
||
<input
|
||
class="field-input"
|
||
v-model="editForm.phone"
|
||
maxlength="20"
|
||
placeholder="请输入联系方式（用于组局联络）"
|
||
placeholder-class="field-placeholder"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 性别选择 (男 / 女 / 保密 胶囊单选) -->
|
||
<view class="edit-field">
|
||
<text class="field-label">用户性别</text>
|
||
<view class="gender-pill-group">
|
||
<view
|
||
v-for="g in ['男', '女', '保密']"
|
||
:key="g"
|
||
class="gender-pill btn-active"
|
||
:class="{ active: editForm.gender === g }"
|
||
@click="editForm.gender = g"
|
||
>
|
||
{{ g }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 个性签名 -->
|
||
<view class="edit-field">
|
||
<text class="field-label">个性签名</text>
|
||
<input
|
||
class="field-input"
|
||
v-model="editForm.signature"
|
||
maxlength="60"
|
||
placeholder="分享您的常玩段位或搭子宣言（如：常驻朝阳，王者荣耀星耀）"
|
||
placeholder-class="field-placeholder"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-footer">
|
||
<button class="btn-modal btn-cancel btn-active" @click="showEditModal = false">取消</button>
|
||
<button class="btn-modal btn-save btn-active" @click="saveProfile">保存修改</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 提现历史与审批记录跟踪弹窗 -->
|
||
<view class="profile-edit-modal-mask" v-if="showWithdrawRecordsModal" @click="showWithdrawRecordsModal = false">
|
||
<view class="profile-edit-modal withdraw-records-modal-box" @click.stop>
|
||
<view class="modal-header">
|
||
<text class="modal-title">提现审批记录</text>
|
||
<view class="btn-close btn-active" @click="showWithdrawRecordsModal = false">
|
||
<image class="close-svg" :src="ICONS.close" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="records-modal-scroll" v-if="userWithdrawalsList.length > 0">
|
||
<view v-for="rec in userWithdrawalsList" :key="rec.id" class="wd-card-row">
|
||
<view class="wd-row-top">
|
||
<text class="wd-no">{{ rec.withdrawNo }}</text>
|
||
<text
|
||
class="wd-badge"
|
||
:class="{
|
||
pending: rec.status === '待审核',
|
||
success: rec.status === '已打款',
|
||
rejected: rec.status === '已驳回'
|
||
}"
|
||
>
|
||
{{ rec.status }}
|
||
</text>
|
||
</view>
|
||
<view class="wd-row-center">
|
||
<text class="wd-val">¥{{ rec.amount }}</text>
|
||
<text class="wd-ch">{{ rec.channel }}</text>
|
||
</view>
|
||
<view class="wd-row-bot">
|
||
<text class="wd-time">{{ rec.applyTime }}</text>
|
||
<text class="wd-reason" v-if="rec.reason">驳回理由：{{ rec.reason }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="empty-records-box" v-else>
|
||
<text class="empty-txt">暂无提现申请记录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 1. 我的收藏弹窗 -->
|
||
<view class="profile-edit-modal-mask" v-if="showFavoritesModal" @click="showFavoritesModal = false">
|
||
<view class="profile-edit-modal fav-modal-box" @click.stop>
|
||
<view class="modal-header">
|
||
<view class="modal-title-wrap">
|
||
<text class="modal-title">我的收藏陪玩</text>
|
||
<text class="modal-sub">实时高亮接单在线状态</text>
|
||
</view>
|
||
<view class="btn-close btn-active" @click="showFavoritesModal = false">
|
||
<image class="close-svg" :src="ICONS.close" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-body fav-modal-body">
|
||
<scroll-view scroll-y class="fav-list-scroll" v-if="favoriteList.length > 0">
|
||
<view class="fav-item-card" v-for="item in favoriteList" :key="item.id">
|
||
<view class="fav-item-left" @click="goToExpertDetail(item.id)">
|
||
<view class="fav-avatar-wrap">
|
||
<image class="fav-avatar" :src="item.avatar" mode="aspectFill" />
|
||
<view class="status-indicator" :class="{ online: item.isOnline }">
|
||
<view class="dot"></view>
|
||
<text class="status-lbl">{{ item.isOnline ? '接单中' : '休息中' }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="fav-meta">
|
||
<view class="fav-name-row">
|
||
<text class="fav-name">{{ item.nickname }}</text>
|
||
<text class="fav-track-tag">{{ item.track }}</text>
|
||
</view>
|
||
<text class="fav-rank">{{ item.rankName || '金牌陪伴师' }}</text>
|
||
<view class="fav-price-row">
|
||
<text class="fav-price">¥{{ item.hourlyRate }}</text>
|
||
<text class="fav-unit">/小时</text>
|
||
<text class="fav-rating">评分 {{ item.rating || '5.0' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fav-item-actions">
|
||
<button class="btn-action-book btn-active" @click="goToExpertDetail(item.id)">立即约玩</button>
|
||
<button class="btn-action-unfav btn-active" @click="handleRemoveFavorite(item.id)">移除</button>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="empty-fav-box" v-else>
|
||
<image class="empty-icon-svg" :src="ICONS.starOutline" mode="aspectFit" />
|
||
<text class="empty-fav-txt">暂未收藏心仪的陪玩大神</text>
|
||
<button class="btn-go-discover btn-active" @click="goToDiscover">去大厅发现</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 2. 系统与隐私设置弹窗 -->
|
||
<view class="profile-edit-modal-mask" v-if="showSettingsModal" @click="showSettingsModal = false">
|
||
<view class="profile-edit-modal settings-modal-box" @click.stop>
|
||
<view class="modal-header">
|
||
<text class="modal-title">系统与隐私设置</text>
|
||
<view class="btn-close btn-active" @click="showSettingsModal = false">
|
||
<image class="close-svg" :src="ICONS.close" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-body settings-modal-body">
|
||
<view class="settings-group">
|
||
<text class="settings-group-title">隐私安全保护</text>
|
||
<view class="settings-row">
|
||
<view class="settings-label-wrap">
|
||
<text class="settings-label">隐藏手机号与联系方式</text>
|
||
<text class="settings-desc">开启后个人名片及组局联络中间4位自动脱敏</text>
|
||
</view>
|
||
<switch :checked="privacyHidePhone" color="#6366F1" @change="onToggleHidePhone" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="settings-group">
|
||
<text class="settings-group-title">通知与订阅</text>
|
||
<view class="settings-row">
|
||
<view class="settings-label-wrap">
|
||
<text class="settings-label">订单与组局动态提醒</text>
|
||
<text class="settings-desc">接收陪玩接单、服务验收与退款仲裁即时通知</text>
|
||
</view>
|
||
<switch :checked="noticeSubscribe" color="#6366F1" @change="onToggleNotice" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="settings-group">
|
||
<text class="settings-group-title">本地数据与存储</text>
|
||
<view class="settings-row">
|
||
<view class="settings-label-wrap">
|
||
<text class="settings-label">清除本地缓存数据</text>
|
||
<text class="settings-desc">当前缓存占用：{{ cacheSizeText }}</text>
|
||
</view>
|
||
<button class="btn-clear-cache btn-active" @click="clearLocalCache">一键清理</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="settings-group">
|
||
<text class="settings-group-title">关于系统与合规</text>
|
||
<view class="settings-info-row">
|
||
<text class="info-k">软件版本</text>
|
||
<text class="info-v">v2.6.0 正式版</text>
|
||
</view>
|
||
<view class="settings-info-row clickable btn-active" @click="navTo('/pages/common/protocol')">
|
||
<text class="info-k">服务协议与用户隐私政策</text>
|
||
<image class="info-arrow" :src="ICONS.chevronRight" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 3. 分销推广管理弹窗 -->
|
||
<view class="profile-edit-modal-mask" v-if="showDistributionModal" @click="showDistributionModal = false">
|
||
<view class="profile-edit-modal dist-modal-box" @click.stop>
|
||
<view class="modal-header">
|
||
<view class="modal-title-wrap">
|
||
<text class="modal-title">分销推广管理</text>
|
||
<text class="modal-sub">全网二级裂变 · 下单即时分润</text>
|
||
</view>
|
||
<view class="btn-close btn-active" @click="showDistributionModal = false">
|
||
<image class="close-svg" :src="ICONS.close" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 顶部佣金总览 -->
|
||
<view class="dist-summary-banner">
|
||
<view class="dist-stat-col">
|
||
<text class="dist-stat-val">¥{{ user.commission || '0.00' }}</text>
|
||
<text class="dist-stat-lbl">可提现佣金</text>
|
||
</view>
|
||
<view class="dist-stat-divider"></view>
|
||
<view class="dist-stat-col">
|
||
<text class="dist-stat-val">{{ distributionTeam.totalTeamCount || user.invitedCount || 0 }} 人</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 || 1001 }}</text>
|
||
<text class="copy-tag">一键复制</text>
|
||
</view>
|
||
<text class="dist-stat-lbl">专属邀请码</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选项卡切换 -->
|
||
<view class="dist-tabs-row">
|
||
<view
|
||
class="dist-tab-pill btn-active"
|
||
:class="{ active: distActiveTab === 'poster' }"
|
||
@click="distActiveTab = 'poster'"
|
||
>
|
||
推广海报
|
||
</view>
|
||
<view
|
||
class="dist-tab-pill btn-active"
|
||
:class="{ active: distActiveTab === 'team' }"
|
||
@click="distActiveTab = 'team'"
|
||
>
|
||
下级团队
|
||
</view>
|
||
<view
|
||
class="dist-tab-pill btn-active"
|
||
:class="{ active: distActiveTab === 'records' }"
|
||
@click="distActiveTab = 'records'"
|
||
>
|
||
返佣订单
|
||
</view>
|
||
<view
|
||
class="dist-tab-pill btn-active"
|
||
:class="{ active: distActiveTab === 'withdraw' }"
|
||
@click="distActiveTab = 'withdraw'"
|
||
>
|
||
佣金提现
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-body dist-modal-body">
|
||
<!-- 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 || DEFAULT_GUEST_AVATAR" 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 || 1001 }}</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>
|
||
|
||
<!-- 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>
|
||
|
||
<scroll-view scroll-y class="team-list-scroll">
|
||
<view
|
||
class="team-member-row"
|
||
v-for="m in (teamLevelTab === 1 ? distributionTeam.directList : distributionTeam.indirectList)"
|
||
:key="m.id"
|
||
>
|
||
<image class="m-avatar" :src="m.avatar" 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 }}好友</text>
|
||
</view>
|
||
<text class="m-time">加入时间：{{ m.createdAt }}</text>
|
||
</view>
|
||
<view class="m-contribute">
|
||
<text class="m-val">¥{{ m.totalContribute || '0.00' }}</text>
|
||
<text class="m-lbl">贡献收益</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- Tab 3: 返佣订单明细 -->
|
||
<view class="tab-pane-records" v-if="distActiveTab === 'records'">
|
||
<scroll-view scroll-y class="records-list-scroll">
|
||
<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">+¥{{ r.commission }}</text>
|
||
<text class="rec-rate">提成 {{ r.ratePercent }}%</text>
|
||
</view>
|
||
</view>
|
||
<view class="rec-bot">
|
||
<text class="rec-time">{{ r.createdAt }}</text>
|
||
<text class="rec-ord-fee">消费：¥{{ r.orderAmount }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- Tab 4: 快速佣金提现 -->
|
||
<view class="tab-pane-withdraw" v-if="distActiveTab === 'withdraw'">
|
||
<view class="dist-wd-box">
|
||
<text class="dist-wd-label">提现金额 (元)</text>
|
||
<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="distWithdrawAmount = String(user.commission || 0)">全部提现</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>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部自定义导航栏 (动态自适应发单人4项 / 接单人3项) -->
|
||
<AppTabBar current="user" />
|
||
|
||
<!-- 微信小程序用户隐私保护指引弹窗 (微信合规) -->
|
||
<privacy-modal ref="privacyModalRef" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||
import { onShow } from '@dcloudio/uni-app';
|
||
import AppTabBar from '@/components/CustomTabBar.vue';
|
||
import PrivacyModal from '@/components/PrivacyModal.vue';
|
||
import { ICONS } from '@/common/icons.js';
|
||
import { getCurrentThemeKey, setTheme, THEME_KEYS, applyThemeToNativeUI } from '@/common/theme.js';
|
||
import { getCurrentRole, setCurrentRole, ROLE_TYPES, toggleRole as toggleUserRole, isExpertCertified, getExpertCertStatus, setExpertCertStatus, CERT_STATUS } from '@/common/role.js';
|
||
import { getNavBarInfo } from '@/common/nav.js';
|
||
import { getUserProfile, rechargeBalance, withdrawCommission, getUserFinanceRecords, updateUserProfile, uploadImage, getRechargeTiers, getPlatformConfigs, applyExpertCert, getUserWithdrawals, getFavorites, removeFavorite, getDistributionTeam, getDistributionRecords } from '@/common/api.js';
|
||
|
||
const DEFAULT_GUEST_AVATAR = 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200';
|
||
const isLoggedIn = ref(true);
|
||
const showLoginModal = ref(false);
|
||
|
||
// 我的收藏
|
||
const showFavoritesModal = ref(false);
|
||
const favoriteList = ref([]);
|
||
const loadingFavorites = ref(false);
|
||
|
||
// 系统与隐私设置
|
||
const showSettingsModal = ref(false);
|
||
const privacyHidePhone = ref(uni.getStorageSync('privacy_hide_phone') === '1');
|
||
const noticeSubscribe = ref(uni.getStorageSync('notice_subscribe') !== '0');
|
||
const cacheSizeText = ref('1.25 MB');
|
||
|
||
// 分销推广管理
|
||
const showDistributionModal = ref(false);
|
||
const distActiveTab = ref('poster');
|
||
const teamLevelTab = ref(1);
|
||
const distributionTeam = ref({
|
||
directCount: 0,
|
||
indirectCount: 0,
|
||
totalTeamCount: 0,
|
||
directList: [],
|
||
indirectList: []
|
||
});
|
||
const distributionRecords = ref([]);
|
||
const distWithdrawAmount = ref('');
|
||
const submittingDistWithdraw = ref(false);
|
||
|
||
const DEMO_ACCOUNTS = [
|
||
{
|
||
id: 1001,
|
||
nickname: '同城局长',
|
||
roleTag: 'host',
|
||
roleDesc: '房主/局长',
|
||
desc: '余额充足 · 组局发单',
|
||
avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200'
|
||
},
|
||
{
|
||
id: 2001,
|
||
nickname: '超能电竞玩家',
|
||
roleTag: 'buyer',
|
||
roleDesc: '普通买家',
|
||
desc: '搭子报名 · 预约下单',
|
||
avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200'
|
||
},
|
||
{
|
||
id: 101,
|
||
nickname: '苏苏学姐',
|
||
roleTag: 'expert',
|
||
roleDesc: '金牌陪伴师',
|
||
desc: '接单工作台 · 4位核销',
|
||
avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200'
|
||
}
|
||
];
|
||
|
||
const user = ref({
|
||
id: 1001,
|
||
nickname: '电竞玩家',
|
||
avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200',
|
||
gender: 'male',
|
||
role: 'PLAYER',
|
||
balance: '0.00',
|
||
commission: '0.00',
|
||
orderCount: 0,
|
||
invitedCount: 0,
|
||
phone: '138****8888',
|
||
signature: '同城常驻朝阳 · 寻找靠谱搭子'
|
||
});
|
||
const currentRole = ref(getCurrentRole());
|
||
const currentThemeKey = ref(getCurrentThemeKey());
|
||
const navInfo = ref(getNavBarInfo());
|
||
const privacyModalRef = ref(null);
|
||
const platformConfigs = ref({
|
||
customer_service: {
|
||
hotline: '400-888-6666',
|
||
hotlineDesc: '7x24h 官方客服服务热线',
|
||
wechat: 'peiwan_vip_kefu',
|
||
wechatDesc: '官方 VIP 客服微信号'
|
||
},
|
||
safety_notice: {
|
||
title: '平台官方公告与指引',
|
||
points: [
|
||
'【安全履约须知】为保障搭子与陪伴师人身与财产安全，线下约局须在合规公开商业街区进行。',
|
||
'【现场核销】现场碰面后请出示 4 位数字核销码进行签到确认。',
|
||
'【平台兜底】平台提供 7x24 小时争议仲裁与资金托管保障服务。'
|
||
]
|
||
},
|
||
platform_protocol: {
|
||
title: '用户服务协议与隐私规范',
|
||
summary: '严禁发布任何违规言论及低俗诈骗行为，平台全面遵循微信内容安全风控与用户隐私保护标准。'
|
||
}
|
||
});
|
||
|
||
const loadPlatformConfigs = async () => {
|
||
try {
|
||
const res = await getPlatformConfigs();
|
||
if (res && typeof res === 'object') {
|
||
platformConfigs.value = {
|
||
...platformConfigs.value,
|
||
...res
|
||
};
|
||
}
|
||
} catch (e) {
|
||
console.warn('[User] 加载系统配置失败降级:', e);
|
||
}
|
||
};
|
||
|
||
const navStyle = computed(() => {
|
||
return {
|
||
'--safe-header-gap': `${navInfo.value.totalHeaderHeight}px`
|
||
};
|
||
});
|
||
|
||
const onThemeChanged = (key) => {
|
||
currentThemeKey.value = key;
|
||
applyThemeToNativeUI(key);
|
||
};
|
||
|
||
const onRoleChanged = (role) => {
|
||
currentRole.value = role;
|
||
};
|
||
|
||
// 登录/注册已全面重构升级为独立专属页面 /pages/auth/login
|
||
// 保持向下兼容: switchDemoAccount, login-modal-mask, 一键授权快捷登录
|
||
const openLoginModal = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/auth/login'
|
||
});
|
||
};
|
||
|
||
const onLoginSuccess = (payload) => {
|
||
loadUserProfile(payload?.userId);
|
||
};
|
||
|
||
const handleLogout = () => {
|
||
uni.showModal({
|
||
title: '确认退出登录？',
|
||
content: '退出登录后将清除本地会话，切换为未登录游客态。是否确认退出？',
|
||
confirmText: '退出登录',
|
||
confirmColor: '#EF4444',
|
||
cancelText: '取消',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.removeStorageSync('userInfo');
|
||
uni.removeStorageSync('userId');
|
||
uni.setStorageSync('user_has_logged_out', '1');
|
||
isLoggedIn.value = false;
|
||
user.value = {
|
||
id: '',
|
||
nickname: '点击登录 / 注册',
|
||
avatar: DEFAULT_GUEST_AVATAR,
|
||
role: 'PLAYER',
|
||
balance: '0.00',
|
||
commission: '0.00',
|
||
orderCount: 0,
|
||
invitedCount: 0,
|
||
phone: ''
|
||
};
|
||
uni.showToast({
|
||
title: '已退出登录',
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const loadUserProfile = async (targetId) => {
|
||
const hasLoggedOut = uni.getStorageSync('user_has_logged_out');
|
||
if (hasLoggedOut && !targetId) {
|
||
isLoggedIn.value = false;
|
||
user.value = {
|
||
id: '',
|
||
nickname: '点击登录 / 注册',
|
||
avatar: DEFAULT_GUEST_AVATAR,
|
||
role: 'PLAYER',
|
||
balance: '0.00',
|
||
commission: '0.00',
|
||
orderCount: 0,
|
||
invitedCount: 0,
|
||
phone: ''
|
||
};
|
||
return;
|
||
}
|
||
|
||
isLoggedIn.value = true;
|
||
const uid = targetId || uni.getStorageSync('userId') || 1001;
|
||
try {
|
||
const profile = await getUserProfile(uid);
|
||
if (profile) {
|
||
let safeAvatar = profile.avatar;
|
||
if (!safeAvatar || safeAvatar.startsWith('http://tmp') || safeAvatar.includes('__tmp__')) {
|
||
safeAvatar = DEFAULT_GUEST_AVATAR;
|
||
}
|
||
user.value = {
|
||
...user.value,
|
||
...profile,
|
||
avatar: safeAvatar
|
||
};
|
||
}
|
||
} catch (err) {
|
||
console.warn('[User] 加载用户信息异常:', err.message);
|
||
}
|
||
};
|
||
|
||
const onAvatarError = () => {
|
||
user.value.avatar = DEFAULT_GUEST_AVATAR;
|
||
};
|
||
|
||
onMounted(() => {
|
||
navInfo.value = getNavBarInfo();
|
||
currentRole.value = getCurrentRole();
|
||
currentThemeKey.value = getCurrentThemeKey();
|
||
applyThemeToNativeUI(currentThemeKey.value);
|
||
uni.$on('theme-change', onThemeChanged);
|
||
uni.$on('role-change', onRoleChanged);
|
||
uni.$on('login-success', onLoginSuccess);
|
||
loadUserProfile();
|
||
loadPlatformConfigs();
|
||
});
|
||
|
||
onShow(() => {
|
||
navInfo.value = getNavBarInfo();
|
||
currentRole.value = getCurrentRole();
|
||
currentThemeKey.value = getCurrentThemeKey();
|
||
applyThemeToNativeUI(currentThemeKey.value);
|
||
uni.hideTabBar({ animation: false, fail: () => {} });
|
||
loadUserProfile();
|
||
loadPlatformConfigs();
|
||
if (isLoggedIn.value) {
|
||
loadFavorites();
|
||
}
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
uni.$off('theme-change', onThemeChanged);
|
||
uni.$off('role-change', onRoleChanged);
|
||
uni.$off('login-success', onLoginSuccess);
|
||
});
|
||
|
||
const switchThemeTo = (targetKey) => {
|
||
if (currentThemeKey.value === targetKey) return;
|
||
currentThemeKey.value = targetKey;
|
||
setTheme(targetKey);
|
||
uni.showToast({
|
||
title: targetKey === THEME_KEYS.WARM ? '已切换至【浅色暖阳】主题' : '已切换至【冷光暗夜】经典款',
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
};
|
||
|
||
const toggleThemeDirectly = () => {
|
||
const targetKey = currentThemeKey.value === THEME_KEYS.WARM ? THEME_KEYS.COOL : THEME_KEYS.WARM;
|
||
switchThemeTo(targetKey);
|
||
};
|
||
|
||
const handleSwitchTheme = () => {
|
||
toggleThemeDirectly();
|
||
};
|
||
|
||
const toggleRole = () => {
|
||
if (!ensureLoggedIn()) return;
|
||
if (!isExpertCertified()) {
|
||
uni.showModal({
|
||
title: '大神实名认证提醒',
|
||
content: '当前账号尚未完成大神实名入驻认证，无法切换至接单模式。是否立即申请认证？',
|
||
confirmText: '立即认证',
|
||
cancelText: '稍后再说',
|
||
confirmColor: '#10B981',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
applyExpert();
|
||
}
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
const result = toggleUserRole();
|
||
const newRole = typeof result === 'object' ? result.currentRole : result;
|
||
currentRole.value = newRole;
|
||
if (newRole === ROLE_TYPES.EXPERT) {
|
||
uni.showToast({
|
||
title: '已进入【大神接单端】',
|
||
icon: 'success',
|
||
duration: 1200
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '已切回【发单人端】',
|
||
icon: 'none',
|
||
duration: 1200
|
||
});
|
||
}
|
||
};
|
||
|
||
const showEditModal = ref(false);
|
||
const PRESET_AVATARS = [
|
||
'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200',
|
||
'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200',
|
||
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200',
|
||
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200'
|
||
];
|
||
|
||
const editForm = ref({
|
||
nickname: '',
|
||
avatar: '',
|
||
phone: '',
|
||
gender: '保密',
|
||
signature: ''
|
||
});
|
||
|
||
const editProfile = () => {
|
||
if (!ensureLoggedIn()) return;
|
||
editForm.value = {
|
||
nickname: user.value.nickname || '',
|
||
avatar: user.value.avatar || PRESET_AVATARS[0],
|
||
phone: user.value.phone || '',
|
||
gender: user.value.gender || '保密',
|
||
signature: user.value.signature || ''
|
||
};
|
||
showEditModal.value = true;
|
||
};
|
||
|
||
// 点击头像或名称行：已登录时直接打开个人资料设置弹窗，未登录时引导登录
|
||
const handleAvatarOrNameClick = () => {
|
||
if (isLoggedIn.value) {
|
||
editProfile();
|
||
} else {
|
||
openLoginModal();
|
||
}
|
||
};
|
||
|
||
// 微信官方快捷选取头像回调
|
||
const onWechatChooseAvatar = async (e) => {
|
||
const avatarUrl = e?.detail?.avatarUrl;
|
||
if (!avatarUrl) return;
|
||
uni.showLoading({ title: '正在同步微信头像...' });
|
||
try {
|
||
const onlineUrl = await uploadImage(avatarUrl);
|
||
editForm.value.avatar = onlineUrl;
|
||
uni.hideLoading();
|
||
uni.showToast({ title: '微信头像获取成功', icon: 'success' });
|
||
} catch (err) {
|
||
uni.hideLoading();
|
||
// 上传失败时保留原头像，切勿将本地临时路径 http://tmp/... 赋值给 avatar，避免触发渲染层 CORS 拦截
|
||
uni.showToast({ title: err.message || '微信头像上传失败，请重试', icon: 'none' });
|
||
}
|
||
};
|
||
|
||
const chooseCustomAvatar = () => {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: async (res) => {
|
||
const tempPath = res.tempFilePaths && res.tempFilePaths[0];
|
||
if (!tempPath) return;
|
||
uni.showLoading({ title: '正在上传头像...' });
|
||
try {
|
||
const onlineUrl = await uploadImage(tempPath);
|
||
editForm.value.avatar = onlineUrl;
|
||
uni.hideLoading();
|
||
uni.showToast({ title: '头像上传成功', icon: 'success' });
|
||
} catch (e) {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: e.message || '上传头像失败', icon: 'none' });
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const saveProfile = async () => {
|
||
if (!editForm.value.nickname || !editForm.value.nickname.trim()) {
|
||
uni.showToast({ title: '昵称不能为空', icon: 'none' });
|
||
return;
|
||
}
|
||
const currentAvatar = editForm.value.avatar || '';
|
||
if (
|
||
currentAvatar.startsWith('http://tmp/') ||
|
||
currentAvatar.startsWith('http://usr/') ||
|
||
currentAvatar.startsWith('wxfile://') ||
|
||
currentAvatar.startsWith('blob:')
|
||
) {
|
||
uni.showToast({ title: '头像正在同步或上传异常，请重新选取', icon: 'none' });
|
||
return;
|
||
}
|
||
uni.showLoading({ title: '正在保存资料...' });
|
||
try {
|
||
const updated = await updateUserProfile(user.value.id || 1001, {
|
||
nickname: editForm.value.nickname.trim(),
|
||
avatar: editForm.value.avatar,
|
||
phone: editForm.value.phone,
|
||
gender: editForm.value.gender || '保密',
|
||
signature: editForm.value.signature ? editForm.value.signature.trim() : ''
|
||
});
|
||
uni.hideLoading();
|
||
if (updated) {
|
||
user.value = {
|
||
...user.value,
|
||
...updated
|
||
};
|
||
} else {
|
||
user.value.nickname = editForm.value.nickname.trim();
|
||
user.value.avatar = editForm.value.avatar;
|
||
user.value.phone = editForm.value.phone;
|
||
user.value.gender = editForm.value.gender || '保密';
|
||
user.value.signature = editForm.value.signature ? editForm.value.signature.trim() : '';
|
||
}
|
||
showEditModal.value = false;
|
||
uni.showToast({
|
||
title: '个人信息修改成功',
|
||
icon: 'success'
|
||
});
|
||
} catch (err) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: err.message || '保存失败，请稍后重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
};
|
||
|
||
const ensureLoggedIn = () => {
|
||
if (!isLoggedIn.value) {
|
||
uni.showToast({ title: '请先登录账号', icon: 'none' });
|
||
openLoginModal();
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
const viewWalletLog = async () => {
|
||
if (!ensureLoggedIn()) return;
|
||
try {
|
||
const list = await getUserFinanceRecords(user.value.id || 1001);
|
||
if (!list || list.length === 0) {
|
||
uni.showModal({
|
||
title: '账单明细',
|
||
content: '暂无近期财务收支流水记录',
|
||
showCancel: false,
|
||
confirmText: '我知道了'
|
||
});
|
||
return;
|
||
}
|
||
const lines = list.slice(0, 5).map(item => {
|
||
const sign = item.direction === 'IN' ? '+' : '-';
|
||
return `${item.type}: ${sign}¥${Number(item.amount).toFixed(2)} (${item.counterparty || '系统'})`;
|
||
});
|
||
uni.showModal({
|
||
title: '最近收支明细',
|
||
content: lines.join('\r\n'),
|
||
showCancel: false,
|
||
confirmText: '确定'
|
||
});
|
||
} catch (err) {
|
||
uni.showToast({ title: '账单获取异常', icon: 'none' });
|
||
}
|
||
};
|
||
|
||
const handleRecharge = async () => {
|
||
if (!ensureLoggedIn()) return;
|
||
let tiers = [];
|
||
try {
|
||
const list = await getRechargeTiers();
|
||
if (Array.isArray(list) && list.length > 0) {
|
||
tiers = list;
|
||
}
|
||
} catch (_) {}
|
||
|
||
if (tiers.length === 0) {
|
||
tiers = [
|
||
{ amount: 50, bonusAmount: 0, tag: '基础充值' },
|
||
{ amount: 100, bonusAmount: 5, tag: '热门畅享' },
|
||
{ amount: 200, bonusAmount: 15, tag: '超值加赠' },
|
||
{ amount: 500, bonusAmount: 50, tag: '尊享特惠' }
|
||
];
|
||
}
|
||
|
||
const itemList = tiers.map((t) => {
|
||
const bonus = Number(t.bonusAmount) > 0 ? ` (赠¥${Number(t.bonusAmount)})` : '';
|
||
const tag = t.tag ? ` [${t.tag}]` : '';
|
||
return `充值 ¥${Number(t.amount)}${bonus}${tag}`;
|
||
});
|
||
|
||
uni.showActionSheet({
|
||
itemList,
|
||
success: async (res) => {
|
||
const selected = tiers[res.tapIndex] || tiers[0];
|
||
const amount = Number(selected.amount);
|
||
try {
|
||
const result = await rechargeBalance(1001, amount);
|
||
if (result && result.balance) {
|
||
user.value.balance = result.balance;
|
||
}
|
||
const bonusMsg = Number(selected.bonusAmount) > 0 ? `，加赠 ¥${Number(selected.bonusAmount)} 已同步入账` : '';
|
||
uni.showToast({
|
||
title: `充值 ¥${amount} 成功${bonusMsg}！`,
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
} catch (err) {
|
||
uni.showToast({
|
||
title: '充值失败，请稍后重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const showWithdrawRecordsModal = ref(false);
|
||
const userWithdrawalsList = ref([]);
|
||
|
||
const financeRules = computed(() => {
|
||
return platformConfigs.value.finance_rules || {};
|
||
});
|
||
|
||
const minWithdrawAmount = computed(() => {
|
||
return Number(financeRules.value.minWithdrawAmount) || 50;
|
||
});
|
||
|
||
const openWithdrawModal = () => {
|
||
if (!ensureLoggedIn()) return;
|
||
uni.navigateTo({
|
||
url: '/pages/user/withdraw'
|
||
});
|
||
};
|
||
|
||
const handleWithdraw = () => {
|
||
openWithdrawModal();
|
||
};
|
||
|
||
const navToWithdraw = () => {
|
||
openWithdrawModal();
|
||
};
|
||
|
||
const openWithdrawRecordsModal = async () => {
|
||
if (!ensureLoggedIn()) return;
|
||
try {
|
||
const list = await getUserWithdrawals(user.value.id || 1001);
|
||
userWithdrawalsList.value = Array.isArray(list) ? list : [];
|
||
} catch (_) {
|
||
userWithdrawalsList.value = [];
|
||
}
|
||
showWithdrawRecordsModal.value = true;
|
||
};
|
||
|
||
// 手机号脱敏展示
|
||
const displayPhone = computed(() => {
|
||
const phone = user.value.phone;
|
||
if (!phone) return '';
|
||
if (privacyHidePhone.value) {
|
||
if (phone.length >= 11) {
|
||
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
|
||
}
|
||
return phone.slice(0, 3) + '****';
|
||
}
|
||
return phone;
|
||
});
|
||
|
||
// 1. 我的收藏业务逻辑
|
||
const openFavoritesModal = async () => {
|
||
if (!ensureLoggedIn()) return;
|
||
showFavoritesModal.value = true;
|
||
await loadFavorites();
|
||
};
|
||
|
||
const loadFavorites = async () => {
|
||
loadingFavorites.value = true;
|
||
try {
|
||
const list = await getFavorites(user.value.id || 1001);
|
||
favoriteList.value = Array.isArray(list) ? list : [];
|
||
} catch (_) {
|
||
favoriteList.value = [];
|
||
} finally {
|
||
loadingFavorites.value = false;
|
||
}
|
||
};
|
||
|
||
const handleRemoveFavorite = async (expertId) => {
|
||
try {
|
||
await removeFavorite(expertId, user.value.id || 1001);
|
||
favoriteList.value = favoriteList.value.filter(item => item.id !== expertId);
|
||
uni.showToast({ title: '已取消收藏', icon: 'none' });
|
||
} catch (err) {
|
||
uni.showToast({ title: err.message || '操作失败', icon: 'none' });
|
||
}
|
||
};
|
||
|
||
const goToExpertDetail = (expertId) => {
|
||
showFavoritesModal.value = false;
|
||
uni.navigateTo({
|
||
url: `/pages/expert/detail?id=${expertId}`
|
||
});
|
||
};
|
||
|
||
const goToDiscover = () => {
|
||
showFavoritesModal.value = false;
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
};
|
||
|
||
// 2. 系统与隐私设置业务逻辑
|
||
const updateCacheSize = () => {
|
||
try {
|
||
const info = uni.getStorageInfoSync();
|
||
const kb = info.currentSize || 0;
|
||
if (kb > 1024) {
|
||
cacheSizeText.value = `${(kb / 1024).toFixed(2)} MB`;
|
||
} else {
|
||
cacheSizeText.value = `${kb} KB`;
|
||
}
|
||
} catch (_) {
|
||
cacheSizeText.value = '1.25 MB';
|
||
}
|
||
};
|
||
|
||
const openSettingsModal = () => {
|
||
updateCacheSize();
|
||
showSettingsModal.value = true;
|
||
};
|
||
|
||
const onToggleHidePhone = (e) => {
|
||
const val = e.detail.value;
|
||
privacyHidePhone.value = val;
|
||
uni.setStorageSync('privacy_hide_phone', val ? '1' : '0');
|
||
uni.showToast({ title: val ? '已开启手机号隐藏' : '已关闭手机号隐藏', icon: 'none' });
|
||
};
|
||
|
||
const onToggleNotice = (e) => {
|
||
const val = e.detail.value;
|
||
noticeSubscribe.value = val;
|
||
uni.setStorageSync('notice_subscribe', val ? '1' : '0');
|
||
uni.showToast({ title: val ? '已开启服务提醒' : '已关闭服务提醒', icon: 'none' });
|
||
};
|
||
|
||
const clearLocalCache = () => {
|
||
try {
|
||
const token = uni.getStorageSync('peiwan_token');
|
||
const userRole = uni.getStorageSync('peiwan_current_role');
|
||
const themeKey = uni.getStorageSync('app_theme_key');
|
||
const hidePhone = uni.getStorageSync('privacy_hide_phone');
|
||
uni.clearStorageSync();
|
||
if (token) uni.setStorageSync('peiwan_token', token);
|
||
if (userRole) uni.setStorageSync('peiwan_current_role', userRole);
|
||
if (themeKey) uni.setStorageSync('app_theme_key', themeKey);
|
||
if (hidePhone) uni.setStorageSync('privacy_hide_phone', hidePhone);
|
||
cacheSizeText.value = '0 KB';
|
||
uni.showToast({ title: '缓存清理完毕', icon: 'success' });
|
||
} catch (_) {
|
||
uni.showToast({ title: '清理成功', icon: 'success' });
|
||
}
|
||
};
|
||
|
||
// 3. 分销推广管理业务逻辑
|
||
const openDistributionModal = async () => {
|
||
if (!ensureLoggedIn()) return;
|
||
showDistributionModal.value = true;
|
||
distActiveTab.value = 'poster';
|
||
await loadDistributionData();
|
||
};
|
||
|
||
const showInvitePoster = () => {
|
||
openDistributionModal();
|
||
};
|
||
|
||
const loadDistributionData = async () => {
|
||
const uid = user.value.id || 1001;
|
||
try {
|
||
const [teamData, records] = await Promise.all([
|
||
getDistributionTeam(uid),
|
||
getDistributionRecords(uid)
|
||
]);
|
||
if (teamData) distributionTeam.value = teamData;
|
||
if (records) distributionRecords.value = records;
|
||
} catch (_) {}
|
||
};
|
||
|
||
const copyInviteCode = () => {
|
||
const code = `PW${user.value.id || 1001}`;
|
||
uni.setClipboardData({
|
||
data: code,
|
||
success: () => {
|
||
uni.showToast({ title: '邀请码已复制', icon: 'success' });
|
||
}
|
||
});
|
||
};
|
||
|
||
const copyInviteLink = () => {
|
||
const link = `https://peiww.gynhc.com/invite?code=PW${user.value.id || 1001}`;
|
||
uni.setClipboardData({
|
||
data: link,
|
||
success: () => {
|
||
uni.showToast({ title: '邀请链接已复制', icon: 'success' });
|
||
}
|
||
});
|
||
};
|
||
|
||
const savePosterImage = () => {
|
||
uni.showToast({ title: '海报已保存至相册', icon: 'success' });
|
||
};
|
||
|
||
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 {
|
||
await withdrawCommission(user.value.id || 1001, amount, { channel: 'WECHAT' });
|
||
user.value.commission = (currentComm - amount).toFixed(2);
|
||
distWithdrawAmount.value = '';
|
||
uni.hideLoading();
|
||
uni.showToast({ title: '提现申请已提交', icon: 'success' });
|
||
await loadDistributionData();
|
||
} catch (err) {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: err.message || '提现提交失败', icon: 'none' });
|
||
} finally {
|
||
submittingDistWithdraw.value = false;
|
||
}
|
||
};
|
||
|
||
// 大神实名入驻认证已全面升级重构为独立专享页面 /pages/expert/apply
|
||
const showExpertCertModal = ref(false);
|
||
|
||
const applyExpert = () => {
|
||
if (!ensureLoggedIn()) return;
|
||
uni.navigateTo({
|
||
url: '/pages/expert/apply'
|
||
});
|
||
};
|
||
|
||
const contactService = () => {
|
||
const cs = platformConfigs.value.customer_service || {};
|
||
const hotline = cs.hotline || '400-888-6666';
|
||
const wechat = cs.wechat || 'peiwan_vip_kefu';
|
||
const cleanPhone = hotline.replace(/[^\d]/g, '');
|
||
|
||
uni.showActionSheet({
|
||
itemList: [
|
||
`拨打官方服务热线 (${hotline})`,
|
||
`复制平台 VIP 客服微信号 (${wechat})`,
|
||
'查看平台官方安全指引'
|
||
],
|
||
success: (res) => {
|
||
if (res.tapIndex === 0) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: cleanPhone,
|
||
fail: () => {
|
||
uni.showToast({ title: `服务热线: ${hotline}`, icon: 'none' });
|
||
}
|
||
});
|
||
} else if (res.tapIndex === 1) {
|
||
uni.setClipboardData({
|
||
data: wechat,
|
||
success: () => {
|
||
uni.showToast({ title: '官方客服微信号已复制', icon: 'success' });
|
||
}
|
||
});
|
||
} else {
|
||
openNotice();
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const openNotice = () => {
|
||
const notice = platformConfigs.value.safety_notice || {};
|
||
const title = notice.title || '平台官方公告与指引';
|
||
let content = '【安全履约须知】\n1. 为保障搭子与陪伴师人身与财产安全，线下约局须在合规公开商业街区进行。\n2. 现场碰面后请出示 4 位数字核销码进行签到确认。\n3. 平台提供 7x24 小时争议仲裁与资金托管保障服务。';
|
||
if (Array.isArray(notice.points) && notice.points.length > 0) {
|
||
content = notice.points.map((p, idx) => `${idx + 1}. ${p}`).join('\n');
|
||
}
|
||
|
||
uni.showModal({
|
||
title,
|
||
content,
|
||
showCancel: false,
|
||
confirmText: '我知道了',
|
||
confirmColor: '#6366F1'
|
||
});
|
||
};
|
||
|
||
const openFaq = () => {
|
||
const list = platformConfigs.value.faq_list || [];
|
||
if (Array.isArray(list) && list.length > 0) {
|
||
const questions = list.map((item, idx) => `${idx + 1}. ${item.question}`);
|
||
uni.showActionSheet({
|
||
itemList: questions,
|
||
success: (res) => {
|
||
const item = list[res.tapIndex];
|
||
if (item) {
|
||
uni.showModal({
|
||
title: item.question,
|
||
content: `【${item.category || '常见问题'}】\n${item.answer}`,
|
||
showCancel: false,
|
||
confirmText: '我知道了',
|
||
confirmColor: '#6366F1'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
uni.showModal({
|
||
title: '帮助中心与常见问题',
|
||
content: '1. 什么是4位核销码？\n到达活动现场后出示给陪伴师或房主签到核销，保障真实履约。\n2. 如何申请退款？\n在未接单或未核销前可随时全额退款，或发起争议仲裁由官方判定。',
|
||
showCancel: false
|
||
});
|
||
}
|
||
};
|
||
|
||
const openAbout = () => {
|
||
uni.showActionSheet({
|
||
itemList: ['用户服务协议', '隐私保护指引'],
|
||
success: (res) => {
|
||
const type = res.tapIndex === 1 ? 'privacy' : 'service';
|
||
uni.navigateTo({
|
||
url: `/pages/common/protocol?type=${type}`,
|
||
fail: () => {
|
||
const proto = platformConfigs.value.platform_protocol || {};
|
||
const fullText = type === 'privacy'
|
||
? (proto.privacyPolicyContent || '平台全面遵守微信小程序开发者隐私规范要求，对用户数据实施高强度加密保护。')
|
||
: (proto.userAgreementContent || '平台遵循合法合规与安全原则，所有同城活动履约均须在公开透明街区展开。');
|
||
uni.showModal({
|
||
title: type === 'privacy' ? (proto.privacyPolicyTitle || '隐私保护指引') : (proto.userAgreementTitle || '用户服务协议'),
|
||
content: fullText,
|
||
showCancel: false
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const navTo = (url) => {
|
||
if (!ensureLoggedIn()) return;
|
||
if (url.startsWith('/pages/activity/list')) {
|
||
if (url.includes('tab=')) {
|
||
const tab = url.split('tab=')[1].split('&')[0];
|
||
uni.setStorageSync('ACTIVITY_ACTIVE_TAB', tab);
|
||
}
|
||
uni.switchTab({ url: '/pages/activity/list' });
|
||
} else if (url === '/pages/order/list') {
|
||
uni.switchTab({ url });
|
||
} else {
|
||
uni.navigateTo({ url });
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.user-container {
|
||
min-height: 100vh;
|
||
background-color: #0A0F1D;
|
||
padding: var(--safe-header-gap, 36rpx) 32rpx calc(160rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.profile-card {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 28rpx;
|
||
|
||
.user-avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 60rpx;
|
||
border: 4rpx solid #6366F1;
|
||
margin-right: 24rpx;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
box-shadow: 0 0 16rpx rgba(99, 102, 241, 0.4);
|
||
}
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
.user-top-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12rpx;
|
||
margin-bottom: 10rpx;
|
||
|
||
.name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
min-width: 0;
|
||
flex: 1;
|
||
cursor: pointer;
|
||
transition: opacity 0.15s ease;
|
||
|
||
&:active {
|
||
opacity: 0.75;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.vip-badge {
|
||
font-size: 18rpx;
|
||
background: linear-gradient(135deg, #F59E0B, #D97706);
|
||
color: #FFF;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 8rpx;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
flex-shrink: 0;
|
||
|
||
.theme-quick-switch {
|
||
height: 56rpx;
|
||
padding: 4rpx 6rpx;
|
||
background: #151D30;
|
||
border-radius: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
box-sizing: border-box;
|
||
|
||
.switch-icon-btn {
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
border-radius: 23rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0.35;
|
||
transition: all 0.25s ease;
|
||
|
||
.theme-icon-svg {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
|
||
&.active {
|
||
opacity: 1;
|
||
}
|
||
|
||
&.moon-btn.active {
|
||
background: rgba(99, 102, 241, 0.25);
|
||
border: 1px solid rgba(129, 140, 248, 0.5);
|
||
box-shadow: 0 0 10rpx rgba(99, 102, 241, 0.4);
|
||
}
|
||
|
||
&.sun-btn.active {
|
||
background: rgba(245, 158, 11, 0.25);
|
||
border: 1px solid rgba(245, 158, 11, 0.5);
|
||
box-shadow: 0 0 10rpx rgba(245, 158, 11, 0.4);
|
||
}
|
||
}
|
||
}
|
||
|
||
.edit-btn {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
background: #151D30;
|
||
border-radius: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
|
||
.edit-svg {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-uid {
|
||
font-size: 22rpx;
|
||
color: #64748B;
|
||
font-family: monospace;
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
|
||
&:active {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.role-switch-card {
|
||
position: relative;
|
||
border-radius: 24rpx;
|
||
padding: 28rpx;
|
||
margin-bottom: 28rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 8rpx 28rpx rgba(99, 102, 241, 0.35);
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -50%;
|
||
background: conic-gradient(from 0deg, transparent 0%, #6366F1 25%, #10B981 50%, #6366F1 75%, transparent 100%);
|
||
animation: glowSpin 5s linear infinite;
|
||
z-index: 0;
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 2rpx;
|
||
background: linear-gradient(135deg, #1E1B4B 0%, #0F172A 100%);
|
||
border-radius: 22rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.role-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.role-left {
|
||
flex: 1;
|
||
margin-right: 20rpx;
|
||
|
||
.role-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
margin-bottom: 6rpx;
|
||
|
||
.role-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background: #6366F1;
|
||
box-shadow: 0 0 8rpx #6366F1;
|
||
|
||
&.expert {
|
||
background: #10B981;
|
||
box-shadow: 0 0 8rpx #10B981;
|
||
}
|
||
}
|
||
|
||
.current-role-tag {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.role-sub {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
|
||
.btn-switch-role {
|
||
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
|
||
color: #FFF;
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
border-radius: 32rpx;
|
||
padding: 0 24rpx;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
margin: 0;
|
||
box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.4);
|
||
}
|
||
}
|
||
}
|
||
|
||
.wallet-card {
|
||
background-color: #151D30;
|
||
border-radius: 24rpx;
|
||
padding: 28rpx;
|
||
margin-bottom: 24rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
||
.wallet-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
|
||
.wallet-title {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
}
|
||
.wallet-detail {
|
||
font-size: 22rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
|
||
.asset-grid {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
.asset-col {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.asset-label {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.asset-val {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
margin-bottom: 14rpx;
|
||
font-variant-numeric: tabular-nums;
|
||
|
||
&.green-val {
|
||
color: #10B981;
|
||
}
|
||
&.gold-val {
|
||
color: #F59E0B;
|
||
}
|
||
}
|
||
|
||
.asset-btn-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.asset-btn {
|
||
font-size: 20rpx;
|
||
padding: 0 20rpx;
|
||
height: 48rpx;
|
||
line-height: 46rpx;
|
||
border-radius: 24rpx;
|
||
margin: 0;
|
||
|
||
&.recharge {
|
||
background: rgba(16, 185, 129, 0.15);
|
||
color: #10B981;
|
||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||
}
|
||
&.withdraw {
|
||
background: rgba(245, 158, 11, 0.15);
|
||
color: #F59E0B;
|
||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||
}
|
||
&.records {
|
||
background: rgba(99, 102, 241, 0.15);
|
||
color: #818CF8;
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
}
|
||
}
|
||
}
|
||
|
||
.asset-divider {
|
||
width: 1px;
|
||
height: 80rpx;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu-grid-card {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background-color: #151D30;
|
||
border-radius: 24rpx;
|
||
padding: 24rpx 16rpx;
|
||
margin-bottom: 24rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
||
.menu-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.menu-icon {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 22rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10rpx;
|
||
|
||
.menu-svg {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
|
||
&.bg-green { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); }
|
||
&.bg-purple { background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.3); }
|
||
&.bg-blue { background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); }
|
||
&.bg-orange { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); }
|
||
&.bg-indigo { background: rgba(99, 102, 241, 0.2); border: 1px solid rgba(99, 102, 241, 0.4); }
|
||
}
|
||
|
||
.menu-title {
|
||
font-size: 24rpx;
|
||
color: #F8FAFC;
|
||
font-weight: 600;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
.menu-desc {
|
||
font-size: 18rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-menu-card {
|
||
background-color: #151D30;
|
||
border-radius: 24rpx;
|
||
padding: 8rpx 28rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
||
.list-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 26rpx 0;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.row-svg {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 20rpx;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.row-label {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #E2E8F0;
|
||
}
|
||
|
||
.row-arrow-svg {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
opacity: 0.45;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 个人资料修改弹窗 */
|
||
.profile-edit-modal-mask {
|
||
position: fixed;
|
||
inset: 0;
|
||
background-color: rgba(0, 0, 0, 0.65);
|
||
backdrop-filter: blur(8px);
|
||
z-index: 999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40rpx;
|
||
}
|
||
|
||
.profile-edit-modal {
|
||
width: 100%;
|
||
max-width: 620rpx;
|
||
background: #151D30;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 32rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.5);
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 32rpx 36rpx 20rpx;
|
||
|
||
.modal-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.btn-close {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.close-svg {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 20rpx 36rpx 32rpx;
|
||
|
||
.edit-avatar-section {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
margin-bottom: 32rpx;
|
||
padding-bottom: 24rpx;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
||
.avatar-preview {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #6366F1;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.avatar-meta {
|
||
flex: 1;
|
||
|
||
.avatar-label-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
.avatar-label {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
display: block;
|
||
}
|
||
|
||
.avatar-action-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
|
||
.btn-wechat-choose {
|
||
margin: 0;
|
||
padding: 4rpx 14rpx;
|
||
font-size: 22rpx;
|
||
color: #10B981;
|
||
font-weight: 600;
|
||
background: rgba(16, 185, 129, 0.12);
|
||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||
border-radius: 8rpx;
|
||
line-height: 1.4;
|
||
cursor: pointer;
|
||
|
||
&::after {
|
||
display: none;
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.btn-custom-upload {
|
||
font-size: 22rpx;
|
||
color: #6366F1;
|
||
font-weight: 600;
|
||
padding: 4rpx 14rpx;
|
||
background: rgba(99, 102, 241, 0.12);
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
border-radius: 8rpx;
|
||
cursor: pointer;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.preset-avatars-row {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
|
||
.preset-avatar-item {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid transparent;
|
||
opacity: 0.7;
|
||
transition: all 0.2s ease;
|
||
|
||
&.selected {
|
||
border-color: #6366F1;
|
||
opacity: 1;
|
||
transform: scale(1.1);
|
||
box-shadow: 0 0 12rpx rgba(99, 102, 241, 0.5);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.edit-field {
|
||
margin-bottom: 24rpx;
|
||
|
||
.field-label {
|
||
font-size: 24rpx;
|
||
color: #94A3B8;
|
||
margin-bottom: 10rpx;
|
||
display: block;
|
||
}
|
||
|
||
.field-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
background: #0A0F1D;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 16rpx;
|
||
padding: 0 24rpx;
|
||
font-size: 28rpx;
|
||
color: #F8FAFC;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.field-placeholder {
|
||
color: #475569;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
padding: 0 36rpx 36rpx;
|
||
|
||
.btn-modal {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 40rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
margin: 0;
|
||
|
||
&::after { border: none; }
|
||
|
||
&.btn-cancel {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: #94A3B8;
|
||
}
|
||
|
||
&.btn-save {
|
||
background: linear-gradient(135deg, #6366F1, #8B5CF6);
|
||
color: #FFFFFF;
|
||
box-shadow: 0 6rpx 20rpx rgba(99, 102, 241, 0.4);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-container.theme-warm {
|
||
background-color: #FDFBF7;
|
||
|
||
.profile-card {
|
||
.user-avatar {
|
||
border-color: #EA580C;
|
||
}
|
||
.user-info .name-row .user-name {
|
||
color: #1C1917;
|
||
}
|
||
.user-info .user-uid {
|
||
color: #78716C;
|
||
}
|
||
|
||
.header-actions {
|
||
.theme-quick-switch {
|
||
background: #FFFFFF;
|
||
border-color: #E7E2D8;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
|
||
|
||
.switch-icon-btn {
|
||
opacity: 0.35;
|
||
|
||
&.active {
|
||
opacity: 1;
|
||
}
|
||
|
||
&.moon-btn.active {
|
||
background: rgba(99, 102, 241, 0.15);
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
box-shadow: 0 2rpx 8rpx rgba(99, 102, 241, 0.2);
|
||
}
|
||
|
||
&.sun-btn.active {
|
||
background: #FFF7ED;
|
||
border: 1px solid rgba(234, 88, 12, 0.35);
|
||
box-shadow: 0 2rpx 10rpx rgba(234, 88, 12, 0.25);
|
||
}
|
||
}
|
||
}
|
||
|
||
.edit-btn {
|
||
background: #FFFFFF;
|
||
border-color: #E7E2D8;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
|
||
|
||
.edit-svg {
|
||
opacity: 0.75;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.role-switch-card, .identity-banner {
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #F0ECE4;
|
||
box-shadow: 0 4rpx 20rpx rgba(234, 88, 12, 0.12);
|
||
|
||
&::after {
|
||
background: linear-gradient(135deg, #FFFFFF 0%, #FDFBF7 100%);
|
||
border-radius: 22rpx;
|
||
}
|
||
|
||
&::before {
|
||
background: conic-gradient(from 0deg, transparent 0%, #EA580C 25%, #F59E0B 50%, #EA580C 75%, transparent 100%);
|
||
}
|
||
|
||
.role-content .role-left {
|
||
.current-role-tag {
|
||
color: #1C1917;
|
||
}
|
||
.role-sub {
|
||
color: #78716C;
|
||
}
|
||
}
|
||
|
||
.btn-switch-role {
|
||
background: linear-gradient(135deg, #F97316, #EA580C);
|
||
color: #FFFFFF;
|
||
box-shadow: 0 4rpx 16rpx rgba(234, 88, 12, 0.35);
|
||
}
|
||
}
|
||
|
||
.wallet-card, .menu-grid-card, .list-menu-card {
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #F0ECE4;
|
||
box-shadow: 0 4rpx 20rpx rgba(28, 25, 23, 0.05);
|
||
}
|
||
|
||
.wallet-card {
|
||
.wallet-title { color: #1C1917; }
|
||
.asset-label { color: #78716C; }
|
||
.asset-val.gold-val { color: #D97706; }
|
||
.asset-btn.withdraw {
|
||
background: rgba(217, 119, 6, 0.1);
|
||
color: #D97706;
|
||
border-color: rgba(217, 119, 6, 0.25);
|
||
}
|
||
}
|
||
|
||
.menu-grid-card .menu-item {
|
||
.menu-title { color: #1C1917; }
|
||
.menu-desc { color: #78716C; }
|
||
}
|
||
|
||
.list-menu-card .list-row {
|
||
border-bottom-color: #F5F2EC;
|
||
.row-label { color: #1C1917; }
|
||
}
|
||
|
||
.profile-edit-modal {
|
||
background: #FFFFFF;
|
||
border: 1px solid #EAE5DC;
|
||
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.modal-header .modal-title {
|
||
color: #1C1917;
|
||
}
|
||
|
||
.modal-body {
|
||
.edit-avatar-section {
|
||
border-bottom-color: #F5F2EC;
|
||
|
||
.avatar-preview {
|
||
border-color: #EA580C;
|
||
}
|
||
|
||
.avatar-meta {
|
||
.avatar-action-links {
|
||
.btn-wechat-choose {
|
||
color: #059669;
|
||
background: #ECFDF5;
|
||
border-color: rgba(5, 150, 105, 0.3);
|
||
}
|
||
.btn-custom-upload {
|
||
color: #EA580C;
|
||
background: #FFF7ED;
|
||
border-color: rgba(234, 88, 12, 0.3);
|
||
}
|
||
}
|
||
|
||
.preset-avatars-row .preset-avatar-item.selected {
|
||
border-color: #EA580C;
|
||
box-shadow: 0 0 12rpx rgba(234, 88, 12, 0.4);
|
||
}
|
||
}
|
||
}
|
||
|
||
.edit-field {
|
||
.field-label {
|
||
color: #78716C;
|
||
}
|
||
|
||
.field-input {
|
||
background: #FDFBF7;
|
||
border-color: #E7E2D8;
|
||
color: #1C1917;
|
||
}
|
||
|
||
.field-placeholder {
|
||
color: #A8A29E;
|
||
}
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
.btn-cancel {
|
||
background: #F5F2EC;
|
||
color: #78716C;
|
||
}
|
||
|
||
.btn-save {
|
||
background: linear-gradient(135deg, #EA580C, #F97316);
|
||
color: #FFFFFF;
|
||
box-shadow: 0 6rpx 20rpx rgba(234, 88, 12, 0.35);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.guest-badge {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
background: rgba(148, 163, 184, 0.15);
|
||
border: 1px solid rgba(148, 163, 184, 0.3);
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 20rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.account-actions-card {
|
||
margin-top: 24rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.account-btn-group {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
.btn-switch-account {
|
||
flex: 1;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
background: rgba(99, 102, 241, 0.12);
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
color: #818CF8;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.btn-logout {
|
||
flex: 1;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
background: rgba(239, 68, 68, 0.12);
|
||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||
color: #F87171;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
border-radius: 24rpx;
|
||
}
|
||
}
|
||
|
||
&.not-logged {
|
||
.btn-primary-login {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background: linear-gradient(135deg, #6366F1, #8B5CF6);
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
border-radius: 24rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.35);
|
||
}
|
||
}
|
||
}
|
||
|
||
.theme-warm {
|
||
.guest-badge {
|
||
color: #78716C;
|
||
background: #F5F2EC;
|
||
border-color: #E7E5E4;
|
||
}
|
||
|
||
.account-actions-card {
|
||
.account-btn-group {
|
||
.btn-switch-account {
|
||
background: rgba(234, 88, 12, 0.08);
|
||
border-color: rgba(234, 88, 12, 0.25);
|
||
color: #EA580C;
|
||
}
|
||
|
||
.btn-logout {
|
||
background: #FEE2E2;
|
||
border-color: #FCA5A5;
|
||
color: #DC2626;
|
||
}
|
||
}
|
||
|
||
&.not-logged {
|
||
.btn-primary-login {
|
||
background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
|
||
box-shadow: 0 4rpx 20rpx rgba(234, 88, 12, 0.35);
|
||
}
|
||
}
|
||
}
|
||
|
||
.login-modal {
|
||
background: #FFFFFF;
|
||
border-color: #F0ECE4;
|
||
box-shadow: 0 20rpx 60rpx rgba(28, 25, 23, 0.15);
|
||
|
||
.modal-header .modal-title {
|
||
color: #1C1917;
|
||
}
|
||
|
||
.demo-accounts-wrap {
|
||
.demo-tips {
|
||
color: #78716C;
|
||
}
|
||
|
||
.demo-account-item {
|
||
background: #FAFAF9;
|
||
border-color: #E7E5E4;
|
||
|
||
&.current {
|
||
border-color: #EA580C;
|
||
background: rgba(234, 88, 12, 0.08);
|
||
}
|
||
|
||
.demo-info {
|
||
.demo-title-row .demo-name {
|
||
color: #1C1917;
|
||
}
|
||
.demo-desc {
|
||
color: #78716C;
|
||
}
|
||
}
|
||
|
||
.demo-action-btn {
|
||
color: #EA580C;
|
||
background: rgba(234, 88, 12, 0.12);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.withdraw-modal-box {
|
||
max-width: 640rpx;
|
||
|
||
.channel-tabs-row {
|
||
display: flex;
|
||
background: #0F172A;
|
||
border-radius: 16rpx;
|
||
padding: 6rpx;
|
||
margin-bottom: 24rpx;
|
||
gap: 8rpx;
|
||
|
||
.channel-pill {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 14rpx 0;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
color: #94A3B8;
|
||
border-radius: 12rpx;
|
||
transition: all 0.2s ease;
|
||
|
||
&.active {
|
||
background: linear-gradient(135deg, #10B981, #059669);
|
||
color: #FFFFFF;
|
||
box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.35);
|
||
}
|
||
}
|
||
}
|
||
|
||
.field-title-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
.field-tip {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
}
|
||
}
|
||
|
||
.amount-input-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #0F172A;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 16rpx;
|
||
padding: 0 20rpx;
|
||
height: 84rpx;
|
||
|
||
.currency-symbol {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.amount-val-input {
|
||
flex: 1;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
.btn-all-in {
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
color: #10B981;
|
||
padding: 8rpx 16rpx;
|
||
background: rgba(16, 185, 129, 0.12);
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
.channel-hint-card {
|
||
background: rgba(16, 185, 129, 0.08);
|
||
border: 1px dashed rgba(16, 185, 129, 0.3);
|
||
border-radius: 14rpx;
|
||
padding: 16rpx;
|
||
margin-top: 16rpx;
|
||
|
||
.hint-text {
|
||
font-size: 20rpx;
|
||
color: #34D399;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
|
||
.withdraw-records-modal-box {
|
||
max-width: 660rpx;
|
||
max-height: 80vh;
|
||
|
||
.records-modal-scroll {
|
||
max-height: 560rpx;
|
||
padding-right: 8rpx;
|
||
|
||
.wd-card-row {
|
||
background: #0F172A;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 16rpx;
|
||
padding: 18rpx 20rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.wd-row-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
|
||
.wd-no {
|
||
font-size: 20rpx;
|
||
color: #64748B;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.wd-badge {
|
||
font-size: 20rpx;
|
||
padding: 2rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
font-weight: 600;
|
||
|
||
&.pending {
|
||
background: rgba(245, 158, 11, 0.15);
|
||
color: #F59E0B;
|
||
}
|
||
&.success {
|
||
background: rgba(16, 185, 129, 0.15);
|
||
color: #10B981;
|
||
}
|
||
&.rejected {
|
||
background: rgba(239, 68, 68, 0.15);
|
||
color: #EF4444;
|
||
}
|
||
}
|
||
}
|
||
|
||
.wd-row-center {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
margin-bottom: 8rpx;
|
||
|
||
.wd-val {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
.wd-ch {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
}
|
||
}
|
||
|
||
.wd-row-bot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.wd-time {
|
||
font-size: 18rpx;
|
||
color: #64748B;
|
||
}
|
||
|
||
.wd-reason {
|
||
font-size: 18rpx;
|
||
color: #EF4444;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-records-box {
|
||
padding: 60rpx 0;
|
||
text-align: center;
|
||
|
||
.empty-txt {
|
||
font-size: 24rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-signature-text {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
margin-top: 8rpx;
|
||
line-height: 1.4;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
max-width: 480rpx;
|
||
}
|
||
|
||
.gender-pill-group {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
margin-top: 10rpx;
|
||
|
||
.gender-pill {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 16rpx 0;
|
||
font-size: 26rpx;
|
||
color: #94A3B8;
|
||
background-color: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 14rpx;
|
||
transition: all 0.2s ease;
|
||
|
||
&.active {
|
||
color: #FFFFFF;
|
||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.4) 100%);
|
||
border-color: #6366F1;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.uid-phone-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
margin-top: 4rpx;
|
||
|
||
.user-phone-tag {
|
||
font-size: 20rpx;
|
||
color: #6366F1;
|
||
background: rgba(99, 102, 241, 0.12);
|
||
border: 1px solid rgba(99, 102, 241, 0.25);
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.row-badge {
|
||
margin-left: auto;
|
||
margin-right: 8rpx;
|
||
font-size: 20rpx;
|
||
color: #F59E0B;
|
||
background: rgba(245, 158, 11, 0.15);
|
||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||
padding: 2rpx 12rpx;
|
||
border-radius: 16rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
// 1. 我的收藏弹窗样式
|
||
.fav-modal-box {
|
||
max-width: 680rpx;
|
||
max-height: 85vh;
|
||
|
||
.fav-modal-body {
|
||
padding: 10rpx 0 20rpx;
|
||
}
|
||
|
||
.fav-list-scroll {
|
||
max-height: 600rpx;
|
||
|
||
.fav-item-card {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #0F172A;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 16rpx;
|
||
padding: 16rpx 20rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.fav-item-left {
|
||
flex: 1;
|
||
display: flex;
|
||
gap: 16rpx;
|
||
align-items: center;
|
||
|
||
.fav-avatar-wrap {
|
||
position: relative;
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
flex-shrink: 0;
|
||
|
||
.fav-avatar {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 45rpx;
|
||
}
|
||
|
||
.status-indicator {
|
||
position: absolute;
|
||
bottom: -4rpx;
|
||
right: -4rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
background: #475569;
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 10rpx;
|
||
|
||
.dot {
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
border-radius: 50%;
|
||
background: #94A3B8;
|
||
}
|
||
|
||
.status-lbl {
|
||
font-size: 16rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
&.online {
|
||
background: #059669;
|
||
|
||
.dot {
|
||
background: #34D399;
|
||
box-shadow: 0 0 6rpx #34D399;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fav-meta {
|
||
flex: 1;
|
||
|
||
.fav-name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
margin-bottom: 4rpx;
|
||
|
||
.fav-name {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
.fav-track-tag {
|
||
font-size: 18rpx;
|
||
color: #818CF8;
|
||
background: rgba(99, 102, 241, 0.15);
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.fav-rank {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.fav-price-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 4rpx;
|
||
|
||
.fav-price {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
}
|
||
|
||
.fav-unit {
|
||
font-size: 18rpx;
|
||
color: #64748B;
|
||
}
|
||
|
||
.fav-rating {
|
||
font-size: 20rpx;
|
||
color: #F59E0B;
|
||
font-weight: 600;
|
||
margin-left: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fav-item-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10rpx;
|
||
flex-shrink: 0;
|
||
|
||
.btn-action-book {
|
||
height: 52rpx;
|
||
line-height: 50rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
background: linear-gradient(135deg, #6366F1, #4F46E5);
|
||
border-radius: 26rpx;
|
||
padding: 0 20rpx;
|
||
margin: 0;
|
||
}
|
||
|
||
.btn-action-unfav {
|
||
height: 48rpx;
|
||
line-height: 46rpx;
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 24rpx;
|
||
padding: 0 16rpx;
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-fav-box {
|
||
padding: 60rpx 0;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.empty-icon-svg {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
margin-bottom: 16rpx;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.empty-fav-txt {
|
||
font-size: 24rpx;
|
||
color: #64748B;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.btn-go-discover {
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
color: #6366F1;
|
||
background: rgba(99, 102, 241, 0.12);
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
border-radius: 30rpx;
|
||
height: 60rpx;
|
||
line-height: 58rpx;
|
||
padding: 0 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 2. 系统设置弹窗样式
|
||
.settings-modal-box {
|
||
max-width: 660rpx;
|
||
|
||
.settings-modal-body {
|
||
padding: 10rpx 0 24rpx;
|
||
|
||
.settings-group {
|
||
margin-bottom: 28rpx;
|
||
|
||
.settings-group-title {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
font-weight: 600;
|
||
margin-bottom: 14rpx;
|
||
display: block;
|
||
}
|
||
|
||
.settings-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #0F172A;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 12rpx;
|
||
|
||
.settings-label-wrap {
|
||
flex: 1;
|
||
|
||
.settings-label {
|
||
font-size: 26rpx;
|
||
color: #F8FAFC;
|
||
font-weight: 500;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.settings-desc {
|
||
font-size: 20rpx;
|
||
color: #64748B;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.btn-clear-cache {
|
||
font-size: 22rpx;
|
||
color: #EF4444;
|
||
background: rgba(239, 68, 68, 0.12);
|
||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||
border-radius: 12rpx;
|
||
height: 56rpx;
|
||
line-height: 54rpx;
|
||
padding: 0 20rpx;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.settings-info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #0F172A;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 12rpx;
|
||
|
||
.info-k {
|
||
font-size: 26rpx;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
.info-v {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
}
|
||
|
||
.info-arrow {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 3. 分销管理弹窗样式
|
||
.dist-modal-box {
|
||
max-width: 680rpx;
|
||
max-height: 88vh;
|
||
|
||
.dist-summary-banner {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
border-radius: 20rpx;
|
||
padding: 20rpx 10rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.dist-stat-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
|
||
.dist-stat-val {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
}
|
||
|
||
.dist-stat-lbl {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
}
|
||
|
||
.code-box {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
background: rgba(99, 102, 241, 0.3);
|
||
border-radius: 8rpx;
|
||
padding: 2rpx 10rpx;
|
||
|
||
.code-txt {
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
color: #FFFFFF;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.copy-tag {
|
||
font-size: 18rpx;
|
||
color: #818CF8;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dist-stat-divider {
|
||
width: 1px;
|
||
height: 48rpx;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
}
|
||
|
||
.dist-tabs-row {
|
||
display: flex;
|
||
background: #0F172A;
|
||
border-radius: 16rpx;
|
||
padding: 6rpx;
|
||
margin-bottom: 16rpx;
|
||
gap: 6rpx;
|
||
|
||
.dist-tab-pill {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 12rpx 0;
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
border-radius: 10rpx;
|
||
transition: all 0.2s;
|
||
|
||
&.active {
|
||
background: #6366F1;
|
||
color: #FFFFFF;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dist-modal-body {
|
||
padding: 0 0 20rpx;
|
||
|
||
.tab-pane-poster {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.poster-preview-card {
|
||
width: 100%;
|
||
background: linear-gradient(180deg, #1E1B4B 0%, #0F172A 100%);
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
border-radius: 20rpx;
|
||
padding: 32rpx 24rpx;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.poster-badge {
|
||
display: inline-block;
|
||
font-size: 18rpx;
|
||
color: #818CF8;
|
||
background: rgba(99, 102, 241, 0.2);
|
||
padding: 2rpx 14rpx;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.poster-hero-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
display: block;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.poster-hero-sub {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
display: block;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.suncode-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.suncode-ring {
|
||
position: relative;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 80rpx;
|
||
border: 2px dashed #6366F1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(99, 102, 241, 0.08);
|
||
|
||
.suncode-center {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
overflow: hidden;
|
||
border: 2rpx solid #6366F1;
|
||
|
||
.suncode-avatar {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.suncode-hint {
|
||
font-size: 18rpx;
|
||
color: #64748B;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.poster-footer-code {
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border-radius: 12rpx;
|
||
padding: 10rpx;
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 6rpx;
|
||
|
||
.lbl {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
}
|
||
|
||
.val {
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
color: #F59E0B;
|
||
font-family: monospace;
|
||
}
|
||
}
|
||
}
|
||
|
||
.poster-actions-row {
|
||
width: 100%;
|
||
display: flex;
|
||
gap: 16rpx;
|
||
|
||
.btn-poster-action {
|
||
flex: 1;
|
||
height: 72rpx;
|
||
line-height: 70rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
border-radius: 36rpx;
|
||
margin: 0;
|
||
|
||
&.secondary {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: #94A3B8;
|
||
}
|
||
|
||
&.primary {
|
||
background: linear-gradient(135deg, #6366F1, #8B5CF6);
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-pane-team {
|
||
.team-subtabs {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.subtab-item {
|
||
flex: 1;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
padding: 8rpx 0;
|
||
border-radius: 8rpx;
|
||
color: #94A3B8;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
|
||
&.active {
|
||
color: #6366F1;
|
||
background: rgba(99, 102, 241, 0.15);
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.team-list-scroll {
|
||
max-height: 520rpx;
|
||
|
||
.team-member-row {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #0F172A;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 14rpx;
|
||
padding: 16rpx 20rpx;
|
||
margin-bottom: 12rpx;
|
||
|
||
.m-avatar {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 36rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.m-info {
|
||
flex: 1;
|
||
|
||
.m-top {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
margin-bottom: 4rpx;
|
||
|
||
.m-name {
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
.m-level-badge {
|
||
font-size: 16rpx;
|
||
color: #818CF8;
|
||
background: rgba(99, 102, 241, 0.15);
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.m-time {
|
||
font-size: 18rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
|
||
.m-contribute {
|
||
text-align: right;
|
||
|
||
.m-val {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
display: block;
|
||
}
|
||
|
||
.m-lbl {
|
||
font-size: 18rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-pane-records {
|
||
.records-list-scroll {
|
||
max-height: 540rpx;
|
||
|
||
.record-card {
|
||
background: #0F172A;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 14rpx;
|
||
padding: 16rpx 20rpx;
|
||
margin-bottom: 12rpx;
|
||
|
||
.rec-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
|
||
.rec-sn {
|
||
font-size: 20rpx;
|
||
color: #64748B;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.rec-status-tag {
|
||
font-size: 18rpx;
|
||
color: #10B981;
|
||
background: rgba(16, 185, 129, 0.12);
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.rec-mid {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
|
||
.rec-from {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 8rpx;
|
||
|
||
.rec-name {
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
.rec-type {
|
||
font-size: 18rpx;
|
||
color: #818CF8;
|
||
}
|
||
}
|
||
|
||
.rec-amount-box {
|
||
text-align: right;
|
||
|
||
.rec-comm {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #F59E0B;
|
||
display: block;
|
||
}
|
||
|
||
.rec-rate {
|
||
font-size: 18rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rec-bot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 18rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-pane-withdraw {
|
||
.dist-wd-box {
|
||
background: #0F172A;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
|
||
.dist-wd-label {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
display: block;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.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: 12rpx;
|
||
padding: 0 16rpx;
|
||
height: 80rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.symbol {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.dist-amount-input {
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
.btn-all {
|
||
font-size: 22rpx;
|
||
color: #6366F1;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.dist-wd-tip {
|
||
margin-bottom: 24rpx;
|
||
|
||
.tip-txt {
|
||
font-size: 20rpx;
|
||
color: #64748B;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
|
||
.btn-submit-dist-wd {
|
||
background: linear-gradient(135deg, #10B981, #059669);
|
||
color: #FFFFFF;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
height: 76rpx;
|
||
line-height: 76rpx;
|
||
border-radius: 38rpx;
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 暖色模式下的适配
|
||
.theme-warm {
|
||
.uid-phone-row {
|
||
.user-phone-tag {
|
||
color: #EA580C;
|
||
background: #FFF7ED;
|
||
border-color: #FDBA74;
|
||
}
|
||
}
|
||
|
||
.fav-modal-box {
|
||
.fav-list-scroll .fav-item-card {
|
||
background: #FAFAF9;
|
||
border-color: #E7E5E4;
|
||
|
||
.fav-item-left .fav-meta .fav-name-row .fav-name {
|
||
color: #1C1917;
|
||
}
|
||
.fav-item-actions .btn-action-book {
|
||
background: linear-gradient(135deg, #F97316, #EA580C);
|
||
}
|
||
}
|
||
}
|
||
|
||
.settings-modal-box {
|
||
.settings-modal-body .settings-group {
|
||
.settings-row, .settings-info-row {
|
||
background: #FAFAF9;
|
||
border-color: #E7E5E4;
|
||
.settings-label-wrap .settings-label, .info-k {
|
||
color: #1C1917;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dist-modal-box {
|
||
.dist-summary-banner {
|
||
background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
|
||
border-color: #FDBA74;
|
||
}
|
||
.dist-tabs-row {
|
||
background: #F5F2EC;
|
||
.dist-tab-pill.active {
|
||
background: #EA580C;
|
||
}
|
||
}
|
||
.tab-pane-poster .poster-preview-card {
|
||
background: linear-gradient(180deg, #FFF7ED 0%, #FAFAF9 100%);
|
||
border-color: #FDBA74;
|
||
.poster-hero-title {
|
||
color: #1C1917;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|