diff --git a/miniprogram/app.json b/miniprogram/app.json index 3d96a25..6b8c50c 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -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", diff --git a/miniprogram/components/equipmentDialog/equipmentDialog.json b/miniprogram/components/equipmentDialog/equipmentDialog.json new file mode 100644 index 0000000..59a1db6 --- /dev/null +++ b/miniprogram/components/equipmentDialog/equipmentDialog.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} diff --git a/miniprogram/components/equipmentDialog/equipmentDialog.less b/miniprogram/components/equipmentDialog/equipmentDialog.less new file mode 100644 index 0000000..aae644b --- /dev/null +++ b/miniprogram/components/equipmentDialog/equipmentDialog.less @@ -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; + } +} diff --git a/miniprogram/components/equipmentDialog/equipmentDialog.ts b/miniprogram/components/equipmentDialog/equipmentDialog.ts new file mode 100644 index 0000000..456a77c --- /dev/null +++ b/miniprogram/components/equipmentDialog/equipmentDialog.ts @@ -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') + } + } +}) diff --git a/miniprogram/components/equipmentDialog/equipmentDialog.wxml b/miniprogram/components/equipmentDialog/equipmentDialog.wxml new file mode 100644 index 0000000..7362989 --- /dev/null +++ b/miniprogram/components/equipmentDialog/equipmentDialog.wxml @@ -0,0 +1,7 @@ + + + + {{ title }} + {{ content }} + + diff --git a/miniprogram/images/addBtn.png b/miniprogram/images/addBtn.png new file mode 100644 index 0000000..e12630f Binary files /dev/null and b/miniprogram/images/addBtn.png differ diff --git a/miniprogram/images/equipment/bg.png b/miniprogram/images/equipment/bg.png new file mode 100644 index 0000000..0583d95 Binary files /dev/null and b/miniprogram/images/equipment/bg.png differ diff --git a/miniprogram/images/equipment/bluetooth.png b/miniprogram/images/equipment/bluetooth.png new file mode 100644 index 0000000..cd87790 Binary files /dev/null and b/miniprogram/images/equipment/bluetooth.png differ diff --git a/miniprogram/images/equipment/reload.png b/miniprogram/images/equipment/reload.png new file mode 100644 index 0000000..ff3e0e2 Binary files /dev/null and b/miniprogram/images/equipment/reload.png differ diff --git a/miniprogram/images/equipment/users.png b/miniprogram/images/equipment/users.png new file mode 100644 index 0000000..e5b98b7 Binary files /dev/null and b/miniprogram/images/equipment/users.png differ diff --git a/miniprogram/images/equipment/wifi.png b/miniprogram/images/equipment/wifi.png new file mode 100644 index 0000000..0b71172 Binary files /dev/null and b/miniprogram/images/equipment/wifi.png differ diff --git a/miniprogram/pages/equipment/equipment.json b/miniprogram/pages/equipment/equipment.json index 326bb13..9e7cb2b 100644 --- a/miniprogram/pages/equipment/equipment.json +++ b/miniprogram/pages/equipment/equipment.json @@ -1,5 +1,8 @@ { - "usingComponents": {}, - "navigationBarTitleText": "black" , - "navigationBarBackgroundColor": "#FFFFFF" -} \ No newline at end of file + "usingComponents": { + "equipment-dialog": "/components/equipmentDialog/equipmentDialog" + }, + "navigationBarTitleText": "设备管理", + "navigationBarTextStyle": "black", + "navigationBarBackgroundColor": "#FFFFFF" +} diff --git a/miniprogram/pages/equipment/equipment.less b/miniprogram/pages/equipment/equipment.less index 3382fb4..12cb48f 100644 --- a/miniprogram/pages/equipment/equipment.less +++ b/miniprogram/pages/equipment/equipment.less @@ -1 +1,283 @@ -/* pages/equipment/equipment.wxss */ \ No newline at end of file +.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; + } + } +} diff --git a/miniprogram/pages/equipment/equipment.ts b/miniprogram/pages/equipment/equipment.ts index 0cb72be..a8a939d 100644 --- a/miniprogram/pages/equipment/equipment.ts +++ b/miniprogram/pages/equipment/equipment.ts @@ -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' + }) } -}) \ No newline at end of file +}) diff --git a/miniprogram/pages/equipment/equipment.wxml b/miniprogram/pages/equipment/equipment.wxml index 9d50783..1b7c93d 100644 --- a/miniprogram/pages/equipment/equipment.wxml +++ b/miniprogram/pages/equipment/equipment.wxml @@ -1,2 +1,86 @@ - -pages/equipment/equipment.wxml \ No newline at end of file + + + + 当前为:运维模式 + 关闭运维模式 + + + + + + + + + + + + + + 已配对设备 + + 取消全部配对 + + + + + + + + + + {{ item.name }} + 取消配对 + + + + + {{ item.status }} + + + + + + + + 型号 + {{ item.model }} + + + 设备编号 + {{ item.serial }} + + + + + + + + + 设备WIFI + + + + + + 用户(4) + + + + + + 数据补传 + + + + + + + + + + + 添加设备 + + + +