assessment-front/components/report/reportCard.vue

<template>
  <view class="card">
    <view class="flex card-header">
      <image class="icon" src="@/static/image/icon.png" mode="widthFix"></image>
      <view>{{ data.name }}</view>
    </view>
    <view class="card-content">
      <view class="row">
        <view class="row-label">手机号码</view>
        <view class="row-content">{{ data.phone }}</view>
      </view>
      <view class="row">
        <view class="row-label">公司名称</view>
        <view class="row-content">{{ data.company }}</view>
      </view>
      <view class="row">
        <view class="row-label">生成时间</view>
        <view class="row-content">{{ data.createTime }}</view>
      </view>
    </view>
    <view class="flex card-footer">
      <button class="btn" @click="jumpToTest">重新测评</button>
      <button class="btn btn-primary" @click="jumpToReport">查看报告</button>
    </view>
    <view class="flex tag">
      <view class="flex tag-content">
        {{ statusDesc }}
      </view>
    </view>
  </view>
</template>

<script>

  const STATUS_AND_DESC_MAPPING = {
    0: '未完成',
    1: '已完成',
  }

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      statusDesc() {
        return STATUS_AND_DESC_MAPPING[this.data.status]
      },
    },
    methods: {
      jumpToTest() {
				uni.navigateTo({
					url: `/pages_order/test/answer?id=${this.data.paperId}`
				})
      },
      jumpToReport() {
				uni.navigateTo({
					url: `/pages_order/report/index?id=${this.data.batchNo}`
				})
      },
    },
  }
</script>

<style scoped lang="scss">
  .card {
    position: relative;
    padding: 42rpx 24rpx 17rpx 24rpx;
    color: #000000;
    background: #FFFFFF;
    border-radius: 15rpx;
    overflow: hidden;

    &-header {
      justify-content: flex-start;
      column-gap: 24rpx;
      padding: 0 12rpx 10rpx 12rpx;
      font-size: 30rpx;
      border-bottom: 1rpx solid rgba($color: #999999, $alpha: 0.22);

      .icon {
        width: 76rpx;
        height: auto;
      }
    }

    &-content {
      padding-bottom: 37rpx;
    }

    &-footer {
      padding: 0 20rpx;
      column-gap: 25rpx;
    }
  }

  .row {
    margin-top: 24rpx;
    display: flex;
    align-items: center;
    column-gap: 26rpx;
    font-size: 28rpx;

    &-label {
      color: #999999;
    }

    &-content {

    }
  }

  .btn {
    flex: 1;
    padding: 17rpx 0;
    box-sizing: border-box;
    font-family: PingFang SC;
    font-size: 22rpx;
    line-height: 1.4;
    color: #014FA2;
    border: 3rpx solid #014FA2;
    border-radius: 35rpx;

    &-primary {
      color: #FFFFFF;
      background: #014FA2;
    }
  }

  .tag {
    position: absolute;
    top: 0;
    right: 17rpx;
    transform: translate(0, -54rpx);
    width: 162rpx;
    height: 162rpx;
    font-size: 34rpx;
    color: #014FA2;
    border: 4rpx solid #014FA2;
    border-radius: 50%;

    &-content {
      transform: rotate(-25deg);
      width: 114rpx;
      height: 114rpx;
      // border: 1rpx dashed #014FA2;
      // border-image: repeating-linear-gradient(to right, #014FA2, #014FA2 10px, transparent 10px, transparent 15px) 1;
      // border-width: 4rpx;
      // border-style: solid;
      border: 4rpx dashed #014FA2;
      border-radius: 50%;
    }

  }

</style>