exhibit-front/pages/index/maintain.vue

<template>
  <view class="maintain-container">
    <!-- 顶部选择器区域 -->
    <view class="selector-section">
      <!-- 紧急程度选择器 -->
      <view class="selector-item" @click="openUrgencyPicker">
        <text class="selector-label" :class="{ active: selectedUrgency !== '紧急程度' }">{{ selectedUrgency }}</text>
        <uv-icon name="arrow-down-fill" size="14" :color="selectedUrgency !== '紧急程度' ? '#C70019' : '#000'"></uv-icon>
      </view>
      
      <!-- 维修状态选择器 -->
      <view class="selector-item" @click="openStatusPicker">
        <text class="selector-label" :class="{ active: selectedStatus !== '维修状态' }">{{ selectedStatus }}</text>
        <uv-icon name="arrow-down-fill" size="14" :color="selectedStatus !== '维修状态' ? '#C70019' : '#000'"></uv-icon>
      </view>
    </view>
    
    <!-- 产品列表 -->
    <view class="product-list">
      <view class="product-item" v-for="(item, index) in list" :key="index" @click="navigateToDetail(item)">
        <!-- 产品ID和状态标签 -->
        <view class="item-header">
          <view >
            <text class="item-id">{{ item.id }}</text>
            <img src="@/static/copy.png" alt="复制图标" class="item-icon">
          </view>
          <view class="status-tag" :class="[getStatusClass(item.status)]">
            <text class="status-text">{{ item.status_dictText }}</text>
          </view>
        </view>
        
        <!-- 中间那条下划线 -->
        <view class="item-border" />

        <!-- 产品标题 -->
        <view class="item-title">
          <text class="title-text">{{ item.showpieceId_dictText }}</text>
        </view>
        
        <!-- 产品详情 -->
        <view class="item-details">
          <view class="detail-row">
            <view class="detail-item">
              <text class="detail-label">展品编号</text>
              <text class="detail-value">{{ item.showpieceId }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">紧急程度</text>
              <text class="detail-value">{{ item.urgency_dictText }}</text>
            </view>
          </view>
          <view class="detail-row">
            <view class="detail-item">
              <text class="detail-label">展品位置</text>
              <text class="detail-value">{{ item.position }}</text>
            </view>
          </view>
          <view class="detail-row">
            <view class="detail-item">
              <text class="detail-label">报修人</text>
              <text class="detail-value">{{ item.reporterName }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">报修日期</text>
              <text class="detail-value">{{ item.firstDate }}</text>
            </view>
          </view>
          <view class="detail-row">
            <view class="detail-item full-width">
              <text class="detail-label">故障描述</text>
              <text class="detail-value">{{ item.malfunctionDesc }}</text>
            </view>
          </view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="item-actions">
          <button class="item-actions-button">立即维修</button>
        </view>
      </view>
    </view>
    
    <!-- 紧急程度选择器 -->
    <uv-picker 
      ref="urgencyPicker"
      v-model="urgencyShow" 
      :columns="urgencyColumns"
      mode="selector"
      @confirm="onUrgencyConfirm"
      confirmColor="#C70019"
    ></uv-picker>
    
    <!-- 维修状态选择器 -->
    <uv-picker 
      ref="statusPicker"
      v-model="statusShow" 
      :columns="statusColumns"
      mode="selector"
      @confirm="onStatusConfirm"
      confirmColor="#C70019"
    ></uv-picker>
  </view>
</template>

<script>
import ListMixin from '@/mixins/list'

export default {
  mixins: [ListMixin],
  data() {
    return {
      selectedUrgency: '紧急程度',
      selectedStatus: '维修状态',
      urgencyShow: false,
      statusShow: false,
      mixinListApi: 'exhibit.queryMalfunctionList',
      urgencyColumns: [
        [

          '一般',
          '紧急',
          '非常紧急'
        ]
      ],
      statusColumns: [
        [

          '维护中',
          '故障中', 
          '已解决'
        ]
      ],
    }
  },
  methods: {
    navigateToDetail(item) {
      uni.navigateTo({
        url: '/subPages/repair/maintainSubmit?id=' + item.id
      })
    },
    openUrgencyPicker() {
      this.$refs.urgencyPicker.open()
    },
    openStatusPicker() {
      this.$refs.statusPicker.open()
    },
    onUrgencyConfirm(e) {
      this.selectedUrgency = e.value[0]
      console.log('选择紧急程度:', e)
      // TODO: 根据紧急程度筛选
    },
    onStatusConfirm(e) {
      this.selectedStatus = e.value[0]
      console.log('选择维修状态:', e)
      // TODO: 根据状态筛选
    },
    getStatusClass(status) {
      switch(status) {
        case '维修中':
          return 'status-repairing'
        case '故障中':
          return 'status-fault'
        case '已解决':
          return 'status-resolved'
        default:
          return ''
      }
    },
    handleRepair(item) {
      console.log('立即维修:', item)
      // TODO: 处理维修逻辑
    }
  }
}
</script>

<style lang="scss" scoped>
.maintain-container {
  background-color: #fff;
  min-height: 100vh;
}

.selector-section {
  display: flex;
  padding: 34rpx 41rpx;
  // background-color: #fff;
  gap: 58rpx;
  
  .selector-item {
    display: flex;
    align-items: center;
    gap: 9rpx;
    cursor: pointer;
    
    .selector-label {
      font-size: 28rpx;
      color: #000;
      
      &.active {
        color: $primary-color;
      }
    }
  }
}

.product-list {
  padding: 20rpx 32rpx;
  
  .product-item {
    background-color: #fff;
    border-radius: 15rpx;
    padding: 30rpx 30rpx 20rpx;
    margin-bottom: 24rpx;
    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
    
    .item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 13.5rpx;

        .item-icon {
          width: 25.5rpx;
          height: 25.5rpx;
        }
  
        .item-id {
          font-size: 28rpx;
          margin-right: 20rpx;
          color: $secondary-text-color;
        }

      
      .status-tag {
        border-radius: 15rpx;
        width: 135rpx;
        height: 57rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .status-text {
          font-size: 28rpx;
        }
        
        &.status-repairing {
          background-color: #ffffca;
          color: #CE7C62;
        }
        
        &.status-fault {
          background-color: #fccec7;
          color: #b82222;
        }
        
        &.status-resolved {
          background-color: #cfffca;
          color: #528828;
        }
      }
    }
    
    .item-border {
      border-bottom: 1rpx solid $secondary-text-color;
      // background-color: #E5E5E5;
      margin-bottom: 26.5rpx;
      opacity: 0.22;
    }

    .item-title {
      margin-bottom: 37rpx;
      
      .title-text {
        font-size: 30rpx;
        color: $primary-text-color;
        font-weight: bold;
      }
    }
    
    .item-details {
      margin-bottom: 52rpx;
      
      .detail-row {
        display: flex;
        margin-bottom: 25rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .detail-item {
          flex: 1;
          display: flex;
          align-items: flex-start;
          margin-right: 35rpx;
          
          &.full-width {
            flex: 1 1 100%;
            margin-right: 0;
          }
          
          &:last-child {
            margin-right: 0;
            margin-bottom: 0;
          }
          
          .detail-label {
            font-size: 22rpx;
            color: $secondary-text-color;
            margin-right: 19rpx;
            flex-shrink: 0;
            min-width: 95rpx;
          }
          
          .detail-value {
            font-size: 22rpx;
            color: $primary-text-color;
            flex: 1;
          }
        }
      }
    }
    
    .item-actions {
      display: flex;
      justify-content: center;
      .item-actions-button {
        width: 378rpx;
        height: 78rpx;
        background-color: $primary-color;
        color: #fff;
        font-size: 28rpx;
        border-radius: 39rpx;
      }
    }
  }
}
</style>