car-wash-java/admin-h5/src/pages/setting/device-config.vue

<template>
  <view class="device-config-container">
    <NavBar title="设备参数模板" @back="goBack" />
    
    <!-- 配置列表 -->
    <view class="config-list">
      <view 
        v-for="config in configList" 
        :key="config.id" 
        class="config-item"
        @click="navigateToEditConfig(config.id)"
      >
        <view class="config-id-section">
          <text class="id-badge">ID: {{ config.id }}</text>
        </view>
        <view class="config-main-info">
          <text class="config-name">{{ config.name }}</text>
          <text class="config-desc">{{ config.remark || '无描述' }}</text>
        </view>
        <view class="config-action">
          <AppIcon name="chevron-right" size="18" color="#CCCCCC" />
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-if="configList.length === 0 && !loading">
      <view class="empty-icon-wrapper">
        <AppIcon name="settings" size="48" color="#BFBFBF" />
      </view>
      <text class="empty-text">暂无设备配置</text>
      <text class="empty-desc">点击右上角添加配置</text>
    </view>
    
    <!-- 悬浮添加按钮 -->
    <view class="fab-add" @click="navigateToAddConfig">
      <AppIcon name="plus" size="28" color="#FFFFFF" />
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-overlay" v-if="loading">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getDeviceConfigList } from '../../api/device.js'
import { showToast } from '../../utils/index.js'

const configList = ref([])
const loading = ref(false)
const stationId = ref('') // 可选过滤

// 加载设备配置列表
const loadDeviceConfigs = async () => {
  if (loading.value) return
  loading.value = true
  try {
    const res = await getDeviceConfigList({
      page: 1,
      pageSize: 100,
      stationId: stationId.value
    })
    
    if (res && res.code === 200) {
      // 适配分页结构 list, records 或直接数组
      const data = res.data
      configList.value = data.list || data.records || (Array.isArray(data) ? data : [])
      console.log('设备配置列表加载成功:', configList.value)
    } else {
      showToast(res.message || '获取配置列表失败')
    }
  } catch (error) {
    console.error('加载设备配置失败:', error)
    showToast('网络请求失败，请检查网络')
  } finally {
    loading.value = false
  }
}

// 页面每次显示时（包括从编辑页返回）都刷新数据
onShow(() => {
  loadDeviceConfigs()
})

// 导航到添加配置页面
const navigateToAddConfig = () => {
  uni.navigateTo({
    url: '/pages/setting/device-config-detail'
  })
}

// 导航到编辑配置页面
const navigateToEditConfig = (configId) => {
  uni.navigateTo({
    url: `/pages/setting/device-config-detail?id=${configId}`
  })
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.device-config-container {
  min-height: 100vh;
  background-color: #F5F7FA;
  padding-bottom: 180rpx; /* 关键：间距改在这里，确保滚动到底部不被按钮遮挡 */
  box-sizing: border-box;
}

/* 顶部导航栏 */
.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(24rpx + var(--status-bar-height));
  padding-right: 30rpx;
  padding-bottom: 24rpx;
  padding-left: 30rpx;
  background: #C6171E;
  box-shadow: 0 4rpx 16rpx rgba(198, 23, 30, 0.2);
}

.nav-left {
  width: 180rpx; /* 增加宽度以平衡右侧胶囊按钮空间 */
  display: flex;
  align-items: center;
}

.back-icon {
  font-size: 40rpx;
  color: #FFFFFF;
  font-weight: 600;
}

.nav-title {
  font-size: 34rpx;
  color: #FFFFFF;
  font-weight: 600;
  flex: 1;
  text-align: center;
  white-space: nowrap;
}

.nav-right {
  width: 180rpx;
}

/* 悬浮添加按钮 */
.fab-add {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(60rpx + env(safe-area-inset-bottom));
  width: 110rpx;
  height: 110rpx;
  background: #C6171E;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 30rpx rgba(198, 23, 30, 0.4);
  z-index: 99;
  transition: all 0.3s;
}

.fab-add:active {
  transform: translateX(-50%) scale(0.9);
  box-shadow: 0 4rpx 15rpx rgba(198, 23, 30, 0.3);
}

.plus-icon {
  font-size: 70rpx;
  color: #FFFFFF;
  font-weight: 300;
  margin-top: -6rpx;
}

/* 配置列表 */
.config-list {
  margin: 20rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  /* 移除了内部 padding-bottom */
}

.config-item {
  display: flex;
  align-items: center;
  height: 140rpx; /* 固定高度确保等高 */
  padding: 0 30rpx;
  border-bottom: 1rpx solid #F0F0F0;
  box-sizing: border-box;
}

.config-item:last-child {
  border-bottom: none;
}

.config-id-section {
  margin-right: 24rpx;
  flex-shrink: 0;
}

.id-badge {
  display: inline-block;
  font-size: 22rpx;
  color: #C6171E;
  background-color: rgba(198, 23, 30, 0.1);
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
  font-weight: 600;
  min-width: 80rpx;
  text-align: center;
}

.config-main-info {
  flex: 1;
  overflow: hidden; /* 必须，用于文本溢出省略 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.config-name {
  font-size: 30rpx;
  color: #1A1A1A;
  font-weight: 600;
  margin-bottom: 6rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.config-desc {
  font-size: 24rpx;
  color: #999999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.config-action {
  margin-left: 20rpx;
  flex-shrink: 0;
}

.arrow {
  font-size: 30rpx;
  color: #CCCCCC;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  color: #999999;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  margin-bottom: 16rpx;
}

.empty-desc {
  font-size: 24rpx;
}

/* 加载状态 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.loading-spinner {
  font-size: 64rpx;
  animation: spin 1s linear infinite;
  margin-bottom: 32rpx;
  color: #fff;
}

.loading-text {
  font-size: 28rpx;
  color: #fff;
}

</style>