87 lines
3.6 KiB
Plaintext
87 lines
3.6 KiB
Plaintext
<!--pages/mine/mine.wxml-->
|
|
<view class="container">
|
|
<!-- 用户信息卡片 -->
|
|
<view class="user-card">
|
|
<view class="user-info">
|
|
<image class="avatar" src="/assets/images/default-avatar.png" mode="aspectFill"></image>
|
|
<view class="info">
|
|
<text class="username">{{userInfo.userName || '未登录'}}</text>
|
|
<!-- <text class="user-id">ID: {{userInfo.userId || '-'}}</text> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 状态信息 -->
|
|
<view class="status-section">
|
|
<view class="section-title">连接状态</view>
|
|
<view class="status-list">
|
|
<view class="status-item">
|
|
<text class="label">MQTT 状态</text>
|
|
<text class="status" style="color: {{mqttStatusColor}}">{{mqttStatus}}</text>
|
|
</view>
|
|
<view class="status-item">
|
|
<text class="label">蓝牙状态</text>
|
|
<text class="status" style="color: {{bleStatusColor}}">{{bleStatus}}</text>
|
|
</view>
|
|
<view class="status-item">
|
|
<text class="label">采集设备</text>
|
|
<text class="status">{{activeDevice}}</text>
|
|
</view>
|
|
<view class="status-item">
|
|
<text class="label">离线缓存</text>
|
|
<text class="status">{{pendingCount}} 条</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- MQTT 连接配置 -->
|
|
<view class="status-section">
|
|
<view class="section-title">MQTT 连接</view>
|
|
<view class="mqtt-form">
|
|
<view class="mqtt-item">
|
|
<text class="mqtt-label">产品ID</text>
|
|
<input class="mqtt-input" type="number" placeholder="产品ID" value="{{mqttForm.productId}}" bindinput="onMqttInput" data-field="productId" />
|
|
</view>
|
|
<view class="mqtt-item">
|
|
<text class="mqtt-label">产品Mqtt账号</text>
|
|
<input class="mqtt-input" placeholder="产品Mqtt账号" value="{{mqttForm.serialNumber}}" bindinput="onMqttInput" data-field="serialNumber" />
|
|
</view>
|
|
<view class="mqtt-item">
|
|
<text class="mqtt-label">产品Mqtt密码</text>
|
|
<input class="mqtt-input" password placeholder="产品MQTT密码" value="{{mqttForm.productSecret}}" bindinput="onMqttInput" data-field="productSecret" />
|
|
</view>
|
|
<view class="mqtt-actions">
|
|
<button class="btn-connect" size="mini" bindtap="handleMqttConnect" loading="{{mqttConnecting || mqttConnectingLocal}}" disabled="{{mqttConnecting || mqttConnectingLocal || mqttConnected}}">
|
|
{{mqttConnected ? '已连接' : ((mqttConnecting || mqttConnectingLocal) ? '连接中' : '连接')}}
|
|
</button>
|
|
<button class="btn-disconnect" size="mini" bindtap="handleMqttDisconnect" disabled="{{!mqttConnected && !mqttConnecting}}">断开</button>
|
|
</view>
|
|
<view class="mqtt-hint">填好凭证点一次「连接」即会保存：之后打开小程序、切回前台、网络恢复都会自动连接。点「断开」后为手动断开，不再自动重连。</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能列表 -->
|
|
<view class="function-section">
|
|
<view class="section-title">功能</view>
|
|
<view class="function-list">
|
|
<view class="function-item" bindtap="clearCache">
|
|
<text class="function-name">清除缓存</text>
|
|
<text class="function-arrow">></text>
|
|
</view>
|
|
<view class="function-item" bindtap="showAbout">
|
|
<text class="function-name">关于</text>
|
|
<text class="function-arrow">></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 退出登录按钮 -->
|
|
<view class="logout-section">
|
|
<button class="logout-btn" bindtap="logout">退出登录</button>
|
|
</view>
|
|
|
|
<!-- 版本信息 -->
|
|
<view class="version-info">
|
|
<text>版本 {{appVersion}}</text>
|
|
</view>
|
|
</view> |