feat(equipment): 实现设备管理页面，新增运维模式与配对/补传弹框
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
17792275749
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
3a67b26ed6
commit
eaec08a6e4
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"pages": [
|
||||
"pages/data/data",
|
||||
"pages/equipment/equipment",
|
||||
"pages/login/login",
|
||||
"pages/supplementPersonal/supplementPersonal",
|
||||
"pages/connectedDevice/connectedDevice",
|
||||
"pages/connectedWifi/connectedWifi",
|
||||
"pages/home/home",
|
||||
"pages/equipment/equipment",
|
||||
"pages/data/data",
|
||||
"pages/my/my",
|
||||
"pages/personalInformation/personalInformation",
|
||||
"pages/helpCenter/helpCenter",
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
.equipment-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(37, 37, 53, 0.6);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.equipment-panel {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 560rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
z-index: 101;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 100rpx 40rpx;
|
||||
|
||||
.equipment-title {
|
||||
color: #252535;
|
||||
height: 32rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.equipment-content {
|
||||
color: #808080;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
text-align: center;
|
||||
margin-top: 24rpx;
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
Component({
|
||||
properties: {
|
||||
/** 是否显示弹框 */
|
||||
show: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
/** 标题 */
|
||||
title: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
/** 副标题（支持 \n 换行） */
|
||||
content: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/** 点击遮罩关闭 */
|
||||
onTapMask() {
|
||||
this.triggerEvent('close')
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,7 @@
|
||||
<block wx:if="{{ show }}">
|
||||
<view class="equipment-mask" bind:tap="onTapMask"></view>
|
||||
<view class="equipment-panel">
|
||||
<view class="equipment-title">{{ title }}</view>
|
||||
<view class="equipment-content">{{ content }}</view>
|
||||
</view>
|
||||
</block>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 738 B |
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 510 B |
Binary file not shown.
|
After Width: | Height: | Size: 775 B |
Binary file not shown.
|
After Width: | Height: | Size: 880 B |
Binary file not shown.
|
After Width: | Height: | Size: 750 B |
@@ -1,5 +1,8 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "black" ,
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
"usingComponents": {
|
||||
"equipment-dialog": "/components/equipmentDialog/equipmentDialog"
|
||||
},
|
||||
"navigationBarTitleText": "设备管理",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
|
||||
@@ -1 +1,283 @@
|
||||
/* pages/equipment/equipment.wxss */
|
||||
.equipment {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: 24rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #F5F7FB;
|
||||
|
||||
/* 运维模式提示行 */
|
||||
.ops-bar {
|
||||
width: 100%;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.ops-mode {
|
||||
color: #1385FA;
|
||||
height: 28rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
/* 描边按钮（蓝色/红色） */
|
||||
.ops-btn {
|
||||
width: 180rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 44rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ops-btn--blue {
|
||||
border: 2rpx solid #1385FA;
|
||||
color: #1385FA;
|
||||
}
|
||||
|
||||
.ops-btn--red {
|
||||
border: 2rpx solid #F24439;
|
||||
color: #F24439;
|
||||
}
|
||||
}
|
||||
|
||||
/* 顶部卡片（渐变背景 + 设备图片占位） */
|
||||
.top-banner {
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
/* 已配对设备行 */
|
||||
.section-bar {
|
||||
width: 100%;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.section-left {
|
||||
height: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.bt-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
display: flex;
|
||||
margin-right: 8rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #808080;
|
||||
height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 描边按钮（蓝色/红色） */
|
||||
.ops-btn {
|
||||
width: 180rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 44rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ops-btn--blue {
|
||||
border: 2rpx solid #1385FA;
|
||||
color: #1385FA;
|
||||
}
|
||||
|
||||
.ops-btn--red {
|
||||
border: 2rpx solid #F24439;
|
||||
color: #F24439;
|
||||
}
|
||||
}
|
||||
|
||||
/* 设备卡片 */
|
||||
.device-card {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
border-radius: 24rpx;
|
||||
background-color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.device-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.device-icon {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background-color: #1385FA;
|
||||
}
|
||||
|
||||
.device-info {
|
||||
flex: 1;
|
||||
|
||||
.device-info_ {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.device-name {
|
||||
color: #252535;
|
||||
height: 32rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.device-unpair {
|
||||
color: #77849E;
|
||||
height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
border-bottom: 2rpx solid #77849E;
|
||||
}
|
||||
}
|
||||
|
||||
.device-status {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.device-status--connected {
|
||||
height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
background-color: #EAFAF6;
|
||||
|
||||
.status-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #2AC79F;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: #2AC79F;
|
||||
height: 22rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-meta {
|
||||
width: 100%;
|
||||
margin-bottom: 24rpx;
|
||||
border-bottom: 2rpx solid #EAECF1;
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.meta-label {
|
||||
color: #808080;
|
||||
height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
color: #252535;
|
||||
height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-actions {
|
||||
width: 100%;
|
||||
gap: 12px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
|
||||
.device-action-btn {
|
||||
flex: 1;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 28rpx;
|
||||
border: 2rpx solid #EAECF1;
|
||||
|
||||
> view:nth-of-type(1) {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
> view:nth-of-type(2) {
|
||||
color: #77849E;
|
||||
height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加设备按钮 */
|
||||
.add-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
background-color: #1385FA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.add-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.add-text {
|
||||
color: #FFFFFF;
|
||||
height: 36rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: bolder;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,66 +1,79 @@
|
||||
// pages/equipment/equipment.ts
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
devices: [
|
||||
{
|
||||
id: 1,
|
||||
name: '家庭蓝牙体脂秤 S1',
|
||||
status: '已连接',
|
||||
connected: true,
|
||||
model: 'BS-A100',
|
||||
serial: 'BL2024A00158',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '家庭蓝牙体脂秤 S1',
|
||||
status: '未连接',
|
||||
connected: false,
|
||||
model: 'BW-B200',
|
||||
serial: 'BL2024B00321',
|
||||
}
|
||||
],
|
||||
loadingShow: true,
|
||||
loadingTitle: '',
|
||||
loadingContent: ''
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
|
||||
/** 取消配对：使用小程序自带 showModal */
|
||||
onTapUnpair() {
|
||||
wx.showModal({
|
||||
title: '取消配对',
|
||||
content: '是否确认取消配对当前设备？',
|
||||
cancelText: '取消',
|
||||
confirmText: '确定',
|
||||
confirmColor: '#F24439'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
/** 底部操作：数据补传 / 设备连接 弹 loading */
|
||||
onTapAction(e: WechatMiniprogram.TouchEvent) {
|
||||
const action = e.currentTarget.dataset.action as string
|
||||
if (action === '数据补传') {
|
||||
this.setData({
|
||||
loadingShow: true,
|
||||
loadingTitle: '正在获取设备本地未上传数据',
|
||||
loadingContent: '请稍等...'
|
||||
})
|
||||
} else if (action === '设备连接') {
|
||||
this.setData({
|
||||
loadingShow: true,
|
||||
loadingTitle: '正在连接设备',
|
||||
loadingContent: '请确保设备处于开启状态\n请勿离开...'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
onCloseLoading() {
|
||||
this.setData({ loadingShow: false })
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
onTapAdd() {
|
||||
// 添加设备（待接入）
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
/** 关闭运维模式 */
|
||||
onCloseOps() {
|
||||
// 关闭运维模式（待接入）
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
/** 取消全部配对 */
|
||||
onUnpairAll() {
|
||||
wx.showModal({
|
||||
title: '取消全部配对',
|
||||
content: '是否确认取消全部设备的配对？',
|
||||
cancelText: '取消',
|
||||
confirmText: '确定',
|
||||
confirmColor: '#F24439'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,2 +1,86 @@
|
||||
<!--pages/equipment/equipment.wxml-->
|
||||
<text>pages/equipment/equipment.wxml</text>
|
||||
<view class="equipment">
|
||||
<!-- 运维模式提示行 -->
|
||||
<view class="ops-bar">
|
||||
<view class="ops-mode">当前为：运维模式</view>
|
||||
<view class="ops-btn ops-btn--blue" bind:tap="onCloseOps">关闭运维模式</view>
|
||||
</view>
|
||||
|
||||
<!-- 顶部卡片（渐变背景 + 设备图片占位） -->
|
||||
<view class="top-banner">
|
||||
<image src="/images/equipment/bg.png" />
|
||||
</view>
|
||||
|
||||
<!-- 已配对设备行 -->
|
||||
<view class="section-bar">
|
||||
<view class="section-left">
|
||||
<view class="bt-icon">
|
||||
<image src="/images/equipment/bluetooth.png" />
|
||||
</view>
|
||||
<view class="section-title">已配对设备</view>
|
||||
</view>
|
||||
<view class="ops-btn ops-btn--red" bind:tap="onUnpairAll">取消全部配对</view>
|
||||
</view>
|
||||
|
||||
<!-- 设备列表 -->
|
||||
<block wx:for="{{ devices }}" wx:key="id">
|
||||
<view class="device-card">
|
||||
<view class="device-top">
|
||||
<view class="device-icon"></view>
|
||||
<view class="device-info">
|
||||
<view class="device-info_">
|
||||
<view class="device-name">{{ item.name }}</view>
|
||||
<view class="device-unpair" bind:tap="onTapUnpair">取消配对</view>
|
||||
</view>
|
||||
<view class="device-status">
|
||||
<view class="device-status--connected">
|
||||
<view class="status-dot"></view>
|
||||
<view class="status-text">{{ item.status }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="device-meta">
|
||||
<view class="meta-row">
|
||||
<view class="meta-label">型号</view>
|
||||
<view class="meta-value">{{ item.model }}</view>
|
||||
</view>
|
||||
<view class="meta-row">
|
||||
<view class="meta-label">设备编号</view>
|
||||
<view class="meta-value">{{ item.serial }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="device-actions">
|
||||
<view class="device-action-btn">
|
||||
<view>
|
||||
<image src="/images/equipment/wifi.png" />
|
||||
</view>
|
||||
<view>设备WIFI</view>
|
||||
</view>
|
||||
<view class="device-action-btn">
|
||||
<view>
|
||||
<image src="/images/equipment/users.png" />
|
||||
</view>
|
||||
<view>用户(4)</view>
|
||||
</view>
|
||||
<view class="device-action-btn">
|
||||
<view>
|
||||
<image src="/images/equipment/reload.png" />
|
||||
</view>
|
||||
<view>数据补传</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 添加设备按钮 -->
|
||||
<view class="add-btn" bind:tap="onTapAdd">
|
||||
<view class="add-icon">
|
||||
<image src="/images/addBtn.png" />
|
||||
</view>
|
||||
<view class="add-text">添加设备</view>
|
||||
</view>
|
||||
|
||||
<equipment-dialog show="{{ loadingShow }}" title="{{ loadingTitle }}" content="{{ loadingContent }}" bind:close="onCloseLoading" />
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user