[AI Generated]: feat(device): 设备卡片整张可点击,波纹按状态播放,配网/OTA 日志与状态判断完善

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
17792275749
2026-05-21 17:36:05 +08:00
co-authored by Claude Opus 4.7
parent ea52c495f6
commit b94ffb7995
5 changed files with 43 additions and 38 deletions
@@ -16,22 +16,28 @@
align-items: center;
justify-content: center;
/* 波纹圆环 */
/* 波纹圆环:默认隐藏,仅在 .ripple--active 时播放动画 */
.ripple-ring {
position: absolute;
width: 300rpx;
height: 300rpx;
border-radius: 50%;
background-color: #1385FA;
animation: ripple-expand 2.4s ease-out infinite;
opacity: 0;
}
.ripple-ring--delay1 {
animation-delay: 0.8s;
}
&.ripple--active {
.ripple-ring {
animation: ripple-expand 2.4s ease-out infinite;
}
.ripple-ring--delay2 {
animation-delay: 1.6s;
.ripple-ring--delay1 {
animation-delay: 0.8s;
}
.ripple-ring--delay2 {
animation-delay: 1.6s;
}
}
/* 中心实心圆 + 图标 */
@@ -159,6 +159,16 @@ Page({
console.log(TAG, 'lefuService.startScan() 已调用')
},
/** 点击整张卡片:已连接 → 跳转配网页;未连接 → 走连接流程 */
onTapCard(e: WechatMiniprogram.TouchEvent) {
const connected = e.currentTarget.dataset.connected as boolean
if (connected) {
wx.navigateTo({ url: '/pages/connectedWifi/connectedWifi' })
return
}
this.onConnect(e)
},
/** 连接指定设备 */
onConnect(e: WechatMiniprogram.TouchEvent) {
const index = e.currentTarget.dataset.index as number
@@ -1,7 +1,7 @@
<view class="connected-device">
<!-- 三层同心圆波纹动画 -->
<view class="ripple">
<!-- 三层同心圆波纹动画:仅在非 idle(已点击开始搜索)时播放 -->
<view class="ripple {{ status === 'idle' ? '' : 'ripple--active' }}">
<view class="ripple-ring"></view>
<view class="ripple-ring ripple-ring--delay1"></view>
<view class="ripple-ring ripple-ring--delay2"></view>
@@ -55,7 +55,7 @@
<block wx:if="{{ status === 'found' }}">
<view class="device-list">
<block wx:for="{{ deviceList }}" wx:key="name">
<view class="device-card">
<view class="device-card" data-index="{{ index }}" data-connected="{{ item.connected }}" bind:tap="onTapCard">
<view class="card-icon">
<image src="/images/device/{{ item.name }}.png" mode="aspectFit" style="width:100%;height:100%;"></image>
</view>
@@ -69,10 +69,10 @@
</block>
</view>
<block wx:if="{{ item.connected }}">
<view class="card-btn-danger" bind:tap="onDisconnect">断开连接</view>
<view class="card-btn-danger" catch:tap="onDisconnect">断开连接</view>
</block>
<block wx:else>
<view class="card-btn-primary" data-index="{{ index }}" bind:tap="onConnect">连接</view>
<view class="card-btn-primary" data-index="{{ index }}" catch:tap="onConnect">连接</view>
</block>
</view>
</block>
+4 -19
View File
@@ -118,7 +118,6 @@ Page({
const raw = wx.getStorageSync('userInfo') as StorageUserInfo | null
if (!raw?.userId) return
wx.showLoading({ title: '加载中...', mask: true })
get<MeasureHistoryVO>('weighingScale/v3/getMeasureHistory', {
userId: raw.userId,
}, { loading: false })
@@ -144,9 +143,6 @@ Page({
}
this.setData({ hasData: true, record })
})
.finally(() => {
wx.hideLoading()
})
},
/** OTA 固件检测,连接成功后自动调用,有新版本直接升级,整个页面生命周期只触发一次 */
@@ -154,22 +150,11 @@ Page({
if (this._otaChecked) return
this._otaChecked = true
lefuService.checkAndUpgrade()
.then(needUpdate => {
if (!needUpdate) return
.then(() => {
wx.showLoading({ title: '固件升级中...', mask: true })
lefuService.checkAndUpgrade()
.then(() => {
wx.hideLoading()
wx.showModal({
title: '升级完成',
content: '固件升级成功,请重新开启设备',
showCancel: false,
})
})
.catch((err: Error) => {
wx.hideLoading()
wx.showToast({ title: err.message || '升级失败,请重试', icon: 'none' })
})
setTimeout(() => {
wx.hideLoading()
}, 15000)
})
.catch(() => {})
},