englishread-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: urgency }">{{ urgency.label || '紧急状态' }}</text>
        <uv-icon name="arrow-down-fill" size="14" :color="urgency ? '#C70019' : '#000'"></uv-icon>
      </view>
      
      <!-- 维修状态选择器 -->
      <view class="selector-item" @click="openStatusPicker">
        <text class="selector-label" :class="{ active: status }">{{ status.label || '维修状态' }}</text>
        <uv-icon name="arrow-down-fill" size="14" :color="status ? '#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 @click.stop="copyID(item.id)">
            <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.showpiece.position }}</text>
            </view>
          </view>
          <view class="detail-row">
            <view class="detail-item">
              <text class="detail-label">报修人</text>
              <text class="detail-value">{{ item.malfunctionName_dictText }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">报修日期</text>
              <text class="detail-value">{{ item.malfunctionDate }}</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-empty v-if="!list.length"  icon="/static/暂无搜索结果.png" />
    
    <!-- 紧急程度选择器 -->
    <uv-picker 
      ref="urgencyPicker"
      v-model="urgencyShow" 
      :columns="urgencyColumns"
      keyName="label"
      mode="selector"
      @confirm="onUrgencyConfirm"
      confirmColor="#C70019"
    ></uv-picker>
    
    <!-- 维修状态选择器 -->
    <uv-picker 
      ref="statusPicker"
      v-model="statusShow" 
      :columns="statusColumns"
      keyName="label"
      mode="selector"
      @confirm="onStatusConfirm"
      confirmColor="#C70019"
    ></uv-picker>
  </view>
</template>

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

export default {
  mixins: [ListMixin],
  data() {
    return {
      urgency: null,
      status: null,
      urgencyShow: false,
      statusShow: false,
      mixinListApi: 'exhibit.queryMalfunctionList',
      urgencyColumns: [
        [
          {
            label: '全部',
            value: ''
          },
          {
            label: '一般',
            value: '0'
          },
          {
            label: '紧急',
            value: '1'
          },
        ]
      ],
      statusColumns: [
        [
          {
            label: '全部',
            value: ''
          },
          {
            label: '故障中',
            value: '0'
          },
          {
            label: '维修中',
            value: '1'
          },
          {
            label: '已解决',
            value: '2'
          }
        ]
      ],
    }
  },
  methods: {
    copyID(id) {
      uni.setClipboardData({
        data: id,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          })
        }
      })
    },
    mixinSetParams(){
      return {
        urgency: this.urgency?.value || '',
        status: this.status?.value || ''
      }
    },
    navigateToDetail(item) {
      uni.navigateTo({
        url: '/subPages/repair/maintainSubmit?id=' + item.id + '&showpieceId=' + item.showpieceId
      })
    },
    openUrgencyPicker() {
      this.$refs.urgencyPicker.open()
    },
    openStatusPicker() {
      this.$refs.statusPicker.open()
    },
    onUrgencyConfirm(e) {
      this.urgency = e.value[0]
      console.log('选择紧急程度:', e)
      this.initPage()
      this.getList(true)
      // TODO: 根据紧急程度筛选
    },
    onStatusConfirm(e) {
      this.status = e.value[0]
      console.log('选择维修状态:', e)
      this.initPage()
      this.getList(true)
      // 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>