统一排行榜对齐星雀UI,页面资源后台配置实时刷新

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
XingQue
2026-06-27 01:26:11 +08:00
parent 1ab2e2080a
commit 21112173f2
292 changed files with 64010 additions and 81 deletions

View File

@@ -0,0 +1,543 @@
// pages/dashouzhongxin/dashouzhongxin.js
import request from '../../utils/request.js'
import popupService from '../../services/popupService.js'
const PLATFORM_INVITE_CODE = '0000008RffVgKHMj7kQC'
Page({
data: {
isDashou: false,
isLoading: false,
inviteCode: '',
uid: '',
touxiang: '',
avatarUrl: '',
dashouNicheng: '',
zhanghaoStatus: '',
yongjin: '',
zonge: '',
yajin: '',
chenghao: '',
jinfen: '',
clumber: [],
chengjiaoliang: '',
zaixianZhuangtai: 0,
lastRefreshTime: 0,
canRefresh: true,
isAutoRegistering: false,
inviterCache: null,
// 🆕 称号标签列表(从独立接口获取)
chenghaoList: []
},
onLoad(options) {
if (options.scene) {
try {
const scene = decodeURIComponent(options.scene);
options.inviteCode = scene;
} catch (e) {
console.error('scene解码失败', e);
}
}
this.checkDashouStatus();
const { inviteCode } = options || {};
if (inviteCode) {
this.setData({ inviteCode: inviteCode });
setTimeout(() => {
this.handleInviteCodeWithLoginCheck(inviteCode);
}, 500);
}
const app = getApp();
if (!app.globalData.hasShownPopupOnColdStart) {
app.globalData.hasShownPopupOnColdStart = true;
setTimeout(() => {
popupService.checkAndShow(this, 'dashouduan');
}, 300);
}
},
onHide() {
const popupComp = this.selectComponent('#popupNotice');
if (popupComp && popupComp.cleanup) {
popupComp.cleanup();
}
},
onShow() {
// 从缓存读取邀请人信息
const inviterCache = wx.getStorageSync('inviterCache') || null;
this.setData({ inviterCache });
this.registerNotificationComponent();
this.checkAndRedirectToJinpai();
if (this.data.isDashou) {
setTimeout(() => {
this.refreshDashouInfo();
this.fetchChenghaoList(); // 🆕 获取标签
}, 300);
}
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const options = currentPage.options || {};
if (options.inviteCode && this.data.isDashou === false) {
const { inviteCode } = options;
setTimeout(() => {
this.handleInviteCodeWithLoginCheck(inviteCode);
}, 300);
}
},
// ==================== 🆕 获取称号标签列表 ====================
async fetchChenghaoList() {
try {
const res = await request({
url: '/dengji/dsbqhq',
method: 'POST'
});
if (res && res.data.code === 0 && res.data.data) {
const list = res.data.data.chenghao_list || [];
this.setData({ chenghaoList: list });
// 可选:也存入全局,方便其他页面使用
const app = getApp();
app.globalData.chenghaoList = list;
} else {
this.setData({ chenghaoList: [] });
}
} catch (e) {
console.error('获取称号标签失败', e);
// 失败不影响主流程
}
},
// ========================================================
// 联系邀请人(保持不变)
async contactInviter() {
wx.showLoading({ title: '获取邀请人...', mask: true });
try {
const res = await request({ url: '/yonghu/hqwdyqr', method: 'POST' });
if (res && res.data.code === 200) {
const inviter = res.data.data;
const ossImageUrl = getApp().globalData.ossImageUrl || '';
const fullAvatar = inviter.touxiang
? (inviter.touxiang.startsWith('http') ? inviter.touxiang : ossImageUrl + inviter.touxiang)
: '';
const cacheData = {
uid: inviter.uid,
nicheng: inviter.nicheng || '',
avatar: fullAvatar
};
wx.setStorageSync('inviterCache', cacheData);
this.setData({ inviterCache: cacheData });
const app = getApp();
const myUid = wx.getStorageSync('uid');
if (app.globalData.currentRole !== 'dashou') {
app.globalData.currentRole = 'dashou';
wx.setStorageSync('currentRole', 'dashou');
if (app.switchRoleAndReconnect) {
await app.switchRoleAndReconnect('dashou');
}
} else {
if (app.connectForCurrentRole) app.connectForCurrentRole();
}
const param = {
toUserId: 'Gs' + inviter.uid,
toName: inviter.nicheng || '邀请人',
toAvatar: fullAvatar
};
wx.navigateTo({
url: '/pages/liaotian/liaotian?data=' + encodeURIComponent(JSON.stringify(param))
});
} else {
wx.showToast({ title: res?.data?.msg || '获取失败', icon: 'none' });
}
} catch (e) {
wx.showToast({ title: '网络错误', icon: 'none' });
} finally {
wx.hideLoading();
}
},
handleInviteCodeWithLoginCheck(inviteCode) {
const that = this;
const token = wx.getStorageSync('token');
const uid = wx.getStorageSync('uid');
if (!token || !uid) {
this.loginAndRegisterWithInviteCode(inviteCode);
} else {
if (!that.data.isDashou) {
wx.showLoading({ title: '自动注册中...', mask: true });
that.setData({ isAutoRegistering: true });
that.onRegister();
} else {
wx.showToast({ title: '您已是打手', icon: 'success', duration: 2000 });
}
}
},
loginAndRegisterWithInviteCode(inviteCode) {
const that = this;
wx.showLoading({ title: '登录注册中...', mask: true });
wx.login({
success: (loginRes) => {
if (loginRes.code) {
that.callLoginRegisterApi(loginRes.code, inviteCode);
} else {
wx.hideLoading();
wx.showToast({ title: '微信登录失败', icon: 'none' });
}
},
fail: () => {
wx.hideLoading();
console.error('微信登录失败');
wx.reLaunch({ url: '/pages/gerenzhongxin/gerenzhongxin' });
}
});
},
callLoginRegisterApi(code, inviteCode) {
const that = this;
const app = getApp();
const apiBaseUrl = app.globalData.apiBaseUrl;
if (!apiBaseUrl) {
wx.hideLoading();
wx.showToast({ title: '服务器配置错误', icon: 'none' });
return;
}
wx.request({
url: apiBaseUrl + '/yonghu/wdlyhdl',
method: 'POST',
data: { code: code, inviteCode: inviteCode },
header: { 'content-type': 'application/json' },
success: (res) => {
if (res.statusCode === 200 && res.data && res.data.code === 0 && res.data.data) {
const userData = res.data.data;
if (userData.token) wx.setStorageSync('token', userData.token);
const identityFields = ['nicheng', 'uid', 'touxiang', 'dashoustatus', 'guanshistatus', 'shangjiastatus', 'zuzhangstatus'];
identityFields.forEach(field => {
if (userData[field] !== undefined) {
wx.setStorageSync(field, userData[field]);
app.globalData[field] = userData[field];
}
});
const groupFields = ['dashouqun', 'dashouqunid', 'guanshiqun', 'guanshiqunid'];
groupFields.forEach(field => {
if (userData[field] !== undefined) {
wx.setStorageSync(field, userData[field]);
app.globalData[field] = userData[field];
}
});
if (userData.dashounicheng || userData.yongjin) {
const updateData = {
dashouNicheng: userData.dashounicheng || '',
zhanghaoStatus: userData.zhanghaostatus || '',
yongjin: userData.yongjin || '0.00',
zonge: userData.zonge || '0.00',
yajin: userData.yajin || '0.00',
chenghao: userData.chenghao || '',
jinfen: userData.jifen || userData.jinfen || '0',
clumber: userData.clumber || [],
chengjiaoliang: userData.chengjiaoliang || '0',
zaixianZhuangtai: userData.zaixianzhuangtai || 0,
dashouzhuangtai: userData.dashouzhuangtai || '',
// 🔥 不再从这里取 chenghaoList单独调用 fetchChenghaoList
};
Object.assign(app.globalData, updateData);
}
that.setData({
isDashou: true,
uid: userData.uid || '',
touxiang: userData.touxiang || '',
isAutoRegistering: false
// 不设置 chenghaoList稍后在 onShow 中自动获取
});
that.loadAvatar();
that.getDashouInfo();
that.switchToDashouRole();
wx.hideLoading();
wx.showToast({ title: '登录注册成功!', icon: 'success', duration: 2000 });
} else {
wx.hideLoading();
wx.showToast({ title: (res.data && res.data.msg) || '登录注册失败', icon: 'none' });
}
},
fail: () => {
wx.hideLoading();
wx.showToast({ title: '网络请求失败', icon: 'none' });
}
});
},
registerNotificationComponent() {
const app = getApp();
const notificationComp = this.selectComponent('#global-notification');
if (notificationComp && notificationComp.showNotification) {
app.globalData.globalNotification = {
show: (data) => notificationComp.showNotification(data),
hide: () => notificationComp.hideNotification()
};
}
},
checkDashouStatus() {
try {
const dashoustatus = wx.getStorageSync('dashoustatus');
const uid = wx.getStorageSync('uid');
const touxiang = wx.getStorageSync('touxiang');
if (dashoustatus === 1) {
this.setData({ isDashou: true, uid: uid || '', touxiang: touxiang || '' });
this.loadAvatar();
this.checkGlobalData();
} else {
this.setData({ isDashou: false });
}
} catch (error) {
console.error('读取缓存失败:', error);
this.setData({ isDashou: false });
}
},
loadAvatar() {
const app = getApp();
const { ossImageUrl = '', morentouxiang = 'avatar/default.jpg' } = app.globalData || {};
const { touxiang } = this.data;
let avatarUrl = '';
if (touxiang) {
avatarUrl = ossImageUrl + (touxiang.startsWith('/') ? touxiang : '/' + touxiang);
} else {
avatarUrl = ossImageUrl + (morentouxiang.startsWith('/') ? morentouxiang : '/' + morentouxiang);
}
this.setData({ avatarUrl });
},
checkGlobalData() {
const app = getApp();
const globalData = app.globalData || {};
const needRefresh = !globalData.dashouNicheng || globalData.dashouNicheng === '' || !globalData.yongjin;
if (needRefresh) {
this.getDashouInfo();
} else {
this.setDataFromGlobalData();
}
},
setDataFromGlobalData() {
const app = getApp();
const {
dashouNicheng = '', zhanghaoStatus = '', yongjin = '0.00', zonge = '0.00',
yajin = '0.00', chenghao = '', jinfen = '0', clumber = [],
chengjiaoliang = '0', zaixianZhuangtai = 0
// 🔥 chenghaoList 不再从全局取,避免旧数据干扰
} = app.globalData || {};
this.setData({
dashouNicheng, zhanghaoStatus, yongjin, zonge, yajin,
chenghao, jinfen,
clumber: Array.isArray(clumber) ? clumber : [],
chengjiaoliang,
zaixianZhuangtai: zaixianZhuangtai === 1 ? 1 : 0
});
},
async getDashouInfo() {
this.setData({ isLoading: true });
try {
const res = await request({ url: '/yonghu/dashouxinxi', method: 'POST' });
if (res && res.data.code == 200) {
const data = res.data.data;
const app = getApp();
const updateData = {
dashouNicheng: data.dashounicheng || '',
zhanghaoStatus: data.zhanghaostatus || '',
yongjin: data.yongjin || '0.00',
zonge: data.zonge || '0.00',
yajin: data.yajin || '0.00',
chenghao: data.chenghao || '',
jinfen: data.jifen || '0',
clumber: data.clumber || [],
chengjiaoliang: data.chengjiaoliang || '0',
zaixianZhuangtai: data.zaixianzhuangtai || 0,
dashouzhuangtai: data.dashouzhuangtai || '',
// 🔥 不再包含 chenghaoList
};
Object.assign(app.globalData, updateData);
if (data.dashoustatus !== undefined) {
wx.setStorageSync('dashoustatus', data.dashoustatus);
app.globalData.dashoustatus = data.dashoustatus;
}
if (data.guanshistatus !== undefined) {
wx.setStorageSync('guanshistatus', data.guanshistatus);
app.globalData.guanshistatus = data.guanshistatus;
}
this.setData({ ...updateData, isLoading: false });
if (this.data.isAutoRegistering) {
this.setData({ isAutoRegistering: false });
wx.showToast({ title: '注册成功!', icon: 'success', duration: 2000 });
} else {
wx.showToast({ title: '信息已更新', icon: 'success', duration: 1500 });
}
this.handleJinpaiStatus(data.chenghao);
}
} catch (error) {
console.error('获取打手信息失败:', error);
this.setData({ isLoading: false, isAutoRegistering: false });
wx.showToast({ title: '获取信息失败', icon: 'error', duration: 2000 });
}
},
refreshDashouInfo() {
const now = Date.now();
if (!this.data.canRefresh || (now - this.data.lastRefreshTime < 3000)) return;
this.setData({ lastRefreshTime: now, canRefresh: false });
this.getDashouInfo();
this.fetchChenghaoList(); // 🆕 同时刷新标签
setTimeout(() => this.setData({ canRefresh: true }), 3000);
},
onInviteCodeInput(e) {
this.setData({ inviteCode: e.detail.value.trim() });
},
async onRegister() {
const { inviteCode } = this.data;
if (!inviteCode) {
wx.showToast({ title: '请输入邀请码', icon: 'none', duration: 2000 });
return;
}
if (inviteCode.length > 100) {
wx.showToast({ title: '邀请码不能超过100字符', icon: 'none', duration: 2000 });
return;
}
this.setData({ isLoading: true });
try {
const res = await request({
url: '/yonghu/dashouzhuce',
method: 'POST',
data: { inviteCode: inviteCode }
});
if (res && res.data.code == 200) {
const data = res.data.data;
const app = getApp();
const identityFields = ['dashoustatus', 'guanshistatus', 'shangjiastatus', 'zuzhangstatus'];
identityFields.forEach(field => {
if (data[field] !== undefined) {
wx.setStorageSync(field, data[field]);
app.globalData[field] = data[field];
}
});
if (data.dashoustatus === undefined) {
wx.setStorageSync('dashoustatus', 1);
app.globalData.dashoustatus = 1;
}
const updateData = {
dashouNicheng: data.dashounicheng || '',
zhanghaoStatus: data.zhanghaostatus || '',
yongjin: data.yongjin || '0.00',
zonge: data.zonge || '0.00',
yajin: data.yajin || '0.00',
chenghao: data.chenghao || '',
jinfen: data.jinfen || '0',
clumber: data.clumber || [],
chengjiaoliang: data.chengjiaoliang || '0',
zaixianZhuangtai: data.zaixianzhuangtai || 0,
dashouzhuangtai: data.dashouzhuangtai || '',
// chenghaoList 不从这取
};
Object.assign(app.globalData, updateData);
this.setData({
isDashou: true,
...updateData,
isLoading: false,
isAutoRegistering: false
});
this.loadAvatar();
if (this.data.isAutoRegistering || !wx.getStorageSync('token')) {
this.switchToDashouRole();
}
wx.showToast({ title: '注册成功!', icon: 'success', duration: 2000 });
this.handleJinpaiStatus(data.chenghao);
} else {
this.setData({ isLoading: false, isAutoRegistering: false });
wx.showToast({ title: (res.data && res.data.message) || '注册失败', icon: 'error', duration: 2000 });
}
} catch (error) {
console.error('注册失败:', error);
this.setData({ isLoading: false, isAutoRegistering: false });
wx.showToast({ title: error.message || '注册失败', icon: 'error', duration: 2000 });
}
},
switchToDashouRole() {
const app = getApp();
app.globalData.currentRole = 'dashou';
wx.setStorageSync('currentRole', 'dashou');
const tabBar = this.getTabBar();
if (tabBar && tabBar.refresh) tabBar.refresh();
if (app.connectForCurrentRole) {
app.connectForCurrentRole();
} else if (app.ensureConnection) {
app.ensureConnection();
}
},
copyUid() {
const { uid } = this.data;
if (!uid) {
wx.showToast({ title: 'UID不存在', icon: 'none', duration: 1500 });
return;
}
wx.setClipboardData({
data: uid,
success: () => wx.showToast({ title: '已复制UID', icon: 'success', duration: 1500 }),
fail: () => wx.showToast({ title: '复制失败', icon: 'error', duration: 1500 })
});
},
previewAvatar() {
const { avatarUrl } = this.data;
if (avatarUrl) wx.previewImage({ urls: [avatarUrl] });
},
goToWithdraw() { wx.navigateTo({ url: '/pages/tixian/tixian' }) },
goToReceiveOrder() { wx.navigateTo({ url: '/pages/jiedan/jiedan' }) },
goToMyOrders() { wx.navigateTo({ url: '/pages/dashoudingdan/dashoudingdan' }) },
goToMyPunishment() { wx.navigateTo({ url: '/pages/cfss/cfss/cfss' }) },
goToRecharge() { wx.navigateTo({ url: '/pages/dashouchongzhi/dashouchongzhi' }) },
goToRanking() { wx.navigateTo({ url: '/pages/dashoupaihang/dashoupaihang' }) },
goToModifyInfo() { wx.navigateTo({ url: '/pages/dashouxiugai/dashouxiugai' }) },
goToRules() { wx.navigateTo({ url: '/pages/dashouguize/dashouguize' }) },
// 跳转到考核金牌
goToKaohe() {
wx.navigateTo({ url: '/pages/kaohe_jinpai/kaohe_jinpai' });
},
quickRegisterAsPlatform() {
const that = this;
wx.showModal({
title: '提示',
content: '使用此功能后,您将不属于任何管事,确认注册吗?',
success: (res) => {
if (res.confirm) {
that.setData({ inviteCode: PLATFORM_INVITE_CODE });
that.onRegister();
}
}
});
},
checkAndRedirectToJinpai() {
const isJinpai = wx.getStorageSync('isJinpai');
if (isJinpai === 1) {
wx.redirectTo({ url: '/pages/jinpaids/jinpaids' });
}
},
handleJinpaiStatus(chenghao) {
const isJinpai = (chenghao === '金牌选手') ? 1 : 0;
wx.setStorageSync('isJinpai', isJinpai);
if (isJinpai) {
wx.redirectTo({ url: '/pages/jinpaids/jinpaids' });
}
}
})

