odf_new/odf-uniapp/pages/cable/index.vue

<template>
  <view class="cable-page">
    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />

    <view class="content">
      <!-- 顶部导航栏 -->
      <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
        <view class="nav-bar-inner">
          <image
            class="nav-icon"
            src="/static/images/ic_back.png"
            mode="aspectFit"
            @click="goBack"
          />
          <text class="nav-title">干线</text>
          <view class="nav-icon-placeholder" />
        </view>
      </view>

      <!-- 小标题 -->
      <text class="section-title">光缆列表</text>

      <!-- 搜索栏 -->
      <view class="search-bar">
        <image class="search-icon" src="/static/images/ic_search.png" mode="aspectFit" />
        <input
          class="search-input"
          v-model="keyword"
          placeholder="只支持搜索本公司光缆和故障信息"
          placeholder-class="search-placeholder"
          confirm-type="search"
          @confirm="handleSearch"
        />
      </view>

      <!-- 光缆列表 -->
      <scroll-view class="cable-list" scroll-y v-if="cableList.length > 0">
        <view
          class="cable-card"
          v-for="item in cableList"
          :key="item.id"
          @click="goFaultList(item)"
        >
          <text class="cable-name">{{ item.cableName }}</text>
        </view>
      </scroll-view>

      <!-- 空状态 -->
      <view class="empty-state" v-else-if="loaded">
        <text class="empty-text">暂无光缆数据</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { getCableList } from '@/services/trunk'

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
const cableList = ref([])
const deptId = ref('')
const keyword = ref('')
const loaded = ref(false)

async function loadCableList() {
  const res = await getCableList(deptId.value)
  if (res.code === 200 && res.data) {
    cableList.value = res.data.result || []
  }
  loaded.value = true
}

function goBack() {
  uni.navigateBack()
}

function handleSearch() {
  const kw = keyword.value.trim()
  if (!kw) return
  uni.navigateTo({
    url: '/pages/trunk-search/index?deptId=' + deptId.value + '&keyword=' + encodeURIComponent(kw)
  })
}

function goFaultList(item) {
  uni.navigateTo({
    url: '/pages/fault-list/index?cableId=' + item.id + '&cableName=' + encodeURIComponent(item.cableName)
  })
}

onLoad((options) => {
  if (options.deptId) {
    deptId.value = options.deptId
  }
  loadCableList()
})

onPullDownRefresh(() => {
  loadCableList().finally(() => {
    uni.stopPullDownRefresh()
  })
})
</script>

<style scoped>
.cable-page {
  position: relative;
  min-height: 100vh;
  background-color: #F5F5F5;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500rpx;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 1;
}

.nav-bar {
  width: 100%;
}

.nav-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
}

.nav-icon {
  width: 44rpx;
  height: 44rpx;
}

.nav-icon-placeholder {
  width: 44rpx;
  height: 44rpx;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #fff;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  padding: 16rpx 24rpx 8rpx;
  display: block;
}

.search-bar {
  display: flex;
  align-items: center;
  margin: 16rpx 24rpx;
  padding: 0 24rpx;
  height: 72rpx;
  background: #fff;
  border-radius: 36rpx;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 16rpx;
}

.search-input {
  flex: 1;
  font-size: 26rpx;
  border: none;
}

.search-placeholder {
  color: #999;
  font-size: 26rpx;
}

.cable-list {
  padding: 0 0 24rpx;
  height: calc(100vh - 500rpx);
}

.cable-card {
  display: flex;
  align-items: center;
  margin: 0 24rpx 20rpx;
  padding: 28rpx 24rpx;
  background-color: #fff;
  border-radius: 12rpx;
  border: 1rpx solid #E8E8E8;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.cable-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>