first commit
This commit is contained in:
Jane Doe
263
pages/bot-list/bot-list.js
Normal file
263
pages/bot-list/bot-list.js
Normal file
@@ -0,0 +1,263 @@
|
||||
// pages/bot-list/bot-list.js
|
||||
const app = getApp();
|
||||
|
||||
Page({
|
||||
data: {
|
||||
botList: [],
|
||||
statusText: {
|
||||
normal: '状态正常',
|
||||
abnormal: '状态异常',
|
||||
full: '已满人'
|
||||
},
|
||||
showQrModal: false,
|
||||
selectedBot: null,
|
||||
loading: true,
|
||||
refreshing: false,
|
||||
error: null,
|
||||
refreshTimer: null,
|
||||
lastUpdateTime: 0,
|
||||
lastUpdateTimeText: ''
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadBotData();
|
||||
this.startAutoRefresh();
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
this.clearAutoRefresh();
|
||||
},
|
||||
|
||||
startAutoRefresh() {
|
||||
this.clearAutoRefresh();
|
||||
this.data.refreshTimer = setInterval(() => {
|
||||
if (Date.now() - this.data.lastUpdateTime > 30000) { // 30秒自动刷新
|
||||
this.loadBotData(false);
|
||||
}
|
||||
this.updateTimeText();
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
clearAutoRefresh() {
|
||||
if (this.data.refreshTimer) {
|
||||
clearInterval(this.data.refreshTimer);
|
||||
this.data.refreshTimer = null;
|
||||
}
|
||||
},
|
||||
|
||||
updateTimeText() {
|
||||
const diff = Math.floor((Date.now() - this.data.lastUpdateTime) / 1000);
|
||||
let text = '';
|
||||
if (diff < 60) {
|
||||
text = `${diff}秒前更新`;
|
||||
} else if (diff < 3600) {
|
||||
text = `${Math.floor(diff / 60)}分钟前更新`;
|
||||
} else {
|
||||
text = `${Math.floor(diff / 3600)}小时前更新`;
|
||||
}
|
||||
this.setData({ lastUpdateTimeText: text });
|
||||
},
|
||||
|
||||
async onPullRefresh() {
|
||||
this.setData({ refreshing: true });
|
||||
await this.loadBotData(false);
|
||||
this.setData({ refreshing: false });
|
||||
},
|
||||
|
||||
loadBotData(showLoading = true) {
|
||||
if (showLoading) {
|
||||
this.setData({ loading: true, error: null });
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
app.apiRequest({
|
||||
url: `/myapp/api/bots/`,
|
||||
method: 'GET',
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200 && res.data.success) {
|
||||
this.handleDataSuccess(res.data);
|
||||
} else {
|
||||
this.handleDataError(res.data.error || '数据加载失败');
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
this.handleDataError('网络请求失败');
|
||||
console.error('API请求失败:', err);
|
||||
},
|
||||
complete: () => {
|
||||
if (showLoading) {
|
||||
this.setData({ loading: false });
|
||||
}
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
handleDataSuccess(response) {
|
||||
const formattedData = response.data.map(bot => ({
|
||||
...bot,
|
||||
last_check: this.formatDateTime(bot.last_check),
|
||||
selected: false
|
||||
}));
|
||||
|
||||
this.setData({
|
||||
botList: formattedData,
|
||||
lastUpdateTime: Date.now(),
|
||||
error: null
|
||||
});
|
||||
this.updateTimeText();
|
||||
},
|
||||
|
||||
handleDataError(message) {
|
||||
this.setData({
|
||||
error: message,
|
||||
loading: false
|
||||
});
|
||||
wx.showToast({
|
||||
title: message,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
|
||||
formatDateTime(datetimeStr) {
|
||||
if (!datetimeStr) return '暂无数据';
|
||||
try {
|
||||
const date = new Date(datetimeStr);
|
||||
return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||||
} catch {
|
||||
return datetimeStr;
|
||||
}
|
||||
},
|
||||
|
||||
selectBot(e) {
|
||||
const bot = e.currentTarget.dataset.bot;
|
||||
const botList = this.data.botList.map(item => ({
|
||||
...item,
|
||||
selected: item.wxid === bot.wxid
|
||||
}));
|
||||
this.setData({ botList });
|
||||
},
|
||||
|
||||
copyAccount(e) {
|
||||
const account = e.currentTarget.dataset.account;
|
||||
wx.setClipboardData({
|
||||
data: account,
|
||||
success: () => {
|
||||
wx.showToast({
|
||||
title: '微信号已复制',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
wx.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
showQrcode(e) {
|
||||
const index = e.currentTarget.dataset.index;
|
||||
const selectedBot = this.data.botList[index];
|
||||
this.setData({
|
||||
showQrModal: true,
|
||||
selectedBot
|
||||
});
|
||||
},
|
||||
|
||||
closeQrcode() {
|
||||
this.setData({
|
||||
showQrModal: false,
|
||||
selectedBot: null,
|
||||
botList: this.data.botList.map(bot => ({
|
||||
...bot,
|
||||
selected: false
|
||||
}))
|
||||
});
|
||||
},
|
||||
|
||||
preventBubble() {
|
||||
// 防止点击内容区域关闭弹窗
|
||||
return;
|
||||
},
|
||||
|
||||
saveQrcode() {
|
||||
if (!this.data.selectedBot?.qrcode_url) {
|
||||
wx.showToast({
|
||||
title: '二维码地址无效',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
wx.getSetting({
|
||||
success: (res) => {
|
||||
if (!res.authSetting['scope.writePhotosAlbum']) {
|
||||
wx.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success: () => this.doSaveImage(),
|
||||
fail: () => this.showAuthGuide()
|
||||
});
|
||||
} else {
|
||||
this.doSaveImage();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
doSaveImage() {
|
||||
wx.showLoading({ title: '保存中...' });
|
||||
wx.downloadFile({
|
||||
url: this.data.selectedBot.qrcode_url,
|
||||
success: (res) => {
|
||||
wx.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '已保存到相册',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '图片下载失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
showAuthGuide() {
|
||||
wx.showModal({
|
||||
title: '需要授权',
|
||||
content: '请允许保存图片到相册，以便保存二维码',
|
||||
confirmText: '去设置',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
wx.openSetting();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleImageError() {
|
||||
wx.showToast({
|
||||
title: '二维码加载失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
6
pages/bot-list/bot-list.json
Normal file
6
pages/bot-list/bot-list.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "机器人监控",
|
||||
"navigationBarBackgroundColor": "#222238",
|
||||
"navigationBarTextStyle": "white"
|
||||
|
||||
}
|
||||
86
pages/bot-list/bot-list.wxml
Normal file
86
pages/bot-list/bot-list.wxml
Normal file
@@ -0,0 +1,86 @@
|
||||
<!-- pages/bot-list/bot-list.wxml -->
|
||||
<view class="container">
|
||||
<!-- 功能介绍区域 -->
|
||||
<view class="guide-box">
|
||||
<image src="/images/butterfly-icon.png" class="guide-icon" mode="aspectFit"></image>
|
||||
<text class="guide-text">下载蝴蝶号视频教程：\n1. 添加下方机器人\n2. 转发视频给机器人\n3. 自动回复下载链接</text>
|
||||
</view>
|
||||
|
||||
<!-- 状态监控动画 -->
|
||||
<view class="monitoring-box">
|
||||
<image src="/images/radar.png" class="radar-icon"></image>
|
||||
<text>机器人状态持续监控中...</text>
|
||||
<text class="update-time">{{lastUpdateTimeText}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-box" wx:if="{{loading}}">
|
||||
<image src="/images/loading.png" class="loading-icon"></image>
|
||||
<text>数据加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<view class="error-box" wx:if="{{error}}">
|
||||
<text>{{error}}</text>
|
||||
<button class="retry-btn" bindtap="loadBotData">重新加载</button>
|
||||
</view>
|
||||
|
||||
<!-- 机器人列表 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="bot-list"
|
||||
wx:if="{{!loading && !error}}"
|
||||
refresher-enabled="{{true}}"
|
||||
refresher-triggered="{{refreshing}}"
|
||||
bindrefresherrefresh="onPullRefresh">
|
||||
<view class="bot-list-inner">
|
||||
<view class="bot-item {{item.selected ? 'selected' : ''}}"
|
||||
wx:for="{{botList}}"
|
||||
wx:key="wxid"
|
||||
bindtap="selectBot"
|
||||
data-bot="{{item}}">
|
||||
<view class="status-indicator {{item.status}}"></view>
|
||||
<view class="bot-info">
|
||||
<text class="bot-account">{{item.account}}</text>
|
||||
<text class="bot-status">{{statusText[item.status]}}</text>
|
||||
<text class="bot-update">最后检测: {{item.last_check}}</text>
|
||||
</view>
|
||||
<view class="action-buttons">
|
||||
<button
|
||||
class="btn copy-btn"
|
||||
catchtap="copyAccount"
|
||||
data-account="{{item.account}}">
|
||||
复制微信号
|
||||
</button>
|
||||
<button
|
||||
class="btn qrcode-btn"
|
||||
catchtap="showQrcode"
|
||||
data-index="{{index}}">
|
||||
查看二维码
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 二维码弹窗 -->
|
||||
<view class="qr-modal {{showQrModal ? 'show' : ''}}" bindtap="closeQrcode">
|
||||
<view class="modal-container" catchtap="preventBubble">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">{{selectedBot.account}}</text>
|
||||
<view class="close-btn" bindtap="closeQrcode">×</view>
|
||||
</view>
|
||||
<view class="modal-content">
|
||||
<image
|
||||
src="{{selectedBot.qrcode_url}}"
|
||||
mode="widthFix"
|
||||
class="qrcode-image"
|
||||
binderror="handleImageError">
|
||||
</image>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<button class="save-btn" bindtap="saveQrcode">保存到相册</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
317
pages/bot-list/bot-list.wxss
Normal file
317
pages/bot-list/bot-list.wxss
Normal file
@@ -0,0 +1,317 @@
|
||||
/* pages/bot-list/bot-list.wxss */
|
||||
|
||||
.container {
|
||||
padding: 24rpx;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
|
||||
}
|
||||
|
||||
/* 功能介绍区域 */
|
||||
.guide-box {
|
||||
background: white;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
animation: slideIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
.guide-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.guide-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 状态监控动画 */
|
||||
.monitoring-box {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.radar-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 16rpx;
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 48rpx 0;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-bottom: 16rpx;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(0.95); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(0.95); }
|
||||
}
|
||||
|
||||
/* 错误状态 */
|
||||
.error-box {
|
||||
text-align: center;
|
||||
padding: 48rpx 24rpx;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
margin-top: 24rpx;
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
}
|
||||
|
||||
/* 机器人列表 */
|
||||
.bot-list {
|
||||
max-height: calc(100vh - 300rpx);
|
||||
}
|
||||
|
||||
.bot-item {
|
||||
background: white;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: transform 0.2s ease;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.bot-item:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.status-indicator.normal {
|
||||
background: #52c41a;
|
||||
box-shadow: 0 0 12rpx rgba(82, 196, 26, 0.4);
|
||||
}
|
||||
|
||||
.status-indicator.abnormal {
|
||||
background: #ff4d4f;
|
||||
box-shadow: 0 0 12rpx rgba(255, 77, 79, 0.4);
|
||||
}
|
||||
|
||||
.status-indicator.full {
|
||||
background: #faad14;
|
||||
box-shadow: 0 0 12rpx rgba(250, 173, 20, 0.4);
|
||||
}
|
||||
|
||||
.bot-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bot-account {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bot-status {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bot-update {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 4rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 24rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 6rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.qrcode-btn {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
/* 二维码弹窗 */
|
||||
/* pages/bot-list/bot-list.wxss */
|
||||
/* 添加或更新以下样式 */
|
||||
|
||||
.qr-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.qr-modal.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
width: 90%;
|
||||
background: white;
|
||||
border-radius: 12rpx;
|
||||
transform: translateY(50rpx);
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.qr-modal.show .modal-container {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 24rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40rpx;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.qrcode-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 500rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
margin-top: 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 24rpx;
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background: #07C160;
|
||||
color: white;
|
||||
font-size: 28rpx;
|
||||
padding: 16rpx 48rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.save-btn:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加响应式设计 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.container {
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.bot-item {
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8rpx 16rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user