diff --git a/miniprogram/app.json b/miniprogram/app.json index 342a6ac..af404fb 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -1,12 +1,12 @@ { "pages": [ - "pages/connectedWifi/connectedWifi", + "pages/equipment/equipment", "pages/login/login", "pages/searchDevice/searchDevice", "pages/connectedDevice/connectedDevice", + "pages/connectedWifi/connectedWifi", "pages/supplementPersonal/supplementPersonal", "pages/home/home", - "pages/equipment/equipment", "pages/data/data", "pages/my/my" ], diff --git a/miniprogram/pages/equipment/equipment.json b/miniprogram/pages/equipment/equipment.json index a97367d..1d7d59d 100644 --- a/miniprogram/pages/equipment/equipment.json +++ b/miniprogram/pages/equipment/equipment.json @@ -1,3 +1,4 @@ { + "navigationBarTitleText": "设备管理", "usingComponents": {} } diff --git a/miniprogram/pages/equipment/equipment.less b/miniprogram/pages/equipment/equipment.less new file mode 100644 index 0000000..1e982fe --- /dev/null +++ b/miniprogram/pages/equipment/equipment.less @@ -0,0 +1,185 @@ +/* 设备管理页 —— 已配对设备列表 + 添加设备主按钮 */ +.equipment { + width: 100%; + height: 100%; + padding: 30rpx 30rpx 0; + box-sizing: border-box; + background-color: #F7F8FA; + + /* 副标题:已配对设备 */ + .section-title { + color: #808080; + height: 28rpx; + font-size: 26rpx; + line-height: 28rpx; + padding: 0 30rpx; + margin-bottom: 20rpx; + } + + /* 卡片列表 */ + .device-list { + width: 100%; + display: flex; + flex-direction: column; + + .device-card { + width: 100%; + background-color: #FFFFFF; + border-radius: 16rpx; + padding: 30rpx; + box-sizing: border-box; + margin-bottom: 24rpx; + + &:last-child { + margin-bottom: 0; + } + + /* 上半:图标 + 设备名 + 状态 */ + .card-top { + width: 100%; + display: flex; + align-items: center; + + .card-icon { + width: 90rpx; + height: 90rpx; + border-radius: 24rpx; + background-color: rgba(19, 133, 250, 0.1); + margin-right: 24rpx; + } + + .card-info { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + + .card-name { + color: #252535; + height: 32rpx; + font-size: 32rpx; + font-weight: 500; + line-height: 32rpx; + margin-bottom: 16rpx; + } + + .card-status { + display: flex; + align-items: center; + + .card-dot { + width: 12rpx; + height: 12rpx; + border-radius: 50%; + margin-right: 14rpx; + } + + .card-dot-on { + background-color: #2AC79F; + } + + .card-dot-off { + background-color: #F24439; + } + + .card-status-text { + height: 28rpx; + font-size: 28rpx; + font-weight: 500; + line-height: 28rpx; + } + + .card-status-on { + color: #2AC79F; + } + + .card-status-off { + color: #F24439; + } + } + } + } + + /* 分隔线 */ + .card-divider { + width: 100%; + height: 2rpx; + background-color: #EAECF1; + border-radius: 1rpx; + margin: 30rpx 0 30rpx; + } + + /* 操作按钮区:单/双形态共用 */ + .card-actions { + width: 100%; + padding: 0 24rpx; + box-sizing: border-box; + display: flex; + align-items: center; + + /* 单按钮:已连接态 */ + &.card-actions-single { + justify-content: center; + + .btn-ghost-full { + width: 100%; + height: 82rpx; + line-height: 78rpx; + text-align: center; + color: #77849E; + font-size: 28rpx; + background-color: #FFFFFF; + border: 2rpx solid #E6E6EA; + border-radius: 39rpx; + box-sizing: border-box; + } + } + + /* 双按钮:未连接态 */ + &.card-actions-double { + justify-content: space-between; + + .btn-ghost-half { + width: 280rpx; + height: 82rpx; + line-height: 78rpx; + text-align: center; + color: #77849E; + font-size: 28rpx; + background-color: #FFFFFF; + border: 2rpx solid #E6E6EA; + border-radius: 39rpx; + box-sizing: border-box; + } + } + } + } + } + + /* 底部「添加设备」主按钮 */ + .add-btn { + width: 580rpx; + height: 88rpx; + display: flex; + align-items: center; + justify-content: center; + background-color: #1385FA; + border-radius: 44rpx; + margin: 40rpx auto 0; + + .add-btn-icon { + width: 34rpx; + height: 34rpx; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.3); + margin-right: 16rpx; + } + + .add-btn-text { + color: #FFFFFF; + font-size: 32rpx; + font-weight: bold; + line-height: 32rpx; + } + } +} diff --git a/miniprogram/pages/equipment/equipment.ts b/miniprogram/pages/equipment/equipment.ts index d9046bc..d956c5e 100644 --- a/miniprogram/pages/equipment/equipment.ts +++ b/miniprogram/pages/equipment/equipment.ts @@ -1,5 +1,38 @@ -Page({ - data: {}, +/** 已配对设备模型 */ +interface DeviceItem { + /** 设备唯一 id */ + id: string + /** 设备名称 */ + name: string + /** 是否已连接 */ + connected: boolean +} - onLoad() {}, +Page({ + data: { + /* 已配对设备 mock 列表(后续接入真实接口时替换) */ + deviceList: [ + { id: 'd1', name: '智能体重秤 Pro', connected: true }, + { id: 'd2', name: '体重秤 Basic', connected: false }, + ] as DeviceItem[], + }, + + onLoad() { + /* 页面进入时无副作用,设备列表后续接入真实接口 */ + }, + + /* 点击「连接」:未连接卡片才会出现 —— 暂留空,待跳转逻辑接入 */ + onTapConnect() { + // TODO: 跳转设备搜索/绑定流程 + }, + + /* 点击「成员管理」:暂留空,待成员管理页接入 */ + onTapMember() { + // TODO: 跳转成员管理页 + }, + + /* 点击「添加设备」:暂留空,待跳转逻辑接入 */ + onTapAdd() { + // TODO: 跳转设备搜索页 + }, }) diff --git a/miniprogram/pages/equipment/equipment.wxml b/miniprogram/pages/equipment/equipment.wxml index 9ef6915..9032bbf 100644 --- a/miniprogram/pages/equipment/equipment.wxml +++ b/miniprogram/pages/equipment/equipment.wxml @@ -1,3 +1,59 @@ - - 设备 + + + + 已配对设备 + + + + + + + + + + + {{ item.name }} + + + + + 已连接 + + + + + 未连接 + + + + + + + + + + + + + 成员管理 + + + + + + 连接 + 成员管理 + + + + + + + + + + + 添加设备 + + diff --git a/miniprogram/pages/equipment/equipment.wxss b/miniprogram/pages/equipment/equipment.wxss deleted file mode 100644 index c108c6c..0000000 --- a/miniprogram/pages/equipment/equipment.wxss +++ /dev/null @@ -1,6 +0,0 @@ -.container { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; -}