View File

@@ -0,0 +1,14 @@
{
"usingComponents": {
"global-notification": "/components/global-notification/global-notification",
"chenghao-tag": "/components/chenghao-tag/chenghao-tag"
},
"navigationBarBackgroundColor": "#0F0A1F",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "服务中心",
"backgroundColor": "#0F0A1F",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50
}

View File

@@ -0,0 +1,212 @@
<!-- pages/dashouzhongxin/dashouzhongxin.wxml -->
<view class="page-container unregistered-page" wx:if="{{!isDashou}}">
<!-- 未注册部分完全不变 -->
<view class="status-tip">您还未解锁此功能,请输入邀请码解锁</view>
<view class="input-container">
<input
class="invite-input"
type="text"
placeholder="请输入100位以内邀请码"
maxlength="100"
value="{{inviteCode}}"
bindinput="onInviteCodeInput"
placeholder-class="placeholder"
/>
</view>
<view class="register-view-btn" bindtap="onRegister">
<text class="register-text">输入邀请码注册</text>
<view class="register-glow"></view>
</view>
<view class="quick-register-btn" bindtap="quickRegisterAsPlatform">
<view class="quick-register-glow"></view>
</view>
</view>
<!-- 已注册状态 -->
<view class="page-container registered-page" wx:else>
<!-- 刷新按钮 -->
<view class="refresh-btn" bindtap="refreshDashouInfo">
<text class="refresh-icon">↻</text>
</view>
<!-- 头像区域 -->
<view class="avatar-section">
<view class="avatar-info">
<image
class="avatar-img"
src="{{avatarUrl}}"
mode="aspectFill"
bindtap="previewAvatar"
/>
<view class="user-info">
<!-- 昵称行:去掉原称号标签 -->
<view class="nickname-row">
<text class="dashou-nicheng">{{dashouNicheng || '打手昵称'}}</text>
<!-- 原称号标签已移除 -->
</view>
<view class="uid-row">
<text class="uid-label">UID:</text>
<text class="uid-value">{{uid || '未获取'}}</text>
<view class="copy-btn" bindtap="copyUid">
<text class="copy-icon">⎘</text>
</view>
</view>
</view>
</view>
</view>
<!-- 🆕 称号标签展示区(自适应两行,超出可滑动) -->
<view class="badge-area" wx:if="{{chenghaoList.length > 0}}">
<scroll-view class="badge-scroll" scroll-y="true" enable-flex>
<view class="badge-grid">
<view class="badge-item" wx:for="{{chenghaoList}}" wx:key="index">
<chenghao-tag
mingcheng="{{item.mingcheng}}"
texiaoJson="{{item.texiao_json}}"
/>
</view>
</view>
</scroll-view>
</view>
<!-- 其余部分完全不变 -->
<!-- 资产区域 -->
<view class="assets-section">
<view class="black-card">
<view class="card-header">
<text class="card-title">资产总览</text>
</view>
<view class="yongjin-row">
<view class="yongjin-info">
<text class="asset-label">我的佣金</text>
<view class="asset-value-container">
<text class="asset-value">{{yongjin || '0.00'}}</text>
<text class="asset-unit">元</text>
</view>
</view>
<view class="withdraw-view-btn" bindtap="goToWithdraw">
<text class="withdraw-text">提现</text>
<view class="withdraw-glow"></view>
</view>
</view>
<view class="assets-bottom">
<view class="bottom-item">
<text class="bottom-label">积分</text>
<text class="bottom-value">{{jinfen || '0'}}</text>
</view>
<view class="vertical-divider"></view>
<view class="bottom-item">
<text class="bottom-label">保证金</text>
<text class="bottom-value">{{yajin || '0.00'}}元</text>
</view>
</view>
</view>
</view>
<!-- 功能区域 -->
<view class="function-section">
<view class="main-function" bindtap="goToReceiveOrder">
<text class="main-function-icon">🎮</text>
<text class="main-function-text">抢单大厅</text>
<view class="main-function-glow"></view>
</view>
<view class="function-grid-second">
<view class="function-item-second" bindtap="goToRecharge">
<text class="function-icon-second">💳</text>
<text class="function-text-second">充值会员保证金</text>
</view>
<view class="function-item-second" bindtap="goToMyOrders">
<text class="function-icon-second">📦</text>
<text class="function-text-second">我的订单</text>
</view>
</view>
<view class="function-grid-third">
<view class="function-item-third" bindtap="goToMyPunishment">
<text class="function-icon-third">⚖️</text>
<text class="function-text-third">我的处罚</text>
</view>
<view class="function-item-third" bindtap="goToRanking">
<text class="function-icon-third">🏆</text>
<text class="function-text-third">排行榜</text>
</view>
</view>
</view>
<!-- 其他功能区域 (邀请人等) 保持原样 -->
<view class="other-section">
<view class="other-list">
<view class="other-item" wx:if="{{inviterCache && inviterCache.uid}}">
<view class="other-item-left" bindtap="contactInviter">
<image class="inviter-avatar" src="{{inviterCache.avatar}}" mode="aspectFill" />
<view class="inviter-text-info">
<text class="other-text">邀请人:{{inviterCache.nicheng || '未知'}}</text>
<text class="inviter-uid-text">ID: {{inviterCache.uid}}</text>
</view>
</view>
<view class="contact-badge" bindtap="contactInviter">联系</view>
</view>
<view class="other-item" wx:else bindtap="contactInviter">
<view class="other-item-left">
<text class="other-icon">🤝</text>
<text class="other-text">联系邀请人</text>
</view>
<text class="arrow-icon"></text>
</view>
<!-- 考核金牌(新增,放在最上面) -->
<view class="other-item" bindtap="goToKaohe">
<view class="other-item-left">
<text class="other-icon">🏅</text>
<text class="other-text">考核金牌</text>
</view>
<text class="arrow-icon"></text>
</view>
<view class="other-item" bindtap="goToModifyInfo">
<view class="other-item-left">
<text class="other-icon">✏️</text>
<text class="other-text">修改个人信息</text>
</view>
<text class="arrow-icon"></text>
</view>
<view class="other-item" bindtap="goToRules">
<view class="other-item-left">
<text class="other-icon">📖</text>
<text class="other-text">用户规则</text>
</view>
<text class="arrow-icon"></text>
</view>
</view>
</view>
</view>
<!-- 加载提示保持不变 -->
<view class="loading-mask" wx:if="{{isLoading}}">
<view class="loading-content">
<view class="loading-spinner"></view>
<text class="loading-text">加载中...</text>
</view>
</view>
<global-notification id="global-notification" />
<custom-tab-bar />
<popup-notice id="popupNotice" />

