yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新蓝牙体重秤小程序原型页面及后台管理页面

Browse Source
This commit is contained in:
liuyunqin
2026-07-17 17:28:24 +08:00
parent 6c6e92219a
commit 8a96ead2c8
7 changed files with 674 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
other-module/bluetooth-scale-miniprogram/device-members.html
+97 -21
View File
@@ -137,6 +137,23 @@
}
.add-member-card:hover { border-color: var(--primary); color: var(--primary); }
.add-member-card .plus { font-size: 20px; font-weight: 300; }
.add-member-card--self {
background: var(--primary-light); border-color: var(--primary); color: var(--primary);
font-weight: 600;
}
.add-member-card--self:hover { background: #d6e8ff; }
/* 空状态 */
.member-empty {
text-align: center; padding: 50px 20px 30px;
}
.member-empty__icon { font-size: 52px; margin-bottom: 12px; opacity: 0.35; }
.member-empty__text { font-size: 14px; color: var(--text-placeholder); }
.member-empty__sub { font-size: 12px; color: #bbb; margin-top: 4px; }
/* 底部双按钮 */
.bottom-actions { display: flex; gap: 10px; margin-top: 4px; }
.bottom-actions .add-member-card { flex: 1; }
/* Toast */
.toast {
@@ -295,29 +312,28 @@
<div id="membersB2" style="display:none;">
<div class="section-header">
<span class="section-title" id="sectionTitleB2">已录入成员</span>
<button class="sync-btn" id="syncBtnB2" onclick="syncMembers()">同步成员至设备</button>
<button class="sync-btn sync-btn--disabled" id="syncBtnB2" onclick="syncMembers()">同步成员至设备</button>
</div>
<div class="sync-hint" id="syncHintB2">当前成员信息未同步至设备，请在连接设备的状态下，点击同步按钮完成信息同步</div>
<div class="member-list">
<div class="member-card">
<div class="member-avatar member-avatar--male">张</div>
<div class="member-info">
<div class="member-top">
<span class="member-name">张建国</span>
<span class="member-tag--self">本人</span>
<span class="member-sync member-sync--pending">未同步</span>
</div>
<div class="member-detail">男 · 45岁 · 175cm</div>
<div class="member-actions">
<button class="action-btn action-btn--edit" onclick="showToast('编辑功能开发中')">编辑</button>
<button class="action-btn action-btn--delete" onclick="showToast('删除功能开发中')">删除</button>
</div>
</div>
</div>
<!-- 添加按钮 -->
<div class="add-member-card" onclick="location.href='add-member.html'">
<span class="plus">＋</span> 添加新成员
<!-- 空状态 -->
<div class="member-empty" id="memberEmptyB2">
<div class="member-empty__icon">👥</div>
<div class="member-empty__text">暂无成员</div>
<div class="member-empty__sub">请添加成员以使用设备测量</div>
</div>
<div class="member-list" id="memberListB2">
<!-- 成员卡片动态填充 -->
<!-- 底部按钮区 -->
<div class="bottom-actions" id="bottomActionsB2">
<div class="add-member-card add-member-card--self" id="addSelfBtnB2" onclick="addSelfMember()">
👤 一键添加本人
</div>
<div class="add-member-card" onclick="location.href='add-member.html'">
<span class="plus">＋</span> 添加新成员
</div>
</div>
</div>
</div><!-- /membersB2 -->
@@ -359,7 +375,7 @@
status: 'offline',
statusText: '未连接',
membersDiv: 'membersB2',
memberCount: 1,
memberCount: 0,
sectionTitleId: 'sectionTitleB2',
syncBtnId: 'syncBtnB2'
}
@@ -388,10 +404,70 @@
syncBtn.disabled = true;
}
// 成员数为 0 时的特殊处理
if (data.memberCount === 0) {
// 隐藏同步按钮和提示
syncBtn.style.display = 'none';
var hintId = 'syncHint' + device.toUpperCase();
var hintEl = document.getElementById(hintId);
if (hintEl) hintEl.style.display = 'none';
}
// 更新返回按钮，带上设备参数
document.querySelector('.nav-bar .back').href = 'main.html#tab-device-paired';
})();
/* 一键添加本人 */
function addSelfMember() {
var params = new URLSearchParams(location.search);
var device = params.get('device') || 'b2';
var devUpper = device.toUpperCase();
// 隐藏空状态
var emptyEl = document.getElementById('memberEmpty' + devUpper);
if (emptyEl) emptyEl.style.display = 'none';
// 构建本人成员卡片并插入 memberList 最前面
var memberCard = document.createElement('div');
memberCard.className = 'member-card';
memberCard.innerHTML = ''
+ '<div class="member-avatar member-avatar--male">张</div>'
+ '<div class="member-info">'
+ '<div class="member-top">'
+ '<span class="member-name">张建国</span>'
+ '<span class="member-tag--self">本人</span>'
+ '<span class="member-sync member-sync--pending">未同步</span>'
+ '</div>'
+ '<div class="member-detail">男 · 45岁 · 175cm</div>'
+ '<div class="member-actions">'
+ '<button class="action-btn action-btn--edit" onclick="showToast(\'编辑功能开发中\')">编辑</button>'
+ '<button class="action-btn action-btn--delete" onclick="showToast(\'删除功能开发中\')">删除</button>'
+ '</div>'
+ '</div>';
var memberList = document.getElementById('memberList' + devUpper);
var bottomActions = document.getElementById('bottomActions' + devUpper);
if (memberList && bottomActions) {
memberList.insertBefore(memberCard, bottomActions);
}
// 隐藏"一键添加本人"按钮
var selfBtn = document.getElementById('addSelfBtn' + devUpper);
if (selfBtn) selfBtn.style.display = 'none';
// 显示同步按钮和提示
var syncBtn = document.getElementById('syncBtn' + devUpper);
var hintEl = document.getElementById('syncHint' + devUpper);
if (syncBtn) syncBtn.style.display = '';
if (hintEl) hintEl.style.display = '';
// 更新标题
var sectionTitle = document.getElementById('sectionTitle' + devUpper);
if (sectionTitle) sectionTitle.textContent = '已录入成员(1/10)';
showToast('已添加本人');
}
/* 同步成员至设备 */
function syncMembers() {
var overlay = document.getElementById('syncOverlay');
other-module/bluetooth-scale-miniprogram/help-center.html
+71 -8
View File
@@ -43,12 +43,27 @@
.page-content { flex: 1; overflow-y: auto; background: var(--bg); padding: 16px; }
.page-content::-webkit-scrollbar { display: none; }
/* 分类标签 */
.category-tabs {
display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.category-tab {
padding: 7px 16px; font-size: 13px; font-weight: 500;
color: var(--text-secondary); cursor: pointer;
border-radius: 20px; transition: all 0.2s; white-space: nowrap;
background: #fff; border: 1px solid #e8e8e8;
}
.category-tab--active {
background: var(--primary); color: #fff; border-color: var(--primary);
}
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
background: #fff; padding: 14px 16px; border-bottom: 1px solid #f5f5f5;
display: flex; align-items: center; gap: 12px; cursor: pointer;
text-decoration: none; color: inherit;
text-decoration: none; color: inherit; transition: all 0.2s;
}
.faq-item--hidden { display: none; }
.faq-item:first-child { border-radius: 14px 14px 0 0; }
.faq-item:last-child { border-radius: 0 0 14px 14px; border-bottom: none; }
.faq-item:only-child { border-radius: 14px; }
@@ -84,43 +99,51 @@
</div>
<div class="page-content">
<div class="faq-list">
<a class="faq-item" href="help-detail.html?id=1">
<!-- 分类标签 -->
<div class="category-tabs" id="categoryTabs">
<div class="category-tab category-tab--active" data-category="all" onclick="switchCategory(this)">全部</div>
<div class="category-tab" data-category="connect" onclick="switchCategory(this)">连接配对</div>
<div class="category-tab" data-category="measure" onclick="switchCategory(this)">使用测量</div>
<div class="category-tab" data-category="data" onclick="switchCategory(this)">数据管理</div>
</div>
<div class="faq-list" id="faqList">
<a class="faq-item" href="help-detail.html?id=1" data-category="connect">
<div class="faq-item__icon">📡</div>
<div class="faq-item__info">
<div class="faq-item__title">如何连接蓝牙设备？</div>
</div>
<span class="faq-item__arrow">›</span>
</a>
<a class="faq-item" href="help-detail.html?id=2">
<a class="faq-item" href="help-detail.html?id=2" data-category="connect">
<div class="faq-item__icon">📶</div>
<div class="faq-item__info">
<div class="faq-item__title">设备无法连接WiFi怎么办？</div>
</div>
<span class="faq-item__arrow">›</span>
</a>
<a class="faq-item" href="help-detail.html?id=3">
<a class="faq-item" href="help-detail.html?id=3" data-category="measure">
<div class="faq-item__icon">👥</div>
<div class="faq-item__info">
<div class="faq-item__title">如何添加和管理成员？</div>
</div>
<span class="faq-item__arrow">›</span>
</a>
<a class="faq-item" href="help-detail.html?id=4">
<a class="faq-item" href="help-detail.html?id=4" data-category="measure">
<div class="faq-item__icon">📊</div>
<div class="faq-item__info">
<div class="faq-item__title">测量数据不准确如何校准？</div>
</div>
<span class="faq-item__arrow">›</span>
</a>
<a class="faq-item" href="help-detail.html?id=5">
<a class="faq-item" href="help-detail.html?id=5" data-category="data">
<div class="faq-item__icon">🔄</div>
<div class="faq-item__info">
<div class="faq-item__title">数据补传功能如何使用？</div>
</div>
<span class="faq-item__arrow">›</span>
</a>
<a class="faq-item" href="help-detail.html?id=6">
<a class="faq-item" href="help-detail.html?id=6" data-category="measure">
<div class="faq-item__icon">🔋</div>
<div class="faq-item__info">
<div class="faq-item__title">设备电量消耗过快？</div>
@@ -132,5 +155,45 @@
<div class="home-indicator"></div>
</div>
<script>
/* 分类标签切换 */
function switchCategory(el) {
var tabs = document.getElementById('categoryTabs');
tabs.querySelectorAll('.category-tab').forEach(function(t) { t.classList.remove('category-tab--active'); });
el.classList.add('category-tab--active');
var cat = el.dataset.category;
var items = document.getElementById('faqList').querySelectorAll('.faq-item');
var anyVisible = false;
items.forEach(function(item, i) {
if (cat === 'all' || item.dataset.category === cat) {
item.classList.remove('faq-item--hidden');
anyVisible = true;
} else {
item.classList.add('faq-item--hidden');
}
});
// 动态修正圆角：给第一个可见项和最后一个可见项加圆角
items.forEach(function(item) { item.style.borderRadius = ''; });
var visible = document.getElementById('faqList').querySelectorAll('.faq-item:not(.faq-item--hidden)');
if (visible.length > 0) {
if (visible.length === 1) {
visible[0].style.borderRadius = '14px';
} else {
visible[0].style.borderRadius = '14px 14px 0 0';
visible[visible.length - 1].style.borderRadius = '0 0 14px 14px';
}
// 隐藏最后一项的底边框
visible[visible.length - 1].style.borderBottom = 'none';
// 恢复非最后一项的底边框
for (var j = 0; j < visible.length - 1; j++) {
visible[j].style.borderBottom = '';
}
}
}
</script>
</body>
</html>
other-module/bluetooth-scale-miniprogram/main.html
+94 -8
View File
@@ -76,9 +76,26 @@
width: 100px; height: 100px; border-radius: 50%;
background: rgba(255,255,255,0.08);
}
.home-header__title { font-size: 20px; font-weight: 700; color: #fff; position: relative; z-index: 1; }
.home-header__title { font-size: 20px; font-weight: 700; color: #fff; position: relative; z-index: 1; cursor: default; }
.home-header__sub { font-size: 13px; color: rgba(255,255,255,0.85); position: relative; z-index: 1; }
/* 运维模式标记 */
.ops-badge {
position: absolute; top: 12px; right: 12px; z-index: 10;
display: none; align-items: center; gap: 6px;
}
.ops-badge--show { display: flex; }
.ops-badge__label {
font-size: 11px; font-weight: 700; color: #fff;
background: rgba(0,0,0,0.25); padding: 4px 8px; border-radius: 5px;
white-space: nowrap;
}
.ops-badge__close {
font-size: 10px; padding: 3px 8px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.5);
background: transparent; color: #fff; font-weight: 600; cursor: pointer;
white-space: nowrap;
}
.device-card {
background: #fff; border-radius: 14px; padding: 16px;
display: flex; align-items: center; gap: 12px;
@@ -155,6 +172,7 @@
.device-section-title {
font-size: 15px; font-weight: 600; color: #1a1a1a;
margin-bottom: 12px; padding: 0 2px;
display: flex; align-items: center; justify-content: space-between;
}
.device-add-btn {
width: 100%; height: 44px; border: 1px dashed #d9d9d9; border-radius: 12px;
@@ -168,7 +186,14 @@
.device-item {
background: #fff; border-radius: 14px; padding: 16px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
position: relative;
}
.device-item__unpair {
position: absolute; top: 10px; right: 12px;
font-size: 12px; color: #999; border: none;
background: none; cursor: pointer; padding: 2px 4px;
}
.device-item__unpair:active { color: #ff4d4f; }
.device-item__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.device-item__icon {
width: 44px; height: 44px; border-radius: 12px;
@@ -471,9 +496,21 @@
</div>
<!-- ===== 设备 Tab ===== -->
<div class="tab-panel" id="panel-device">
<div class="tab-panel" id="panel-device" style="padding:0;">
<!-- 绿色头部 -->
<div class="home-header" style="position:relative;">
<div class="home-header__title" id="deviceHeaderTitle" onclick="onDeviceHeaderClick()">智能体重秤 👋</div>
<div class="home-header__sub">设备智联 · 掌握健康</div>
<!-- 运维模式标记 -->
<div class="ops-badge" id="opsBadge">
<span class="ops-badge__label">运维模式</span>
<button class="ops-badge__close" onclick="event.stopPropagation();exitDeviceOpsMode()">关闭运维模式</button>
</div>
</div>
<div style="padding:16px;">
<!-- 空状态：未绑定设备 -->
<div id="deviceEmpty" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:500px;text-align:center;">
<div id="deviceEmpty" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:420px;text-align:center;">
<div style="width:80px;height:80px;border-radius:50%;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:20px;">⚖️</div>
<div style="font-size:15px;color:#999;margin-bottom:24px;">请绑定设备</div>
<!-- [交互] 点击跳转至搜索设备页 -->
@@ -482,9 +519,10 @@
</div>
<!-- 已配对设备列表 -->
<div id="devicePaired" style="display:none;">
<div class="device-section-title">已配对设备</div>
<div class="device-section-title"><span>已配对设备</span><button class="btn btn--outline" id="btnUnpairAll" style="display:none;flex:none;height:28px;font-size:11px;padding:0 10px;color:#ff4d4f;border-color:#ff4d4f;" onclick="unpairAllDevices()">取消全部配对</button></div>
<div class="device-list">
<div class="device-item">
<button class="device-item__unpair" onclick="unpairDevice('s1')">取消配对</button>
<div class="device-item__header">
<div class="device-item__icon">⚖️</div>
<div class="device-item__info">
@@ -500,6 +538,7 @@
</div>
</div>
<div class="device-item">
<button class="device-item__unpair" onclick="unpairDevice('b2')">取消配对</button>
<div class="device-item__header">
<div class="device-item__icon">⚖️</div>
<div class="device-item__info">
@@ -510,12 +549,13 @@
</div>
<div class="device-item__actions">
<button class="btn btn--primary" onclick="connectDevice()">📡 连接设备</button>
<button class="btn btn--outline" onclick="location.href='device-members.html?device=b2'">👥 成员管理(1)</button>
<button class="btn btn--outline" onclick="location.href='device-members.html?device=b2'">👥 成员管理(0)</button>
</div>
</div>
</div>
<button class="device-add-btn" onclick="location.href='search-device.html'">＋ 添加设备</button>
</div>
</div>
</div>
<!-- ===== 数据 Tab ===== -->
@@ -908,10 +948,56 @@
overlay.classList.remove('connect-overlay--show');
_dataUploaded = true;
showToast('数据已成功上传');
}, 4000);
}
}, 4000);
}
/* ===== 成员选择弹窗 ===== */
/* ===== 设备Tab运维模式 ===== */
var _deviceOpsClicks = 0;
var _deviceOpsTimer = null;
var _deviceOpsMode = false;
function onDeviceHeaderClick() {
if (_deviceOpsMode) return;
_deviceOpsClicks++;
if (_deviceOpsClicks === 1) {
_deviceOpsTimer = setTimeout(function() { _deviceOpsClicks = 0; }, 3000);
}
if (_deviceOpsClicks >= 5) {
clearTimeout(_deviceOpsTimer);
_deviceOpsClicks = 0;
enterDeviceOpsMode();
}
}
function enterDeviceOpsMode() {
_deviceOpsMode = true;
document.getElementById('opsBadge').classList.add('ops-badge--show');
var unpairBtn = document.getElementById('btnUnpairAll');
if (unpairBtn) unpairBtn.style.display = '';
showToast('已进入运维模式');
}
function exitDeviceOpsMode() {
_deviceOpsMode = false;
document.getElementById('opsBadge').classList.remove('ops-badge--show');
var unpairBtn = document.getElementById('btnUnpairAll');
if (unpairBtn) unpairBtn.style.display = 'none';
showToast('已退出运维模式');
}
function unpairAllDevices() {
if (!confirm('确定要取消全部设备配对吗？')) return;
sessionStorage.removeItem('devicePaired');
updateDeviceTabView();
showToast('已取消全部配对');
}
function unpairDevice(deviceId) {
// 单个设备取消配对（模拟：提示后不做实际移除，保持列表展示）
showToast('设备「' + (deviceId === 's1' ? '家庭蓝牙体脂秤 S1' : '办公蓝牙体重秤 B2') + '」已取消配对');
}
/* ===== 成员选择弹窗 ===== */
function openMemberModal() {
document.getElementById('memberModal').classList.add('member-modal--show');
}