XingQue/a_long
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

248
miniprogram/pages/yaoqingdashou/yaoqingdashou.js Normal file
View File

@@ -0,0 +1,248 @@
// pages/yaoqingma/yaoqingma.js
// 阿龙电竞 - 邀请码页面 (优化重构版)
import request from '../../utils/request.js'
Page({
/**
* 页面的初始数据 (字段保持与你渲染层一致)
*/
data: {
yaoqingma: '', // 邀请码
isLoading: false, // 是否正在加载
copySuccess: false, // 是否复制成功
copyTimer: null // 复制成功提示计时器
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 仅初始化，不自动请求
this.chushihuaYaoqingma();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// 每次显示页面时重置复制状态
if (this.data.copySuccess) {
this.chongzhiCopyZhuangtai();
}
},
onShow() {
// 原有代码...
// 🆕 注册通知组件
this.registerNotificationComponent();
this.registerNotificationComponent();
},
// 🆕 新增：注册通知组件
registerNotificationComponent() {
const app = getApp();
const notificationComp = this.selectComponent('#global-notification');
if (notificationComp && notificationComp.showNotification) {
console.log('🏪 商城页面注册通知组件');
app.globalData.globalNotification = {
show: (data) => notificationComp.showNotification(data),
hide: () => notificationComp.hideNotification()
};
}
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
// 清理计时器
if (this.data.copyTimer) {
clearTimeout(this.data.copyTimer);
}
},
/**
* 初始化邀请码数据
*/
chushihuaYaoqingma: function () {
// 只从缓存读取并显示，不主动请求
try {
const cachedYaoqingma = wx.getStorageSync('yaoqingma');
if (cachedYaoqingma && cachedYaoqingma.trim() !== '') {
this.setData({ yaoqingma: cachedYaoqingma });
} else {
}
} catch (error) {
}
},
/**
* 处理邀请码相关操作 (主入口函数)
* 如果没有邀请码则生成，如果有则复制
*/
chuliYaoqingma: async function () {
// 防止重复点击
if (this.data.isLoading) {
return;
}
// 如果已经有邀请码，执行复制操作
if (this.data.yaoqingma && this.data.yaoqingma.trim() !== '') {
this.fuzhiYaoqingma();
return;
}
// 如果没有邀请码，向后端请求生成
await this.shengchengYaoqingma();
},
/**
* 向后端请求生成邀请码
*/
shengchengYaoqingma: async function () {
this.setData({ isLoading: true });
try {
// 使用封装的request工具发送POST请求（与你的调用方式一致）
const response = await request({
url: '/yonghu/yaoqingma',
method: 'POST'
// 如果需要参数可以在此添加 data: {}
});
// 处理业务响应
if (response.data.code === 200) {
const newYaoqingma = response.data.data.yaoqingma;
this.chuliShengchengChenggong(newYaoqingma);
} else {
this.chuliShiwu('生成失败', response.message);
}
} catch (error) {
// 处理网络或系统错误
this.chuliShiwu('网络错误', error.message || '请检查网络后重试');
}
},
/**
* 处理生成成功的逻辑
*/
chuliShengchengChenggong: function (newYaoqingma) {
// 更新页面数据
this.setData({
yaoqingma: newYaoqingma,
isLoading: false
});
// 保存到缓存
try {
wx.setStorageSync('yaoqingma', newYaoqingma);
} catch (error) {
}
// 显示成功提示
wx.showToast({
title: '生成成功！',
icon: 'success',
duration: 2000
});
},
/**
* 处理错误情况
*/
chuliShiwu: function (title, message) {
this.setData({ isLoading: false });
wx.showToast({
title: message || title,
icon: 'none',
duration: 3000
});
},
/**
* 复制邀请码到剪贴板
*/
fuzhiYaoqingma: function () {
const yaoqingma = this.data.yaoqingma;
if (!yaoqingma || yaoqingma.trim() === '') {
wx.showToast({
title: '暂无邀请码可复制',
icon: 'none',
duration: 2000
});
return;
}
wx.setClipboardData({
data: yaoqingma,
success: () => {
this.setData({ copySuccess: true });
wx.showToast({
title: '已复制',
icon: 'success',
duration: 1500
});
// 2秒后重置状态
const timer = setTimeout(() => {
this.chongzhiCopyZhuangtai();
}, 2000);
this.setData({ copyTimer: timer });
},
fail: (error) => {
console.error('复制失败:', error);
wx.showToast({
title: '复制失败',
icon: 'none',
duration: 2000
});
}
});
},
/**
* 重置复制状态
*/
chongzhiCopyZhuangtai: function () {
if (this.data.copyTimer) {
clearTimeout(this.data.copyTimer);
}
this.setData({
copySuccess: false,
copyTimer: null
});
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
if (this.data.yaoqingma) {
return {
title: '我的阿龙电竞邀请码',
path: `/pages/yaoqingma/yaoqingma?yaoqingma=${this.data.yaoqingma}`
};
}
return {
title: '阿龙电竞陪玩平台',
path: '/pages/index/index'
};
}
});

