exhibit-front/pages/index/home.vue

<template>
  <view class="home-container">
    <!-- 顶部横幅图片 -->
    <view class="banner-section">
      <image class="banner-image" src="@/static/首页背景图.png" mode="aspectFill"></image>
    </view>
    
    <!-- 搜索区域 -->
    <SearchInput 
      v-model="searchValue" 
      placeholder="请输入展品名称" 
      search-button-text="搜索"
      @search="handleSearch"
    />
    
    <!-- 展品分类 -->
    <view class="category-section" @click="openPicker">
      <view class="category-label">展品分类</view>
      <uv-icon name="arrow-down-fill" size="14" color="#C70019"></uv-icon>
      <uv-picker 
        ref="picker"

        v-model="categoryShow" 
        :columns="columns"
        mode="selector"
        @confirm="onCategoryConfirm"
        confirmColor="#C70019"
      >
      </uv-picker>
    </view>
    
    <!-- 展品列表 -->
    <view class="exhibit-list">
      <view class="exhibit-item" v-for="(item, index) in exhibitList" :key="index" @click="handleItemClick(item)">
        <view class="item-header">
          <text class="item-id">{{ item.id }}</text>
          <img src="@/static/copy.png" alt="我是复制黏贴" class="item-icon" @click="copyId(item.id)">
        </view>
        <view class="item-border" />
        <view class="item-content">
          <view class="content-row">
            <text class="name">{{ item.name }}</text>
          </view>
          <view class="content-row">
            <text class="label">展品编号</text>
            <text class="value">{{ item.code }}</text>
          </view>
          <view class="content-row">
            <text class="label">展品编号</text>
            <text class="value">{{ item.code }}</text>
          </view>
          <view class="content-row">
            <text class="label">展品位置</text>
            <text class="value">{{ item.location }}</text>
          </view>
          <view class="content-row">
            <text class="label">展品类型</text>
            <text class="value">{{ item.type }}</text>
          </view>
          <view class="content-row">
            <text class="label">下次保养日期</text>
            <text class="value">{{ item.maintenanceDate }}</text>
            <view v-if="item.maintenanceProject" class="project">
              {{ item.maintenanceProject }}
            </view>
          </view>
        </view>
        
        <view class="item-actions">
          <uv-button 
            size="small" 
            color="#c70019"
            shape="circle"
            text="申请报修"
            @click.stop="handleRepair(item)"
          ></uv-button>
          <uv-button 
            
            size="small" 
            text="保养提交" 
            color="#c70019"
            shape="circle"
            plain
            @click.stop="handleMaintenance(item)"
          ></uv-button>
          <uv-button 
            color="#c70019"
            shape="circle"
            size="small" 
            text="维修/保养记录"
            plain
            @click.stop="handleRecord(item)"
          ></uv-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import SearchInput from '@/pages/components/SearchInput.vue'

export default {
  components: {
    SearchInput
  },
  data() {
    return {
      searchValue: '',
      categoryShow: false,
      selectedCategory: '',
      columns: [
        [
          '全部',
          '文字内容',
          '互动设备',
          '展示设备'
        ]
      ],
      exhibitList: [
        {
          id: '3451356565',
          name: '展品名称内容',
          code: '56559685623452',
          location: '2楼互动区液体力学',
          type: '文字内容',
          maintenanceDate: '2025-08-19'
        },
        {
          id: '3451356566',
          name: '展品名称内容',
          code: '56559685623453',
          location: '1楼展示区机械原理',
          type: '互动设备',
          maintenanceDate: '2025-09-15',
          maintenanceProject: '3天后维保',
        },
        {
          id: '3451356567',
          name: '展品名称内容',
          code: '56559685623454',
          location: '3楼体验区声学实验',
          type: '展示设备',
          maintenanceDate: '2025-07-22'
        }
      ]
    }
  },
  methods: {
     handleSearch() {
       console.log('搜索:', this.searchValue)
       // TODO: 实现搜索逻辑
     },
     openPicker() {
       this.$refs.picker.open()
     },
     onCategoryConfirm(e) {
       this.selectedCategory = e.label
       console.log('选择分类:', e)
       // TODO: 根据分类筛选展品
     },
    copyId(id) {
      uni.setClipboardData({
        data: id,
        success: () => {
          uni.showToast({
            title: '已复制到剪贴板',
            icon: 'success'
          })
        }
      })
    },
    handleItemClick(item) {
      console.log('点击展品:', item)
      // TODO: 跳转到展品详情页
    },
    handleRepair(item) {
      uni.navigateTo({
        url: '/subPages/home/repairSubmit?id=' + item.id
      })
      // TODO: 跳转到报修页面
    },
    handleMaintenance(item) {
      console.log('保养提交:', item)
      uni.navigateTo({
        url: '/subPages/home/maintainanceSubmit?id=' + item.id
      })
      // TODO: 跳转到保养提交页面
    },
    handleRecord(item) {
      console.log('查看记录:', item)
      uni.navigateTo({
        url: '/subPages/home/RAArecord?id=' + item.id
      })
      // TODO: 跳转到维修保养记录页面
    }
  }
}
</script>

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

.banner-section {
  width: 100%;
  height: 500rpx;
  
  .banner-image {
    width: 100%;
    height: 100%;
  }
}



.category-section {
  padding: 20rpx 48rpx;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 9rpx;
  .category-label {
    font-size: 28rpx;
    color: $primary-color;
  }
  
  .category-picker {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
    background-color: #fafafa;
    
    .category-text {
      font-size: 28rpx;
      color: #666;
      margin-right: 10rpx;
    }
  }
}

.exhibit-list {
  padding: 20rpx 30rpx;
  
  .exhibit-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx 30rpx 45rpx;
    margin-bottom: 20rpx;
    border-radius: 15rpx;
    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
    .item-header {
      display: flex;
      align-items: center;
      justify-content: start;
      gap: 20rpx;
      padding-bottom: 14rpx;
      
      
      .item-id {
        font-size: 28rpx;
        color: $secondary-text-color;
      }
      .item-icon {
        width: 25.5rpx;
        height: 25.5rpx;
      }
    }
    .item-border {
      border-bottom: 1rpx solid $secondary-text-color;
      opacity: 0.22;
    }
    .item-content {
      margin-top: 26.5rpx;
      margin-bottom: 57rpx;
      
      .content-row {
        display: flex;
        align-items: center;
        margin-bottom: 25rpx;
        
        .name{
          font-size: 30rpx;
          color: $primary-text-color;
          font-weight: bold;
        }

        &:last-child {
          margin-bottom: 0;
        }
        &:first-child {
          margin-bottom: 37rpx;
        }
        
        .label {
          font-size: 22rpx;
          color: $secondary-text-color;
          // width: 200rpx;
          margin-right: 19rpx;
          flex-shrink: 0;
        }
        
        .value {
          font-size: 22rpx;
          color: $primary-text-color;
          margin-right: 40rpx;
        }
        .project {
          // flex: 1;
          background: $primary-color;
          // border: 1px solid #707070;
          border-radius: 11rpx;
          color: #fff;
          font-size: 22rpx;
          padding: 6rpx 12rpx;
        }
      }
    }
    
    .item-actions {
      margin-left: -10rpx;
      display: flex;
      gap: 55rpx;
      flex-wrap: wrap;
    }
  }
}
</style>