assessment-front/pages_order/test/testCard.vue

<template>
  <view class="card">
    <view class="flex card-header">
      <!-- todo: 缺切图 -->
      <image class="icon" src="@/static/image/icon.png" mode="widthFix"></image>
      <view>{{ unfinishCount ? `您还有${unfinishCount}道题未完成` : '您已完成测评，还未获取报告' }}</view>
    </view>
    <view class="card-content">
      <view class="row">
        <view class="row-label">答题时间</view>
        <view class="row-content">{{ $dayjs(data.createTime).format('YYYY-MM-DD HH:mm') }}</view>
      </view>
    </view>
    <view class="flex card-footer">
      <button class="btn" @click="onRestart">重新测评</button>
      <button v-if="unfinishCount" class="btn btn-primary" @click="onContinue">继续答题</button>
      <button v-else class="btn btn-primary" @click="onCreateReport">获取报告</button>
    </view>
  </view>
</template>

<script>

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      unfinishCount() {
        const { allNum, finishNum } = this.data

        return allNum - finishNum
      },
    },
    methods: {
      onRestart() {
        // todo: fetch by this.data.paperId
        // let id
				// uni.navigateTo({
				// 	url: `/pages_order/test/answer?id=${id}`
				// })
				uni.navigateTo({
					url: `/pages_order/test/start`
				})
      },
      onContinue() {
				uni.navigateTo({
					url: `/pages_order/test/answer?examId=${this.data.id}`,
				})
      },
      onCreateReport() {
        if (this.data.isPay) {
          uni.navigateTo({
            url: `/pages_order/report/userInfo?batchNo=${this.batchNo}`
          })
        } else {
          uni.navigateTo({
            url: `/pages_order/report/pay?batchNo=${this.data.batchNo}`
          })
        }
      },
    },
  }
</script>

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

    &-header {
      justify-content: flex-start;
      column-gap: 24rpx;
      padding: 0 26rpx;
      font-size: 30rpx;

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

    &-content {
      padding-left: 94rpx;
    }

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

  .row {
    margin-top: 12rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 26rpx;
    font-size: 28rpx;
    color: #999999;
  }

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

</style>