13
miniprogram/pages/yaoqingdashou/yaoqingdashou.json Normal file
View File

@@ -0,0 +1,13 @@
{
"usingComponents": {
"global-notification": "/components/global-notification/global-notification"
},
"navigationBarTitleText": "我的邀请码",
"navigationBarBackgroundColor": "#0a0e17",
"navigationBarTextStyle": "white",
"backgroundColor": "#0a0e17",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50,
"disableScroll": false
}

85
miniprogram/pages/yaoqingdashou/yaoqingdashou.wxml Normal file
View File

@@ -0,0 +1,85 @@
<!-- 阿龙电竞 - 邀请码页面 -->
<view class="yaoqingma-page">
<!-- 顶部装饰条 -->
<view class="top-decoration"></view>
<!-- 页面标题 -->
<view class="page-title">
<text class="title-text">专属邀请码</text>
<text class="title-sub">分享邀请码，招募更多大手</text>
</view>
<!-- 邀请码展示卡片 -->
<view class="yaoqingma-card {{isLoading ? 'card-loading' : ''}}">
<!-- 卡片装饰角 -->
<view class="card-corner top-left"></view>
<view class="card-corner top-right"></view>
<view class="card-corner bottom-left"></view>
<view class="card-corner bottom-right"></view>
<!-- 卡片内容 -->
<view class="card-content">
<!-- 加载状态 -->
<view wx:if="{{isLoading}}" class="loading-container">
<view class="loading-spinner"></view>
<text class="loading-text">正在生成邀请码...</text>
</view>
<!-- 正常展示状态 -->
<view wx:else class="code-container">
<text class="code-label">我的邀请码</text>
<view class="code-display">
<text class="code-text {{copySuccess ? 'code-copied' : ''}}">{{yaoqingma || '点击下方按钮生成'}}</text>
<view wx:if="{{yaoqingma}}" class="code-status {{copySuccess ? 'status-show' : ''}}">
<text class="iconfont icon-success">✓</text>
<text>已复制</text>
</view>
</view>
<text class="code-tip">此邀请码用于招募大手，每个管事唯一</text>
</view>
</view>
</view>
<!-- 操作按钮区域 -->
<view class="action-area">
<!-- 生成/复制按钮 -->
<view
class="action-btn {{isLoading ? 'btn-disabled' : ''}} {{yaoqingma ? 'btn-copy' : 'btn-generate'}}"
bindtap="{{isLoading ? '' : 'chuliYaoqingma'}}"
hover-class="btn-hover"
hover-stay-time="50"
>
<!-- 按钮背景光效 -->
<view class="btn-glow"></view>
<!-- 按钮内容 -->
<view class="btn-content">
<text class="btn-icon">{{yaoqingma ? '📋' : '✨'}}</text>
<text class="btn-text">{{yaoqingma ? '一键复制邀请码' : '生成我的邀请码'}}</text>
</view>
<!-- 按钮说明 -->
<text class="btn-desc">{{yaoqingma ? '点击复制到剪贴板' : '点击生成专属邀请码'}}</text>
</view>
<!-- 使用说明 -->
<view class="instruction">
<view class="instruction-item">
<text class="instruction-icon">🔗</text>
<text class="instruction-text">将邀请码分享给打手，他们注册时填写即可绑定</text>
</view>
<view class="instruction-item">
<text class="instruction-icon">💰</text>
<text class="instruction-text">成功邀请的打手充值押金，您将获得分佣奖励</text>
</view>
<view class="instruction-item">
<text class="instruction-icon">⚠️</text>
<text class="instruction-text">邀请码仅限本人使用，请勿泄露给他人</text>
</view>
</view>
</view>
<global-notification id="global-notification" />
</view>