View File

@@ -0,0 +1,860 @@
/* pages/dashouzhongxin/dashouzhongxin.wxss */
/* =========== 全局样式 =========== */
page {
background: linear-gradient(135deg, #121212 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
min-height: 100vh;
color: #FFFFFF;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
background-attachment: fixed;
background-size: cover;
}
.page-container {
min-height: 100vh;
position: relative;
box-sizing: border-box;
}
/* =========== 未注册状态页面 =========== */
.unregistered-page {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 200rpx;
min-height: 100vh;
box-sizing: border-box;
}
.status-tip {
font-size: 32rpx;
color: #FFFFFF;
margin-bottom: 80rpx;
font-weight: 500;
text-align: center;
opacity: 0;
animation: fadeIn 1s ease-out forwards;
line-height: 1.5;
padding: 0 40rpx;
}
.input-container {
width: 85%;
margin-bottom: 60rpx;
box-sizing: border-box;
}
.invite-input {
width: 100%;
height: 90rpx;
background: rgba(255, 255, 255, 0.1);
border-radius: 20rpx;
padding: 0 30rpx;
font-size: 30rpx;
color: #FFFFFF;
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
border: 1rpx solid rgba(255, 215, 0, 0.3);
transition: all 0.3s;
box-sizing: border-box;
}
.invite-input:focus {
border-color: #FFD700;
box-shadow: 0 15rpx 40rpx rgba(255, 215, 0, 0.25);
transform: translateY(-2rpx);
}
.placeholder {
color: rgba(255, 255, 255, 0.5);
font-size: 28rpx;
}
.register-view-btn {
width: 85%;
height: 80rpx;
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
border-radius: 40rpx;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10rpx 30rpx rgba(255, 215, 0, 0.3);
transition: all 0.3s ease;
margin-top: 20rpx;
}
.register-view-btn:active {
transform: scale(0.98);
}
.register-text {
font-size: 34rpx;
font-weight: bold;
color: #333;
letter-spacing: 4rpx;
position: relative;
z-index: 2;
text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.2);
line-height: 80rpx;
}
.register-glow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent);
animation: shine 2s infinite;
}
/* 一键注册按钮样式 */
.quick-register-btn {
width: 85%;
height: 80rpx;
background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
border-radius: 40rpx;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10rpx 30rpx rgba(76, 175, 80, 0.4);
transition: all 0.3s ease;
margin-top: 20rpx;
}
.quick-register-btn:active {
transform: scale(0.98);
}
.quick-register-text {
font-size: 34rpx;
font-weight: bold;
color: white;
letter-spacing: 4rpx;
position: relative;
z-index: 2;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
line-height: 80rpx;
}
.quick-register-glow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
animation: shine 2s infinite;
}
/* =========== 已注册状态页面 =========== */
.registered-page {
padding: 30rpx 25rpx;
box-sizing: border-box;
}
.refresh-btn {
position: absolute;
top: 30rpx;
right: 25rpx;
width: 60rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.25);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
border: 1rpx solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.refresh-btn:active {
transform: rotate(180deg);
background: rgba(255, 255, 255, 0.12);
}
.refresh-icon {
font-size: 32rpx;
color: #FFD700;
font-weight: bold;
}
/* 头像区域 */
.avatar-section {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
margin-top: 40rpx;
position: relative;
}
.avatar-info {
display: flex;
align-items: center;
flex: 1;
}
.avatar-img {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
box-shadow: 0 0 0 3rpx rgba(255, 215, 0, 0.5),
0 8rpx 25rpx rgba(0, 0, 0, 0.4);
margin-right: 25rpx;
transition: transform 0.3s ease;
background: linear-gradient(45deg, #2a2a2a, #1a1a1a);
}
.avatar-img:active {
transform: scale(0.95);
}
.user-info {
margin-left: 25rpx;
flex: 1;
}
.nickname-row {
display: flex;
align-items: center;
margin-bottom: 15rpx;
flex-wrap: wrap;
}
.dashou-nicheng {
font-size: 36rpx;
font-weight: bold;
color: #FFFFFF;
margin-right: 15rpx;
max-width: 200rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}
.chenghao-tag {
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.9) 0%,
rgba(255, 165, 0, 0.9) 100%);
padding: 4rpx 16rpx;
border-radius: 20rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
border: 1rpx solid rgba(255, 215, 0, 0.5);
box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
}
.chenghao-text {
font-size: 22rpx;
font-weight: bold;
color: #333;
text-shadow: 0 1rpx 1rpx rgba(255, 255, 255, 0.8);
letter-spacing: 1rpx;
}
.uid-row {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.uid-label {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.7);
margin-right: 10rpx;
font-weight: 500;
}
.uid-value {
font-size: 26rpx;
color: #FFFFFF;
font-family: 'Courier New', monospace;
margin-right: 15rpx;
background: rgba(255, 255, 255, 0.08);
padding: 6rpx 12rpx;
border-radius: 8rpx;
border: 1rpx solid rgba(255, 255, 255, 0.1);
}
.copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background: rgba(255, 215, 0, 0.1);
border: 1rpx solid rgba(255, 215, 0, 0.3);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}
.copy-btn:active {
transform: scale(0.95);
background: rgba(255, 215, 0, 0.2);
}
.copy-icon {
font-size: 28rpx;
color: #FFD700;
font-weight: 500;
}
/* 资产区域 */
.assets-section {
position: relative;
margin-bottom: 30rpx;
}
.black-card {
background: linear-gradient(135deg,
rgba(30, 30, 46, 0.9) 0%,
rgba(22, 33, 62, 0.9) 100%);
border-radius: 20rpx;
padding: 30rpx;
position: relative;
box-shadow:
0 15rpx 40rpx rgba(0, 0, 0, 0.4);
overflow: hidden;
border: 1rpx solid rgba(255, 215, 0, 0.15);
min-height: 180rpx;
}
.card-header {
margin-bottom: 25rpx;
}
.card-title {
font-size: 28rpx;
color: #FFD700;
letter-spacing: 2rpx;
font-weight: bold;
}
.yongjin-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25rpx;
}
.yongjin-info {
flex: 1;
}
.asset-label {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
margin-bottom: 8rpx;
display: block;
}
.asset-value-container {
display: flex;
align-items: baseline;
}
.asset-value {
font-size: 48rpx;
font-weight: bold;
color: #FFD700;
font-family: 'Arial', sans-serif;
letter-spacing: 1rpx;
}
.asset-unit {
font-size: 28rpx;
color: #FFD700;
margin-left: 8rpx;
font-weight: 500;
}
.withdraw-view-btn {
width: 120rpx;
height: 55rpx;
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.9) 0%,
rgba(255, 165, 0, 0.9) 100%);
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 6rpx 20rpx rgba(255, 215, 0, 0.4);
transition: all 0.3s ease;
border: 1rpx solid rgba(255, 215, 0, 0.3);
position: relative;
overflow: hidden;
}
.withdraw-view-btn:active {
transform: scale(0.95);
}
.withdraw-text {
font-size: 26rpx;
font-weight: bold;
color: #333;
letter-spacing: 2rpx;
position: relative;
z-index: 2;
text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.5);
}
.assets-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 25rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.1);
}
.bottom-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.bottom-label {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 8rpx;
font-weight: 400;
}
.bottom-value {
font-size: 30rpx;
font-weight: bold;
color: #FFD700;
}
.vertical-divider {
width: 1rpx;
height: 40rpx;
background: linear-gradient(to bottom,
transparent,
rgba(255, 215, 0, 0.5) 50%,
transparent);
}
/* 功能区域 */
.function-section {
background: rgba(255, 255, 255, 0.05);
border-radius: 20rpx;
padding: 30rpx 25rpx;
margin-bottom: 30rpx;
box-shadow:
0 10rpx 25rpx rgba(0, 0, 0, 0.2);
border: 1rpx solid rgba(255, 215, 0, 0.1);
}
/* 抢单大厅 */
.main-function {
display: flex;
flex-direction: column;
align-items: center;
padding: 35rpx 0;
border-radius: 20rpx;
background: linear-gradient(135deg,
rgba(0, 150, 255, 0.2) 0%,
rgba(0, 100, 200, 0.2) 100%);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
margin-bottom: 25rpx;
border: 1rpx solid rgba(0, 150, 255, 0.3);
}
.main-function:active {
transform: scale(0.98);
background: linear-gradient(135deg,
rgba(0, 150, 255, 0.3) 0%,
rgba(0, 100, 200, 0.3) 100%);
}
.main-function-icon {
font-size: 60rpx;
margin-bottom: 20rpx;
}
.main-function-text {
font-size: 32rpx;
color: #FFFFFF;
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
letter-spacing: 2rpx;
}
.main-function-glow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent);
animation: shine 3s infinite;
}
/* 第二行:充值和订单 */
.function-grid-second {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
}
.function-grid-second .function-item-second:nth-child(1) {
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.2) 0%,
rgba(255, 165, 0, 0.2) 100%);
border: 1rpx solid rgba(255, 215, 0, 0.4);
box-shadow:
0 8rpx 25rpx rgba(255, 215, 0, 0.3),
0 0 15rpx rgba(255, 215, 0, 0.2);
}
.function-grid-second .function-item-second:nth-child(1):active {
transform: scale(0.96);
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.3) 0%,
rgba(255, 165, 0, 0.3) 100%);
}
.function-grid-second .function-item-second:nth-child(1) .function-icon-second {
font-size: 48rpx;
color: #FFD700;
text-shadow:
0 2rpx 8rpx rgba(255, 215, 0, 0.5),
0 0 15rpx rgba(255, 215, 0, 0.3);
animation: goldPulse 2s infinite ease-in-out;
}
.function-grid-second .function-item-second:nth-child(1) .function-text-second {
font-size: 26rpx;
font-weight: bold;
color: #FFD700;
text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.5);
letter-spacing: 1rpx;
}
.function-grid-second .function-item-second:nth-child(1)::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
animation: shine 2.5s infinite;
}
.function-item-second {
display: flex;
flex-direction: column;
align-items: center;
padding: 25rpx 0;
border-radius: 16rpx;
background: rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow:
0 5rpx 15rpx rgba(0, 0, 0, 0.2);
width: 48%;
}
.function-item-second:active {
transform: scale(0.96);
background: rgba(255, 255, 255, 0.12);
}
.function-icon-second {
font-size: 44rpx;
margin-bottom: 15rpx;
}
.function-text-second {
font-size: 26rpx;
color: #FFFFFF;
font-weight: 500;
text-align: center;
position: relative;
z-index: 2;
}
/* 第三行:我的处罚和排行 */
.function-grid-third {
display: flex;
justify-content: space-between;
}
.function-item-third {
display: flex;
flex-direction: column;
align-items: center;
padding: 22rpx 0;
border-radius: 16rpx;
background: rgba(255, 255, 255, 0.06);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow:
0 4rpx 12rpx rgba(0, 0, 0, 0.2);
width: 48%;
}
.function-item-third:active {
transform: scale(0.96);
background: rgba(255, 255, 255, 0.09);
}
.function-icon-third {
font-size: 40rpx;
margin-bottom: 12rpx;
}
.function-text-third {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
text-align: center;
position: relative;
z-index: 2;
}
/* 其他功能区域 */
.other-section {
background: rgba(255, 255, 255, 0.05);
border-radius: 20rpx;
padding: 0 25rpx;
box-shadow:
0 10rpx 25rpx rgba(0, 0, 0, 0.2);
border: 1rpx solid rgba(255, 215, 0, 0.1);
}
.other-list {
padding: 20rpx 0;
}
.other-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 28rpx 0;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.other-item:active {
background: rgba(255, 215, 0, 0.05);
transform: translateX(5rpx);
}
.other-item:last-child {
border-bottom: none;
}
.other-item-left {
display: flex;
align-items: center;
}
.other-icon {
font-size: 36rpx;
margin-right: 20rpx;
}
.other-text {
font-size: 28rpx;
color: #FFFFFF;
font-weight: 500;
}
.arrow-icon {
font-size: 36rpx;
color: rgba(255, 255, 255, 0.5);
font-weight: bold;
transition: all 0.3s ease;
}
.other-item:active .arrow-icon {
color: #FFD700;
transform: translateX(5rpx);
}
/* 邀请人专属样式(新增) */
.inviter-avatar {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
margin-right: 20rpx;
border: 2rpx solid rgba(255, 215, 0, 0.5);
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.4);
}
.inviter-text-info {
display: flex;
flex-direction: column;
}
.inviter-uid-text {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.5);
margin-top: 6rpx;
}
.contact-badge {
background: rgba(255, 215, 0, 0.2);
border: 1rpx solid rgba(255, 215, 0, 0.5);
color: #FFD700;
font-size: 24rpx;
padding: 8rpx 20rpx;
border-radius: 20rpx;
font-weight: 500;
transition: all 0.3s;
}
.contact-badge:active {
background: rgba(255, 215, 0, 0.4);
}
/* 加载遮罩 */
.loading-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(18, 18, 18, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.loading-content {
background: rgba(30, 30, 46, 0.95);
padding: 60rpx 80rpx;
border-radius: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
border: 1rpx solid rgba(255, 215, 0, 0.2);
}
.loading-spinner {
width: 80rpx;
height: 80rpx;
border: 6rpx solid rgba(255, 215, 0, 0.2);
border-top: 6rpx solid #FFD700;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 30rpx;
}
.loading-text {
font-size: 28rpx;
color: #FFFFFF;
font-weight: 500;
}
/* =========== 动画定义 =========== */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30rpx); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes shine {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes goldPulse {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.05); opacity: 1; }
}
/* ========== 🆕 称号标签展示区 ========== */
/* ========== 🆕 称号标签展示区 ========== */
.badge-area {
width: 100%;
margin: 20rpx 0 30rpx 0;
padding: 0 20rpx;
box-sizing: border-box;
}
.badge-scroll {
width: 100%;
max-height: 140rpx; /* 最多两行高度52*2=104 + 间距36rpx */
overflow-y: auto; /* 超出自动滚动 */
background: transparent;
}
.badge-grid {
display: flex;
flex-wrap: wrap;
gap: 8rpx;
padding: 6rpx 0;
align-items: center;
justify-content: flex-start;
}
.badge-item {
flex-shrink: 0;
/* 不设宽度限制,由组件自身宽度决定 */
}
.other-icon-img {
width: 36rpx;
height: 36rpx;
margin-right: 20rpx;
}