health-front/pages_order/checkup/checkupReport/reportDetectView.vue

<template>
  <view class="card card-detect">
    <view class="flex card-header">
      <view class="title">检测数据</view>
    </view>
    <view class="section">
      <view class="section-header">
        <view class="title">慢性食物过敏检测</view>
        <view class="desc">Chronic food allergy testing</view>
      </view>
      <view class="section-content index">
        <view 
          class="index-item"
          v-for="item in data.chronicFoodAllergyList"
          :key="item.id"
        >
          <view class="flex top">
            <view class="label">{{ item.label }}</view>
            <view class="tag is-error" v-if="item.status === 0">{{ item.label }}</view>
          </view>
          <view class="flex main">
            <text>当前：</text><text class="value">{{ item.value }}</text>
          </view>
          <view class="bottom desc">{{ `* 标准值：${item.standrad}` }}</view>
        </view>
      </view>
    </view>
    <view class="section">
      <view class="section-header">
        <view class="title">肠道菌群检测</view>
        <view class="desc">Gut microbiome testing</view>
      </view>
      <view class="section-content index">
        <view 
          class="index-item"
          v-for="item in data.gutMicrobiomeList"
          :key="item.id"
        >
          <view class="flex top">
            <view class="label">{{ item.label }}</view>
            <view class="tag is-error" v-if="item.status === 0">{{ item.label }}</view>
          </view>
          <view class="flex main">
            <text>当前：</text><text class="value">{{ item.value }}</text>
          </view>
          <view class="bottom desc">{{ `* 标准值：${item.standrad}` }}</view>
        </view>
      </view>
    </view>
    <view class="section">
      <view class="section-header">
        <view class="title">肠道菌群检测</view>
        <view class="desc">Gut microbiome testing</view>
      </view>
      <view class="section-content score">
        <view 
          class="score-item"
          v-for="(item, index) in data.scoreList"
          :key="item.id"
        >
          <view>
            <progressLine :progress="item.value" :activeColor="getColor(index)"></progressLine>
          </view>
          <view class="flex info">
            <view class="label">{{ `${item.label}：` }}</view>
            <view class="value">{{ item.value }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import progressLine from './progressLine.vue';

  const COLORS = [
    '#43B741', 
    '#43B741',
    '#ECB501',
    '#ECB501',
    '#EB7F09',
    '#EB7F09',
    '#009CEF',
    '#009CEF',
    '#7451DE',
    '#7451DE',
  ]

  export default {
    components: {
      progressLine,
    },
    props: {
      data: {
        type: Object,
        default() {
          return {
            chronicFoodAllergyList: [],
            gutMicrobiomeList: [],
            scoreList: [],
          }
        }
      },
    },
    data() {
      return {

      }
    },
    onLoad() {
      console.log('onLoad', this.data)
    },
    methods: {
      getColor(index) {
        return COLORS[index % 10]
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import './style.scss';

  .score {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32rpx;
    row-gap: 36rpx;

    &-item {

      .info {
        margin-top: 18rpx;
        justify-content: flex-start;
        column-gap: 12rpx;

        font-family: PingFang SC;
        line-height: 1.4;

        .label {
          font-weight: 400;
          font-size: 24rpx;
        }

        .value {
          font-weight: 500;
          font-size: 28rpx;
        }
      }
    }
  }
</style>