405
miniprogram/pages/yaoqingdashou/yaoqingdashou.wxss Normal file
View File

@@ -0,0 +1,405 @@
/* 阿龙电竞 - 邀请码页面样式 */
/* 页面整体样式 */
.yaoqingma-page {
min-height: 100vh;
background: linear-gradient(135deg, #0a0e17 0%, #141a2a 100%);
padding: 40rpx 30rpx;
position: relative;
overflow: hidden;
color: #fff;
}
/* 顶部装饰条 */
.top-decoration {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6rpx;
background: linear-gradient(90deg,
transparent 0%,
#00ff88 20%,
#00ff88 80%,
transparent 100%
);
opacity: 0.7;
}
/* 页面标题 */
.page-title {
text-align: center;
margin-bottom: 60rpx;
margin-top: 40rpx;
}
.title-text {
display: block;
font-size: 52rpx;
font-weight: bold;
background: linear-gradient(45deg, #fff 30%, #00ffaa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 4rpx;
margin-bottom: 16rpx;
}
.title-sub {
display: block;
font-size: 28rpx;
color: #88aaff;
opacity: 0.8;
}
/* 邀请码卡片 */
.yaoqingma-card {
background: rgba(20, 25, 40, 0.8);
border-radius: 24rpx;
padding: 50rpx 40rpx;
margin-bottom: 60rpx;
position: relative;
border: 1rpx solid rgba(0, 255, 136, 0.2);
box-shadow: 0 10rpx 30rpx rgba(0, 255, 136, 0.1);
transition: all 0.3s ease;
}
/* 卡片加载状态 */
.card-loading {
opacity: 0.7;
}
/* 卡片装饰角 */
.card-corner {
position: absolute;
width: 40rpx;
height: 40rpx;
border: 2rpx solid #00ff88;
opacity: 0.6;
}
.top-left {
top: 12rpx;
left: 12rpx;
border-right: none;
border-bottom: none;
}
.top-right {
top: 12rpx;
right: 12rpx;
border-left: none;
border-bottom: none;
}
.bottom-left {
bottom: 12rpx;
left: 12rpx;
border-right: none;
border-top: none;
}
.bottom-right {
bottom: 12rpx;
right: 12rpx;
border-left: none;
border-top: none;
}
/* 卡片内容 */
.card-content {
position: relative;
z-index: 2;
}
/* 加载状态样式 */
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 40rpx 0;
}
.loading-spinner {
width: 80rpx;
height: 80rpx;
border: 6rpx solid rgba(0, 255, 136, 0.2);
border-top-color: #00ff88;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 30rpx;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-text {
font-size: 28rpx;
color: #88ffcc;
opacity: 0.9;
}
/* 正常展示状态 */
.code-container {
text-align: center;
}
.code-label {
display: block;
font-size: 32rpx;
color: #aaddff;
margin-bottom: 40rpx;
letter-spacing: 4rpx;
}
.code-display {
background: rgba(0, 20, 30, 0.7);
border-radius: 16rpx;
padding: 40rpx 30rpx;
margin-bottom: 30rpx;
border: 1rpx solid rgba(0, 255, 136, 0.3);
position: relative;
overflow: hidden;
}
.code-text {
display: block;
font-size: 48rpx;
font-weight: bold;
letter-spacing: 8rpx;
font-family: 'Courier New', monospace;
color: #00ffaa;
text-shadow: 0 0 10rpx rgba(0, 255, 136, 0.5);
transition: all 0.3s ease;
word-break: break-all;
}
/* 复制成功后的样式 */
.code-copied {
color: #88ffaa;
text-shadow: 0 0 20rpx rgba(136, 255, 170, 0.8);
transform: scale(1.02);
}
.code-status {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 255, 136, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 16rpx;
}
.status-show {
opacity: 1;
}
.code-status .iconfont {
font-size: 60rpx;
color: #00ff88;
margin-bottom: 20rpx;
}
.code-status text {
font-size: 28rpx;
color: #ccffee;
}
.code-tip {
display: block;
font-size: 24rpx;
color: #8899cc;
opacity: 0.8;
margin-top: 20rpx;
}
/* 操作按钮区域 */
.action-area {
margin-top: 40rpx;
}
/* 操作按钮 */
.action-btn {
background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 200, 255, 0.1) 100%);
border-radius: 20rpx;
padding: 50rpx 40rpx;
margin-bottom: 50rpx;
position: relative;
overflow: hidden;
border: 1rpx solid rgba(0, 255, 136, 0.3);
transition: all 0.3s ease;
text-align: center;
}
/* 按钮悬停效果 */
.btn-hover {
transform: translateY(-4rpx);
box-shadow: 0 20rpx 40rpx rgba(0, 255, 136, 0.2);
}
/* 生成按钮样式 */
.btn-generate {
background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 200, 255, 0.15) 100%);
}
/* 复制按钮样式 */
.btn-copy {
background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 255, 200, 0.2) 100%);
}
/* 禁用状态 */
.btn-disabled {
opacity: 0.6;
pointer-events: none;
}
/* 按钮光效 */
.btn-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle at center,
rgba(0, 255, 136, 0.3) 0%,
transparent 70%
);
opacity: 0;
animation: pulse 3s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 0.6; transform: scale(1.1); }
}
.btn-content {
position: relative;
z-index: 2;
margin-bottom: 20rpx;
}
.btn-icon {
display: block;
font-size: 60rpx;
margin-bottom: 20rpx;
opacity: 0.9;
}
.btn-text {
display: block;
font-size: 40rpx;
font-weight: bold;
color: #fff;
letter-spacing: 2rpx;
text-shadow: 0 0 10rpx rgba(0, 255, 136, 0.5);
}
.btn-desc {
display: block;
font-size: 26rpx;
color: #aaddff;
opacity: 0.8;
}
/* 使用说明 */
.instruction {
background: rgba(30, 35, 50, 0.5);
border-radius: 16rpx;
padding: 40rpx 30rpx;
border: 1rpx solid rgba(100, 150, 255, 0.1);
}
.instruction-item {
display: flex;
align-items: flex-start;
margin-bottom: 30rpx;
}
.instruction-item:last-child {
margin-bottom: 0;
}
.instruction-icon {
font-size: 36rpx;
margin-right: 20rpx;
opacity: 0.8;
flex-shrink: 0;
margin-top: 4rpx;
}
.instruction-text {
font-size: 26rpx;
color: #ccddee;
line-height: 1.5;
opacity: 0.9;
}
/* 底部装饰 */
.bottom-decoration {
text-align: center;
margin-top: 60rpx;
padding-top: 40rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.1);
}
.platform-name {
font-size: 24rpx;
color: #8899cc;
opacity: 0.7;
letter-spacing: 2rpx;
}
/* pages/yaoqingma/yaoqingma.wxss - 仅修改按钮部分 */
/* ... 其他样式保持不变 ... */
/* 操作按钮 - 缩小尺寸 */
.action-btn {
background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 200, 255, 0.1) 100%);
border-radius: 20rpx;
padding: 36rpx 30rpx; /* 减小内边距 */
margin-bottom: 50rpx;
position: relative;
overflow: hidden;
border: 1rpx solid rgba(0, 255, 136, 0.3);
transition: all 0.3s ease;
text-align: center;
}
/* 按钮内容相应调整 */
.btn-icon {
display: block;
font-size: 52rpx; /* 适当缩小图标 */
margin-bottom: 16rpx;
opacity: 0.9;
}
.btn-text {
display: block;
font-size: 34rpx; /* 适当缩小字体 */
font-weight: bold;
color: #fff;
letter-spacing: 2rpx;
text-shadow: 0 0 10rpx rgba(0, 255, 136, 0.5);
}
.btn-desc {
display: block;
font-size: 24rpx; /* 适当缩小说明文字 */
color: #aaddff;
opacity: 0.8;
margin-top: 8rpx;
}
/* ... 其他样式保持不变 ... */