1721 行
47 KiB
Vue
1721 行
47 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" :src="isLoggedIn && user.avatar ? user.avatar : DEFAULT_GUEST_AVATAR" mode="aspectFill" />
|
||
<view class="user-info">
|
||
<!-- 顶层水平对齐行：昵称/VIP 与 月亮太阳切换/设置 在同一水平线 -->
|
||
<view class="user-top-row">
|
||
<view class="name-row">
|
||
<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">
|
||
<image class="edit-svg" :src="ICONS.settings" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="user-uid">{{ isLoggedIn ? `UID: ${user.id}` : '登录后享受完整陪伴服务' }}</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>
|
||
<button class="asset-btn withdraw btn-active" @click="handleWithdraw">提现</button>
|
||
</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="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="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>
|
||
<text class="btn-custom-upload btn-active" @click="chooseCustomAvatar">相册上传</text>
|
||
</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>
|
||
|
||
<!-- 昵称输入 -->
|
||
<view class="edit-field">
|
||
<text class="field-label">用户昵称</text>
|
||
<input
|
||
class="field-input"
|
||
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>
|
||
|
||
<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>
|
||
|
||
<!-- 底部自定义导航栏 (动态自适应发单人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 } 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 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'
|
||
});
|
||
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) {
|
||
user.value = {
|
||
...user.value,
|
||
...profile
|
||
};
|
||
}
|
||
} catch (err) {
|
||
console.warn('[User] 加载用户信息异常:', err.message);
|
||
}
|
||
};
|
||
|
||
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();
|
||
});
|
||
|
||
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: ''
|
||
});
|
||
|
||
const editProfile = () => {
|
||
if (!ensureLoggedIn()) return;
|
||
editForm.value = {
|
||
nickname: user.value.nickname || '',
|
||
avatar: user.value.avatar || PRESET_AVATARS[0],
|
||
phone: user.value.phone || ''
|
||
};
|
||
showEditModal.value = true;
|
||
};
|
||
|
||
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;
|
||
}
|
||
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
|
||
});
|
||
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;
|
||
}
|
||
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 handleWithdraw = () => {
|
||
if (!ensureLoggedIn()) return;
|
||
const comm = Number(user.value.commission || 0);
|
||
const finRules = platformConfigs.value.finance_rules || {};
|
||
const minWithdraw = Number(finRules.minWithdrawAmount) || 50;
|
||
const withdrawDesc = finRules.withdrawDesc || '提现将自动发起微信企业付款打款到微信零钱。';
|
||
|
||
if (comm <= 0) {
|
||
uni.showToast({ title: '暂无可用提现佣金', icon: 'none' });
|
||
return;
|
||
}
|
||
if (comm < minWithdraw) {
|
||
uni.showToast({ title: `提现金额须满 ¥${minWithdraw} 元起提`, icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
uni.showModal({
|
||
title: '佣金提现申请',
|
||
content: `当前可提现佣金为 ¥${user.value.commission} (最低满¥${minWithdraw}起提)。\n${withdrawDesc}`,
|
||
confirmText: '确认提现',
|
||
confirmColor: '#10B981',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
const result = await withdrawCommission(user.value.id || 1001, comm);
|
||
if (result && result.commission !== undefined) {
|
||
user.value.commission = result.commission;
|
||
}
|
||
uni.showToast({
|
||
title: '提现申请已提交，等待到账',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
} catch (err) {
|
||
uni.showToast({
|
||
title: err.message || '提现失败，请稍后重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const showInvitePoster = () => {
|
||
if (!ensureLoggedIn()) return;
|
||
const finRules = platformConfigs.value.finance_rules || {};
|
||
const firstRate = finRules.firstReferralPercent != null ? finRules.firstReferralPercent : 5.0;
|
||
const secondRate = finRules.secondReferralPercent != null ? finRules.secondReferralPercent : 2.0;
|
||
const totalRate = (Number(firstRate) + Number(secondRate)).toFixed(1);
|
||
|
||
uni.showModal({
|
||
title: '二级分销推广',
|
||
content: `您的专属邀请码为：PW${user.value.id}\n已成功邀请 ${user.value.invitedCount} 位好友！\n好友下单享受直推 ${firstRate}% + 间推 ${secondRate}%，全网自动分润最高达 ${totalRate}%！`,
|
||
showCancel: false,
|
||
confirmText: '保存推广码'
|
||
});
|
||
};
|
||
|
||
// 大神实名入驻认证已全面升级重构为独立专享页面 /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 = () => {
|
||
const proto = platformConfigs.value.platform_protocol || {};
|
||
if (privacyModalRef.value && privacyModalRef.value.show) {
|
||
privacyModalRef.value.show();
|
||
} else {
|
||
uni.showModal({
|
||
title: proto.title || '用户服务协议与隐私规范',
|
||
content: proto.content || proto.summary || '严禁发布任何违规言论及低俗诈骗行为，平台全面遵循微信内容安全风控与用户隐私保护标准。',
|
||
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;
|
||
}
|
||
|
||
.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;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
font-size: 20rpx;
|
||
padding: 0 24rpx;
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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-label {
|
||
color: #78716C;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes glowSpin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
</style>
|