exhibit-front/subPages/home/RAArecord.vue

<template>
  <view class="container">
    <view class="header">
    
    <!-- 大Tab：维修记录/保养记录 -->
    <view class="main-tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeMainTab === 'repair' }"
        @click="switchMainTab('repair')"
      >
        <text class="tab-text">维修记录</text>
        <view class="tab-underline" v-if="activeMainTab === 'repair'"></view>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeMainTab === 'maintain' }"
        @click="switchMainTab('maintain')"
      >
        <text class="tab-text">保养记录</text>
        <view class="tab-underline" v-if="activeMainTab === 'maintain'"></view>
      </view>
    </view>

    <!-- 筛选按钮区域 -->
      <view class="picker-buttons">
        <view class="picker-btn" :class="{ active: selectedTime }" @click="showTimePicker" >
          <text class="btn-text">{{ selectedTime || '时间' }}</text>
          <text class="arrow-icon">▼</text>
        </view>
        <view class="picker-btn" :class="{ active: selectedPerson }" @click="showPersonPicker" >
          <text class="btn-text">{{ selectedPerson || '人员' }}</text>
          <text class="arrow-icon">▼</text>
        </view>
      </view>
    </view>
    <!-- 时间选择器 -->
    <uv-picker
      ref="timePicker"
      :columns="timeColumns"
      @confirm="onTimeConfirm"
      @cancel="onTimeCancel"
      title="选择时间范围"
      confirmColor="#C70019"
    ></uv-picker>

    <!-- 人员选择器 -->
    <uv-picker
      ref="personPicker"
      :columns="personColumns"
      @confirm="onPersonConfirm"
      @cancel="onPersonCancel"
      title="选择人员"
      confirmColor="#C70019"
    ></uv-picker>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 记录item -->
      <view class="record-item" v-for="(record, index) in list" :key="index">
        <!-- 维修记录 -->
        <template v-if="activeMainTab === 'repair'">
          <!-- 基本信息 -->
          <view class="info-row">
            <text class="label">维修人</text>
            <text class="value">{{ record.repairPerson }}</text>
          </view>
          
          <view class="info-row">
            <text class="label">联系方式</text>
            <text class="value">{{ record.contactPhone }}</text>
          </view>
          
          <view class="info-row">
            <text class="label">维修日期</text>
            <text class="value">{{ record.repairDate }}</text>
          </view>
          
          <view class="info-row">
            <text class="label">处理内容</text>
          </view>
          
          <!-- 处理内容文本区域 -->
          <view class="content-text">
            <text>{{ record.processContent }}</text>
          </view>
          
          <!-- 上传图片 -->
          <view class="info-row" v-if="!record.isCollapsed">
            <text class="label">上传图片</text>
          </view>
          
          <view class="image-container" v-if="!record.isCollapsed">
            <image class="uploaded-image" :src="record.uploadImage" mode="aspectFill"></image>
          </view>
          
          <!-- 是否产生费用 -->
          <view class="info-row">
            <text class="label">是否产生费用</text>
            <text class="value red-text">{{ record.hasCost }}</text>
          </view>
        </template>
        
        <!-- 保养记录 -->
        <template v-else>
          <!-- 基本信息 -->
          <view class="info-row">
            <text class="label">保养人</text>
            <text class="value">{{ record.maintainPerson }}</text>
          </view>
          
          <view class="info-row">
            <text class="label">保养日期</text>
            <text class="value">{{ record.maintainDate }}</text>
          </view>
          
          <view class="info-row">
            <text class="label">保养前状态</text>
          </view>
          
          <!-- 保养前状态文本区域 -->
          <view class="content-text">
            <text>{{ record.beforeStatus }}</text>
          </view>
          
          <!-- 保养前图片 -->
          <view class="image-container" v-if="!record.isCollapsed">
            <image 
              class="uploaded-image" 
              v-for="(img, imgIndex) in record.beforeImages" 
              :key="imgIndex"
              :src="img" 
              mode="aspectFill"
            ></image>
          </view>
          
          <view class="info-row" v-if="!record.isCollapsed">
            <text class="label">保养后状态</text>
          </view>
          
          <!-- 保养后状态文本区域 -->
          <view class="content-text" v-if="!record.isCollapsed">
            <text>{{ record.afterStatus }}</text>
          </view>
          
          <!-- 保养后图片 -->
          <view class="image-container" v-if="!record.isCollapsed">
            <image 
              class="uploaded-image" 
              v-for="(img, imgIndex) in record.afterImages" 
              :key="'after-' + imgIndex"
              :src="img" 
              mode="aspectFill"
            ></image>
          </view>
          
          <!-- 是否产生费用 -->
          <view class="info-row" v-if="!record.isCollapsed">
            <text class="label">是否产生费用</text>
            <text class="value red-text">{{ record.hasCost }}</text>
          </view>
        </template>
        
        <!-- 查看全部按钮（收起状态时显示） -->
        <!-- <view class="view-all-btn" v-if="record.isCollapsed" @click="toggleCollapse(index)">
          <text class="view-all-text">查看全部</text>
          <text class="view-all-icon">▼</text>
        </view> -->
        
        <!-- 产生费用 -->
        <view class="info-row" v-if="!record.isCollapsed">
          <text class="label">产生费用</text>
          <text class="value red-text">{{ record.totalCost }}</text>
        </view>
        
        <!-- 费用详情表格 -->
        <view class="cost-table" v-if="!record.isCollapsed">
          <view class="table-header">
            <text class="header-cell">费用名称</text>
            <text class="header-cell">数量</text>
            <text class="header-cell">金额</text>
          </view>
          
          <view class="table-row" v-for="(item, index) in record.costDetails" :key="index">
            <text class="cell">{{ item.name }}</text>
            <text class="cell">{{ item.quantity }}</text>
            <text class="cell">{{ item.amount }}</text>
          </view>
        </view>
        
        <!-- 维修记录特有字段 -->
        <template v-if="activeMainTab === 'repair'">
          <!-- 问题是否解决 -->
          <view class="info-row" v-if="!record.isCollapsed">
            <text class="label">问题是否解决</text>
            <text class="value red-text">{{ record.isResolved }}</text>
          </view>
          
          <!-- 备注 -->
          <view class="info-row" v-if="!record.isCollapsed">
            <text class="label">备注</text>
          </view>
          
          <!-- 备注文本区域 -->
          <view class="content-text" v-if="!record.isCollapsed">
            <text>{{ record.remark }}</text>
          </view>
        </template>
        
        <!-- 保养记录特有字段 -->
        <template v-else>
          <!-- 附件信息 -->
          <view class="info-row" v-if="!record.isCollapsed">
            <text class="label">附件信息</text>
          </view>
          
          <!-- 附件信息文本区域 -->
          <view class="content-text" v-if="!record.isCollapsed">
            <text>{{ record.attachmentInfo }}</text>
          </view>
          
          <!-- 附件图片 -->
          <view class="image-container" v-if="!record.isCollapsed">
            <image class="uploaded-image" :src="record.attachmentImage" mode="aspectFill"></image>
          </view>
          
          <!-- 保养备注 -->
          <view class="info-row" v-if="!record.isCollapsed">
            <text class="label">备注</text>
          </view>
          
          <!-- 保养备注文本区域 -->
          <view class="content-text" v-if="!record.isCollapsed">
            <text>{{ record.maintainRemark }}</text>
          </view>
        </template>
        
        <!-- 收起按钮 -->
        <view class="collapse-btn" @click="toggleCollapse(index)">
          <text class="collapse-text">{{ record.isCollapsed ? '查看全部' : '收起' }}</text>
          <text class="collapse-icon">{{ record.isCollapsed ? '▼' : '▲' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeMainTab: 'repair', // 当前激活的主Tab
      activeFilter: 0, // 当前激活的筛选器
      filterOptions: [
        { name: '时间' },
        { name: '人员' }
      ],
      selectedTime: '', // 选中的时间
      selectedPerson: '', // 选中的人员
      timeColumns: [
        ['今天', '昨天', '本周', '本月', '上月', '自定义']
      ],
      personColumns: [
        ['张三', '李四', '王五', '赵六', '钱七', '孙八']
      ],
      // 维修记录数据
      repairData: [
        {
          repairPerson: '李华',
          contactPhone: '15845623255',
          repairDate: '2025-08-14',
          processContent: '文字内容文字内容文字内容',
          uploadImage: '/static/商城_商品2.png',
          hasCost: '是',
          totalCost: '300.00',
          costDetails: [
            { name: '天然粘胶剂', quantity: '2', amount: '100.00' },
            { name: '达玛树脂', quantity: '1', amount: '200.00' }
          ],
          isResolved: '是',
          remark: '文字内容',
          isCollapsed: true // 控制收起状态
        },
        {
          repairPerson: '李华',
          contactPhone: '15845623255',
          repairDate: '2025-08-14',
          processContent: '文字内容文字内容文字内容',
          uploadImage: '/static/商城_商品2.png',
          hasCost: '是',
          totalCost: '300.00',
          costDetails: [
            { name: '天然粘胶剂', quantity: '2', amount: '100.00' },
            { name: '达玛树脂', quantity: '1', amount: '200.00' }
          ],
          isResolved: '是',
          remark: '文字内容',
          isCollapsed: true // 控制收起状态
        },
      ],
      // 保养记录数据
      maintainData: [
        {
          maintainPerson: '李华',
          maintainDate: '2025-08-19',
          beforeStatus: '文字内容文字内容文字内容',
          beforeImages: ['/static/商城_商品2.png', '/static/商城_商品2.png'],
          afterStatus: '文字内容文字内容文字内容',
          afterImages: ['/static/商城_商品2.png', '/static/商城_商品2.png'],
          hasCost: '是',
          totalCost: '300.00',
          costDetails: [
            { name: '天然粘胶剂', quantity: '2', amount: '100.00' },
            { name: '达玛树脂', quantity: '1', amount: '200.00' }
          ],
          attachmentInfo: '附件信息',
          maintainRemark: '文字内容',
          attachmentImage: '/static/商城_商品2.png',
          isCollapsed: true // 控制收起状态
        },
        {
          maintainPerson: '李华',
          maintainDate: '2025-08-19',
          beforeStatus: '文字内容文字内容文字内容',
          beforeImages: ['/static/商城_商品2.png', '/static/商城_商品2.png'],
          afterStatus: '文字内容文字内容文字内容',
          afterImages: ['/static/商城_商品2.png', '/static/商城_商品2.png'],
          hasCost: '是',
          totalCost: '300.00',
          costDetails: [
            { name: '天然粘胶剂', quantity: '2', amount: '100.00' },
            { name: '达玛树脂', quantity: '1', amount: '200.00' }
          ],
          attachmentInfo: '附件信息',
          maintainRemark: '文字内容',
          attachmentImage: '/static/商城_商品2.png',
          isCollapsed: true // 控制收起状态
        }
      ]
    }
  },
  computed: {
    list() {
      return this.activeMainTab === 'repair' ? this.repairData : this.maintainData
    },
    contentText() {
      const tabText = this.activeMainTab === 'repair' ? '维修' : '保养'
      const filterText = this.filterOptions[this.activeFilter].name
      let selectedText = ''
      
      if (this.activeFilter === 0 && this.selectedTime) {
        selectedText = ` - ${this.selectedTime}`
      } else if (this.activeFilter === 1 && this.selectedPerson) {
        selectedText = ` - ${this.selectedPerson}`
      }
      
      return `${tabText}记录 - 按${filterText}筛选${selectedText}`
    }
  },
  methods: {
    switchMainTab(tab) {
      this.activeMainTab = tab
    },
    onFilterChange(index) {
      this.activeFilter = index
      // 切换筛选器时清空选择
      this.selectedTime = ''
      this.selectedPerson = ''
    },
    showTimePicker() {
      this.$refs.timePicker.open()
    },
    showPersonPicker() {
      this.$refs.personPicker.open()
    },
    onTimeConfirm(value) {
      this.selectedTime = value.value[0]
      console.log('选择的时间:', value)
    },
    onTimeCancel() {
      console.log('取消选择时间')
    },
    onPersonConfirm(value) {
      this.selectedPerson = value.value[0]
      console.log('选择的人员:', value)
    },
    onPersonCancel() {
      console.log('取消选择人员')
    },
    toggleCollapse(index) {
      if (this.activeMainTab === 'repair') {
        this.repairData[index].isCollapsed = !this.repairData[index].isCollapsed
        console.log('收起/展开费用详情', this.repairData[index].isCollapsed)
      } else {
        this.maintainData[index].isCollapsed = !this.maintainData[index].isCollapsed
        console.log('收起/展开费用详情', this.maintainData[index].isCollapsed)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  
  background-color: #f5f5f5;
  min-height: 100vh;
}
.header{
  padding: 16rpx 39rpx 23rpx;
  background: #fff;
}
.main-tabs {
  display: flex;
  margin-bottom: 48rpx;
  // border-bottom: 2rpx solid #f0f0f0;
  
  .tab-item {
    flex: 1;
    position: relative;
    padding: 13rpx 0;
    text-align: center;
    
    .tab-text {
      font-size: 28rpx;
      color: $secondary-text-color;
      font-weight: 400;
      transition: all 0.3s ease;
    }
    
    &.active {
      .tab-text {
        color: $primary-color;
        // font-weight: 600;
      }
    }
    
    .tab-underline {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 4rpx;
      background-color: $primary-color;
      border-radius: 2rpx;
    }
  }
}

.filter-section {
  margin-bottom: 32rpx;
}

.picker-buttons {
  // margin-bottom: 32rpx;
  display: flex;
  gap: 55rpx;
  
  .picker-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    background-color: transparent;
    color: $primary-text-color;
    &.active {
      color: $primary-color;
    }
    .btn-text {
      font-size: 28rpx;
      // color: $primary-color;
      margin-right: 10rpx;
    }
    
    .arrow-icon {
      font-size: 20rpx;
      // color: $primary-color;
    }
  }
}

.content-area {
  padding: 22rpx 29rpx;
  
  .record-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 29rpx;
    margin-bottom: 37rpx;
    border-radius: 15rpx;
    box-shadow: 0 3rpx 6rpx 0rpx rgba(0,0,0,0.16);   
    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 38rpx;
      
      .label {
        font-size: 28rpx;
        color: $primary-text-color;
        // font-weight: 400;
        flex-shrink: 0;
      }
      
      .value {
        font-size: 28rpx;
        color: $primary-text-color;
        text-align: right;
        flex: 1;
        margin-left: 32rpx;
        
        &.red-text {
          color: $primary-color;
        }
      }
    }
    
    .content-text {
      background: #f5f5f5;
      border-radius: 15rpx;
      padding: 24rpx;
      margin-bottom: 24rpx;
      min-height: 120rpx;
      text {
        font-size: 28rpx;
        color: $primary-text-color;
        line-height: 1.5;
      }
    }
    
    .image-container {
      margin-bottom: 29rpx;
      
      .uploaded-image {
        width: 157rpx;
        height: 157rpx;
        // border-radius: 8rpx;
      }
    }
    
    .cost-table {
      margin-bottom: 24rpx;
      
      .table-header {
        display: flex;
        // background: #f8f8f8;
        // border-radius: 8rpx 8rpx 0 0;
        padding: 30rpx 0;
        justify-content: space-between;
        .header-cell {
          flex: 1;
          font-size: 30rpx;
          color: $secondary-text-color;
          &:nth-child(1) {
            text-align: left;
          }
          
          &:nth-child(2) {
            text-align: center;
          }
          
          &:nth-child(3) {
            text-align: right;
          }
          // font-weight: 500;
        }
      }
      
      .table-row {
        display: flex;
        border-bottom: 1rpx solid #f0f0f0;
        padding: 30rpx 0;
        // justify-content: space-between;
        
        
        .cell {
          flex: 1;
          font-size: 30rpx;
          color: $primary-text-color;
          
          &:nth-child(1) {
            text-align: left;
          }
          
          &:nth-child(2) {
            text-align: center;
          }
          
          &:nth-child(3) {
            text-align: right;
          }
        }
        // .cell:first-child {
        //   text-align: center;
        // }
      }
    }
    
    .view-all-btn {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 16rpx 0;
       margin-top: 16rpx;
       
       .view-all-text {
         font-size: 26rpx;
         color: $primary-color;
         margin-right: 8rpx;
       }
       
       .view-all-icon {
         font-size: 20rpx;
         color: $primary-color;
       }
     }
     
     .collapse-btn {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 16rpx 0;
       margin-top: 16rpx;
       
       .collapse-text {
         font-size: 26rpx;
         color: $primary-color;
         margin-right: 8rpx;
       }
       
       .collapse-icon {
         font-size: 20rpx;
         color: $primary-color;
       }
     }
  }
}
</style>