fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【私域操盘手】 操盘手端UI - 设备管理

Browse Source
This commit is contained in:
柳清爽
2025-03-25 14:26:25 +08:00
parent 19306bdb87
commit 663542a455
5 changed files with 580 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Cunkebao/pages.json
View File

@@ -21,6 +21,13 @@
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/device/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "设备管理"
}
},
{
"path": "pages/scenarios/index",
"style": {

558
Cunkebao/pages/device/index.vue Normal file
View File

@@ -0,0 +1,558 @@
<!-- 设备管理页面 -->
<template>
<view class="device-container">
<!-- 顶部导航栏 -->
<view class="header">
<view class="back-icon" @click="goBack">
<u-icon name="arrow-left" size="44" color="#000000"></u-icon>
</view>
<view class="title">设备管理</view>
<view class="header-right">
<view class="add-btn" @click="addDevice">
<u-icon name="plus" size="30" color="#ffffff"></u-icon>
<text class="add-text">添加设备</text>
</view>
</view>
</view>
<!-- 统计卡片 -->
<view class="stats-cards">
<view class="stat-card">
<view class="stat-label">总设备数</view>
<view class="stat-value blue">42</view>
</view>
<view class="stat-card">
<view class="stat-label">在线设备</view>
<view class="stat-value green">35</view>
</view>
</view>
<!-- 内容区域 -->
<view class="content-container">
<!-- 搜索和筛选区域 -->
<view class="search-bar">
<view class="search-input">
<u-search
placeholder="搜索设备IMEI/备注"
v-model="searchKeyword"
:show-action="false"
:clearabled="true"
bgColor="#fff"
searchIconSize="50"
shape="round"
></u-search>
</view>
<view class="filter-btn" @click="showFilter">
<image src="/static/images/icons/filter.svg" class="filter-icon"></image>
</view>
<view class="refresh-btn" @click="refreshList">
<u-icon name="reload" size="48" color="#333"></u-icon>
</view>
</view>
<!-- 状态筛选 -->
<view class="filter-bar">
<view class="status-filter" @click="showStatusPopup">
<text>{{ statusText }}</text>
<u-icon name="arrow-down" size="28" color="#333"></u-icon>
</view>
<view class="select-all">
<u-checkbox v-model="selectAll" size="40" iconSize="35" shape="circle" activeColor="#4080ff"></u-checkbox>
<text class="select-text">全选</text>
</view>
<view class="delete-btn" @click="deleteDevices" :class="{disabled: !hasSelected}">
删除
</view>
</view>
<!-- 设备列表 -->
<view class="device-list">
<!-- 设备项 1 -->
<view class="device-item">
<view class="device-checkbox">
<u-checkbox size="40" iconSize="35" v-model="device1Selected" shape="circle" activeColor="#4080ff"></u-checkbox>
</view>
<view class="device-info">
<view class="device-header">
<view class="device-name">设备 1</view>
<view class="device-status online">在线</view>
</view>
<view class="device-imei">IMEI: sd123123</view>
<view class="device-wx">微信号: wxid_hxdxdoal</view>
<view class="device-likes">
<text>好友数: 435</text>
<text class="today-stats">今日新增: +20</text>
</view>
</view>
</view>
<!-- 设备项 2 -->
<view class="device-item">
<view class="device-checkbox">
<u-checkbox v-model="device2Selected" shape="circle" activeColor="#4080ff"
size="40" iconSize="35"
></u-checkbox>
</view>
<view class="device-info">
<view class="device-header">
<view class="device-name">设备 2</view>
<view class="device-status online">在线</view>
</view>
<view class="device-imei">IMEI: sd123124</view>
<view class="device-wx">微信号: wxid_2i7sncgq</view>
<view class="device-likes">
<text>好友数: 143</text>
<text class="today-stats">今日新增: +26</text>
</view>
</view>
</view>
<!-- 设备项 3 -->
<view class="device-item">
<view class="device-checkbox">
<u-checkbox size="40" iconSize="35" v-model="device3Selected" shape="circle" activeColor="#4080ff"></u-checkbox>
</view>
<view class="device-info">
<view class="device-header">
<view class="device-name">设备 3</view>
<view class="device-status online">在线</view>
</view>
<view class="device-imei">IMEI: sd123125</view>
<view class="device-wx">微信号: wxid_yunzn4lp</view>
<view class="device-likes">
<text>好友数: 707</text>
<text class="today-stats">今日新增: +48</text>
</view>
</view>
</view>
<!-- 设备项 4 -->
<view class="device-item">
<view class="device-checkbox">
<u-checkbox size="40" iconSize="35" v-model="device4Selected" shape="circle" activeColor="#4080ff"></u-checkbox>
</view>
<view class="device-info">
<view class="device-header">
<view class="device-name">设备 4</view>
<view class="device-status offline">离线</view>
</view>
<view class="device-imei">IMEI: sd123126</view>
<view class="device-wx">微信号: wxid_4k39dnsc</view>
<view class="device-likes">
<text>好友数: 529</text>
<text class="today-stats">今日新增: +0</text>
</view>
</view>
</view>
</view>
</view>
<!-- 状态选择弹窗 -->
<u-picker
:show="statusPickerShow"
:columns="[statusOptions]"
@confirm="confirmStatus"
@cancel="cancelStatus"
confirmColor="#4080ff"
title="选择状态"
></u-picker>
<!-- 底部导航栏 -->
<CustomTabBar active="profile"></CustomTabBar>
</view>
</template>
<script>
import CustomTabBar from '@/components/CustomTabBar.vue'
export default {
components: {
CustomTabBar
},
data() {
return {
searchKeyword: '',
selectAll: false,
device1Selected: false,
device2Selected: false,
device3Selected: false,
device4Selected: false,
statusPickerShow: false,
statusOptions: [
{ text: '全部状态', value: 'all' },
{ text: '在线', value: 'online' },
{ text: '离线', value: 'offline' }
],
currentStatus: 'all'
}
},
computed: {
hasSelected() {
return this.device1Selected || this.device2Selected || this.device3Selected || this.device4Selected;
},
statusText() {
const selected = this.statusOptions.find(option => option.value === this.currentStatus);
return selected ? selected.text : '全部状态';
}
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack();
},
// 添加设备
addDevice() {
uni.showToast({
title: '添加设备功能待实现',
icon: 'none'
});
},
// 刷新列表
refreshList() {
uni.showLoading({
title: '刷新中'
});
setTimeout(() => {
uni.hideLoading();
uni.showToast({
title: '刷新成功',
icon: 'success'
});
}, 1000);
},
// 显示筛选
showFilter() {
uni.showToast({
title: '筛选功能待实现',
icon: 'none'
});
},
// 显示状态选择
showStatusPopup() {
this.statusPickerShow = true;
},
// 确认状态选择
confirmStatus(e) {
this.currentStatus = e.value[0];
this.statusPickerShow = false;
// 应用筛选逻辑
this.applyStatusFilter();
},
// 应用状态筛选
applyStatusFilter() {
uni.showLoading({
title: '筛选中'
});
// 模拟筛选过程
setTimeout(() => {
uni.hideLoading();
// 提示用户
uni.showToast({
title: `已筛选: ${this.statusText}`,
icon: 'none'
});
// 这里可以添加实际的设备筛选逻辑
// 根据 this.currentStatus 对设备列表进行筛选
}, 500);
},
// 取消状态选择
cancelStatus() {
this.statusPickerShow = false;
},
// 删除设备
deleteDevices() {
if (!this.hasSelected) return;
uni.showModal({
title: '确认删除',
content: '确定要删除选中的设备吗？',
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '删除成功',
icon: 'success'
});
this.device1Selected = false;
this.device2Selected = false;
this.device3Selected = false;
this.device4Selected = false;
this.selectAll = false;
}
}
});
}
},
watch: {
selectAll(newVal) {
this.device1Selected = newVal;
this.device2Selected = newVal;
this.device3Selected = newVal;
this.device4Selected = newVal;
}
}
}
</script>
<style lang="scss" scoped>
.device-container {
min-height: 100vh;
background-color: #f9fafb;
padding-bottom: 180rpx;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25rpx 30rpx;
background-color: #fff;
border-bottom: 1px solid #e9e9e9;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
.back-icon {
width: 60rpx;
color: #000;
padding: 10rpx;
border-radius: 50%;
&:active {
background-color: rgba(0, 0, 0, 0.05);
}
}
.title {
position: absolute;
font-size: 40rpx;
float: left;
margin-left: 70rpx;
}
.header-right {
.add-btn {
display: flex;
align-items: center;
background-color: #2563EB;
border-radius: 20rpx;
padding: 15rpx 30rpx;
color: #fff;
text-indent: 15rpx;
.add-text {
color: #fff;
font-size: 28rpx;
margin-left: 8rpx;
}
}
}
}
.stats-cards {
display: flex;
justify-content: space-between;
padding: 20rpx;
margin-top: 130rpx; // 添加顶部边距，为固定header留出空间
.stat-card {
flex: 1;
background-color: #fff;
border-radius: 35rpx;
padding: 30rpx;
margin: 15rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
.stat-label {
font-size: 28rpx;
color: #666;
}
.stat-value {
font-size: 55rpx;
font-weight: bold;
font-family: 'Digital-Bold', sans-serif;
&.blue {
color: #4080ff;
}
&.green {
color: #2fc25b;
}
}
}
}
.content-container {
margin: 0 30rpx;
background-color: #fff;
border-radius: 35rpx;
overflow: hidden;
border: 2rpx solid #e9e9e9;
}
.search-bar {
display: flex;
align-items: center;
padding: 20rpx;
.search-input {
flex: 1;
border: 1px solid #e9e9e9;
border-radius: 20rpx;
padding: 10rpx 20rpx;
}
.filter-btn, .refresh-btn {
margin-left: 20rpx;
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20rpx;
border: 2rpx solid #e9e9e9;
}
}
.filter-icon {
width: 43rpx;
height: 43rpx;
}
.filter-bar {
display: flex;
align-items: center;
padding: 10rpx 25rpx;
.status-filter {
display: flex;
align-items: center;
font-size: 28rpx;
color: #333;
padding: 10rpx 20rpx;
border-radius: 20rpx;
background-color: #fff;
border: 1rpx solid #e5e5e5;
min-width: 180rpx;
justify-content: space-between;
text {
margin-right: 10rpx;
}
&:active {
background-color: #f8f8f8;
}
}
.select-all {
display: flex;
align-items: center;
margin-right: auto;
margin-left: 20rpx;
.select-text {
font-size: 28rpx;
color: #333;
margin-left: 10rpx;
}
}
.delete-btn {
margin-left: 30rpx;
background-color: #ee6666;
color: #fff;
padding: 10rpx 30rpx;
border-radius: 20rpx;
font-size: 28rpx;
&.disabled {
background-color: #cccccc;
}
}
}
.device-list {
padding: 0;
.device-item {
display: flex;
background-color: #fff;
padding: 30rpx;
margin: 25rpx;
border-radius: 20rpx;
border: 2rpx solid #e9e9e9;
&:last-child {
border-bottom: none;
}
.device-checkbox {
margin-right: 10rpx;
display: flex;
align-items: center;
}
.device-info {
flex: 1;
.device-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15rpx;
.device-name {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.device-status {
font-size: 24rpx;
padding: 6rpx 20rpx;
border-radius: 20rpx;
&.online {
background-color: #e6f7f0;
color: #2fc25b;
}
&.offline {
background-color: #f7eae9;
color: #ee6666;
}
}
}
.device-imei, .device-wx {
font-size: 32rpx;
color: #666;
}
.device-likes {
display: flex;
justify-content: space-between;
font-size: 32rpx;
color: #666;
}
}
}
}
</style>

