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

<template>
  <view class="card">
    <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';

  .card {
    padding: 32rpx 24rpx;
    background-image: linear-gradient(#F2EDFF, #FCFEFE);
    border: 8rpx solid #F9F7FF;
    border-radius: 64rpx;

    &-header {
      .title {
        padding: 6rpx 14rpx;
        display: inline-flex;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 1.5;
        color: #252545;
        border: 2rpx solid #252545;
        border-radius: 30rpx;
      }
    }

    .section {
      margin-top: 40rpx;

      &-header {
        font-family: PingFang SC;
        line-height: 1.4;
        color: #252545;

        .title {
          font-weight: 600;
          font-size: 32rpx;
        }

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

      &-content {
        margin-top: 32rpx;
      }
    }
  }

  .index {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32rpx;

    &-item {
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 1.4;

      .top {
        justify-content: space-between;
      }

      .main {
        justify-content: flex-start;
        column-gap: 12rpx;

        font-size: 24rpx;
        color: #8B8B8B;
      }

      .label {
        font-size: 30rpx;
        color: #000000;
      }

      .value {
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
      }

      .desc {
        font-size: 22rpx;
        line-height: 1.6;
        color: #989898;
      }
    }
  }

  .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>