englishread-front/pages/index/home.vue

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

      <uv-picker ref="picker" confirmColor="#C70019" :columns="[columns[0], columns[1][0]]" keyName="label" @confirm="onCategoryConfirm" @change="onCategoryChange"></uv-picker>
    </view>
    
    <!-- 展品列表 -->
    <view class="exhibit-list">
      <view class="exhibit-item" v-for="(item, index) in list" :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.title }}</text>
          </view>

          <view class="content-row">
            <text class="label">展品编号</text>
            <text class="value">{{ item.id }}</text>
          </view>
          <view class="content-row">
            <text class="label">展品位置</text>
            <text class="value">{{ item.position }}</text>
          </view>
          <view class="content-row">
            <text class="label">展品类型</text>
            <text class="value">{{ item.categoryId_dictText }}</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>

    <!-- 空状态 -->
    <uv-empty v-if="!list.length"  icon="/static/暂无搜索结果.png" />

  </view>
</template>

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

export default {
  mixins: [ListMixin],
  components: {
    SearchInput
  },
  data() {
    return {
      mixinListApi: 'exhibit.queryShowpieceList',
      searchValue: '',
      selectedCategory: {
        label: '',
        value: ''
      },
      // 轮播图数据
      bannerList: [],
    }
  },
  computed: {
    // 从状态管理工具中拿分类大数组
    columns() {
      return this.$store.state.categoryList
    }
  },
  methods: {
     handleSearch() {
        console.log('搜索的数值为', this.searchValue);
        this.initPage()
        this.getList(true)
     },
     mixinSetParams() {
      const params = { }
      if (this.selectedCategory.value) {
        params.categoryId = this.selectedCategory.value
      }
      return {
        title: this.searchValue,
        ...params
      }
     },
     openPicker() {
       this.$refs.picker.open()
       
     },
     onCategoryConfirm(e) {
       this.selectedCategory = e.value[1]
       console.log('选择分类:', e)
       this.initPage()
       this.getList(true)
       // TODO: 根据分类筛选展品
     },
     onCategoryChange(e) {
        const { columnIndex , index} = e
				if (columnIndex === 0) {
					this.$refs.picker.setColumnValues(1, this.columns[1][index])
				}
     },
    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
      })
    },
    async getBannerList() {
      const bannerRes = await this.$api.config.queryBannerList()
      if (bannerRes.code === 200) {
        this.bannerList = bannerRes.result.records.map(item => item.image)
      }
    },
  },
  onLoad(){
    this.getBannerList()
  },
}
</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>