zhjwxt/uniapp/components/fitness-record-card/fitness-record-card.vue

<!--体测记录卡片组件-->
<template>
  <view class="fitness-record-card" @click="handleCardClick">
    <view class="record-header">
      <view class="record-date">{{ record.test_date }}</view>
      <view class="record-status">已完成</view>
      <view class="edit-btn" @click.stop="handleEditClick">编辑</view>
    </view>
    
    <view class="record-data">
      <view class="data-item">
        <view class="data-label">身高</view>
        <view class="data-value">{{ record.height }}cm</view>
      </view>
      <view class="data-item">
        <view class="data-label">体重</view>
        <view class="data-value">{{ record.weight }}kg</view>
      </view>
    </view>
    
    <view class="record-files" v-if="record.pdf_files && record.pdf_files.length > 0">
      <view class="files-title">体测报告</view>
      <view class="file-list">
        <view 
          class="file-item" 
          v-for="pdf in record.pdf_files" 
          :key="pdf.id"
          @click.stop="handleFileClick(pdf)"
        >
          <view class="file-icon">📄</view>
          <view class="file-info">
            <view class="file-name">{{ pdf.name }}</view>
            <view class="file-size">{{ $util.formatFileSize(pdf.size) }}</view>
          </view>
          <view class="file-action">
            <text class="action-text">查看</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FitnessRecordCard',
  props: {
    record: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 点击卡片编辑体测记录
    handleCardClick() {
      this.handleEditClick()
    },
    
    // 点击编辑按钮
    handleEditClick() {
      this.$emit('edit', this.record)
    },
    
    async handleFileClick(file) {
      try {
        // 发起PDF预览请求
        const response = await this.$api.get('/fitness/record/pdf/preview', {
          file_id: file.id,
          record_id: this.record.id
        })
        
        if (response.code === 1 && response.data) {
          // 在微信小程序中预览PDF
          uni.downloadFile({
            url: response.data.file_url,
            success: (res) => {
              if (res.statusCode === 200) {
                uni.openDocument({
                  filePath: res.tempFilePath,
                  fileType: 'pdf',
                  success: () => {
                    console.log('PDF预览成功')
                  },
                  fail: (err) => {
                    console.error('PDF预览失败:', err)
                    uni.showToast({
                      title: 'PDF预览失败',
                      icon: 'none'
                    })
                  }
                })
              }
            },
            fail: (err) => {
              console.error('PDF下载失败:', err)
              uni.showToast({
                title: 'PDF下载失败',
                icon: 'none'
              })
            }
          })
        } else {
          uni.showToast({
            title: response.msg || 'PDF预览失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('PDF预览异常:', error)
        uni.showToast({
          title: 'PDF预览异常',
          icon: 'none'
        })
      }
      
      // 同时触发事件供父组件处理
      this.$emit('file-click', { file, record: this.record })
    }
  }
}
</script>

<style lang="less" scoped>
.fitness-record-card {
  background-color: #1a1a1a;
  border-radius: 15rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  border: 1rpx solid #333;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    border-color: rgba(41, 211, 180, 0.3);
    background-color: #1f1f1f;
  }
  
  &:active {
    background-color: #252525;
  }
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .record-date {
    color: white;
    font-size: 28rpx;
    font-weight: bold;
  }
  
  .record-status {
    color: #29d3b4;
    font-size: 22rpx;
    background-color: rgba(41, 211, 180, 0.2);
    padding: 6rpx 15rpx;
    border-radius: 15rpx;
  }
  
  .edit-btn {
    color: #29d3b4;
    font-size: 22rpx;
    background-color: rgba(41, 211, 180, 0.1);
    padding: 6rpx 15rpx;
    border-radius: 15rpx;
    border: 1px solid rgba(41, 211, 180, 0.3);
    
    &:active {
      background-color: rgba(41, 211, 180, 0.2);
    }
  }
}

.record-data {
  display: flex;
  gap: 40rpx;
  margin-bottom: 25rpx;
  
  .data-item {
    flex: 1;
    text-align: center;
    
    .data-label {
      color: #999;
      font-size: 22rpx;
      margin-bottom: 8rpx;
    }
    
    .data-value {
      color: white;
      font-size: 32rpx;
      font-weight: bold;
    }
  }
}

.record-files {
  .files-title {
    color: white;
    font-size: 24rpx;
    margin-bottom: 15rpx;
    font-weight: bold;
  }
  
  .file-list {
    .file-item {
      display: flex;
      align-items: center;
      padding: 15rpx;
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 10rpx;
      margin-bottom: 10rpx;
      
      .file-icon {
        font-size: 32rpx;
        margin-right: 15rpx;
      }
      
      .file-info {
        flex: 1;
        
        .file-name {
          color: white;
          font-size: 24rpx;
          margin-bottom: 5rpx;
        }
        
        .file-size {
          color: #999;
          font-size: 20rpx;
        }
      }
      
      .file-action {
        padding: 8rpx 15rpx;
        background-color: #29d3b4;
        border-radius: 15rpx;
        
        .action-text {
          color: white;
          font-size: 20rpx;
        }
      }
    }
  }
}
</style>