siyu-bank/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

存客宝 React

Browse Source
This commit is contained in:
柳清爽
2025-03-29 16:50:39 +08:00
parent caea0b4b99
commit 7e7c199996
388 changed files with 53282 additions and 2076 deletions
Download Patch File Download Diff File Expand all files Collapse all files

668
Cunkebao_Uniapp/pages/device/detail.vue Normal file
View File

@@ -0,0 +1,668 @@
<template>
<view class="device-detail-container">
<!-- 顶部导航栏 -->
<view class="navbar">
<view class="navbar-left" @click="goBack">
<u-icon name="arrow-left" size="44" color="#333"></u-icon>
</view>
<text class="navbar-title">设备详情</text>
<view class="navbar-right">
<u-icon name="setting" size="44" color="#333" @click="openSettings"></u-icon>
</view>
</view>
<!-- 设备信息卡片 -->
<view class="device-card">
<view class="device-icon-box">
<u-icon name="smartphone" size="54" color="#4080ff"></u-icon>
</view>
<view class="device-title">
<text class="device-name">{{ deviceInfo.name }}</text>
<text class="device-status" :class="deviceInfo.status === '在线' ? 'online' : 'offline'">{{ deviceInfo.status }}</text>
</view>
<view class="device-info-row">
<text class="device-info-label">IMEI: </text>
<text class="device-info-value">{{ deviceInfo.imei }}</text>
</view>
<view class="device-info-row">
<text class="device-info-label">历史ID: </text>
<text class="device-info-value">{{ deviceInfo.historyId }}</text>
</view>
<view class="device-stats">
<!-- 电量指示器 -->
<view class="battery-indicator">
<u-icon name="integral" size="40" :color="deviceInfo.status === '在线' ? '#07c160' : '#909399'"></u-icon>
<text class="battery-percentage">{{ deviceInfo.battery }}</text>
</view>
<!-- 网络状态 -->
<view class="wifi-indicator">
<u-icon name="wifi" size="40" :color="deviceInfo.status === '在线' ? '#4080ff' : '#909399'"></u-icon>
<text class="wifi-status">{{ deviceInfo.wifiStatus }}</text>
</view>
</view>
<view class="device-last-active">
<text class="last-active-label">最后活跃: </text>
<text class="last-active-time">{{ deviceInfo.lastActive }}</text>
</view>
</view>
<!-- 标签切换栏 -->
<u-tabs
:list="tabsList"
:current="tabCurrent"
@change="handleTabChange"
activeStyle="color: #333; font-weight: bold;"
inactiveStyle="color: #888;"
itemStyle="height: 90rpx; font-size: 30rpx;"
lineColor="#4080ff"
lineWidth="60rpx"
lineHeight="4rpx"
></u-tabs>
<!-- 基本信息内容 -->
<view v-if="tabCurrent === 0" class="tab-content">
<view class="features-list">
<!-- 自动加好友 -->
<view class="feature-item">
<view class="feature-left">
<text class="feature-title">自动加好友</text>
<text class="feature-desc">自动通过好友验证</text>
</view>
<view class="feature-right">
<u-switch v-model="features.autoAddFriend" activeColor="#4080ff"></u-switch>
</view>
</view>
<!-- 自动回复 -->
<view class="feature-item">
<view class="feature-left">
<text class="feature-title">自动回复</text>
<text class="feature-desc">自动回复好友消息</text>
</view>
<view class="feature-right">
<u-switch v-model="features.autoReply" activeColor="#4080ff"></u-switch>
</view>
</view>
<!-- 朋友圈同步 -->
<view class="feature-item">
<view class="feature-left">
<text class="feature-title">朋友圈同步</text>
<text class="feature-desc">自动同步朋友圈内容</text>
</view>
<view class="feature-right">
<u-switch v-model="features.momentSync" activeColor="#4080ff"></u-switch>
</view>
</view>
<!-- AI会话 -->
<view class="feature-item">
<view class="feature-left">
<text class="feature-title">AI会话</text>
<text class="feature-desc">启用AI智能对话</text>
</view>
<view class="feature-right">
<u-switch v-model="features.aiChat" activeColor="#4080ff"></u-switch>
</view>
</view>
</view>
<!-- 统计数据卡片 -->
<view class="stats-container">
<view class="stats-card">
<view class="stats-icon">
<u-icon name="account" size="40" color="#4080ff"></u-icon>
</view>
<text class="stats-title">好友总数</text>
<text class="stats-value">768</text>
</view>
<view class="stats-card">
<view class="stats-icon">
<u-icon name="chat" size="40" color="#4080ff"></u-icon>
</view>
<text class="stats-title">消息数量</text>
<text class="stats-value">5,678</text>
</view>
</view>
</view>
<!-- 关联账号内容 -->
<view v-if="tabCurrent === 1" class="tab-content">
<view class="wechat-accounts-list">
<!-- 账号项 1 -->
<view class="wechat-account-item">
<view class="wechat-avatar">
<u-avatar src="/static/images/avatar.png" size="80"></u-avatar>
</view>
<view class="wechat-info">
<view class="wechat-name-row">
<text class="wechat-name">老张</text>
<text class="wechat-status normal">正常</text>
</view>
<view class="wechat-id-row">
<text class="wechat-id-label">微信号: </text>
<text class="wechat-id-value">wxid_abc123</text>
</view>
<view class="wechat-gender-row">
<text class="wechat-gender-label">性别: </text>
<text class="wechat-gender-value">男</text>
</view>
<view class="wechat-friends-row">
<text class="wechat-friends-label">好友数: </text>
<text class="wechat-friends-value">523</text>
<text class="wechat-add-friends">可加友</text>
</view>
</view>
</view>
<!-- 账号项 2 -->
<view class="wechat-account-item">
<view class="wechat-avatar">
<u-avatar src="/static/images/avatar.png" size="80"></u-avatar>
</view>
<view class="wechat-info">
<view class="wechat-name-row">
<text class="wechat-name">老李</text>
<text class="wechat-status warning">异常</text>
</view>
<view class="wechat-id-row">
<text class="wechat-id-label">微信号: </text>
<text class="wechat-id-value">wxid_xyz789</text>
</view>
<view class="wechat-gender-row">
<text class="wechat-gender-label">性别: </text>
<text class="wechat-gender-value">男</text>
</view>
<view class="wechat-friends-row">
<text class="wechat-friends-label">好友数: </text>
<text class="wechat-friends-value">245</text>
<text class="wechat-add-friends used">已使用</text>
</view>
</view>
</view>
</view>
</view>
<!-- 操作记录内容 -->
<view v-if="tabCurrent === 2" class="tab-content">
<view class="operation-logs">
<!-- 操作记录项 1 -->
<view class="operation-item">
<view class="operation-icon">
<u-icon name="reload" size="36" color="#4080ff"></u-icon>
</view>
<view class="operation-info">
<text class="operation-title">开启自动加好友</text>
<text class="operation-meta">操作人: 系统 · 2024-02-09 15:30:45</text>
</view>
</view>
<!-- 操作记录项 2 -->
<view class="operation-item">
<view class="operation-icon">
<u-icon name="reload" size="36" color="#4080ff"></u-icon>
</view>
<view class="operation-info">
<text class="operation-title">添加微信号</text>
<text class="operation-meta">操作人: 管理员 · 2024-02-09 14:20:33</text>
</view>
</view>
</view>
</view>
<!-- 底部导航栏 -->
<CustomTabBar active="home"></CustomTabBar>
</view>
</template>
<script>
import CustomTabBar from '@/components/CustomTabBar.vue';
export default {
components: {
CustomTabBar
},
data() {
return {
tabsList: [
{ name: '基本信息' },
{ name: '关联账号' },
{ name: '操作记录' }
],
tabCurrent: 0,
features: {
autoAddFriend: true,
autoReply: true,
momentSync: false,
aiChat: true
},
deviceInfo: {
name: '设备 1',
imei: 'sd123123',
historyId: 'vx412321, vfbadasd',
battery: '85%',
wifiStatus: '已连接',
lastActive: '2024-02-09 15:30:45',
status: '在线'
},
wechatAccounts: [
{
avatar: '/static/images/avatar.png',
name: '老张',
status: '正常',
id: 'wxid_abc123',
gender: '男',
friends: 523,
canAddFriends: true
},
{
avatar: '/static/images/avatar.png',
name: '老李',
status: '异常',
id: 'wxid_xyz789',
gender: '男',
friends: 245,
canAddFriends: false
}
],
operationLogs: [
{
title: '开启自动加好友',
operator: '系统',
time: '2024-02-09 15:30:45'
},
{
title: '添加微信号',
operator: '管理员',
time: '2024-02-09 14:20:33'
}
],
deviceId: null
}
},
onLoad(options) {
// 获取路由参数中的设备ID
if (options && options.id) {
this.deviceId = options.id;
console.log('设备ID:', this.deviceId);
}
// 加载设备详情数据
this.loadDeviceDetail();
},
methods: {
goBack() {
uni.navigateBack();
},
openSettings() {
uni.showToast({
title: '设置功能即将上线',
icon: 'none',
duration: 2000
});
},
handleTabChange(index) {
this.tabCurrent = index;
},
loadDeviceDetail() {
// 这里模拟API调用获取设备详情数据
uni.showLoading({
title: '加载中...'
});
// 模拟网络请求延迟
setTimeout(() => {
// 根据设备ID获取不同的设备数据
// 在实际应用中，这里应该是从服务器获取数据
if (this.deviceId) {
// 使用预设数据，实际项目中应替换为API调用
console.log('加载设备ID为', this.deviceId, '的详情数据');
// 模拟不同的设备数据
if (this.deviceId === '1') {
// 设备1数据保持不变，已在data中预设
} else if (this.deviceId === '2') {
this.deviceInfo.name = '设备 2';
this.deviceInfo.imei = 'sd123124';
this.deviceInfo.battery = '65%';
this.deviceInfo.lastActive = '2024-02-08 10:15:23';
} else if (this.deviceId === '3') {
this.deviceInfo.name = '设备 3';
this.deviceInfo.imei = 'sd123125';
this.deviceInfo.battery = '92%';
this.deviceInfo.lastActive = '2024-02-09 08:45:12';
} else if (this.deviceId === '4') {
this.deviceInfo.name = '设备 4';
this.deviceInfo.imei = 'sd123126';
this.deviceInfo.battery = '23%';
this.deviceInfo.status = '离线';
this.deviceInfo.wifiStatus = '未连接';
this.deviceInfo.lastActive = '2024-02-07 16:20:35';
}
}
uni.hideLoading();
}, 500);
}
}
}
</script>
<style lang="scss" scoped>
.device-detail-container {
min-height: 100vh;
background-color: #f9fafb;
padding-bottom: 150rpx; /* 为底部导航栏预留空间 */
}
/* 顶部导航栏 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25rpx 30rpx;
background-color: #fff;
position: relative;
.navbar-left {
width: 80rpx;
}
.navbar-title {
font-size: 36rpx;
font-weight: bold;
}
.navbar-right {
width: 80rpx;
display: flex;
justify-content: flex-end;
}
}
/* 设备信息卡片 */
.device-card {
margin: 20rpx;
padding: 30rpx;
background-color: #fff;
border-radius: 16rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
.device-icon-box {
display: flex;
justify-content: center;
align-items: center;
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
background-color: #f0f5ff;
margin: 0 auto;
}
.device-title {
display: flex;
justify-content: center;
align-items: center;
margin: 16rpx 0;
.device-name {
font-size: 36rpx;
font-weight: bold;
margin-right: 16rpx;
}
.device-status {
font-size: 26rpx;
padding: 4rpx 16rpx;
border-radius: 20rpx;
&.online {
background-color: rgba(7, 193, 96, 0.1);
color: #07c160;
}
&.offline {
background-color: rgba(144, 147, 153, 0.1);
color: #909399;
}
}
}
.device-info-row {
display: flex;
justify-content: center;
margin: 8rpx 0;
font-size: 28rpx;
color: #666;
.device-info-value {
color: #333;
}
}
.device-stats {
display: flex;
justify-content: center;
margin: 20rpx 0;
.battery-indicator, .wifi-indicator {
display: flex;
align-items: center;
margin: 0 30rpx;
.battery-percentage, .wifi-status {
margin-left: 8rpx;
font-size: 28rpx;
color: #333;
}
}
}
.device-last-active {
text-align: center;
font-size: 26rpx;
color: #999;
margin-top: 16rpx;
.last-active-time {
color: #666;
}
}
}
/* 选项卡内容 */
.tab-content {
padding: 20rpx;
}
/* 功能设置列表 */
.features-list {
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
margin-bottom: 30rpx;
.feature-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.feature-left {
display: flex;
flex-direction: column;
.feature-title {
font-size: 32rpx;
color: #333;
margin-bottom: 4rpx;
}
.feature-desc {
font-size: 24rpx;
color: #999;
}
}
}
}
/* 统计数据卡片 */
.stats-container {
display: flex;
justify-content: space-between;
.stats-card {
flex: 1;
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin: 0 10rpx;
text-align: center;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
.stats-icon {
margin-bottom: 16rpx;
}
.stats-title {
font-size: 26rpx;
color: #666;
display: block;
margin-bottom: 10rpx;
}
.stats-value {
font-size: 48rpx;
color: #4080ff;
font-weight: bold;
font-family: 'Digital-Bold', sans-serif;
}
}
}
/* 微信账号列表 */
.wechat-accounts-list {
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
.wechat-account-item {
display: flex;
padding: 30rpx;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.wechat-avatar {
margin-right: 20rpx;
}
.wechat-info {
flex: 1;
.wechat-name-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
.wechat-name {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.wechat-status {
font-size: 24rpx;
padding: 4rpx 16rpx;
border-radius: 20rpx;
&.normal {
background-color: rgba(7, 193, 96, 0.1);
color: #07c160;
}
&.warning {
background-color: rgba(250, 81, 81, 0.1);
color: #fa5151;
}
}
}
.wechat-id-row, .wechat-gender-row, .wechat-friends-row {
font-size: 26rpx;
color: #666;
margin: 6rpx 0;
}
.wechat-friends-row {
display: flex;
justify-content: space-between;
align-items: center;
.wechat-add-friends {
padding: 4rpx 16rpx;
border-radius: 20rpx;
font-size: 24rpx;
&:not(.used) {
background-color: rgba(7, 193, 96, 0.1);
color: #07c160;
}
&.used {
background-color: rgba(144, 147, 153, 0.1);
color: #909399;
}
}
}
}
}
}
/* 操作记录 */
.operation-logs {
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
.operation-item {
display: flex;
padding: 30rpx;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.operation-icon {
margin-right: 20rpx;
}
.operation-info {
flex: 1;
.operation-title {
font-size: 30rpx;
color: #333;
margin-bottom: 6rpx;
}
.operation-meta {
font-size: 24rpx;
color: #999;
}
}
}
}
</style>

1165
Cunkebao_Uniapp/pages/device/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff