256 lines
7.1 KiB
Plaintext
256 lines
7.1 KiB
Plaintext
<!--index.wxml-->
|
||
<!-- 自定义导航栏容器 -->
|
||
<view class="custom-nav" style="height: {{navBarHeight}}px;">
|
||
<!-- 状态栏占位 -->
|
||
<view style="height: {{statusBarHeight}}px;"></view>
|
||
<!-- 标题栏区域 -->
|
||
<view class="title-bar" style="height: {{menuHeight}}px; margin-top: {{menuBottom}}px;">
|
||
<text class="nav-title">智能宠物喂食器</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view class="scrollarea" scroll-y type="list" style="padding-top: {{navBarHeight}}px;">
|
||
<view class="container">
|
||
|
||
<!-- MQTT状态提示 -->
|
||
<van-notice-bar
|
||
left-icon="info-o"
|
||
text="{{isConnected ? '✓ MQTT已连接' : '⚠ MQTT未连接'}}"
|
||
color="{{isConnected ? '#52c41a' : '#ff4d4f'}}"
|
||
background="{{isConnected ? '#f6ffed' : '#fff2f0'}}"
|
||
wrapable
|
||
/>
|
||
|
||
<!-- 数据显示区域 -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<van-icon name="chart-trending-o" size="22" color="#667eea" />
|
||
<text class="section-title">实时监测</text>
|
||
</view>
|
||
|
||
<!-- 环境数据 -->
|
||
<van-cell-group inset>
|
||
<van-cell
|
||
title="温度"
|
||
value="{{temperature}}°C"
|
||
icon="fire-o"
|
||
center
|
||
/>
|
||
|
||
<van-cell
|
||
title="湿度"
|
||
value="{{humidity}}%"
|
||
icon="water-o"
|
||
center
|
||
/>
|
||
|
||
<van-cell
|
||
title="食物重量"
|
||
value="{{foodWeight}}g"
|
||
icon="food-o"
|
||
center
|
||
/>
|
||
|
||
<van-cell
|
||
title="水位"
|
||
value="{{waterLevel === 1 ? '满水' : '缺水'}}"
|
||
center
|
||
icon="water-o"
|
||
/>
|
||
</van-cell-group>
|
||
|
||
<!-- 系统模式 -->
|
||
<van-cell-group inset class="mode-cell">
|
||
<van-cell
|
||
title="运行模式"
|
||
value="{{systemMode === 'auto' ? '自动模式' : '手动模式'}}"
|
||
center
|
||
icon="setting-o"
|
||
/>
|
||
</van-cell-group>
|
||
|
||
</view>
|
||
|
||
<van-divider />
|
||
|
||
<!-- 简单控制区域 -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<van-icon name="play-circle-o" size="22" color="#764ba2" />
|
||
<text class="section-title">快捷操作</text>
|
||
</view>
|
||
|
||
<!-- 控制按钮 -->
|
||
<view class="control-grid">
|
||
<button
|
||
class="control-btn"
|
||
bindtap="manualFeed"
|
||
type="primary"
|
||
>
|
||
<van-icon name="food-o" size="26" color="#ffffff" />
|
||
<text>喂食</text>
|
||
</button>
|
||
|
||
<button
|
||
class="control-btn"
|
||
bindtap="manualWater"
|
||
type="info"
|
||
>
|
||
<van-icon name="water-o" size="26" color="#ffffff" />
|
||
<text>补水</text>
|
||
</button>
|
||
|
||
<button
|
||
class="control-btn refresh-btn"
|
||
bindtap="refreshData"
|
||
type="default"
|
||
loading="{{loading}}"
|
||
>
|
||
<van-icon name="replay" size="26" />
|
||
<text>{{loading ? '刷新中...' : '刷新数据'}}</text>
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 模式切换单独一行，更清晰 -->
|
||
<van-cell-group inset class="mode-switch-cell">
|
||
<van-cell title="自动/手动模式切换" center>
|
||
<view slot="right-icon">
|
||
<van-switch
|
||
checked="{{systemMode === 'auto'}}"
|
||
bind:change="toggleMode"
|
||
size="28"
|
||
active-color="#667eea"
|
||
inactive-color="#e8ecf1"
|
||
/>
|
||
</view>
|
||
</van-cell>
|
||
</van-cell-group>
|
||
</view>
|
||
|
||
<van-divider />
|
||
|
||
<!-- 基础设置区域 -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<van-icon name="setting-o" size="22" color="#1890ff" />
|
||
<text class="section-title">参数配置</text>
|
||
<button class="setting-btn" bindtap="openSettings" size="mini" type="primary" plain>配置</button>
|
||
</view>
|
||
|
||
<!-- 设置预览 -->
|
||
<van-cell-group inset>
|
||
<van-cell
|
||
title="喂食时间"
|
||
is-link
|
||
center
|
||
bind:click="openSettings"
|
||
value="{{feedTimes.length === 0 ? '未设置' : (feedTimes.length === 1 ? feedTimes[0] : feedTimes[0] + ' · ' + feedTimes[1])}}"
|
||
value-class="{{feedTimes.length === 0 ? 'empty-value' : ''}}"
|
||
/>
|
||
|
||
<van-cell
|
||
title="单次喂食量"
|
||
center
|
||
value="{{singleFeedWeight}}g"
|
||
/>
|
||
</van-cell-group>
|
||
</view>
|
||
|
||
<!-- 底部留白（核心：适配安全区域，避免被手机底部遮挡） -->
|
||
<view class="bottom-spacer"></view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 设置弹窗 -->
|
||
<van-popup
|
||
show="{{showSettings}}"
|
||
position="bottom"
|
||
round
|
||
bind:close="closeSettings"
|
||
custom-style="height: 85%; width: 100%; padding-bottom: env(safe-area-inset-bottom);"
|
||
>
|
||
<view class="settings-popup">
|
||
<view class="popup-header">
|
||
<text class="popup-title">参数配置</text>
|
||
<van-icon name="cross" size="22" color="#8a92a0" bindtap="closeSettings" />
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="popup-content">
|
||
<!-- 喂食时间设置 -->
|
||
<view class="setting-section">
|
||
<view class="setting-section-header">
|
||
<text class="setting-section-title">喂食时间（最多2个）</text>
|
||
<button class="add-time-btn" bindtap="addFeedTime" size="mini" type="primary" plain>
|
||
<van-icon name="plus" />
|
||
<text>添加</text>
|
||
</button>
|
||
</view>
|
||
|
||
<view wx:if="{{feedTimes.length === 0}}" class="empty-tip">
|
||
<text>暂未设置喂食时间</text>
|
||
</view>
|
||
|
||
<view wx:else class="time-list">
|
||
<view wx:for="{{feedTimes}}" wx:key="*this" class="time-item">
|
||
<text class="time-text">{{item}}</text>
|
||
<view class="time-actions">
|
||
<van-icon name="edit" size="22" color="#8a92a0" bindtap="editFeedTime" data-index="{{index}}" />
|
||
<van-icon name="delete" size="22" color="#ff4d4f" bindtap="deleteFeedTime" data-index="{{index}}" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<van-divider />
|
||
|
||
<!-- 单次喂食重量 -->
|
||
<view class="setting-section">
|
||
<view class="setting-section-header">
|
||
<text class="setting-section-title">单次喂食重量</text>
|
||
<text class="setting-value">{{singleFeedWeight}}g</text>
|
||
</view>
|
||
<van-stepper
|
||
value="{{singleFeedWeight}}"
|
||
min="10"
|
||
max="200"
|
||
step="10"
|
||
bind:change="onFeedWeightChange"
|
||
size="large"
|
||
/>
|
||
</view>
|
||
|
||
<van-divider />
|
||
|
||
<!-- 最低水位设置 -->
|
||
</scroll-view>
|
||
|
||
<!-- 保存按钮 -->
|
||
<view class="popup-footer">
|
||
<button
|
||
class="save-btn"
|
||
bindtap="saveSettings"
|
||
type="primary"
|
||
size="large"
|
||
>
|
||
保存配置
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</van-popup>
|
||
|
||
<!-- 时间选择器弹窗 -->
|
||
<van-popup
|
||
show="{{showTimePicker}}"
|
||
position="bottom"
|
||
round
|
||
bind:close="onTimeCancel"
|
||
custom-style="padding-bottom: env(safe-area-inset-bottom);"
|
||
>
|
||
<van-datetime-picker
|
||
type="time"
|
||
bind:confirm="onTimeConfirm"
|
||
bind:cancel="onTimeCancel"
|
||
title="选择喂食时间"
|
||
confirm-button-text="确定"
|
||
cancel-button-text="取消"
|
||
/>
|
||
</van-popup> |