health-front/components/report/reportRecordCard.vue

<template>
  <view class="card">
    <view class="flex top">
      <view class="left">
        <view class="title">健康报告</view>
        <view class="time">{{ $dayjs(data.createTime).format('YYYY-MM-DD') }}</view>
      </view>
      <view class="flex right">
        <!-- 未完成的检测 -->
        <template v-if="data.status == 0">
          <button class="btn" @click="jumpToContinueAnswer">去完成</button>
        </template>
        <!-- 已完成的检测 -->
        <template v-else>
          <button class="btn" @click="jumpToCompare">报告对比</button>
          <button class="btn" @click="jumpToReport">查看方案</button>
        </template>
      </view>
    </view>
    <view class="bottom">
      <reportScoreView :data="data"></reportScoreView>
    </view>
  </view>
</template>

<script>
  import reportScoreView from './reportScoreView.vue'

  export default {
    components: {
      reportScoreView,
    },
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
      }
    },
    methods: {
      jumpToCompare() {
        this.$utils.navigateTo('/pages_order/report/compare/select')
      },
      jumpToReport() {
        this.$utils.navigateTo(`/pages_order/report/result/index?id=${this.data.id}`)
      },
      jumpToContinueAnswer() {
        // todo
      },
    },
  }
</script>

<style scoped lang="scss">
.card {
  margin-top: 32rpx;
  padding: 32rpx;
  background-image: linear-gradient(#FAFAFF, #F3F3F3);
  border: 2rpx solid #FFFFFF;
  border-radius: 32rpx;
}

.top {
  justify-content: space-between;

  .left {
    .title {
      font-size: 36rpx;
      font-weight: 600;
      line-height: 1.2;
      font-family: PingFang SC;
      color: #252545;
    }

    .time {
      margin-top: 4rpx;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 1.4;
      font-family: PingFang SC;
      color: #393939;
    }
  }

  .right {
    .btn {
      padding: 8rpx 24rpx;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 1.5;
      font-family: PingFang SC;
      color: #252545;
      border: 2rpx solid #252545;
      border-radius: 30rpx;
    }
    .btn + .btn {
      margin-left: 24rpx;
    }
  }
}

.bottom {
  margin-top: 24rpx;
}
</style>