14
Cunkebao/pages/profile/index.vue
View File

@@ -4,7 +4,7 @@
<view class="header">
<view class="title">我的</view>
<view class="header-icons">
<u-icon name="setting" size="50" color="#000000" class="icon-setting" @click="goToSetting"></u-icon>
<u-icon name="setting" size="45" color="#000000" class="icon-setting" @click="goToSetting"></u-icon>
<u-icon name="bell" size="50" color="#000000" class="icon-bell" @click="goToNotification"></u-icon>
</view>
</view>
@@ -161,14 +161,14 @@ export default {
min-height: 90vh;
background-color: #f9fafb;
position: relative;
padding-top: 50rpx;
padding-top: 46rpx;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25rpx 30rpx;
padding: 30rpx 30rpx;
background-color: #fff;
border-bottom: 1px solid #e9e9e9;
position: fixed;
@@ -178,9 +178,7 @@ export default {
z-index: 999;
.title {
font-size: 45rpx;
font-weight: bold;
color: #2664ec;
font-size: 40rpx;
}
.header-icons {
@@ -197,7 +195,7 @@ export default {
margin: 35rpx;
margin-top: 120rpx;
background-color: #fff;
border-radius: 16rpx;
border-radius: 35rpx;
padding: 50rpx;
display: flex;
align-items: center;
@@ -255,7 +253,7 @@ export default {
.menu-list {
margin: 35rpx;
background-color: #fff;
border-radius: 16rpx;
border-radius: 35rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

2
Cunkebao/pages/scenarios/index.vue
View File

@@ -310,8 +310,6 @@ export default {
.title {
position: absolute;
font-size: 40rpx;
font-weight: bold;
color: #2563EB;
float: left;
margin-left: 70rpx;
}

9
Cunkebao/static/images/icons/filter.svg Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 5L9 12V19L15 21V12L21 5H3Z"
stroke="#333333"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
fill="none" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 324 B