health-front/pages_order/report/test/step.vue

<template>
  <view class="page__view">
		<navbar title="问卷测评" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="transparent" />

    <view class="main">
      <view :class="['step', step === current ? 'is-active' : '']" v-for="(item, step) in steps" :key="item.id">
        <view class="step-zh">{{ `{ ${item.title} }` }}</view>
        <view class="step-en">{{ item.enTitle }}</view>
      </view>
    </view>
  </view>
</template>

<script>
	import { mapState } from 'vuex'

  export default {
    data() {
      return {
        current: 0,
      }
    },
		computed: {
			...mapState(['paperInfo']),
      steps() {
        console.log('paperInfo', this.paperInfo)
        const { category } = this.paperInfo
        return category?.map?.(item => {
          const { id, title, enTitle } = item

          return { id, title, enTitle }
        })
      },
		},
    onLoad(arg) {
      console.log('onLoad', arg)
      this.current = parseInt(arg.step || 0)
      console.log('current', this.current)

      setTimeout(() => {
        this.$utils.redirectTo(`/pages_order/report/test/answer?step=${this.current}`)
      }, 1500)
    }
  }
</script>

<style scoped lang="scss">
	.page__view {
		width: 100vw;
		min-height: 100vh;
		background-color: $uni-bg-color;
		position: relative;
	}

  .main {
    margin-top: 214rpx;
  }

  .step {
    text-align: center;
    font-family: PingFang SC;
    line-height: 1.4;
    color: #989898;

    &.is-active {
      color: #252545;
    }

    &-zh {
      font-weight: 600;
      font-size: 48rpx;
    }

    &-en {
      font-weight: 400;
      font-size: 26rpx;
    }

    & + & {
      margin-top: 80rpx;
    }
  }

</style>