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

<template>
  <view class="page__view">
		<navbar title="体检报告" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />

    <view class="main" v-if="detail">
      <view class="section">
        <reportSummaryView :data="detail"></reportSummaryView>
      </view>

      <view class="section">
        <reportMainIndexView :list="detail.mainIndexList"></reportMainIndexView>
      </view>

      <view class="section">
        <reportAbnormalView :list="detail.abnormalList"></reportAbnormalView>
      </view>

      <view class="section">
        <reportCommonView :data="detail"></reportCommonView>
      </view>
    </view>

    <view class="bottom">
      <button class="flex btn" @click="jumpToNutritionProgram">查看营养方案</button>
    </view>
  </view>
</template>

<script>
  import reportSummaryView from './reportSummaryView.vue'
  import reportMainIndexView from './reportMainIndexView.vue'
  import reportAbnormalView from './reportAbnormalView.vue'
  import reportCommonView from './reportCommonView.vue'

  export default {
		components: {
      reportSummaryView,
      reportMainIndexView,
      reportAbnormalView,
      reportCommonView,
    },
    data() {
      return {
        id: null,
        detail: null,
      }
    },
    onLoad(arg) {
      this.id = arg.id

      this.getData()
    },
    methods: {
      getData() {
        this.detail = {
          score: 77,
          BMI: 20.3,
          BMIchange: -0.2,
          BMItag: '正常',
          height: 164,
          weight: 46,
          mainIndexList: [
            {
              id: '001',
              label: '心率',
              value: '75',
              unit: 'bpm（次/分钟）',
              standrad: '60-100bpm',
              status: 1,
            },
            {
              id: '002',
              label: '血氧',
              value: '99',
              unit: '%',
              standrad: '≥94%',
              status: 1,
            },
            {
              id: '003',
              label: '空腹血糖',
              value: '4.0',
              unit: 'mmol/L',
              standrad: '3.9-6.1mmol/L',
              status: 1,
            },
            {
              id: '004',
              label: '血压',
              value: '110/80',
              unit: 'mmHg',
              standrad: '140/90mmHg～90/60 mmHg',
              status: 1,
            },
          ],
          abnormalList: [
            {
              id: '001',
              title: '甲状腺结节（甲状腺结节或钙化）',
              desc: '建议进一步监测；常规测甲状腺功能全套，甲状腺。',
            },
            {
              id: '002',
              title: '甲状腺结节（甲状腺结节或钙化）',
              desc: '建议进一步监测；常规测甲状腺功能全套，甲状腺。',
            },
            {
              id: '003',
              title: '甲状腺结节（甲状腺结节或钙化）',
              desc: '建议进一步监测；常规测甲状腺功能全套，甲状腺。',
            },
            {
              id: '004',
              title: '甲状腺结节（甲状腺结节或钙化）',
              desc: '建议进一步监测；常规测甲状腺功能全套，甲状腺。',
            },
          ],
          chronicFoodAllergyList: [
            {
              id: '001',
              label: '血小板',
              value: '5.2',
              standrad: '125~350×10^9/L',
              status: 1,
            },
            {
              id: '002',
              label: '血红蛋白',
              value: '4.8',
              standrad: '110 ~ 150g/L',
              status: 1,
            },
            {
              id: '003',
              label: '白细胞',
              value: '3.0',
              standrad: '3.9-6.1mmol/L',
              status: 1,
            },
            {
              id: '004',
              label: '转氨酶',
              value: '7.0',
              standrad: '3.9-6.1mmol/L',
              status: 1,
            },
            {
              id: '005',
              label: '胆红素',
              value: '17',
              standrad: '3.9-6.1mmol/L',
              status: 1,
            },
            {
              id: '006',
              label: '白蛋白',
              value: '15',
              standrad: '3.9-6.1mmol/L',
              status: 1,
            },
            {
              id: '007',
              label: '肌酐',
              value: '4',
              standrad: '3.9-6.1mmol/L',
              status: 1,
            },
            {
              id: '008',
              label: '尿酸',
              value: '556',
              standrad: '3.9-6.1mmol/L',
              status: 0,
            },
            {
              id: '009',
              label: '血压',
              value: '23',
              standrad: '3.9-6.1mmol/L',
              status: 0,
            },
            {
              id: '010',
              label: '甘油三酯',
              value: '56',
              standrad: '3.9-6.1mmol/L',
              status: 0,
            },
          ],
          gutMicrobiomeList: [
            {
              id: '001',
              label: '血小板',
              value: '5.2',
              standrad: '125~350×10^9/L',
              status: 1,
            },
            {
              id: '002',
              label: '血红蛋白',
              value: '4.8',
              standrad: '110 ~ 150g/L',
              status: 1,
            },
            {
              id: '003',
              label: '白细胞',
              value: '3.0',
              standrad: '3.9-6.1mmol/L',
              status: 1,
            },
            {
              id: '004',
              label: '转氨酶',
              value: '7.0',
              standrad: '3.9-6.1mmol/L',
              status: 1,
            },
            {
              id: '005',
              label: '胆红素',
              value: '17',
              standrad: '3.9-6.1mmol/L',
              status: 1,
            },
            {
              id: '006',
              label: '白蛋白',
              value: '15',
              standrad: '3.9-6.1mmol/L',
              status: 1,
            },
            {
              id: '007',
              label: '肌酐',
              value: '4',
              standrad: '3.9-6.1mmol/L',
              status: 1,
            },
            {
              id: '008',
              label: '尿酸',
              value: '556',
              standrad: '3.9-6.1mmol/L',
              status: 0,
            },
            {
              id: '009',
              label: '血压',
              value: '23',
              standrad: '3.9-6.1mmol/L',
              status: 0,
            },
            {
              id: '010',
              label: '甘油三酯',
              value: '56',
              standrad: '3.9-6.1mmol/L',
              status: 0,
            },
          ],
          scoreList: [
            { id: '001', label: '饮食', value: 23 },
            { id: '002', label: '饮食', value: 23 },
            { id: '003', label: '作息', value: 44 },
            { id: '004', label: '作息', value: 44 },
            { id: '005', label: '运动', value: 88 },
            { id: '006', label: '运动', value: 88 },
            { id: '007', label: '体质', value: 56 },
            { id: '008', label: '体质', value: 56 },
            { id: '009', label: '心理', value: 78 },
            { id: '010', label: '心理', value: 100 },
          ],
        }

        console.log('detail', this.detail)
      },
      jumpToNutritionProgram() {
        this.$utils.navigateTo(`/pages_order/report/nutritionProgram/index?id=${this.id}`)
      },
    },
  }
</script>

<style scoped lang="scss">
  .page__view {
    width: 100vw;
    min-height: 100vh;
    background-color: $uni-bg-color;
    position: relative;
    
    /deep/ .nav-bar__view {
      position: fixed;
      top: 0;
      left: 0;
    }
  }

  .main {
    padding: calc(var(--status-bar-height) + 168rpx) 32rpx 280rpx 32rpx;
  }

  .section {
    & + & {
      margin-top: 40rpx;
    }
  }

  .bottom {
    width: 100%;
    height: 200rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 24rpx 40rpx;
    box-sizing: border-box;
    background: #FFFFFF;

    .btn {
      padding: 16rpx 0;
      font-family: PingFang SC;
      font-size: 36rpx;
      font-weight: 500;
      line-height: 1;
      color: #FFFFFF;
      background-image: linear-gradient(to right, #4B348F, #845CFA);
      border-radius: 41rpx;
    }
  }

</style>