ieplus-app/src/pagesOther/pages/test-center/components/test-entry.vue

<template>
  <ie-page :fix-height="true">
    <ie-navbar :title="title" />
    <template v-if="isReady">
      <test-step />
      <test-title />
      <test-tabs />
      <uv-line margin="6px 0" />
      <ie-auto-resizer>
        <swiper class="h-full" :current="questionIndex" :duration="swiperDuration" @change="handleChangeTab">
          <swiper-item class="h-full" v-for="(qs, index) in questionList" :key="qs.id">
            <template v-if="Math.abs(index - questionIndex) <= 4">
              <scroll-view class="h-full" scroll-y>
                <view v-if="qs.title" class="text-28 px-30 py-20">
                  {{ qs.no }}、{{ qs.title }}
                </view>
                <view class="px-30">
                  <uv-checkbox-group v-if="qs.multiple" v-model="qs.answer" shape="square" placement="column">
                    <uv-checkbox :customStyle="{ padding: '8px 0' }" v-for="(item, index) in qs.options" :key="index"
                      :label="item.title" :name="item.answer" labelColor="#888"></uv-checkbox>
                  </uv-checkbox-group>
                  <uv-radio-group v-else v-model="qs.answer" placement="column" @change="handleRadioChange">
                    <uv-radio :customStyle="{ padding: '8px 0' }" v-for="(item, index) in qs.options" :key="index"
                      :label="type === 'holland' ? item.title : item.no + '、' + item.title" :name="item.answer">
                    </uv-radio>
                  </uv-radio-group>
                </view>
              </scroll-view>
            </template>
          </swiper-item>
        </swiper>
      </ie-auto-resizer>
      <view class="px-40 py-30 flex items-center gap-20">
        <view class="flex-1">
          <uv-button type="primary" plain shape="circle" :disabled="!canPrev" @click="handlePrevious">上一题</uv-button>
        </view>
        <view class="flex-1">
          <uv-button v-if="canNext" type="primary" shape="circle" :disabled="!canNext"
            @click="handleNext">下一题</uv-button>
          <uv-button v-else type="primary" shape="circle" @click="handleGenerateReport">生成报告</uv-button>
        </view>
      </view>
    </template>
    <test-popup ref="testPopupRef" />
  </ie-page>
</template>

<script lang="ts" setup>
import TestStep from './test-step.vue';
import TestTitle from './test-title.vue';
import TestTabs from './test-tabs.vue';
import TestPopup from './test-popup.vue';
import { useTest, SYMBOL_TEST_DATA } from './useTest';
import { hollSaveHolland, mbtiSave } from '@/api/modules/test-center';
import { useTransferPage } from '@/hooks/useTransferPage';

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  type: {
    type: String as PropType<'holland' | 'mbti'>,
    default: 'holland'
  }
});

const { transferTo, routes } = useTransferPage();
const testData = useTest(props.type);
provide(SYMBOL_TEST_DATA, testData);


// 解构出需要的方法
const { isReady, questionList, unAnseredQuestionList, questionIndex, setQuestionIndex, prevQuestion, nextQuestion, swiperDuration, canPrev, canNext, getResult } = testData;
const handleChangeTab = (e: any) => {
  setQuestionIndex(e.detail.current);
}
const handlePrevious = () => {
  prevQuestion();
}

const handleRadioChange = () => {
  setTimeout(() => {
    nextQuestion();
  }, 300);
}

const testPopupRef = ref();
const handleNext = () => {
  if (questionIndex.value === questionList.value.length - 1) {
    // 每个步骤的最后一题检查是否还有未做完的
    if (unAnseredQuestionList.value.length > 0) {
      testPopupRef.value?.open();
      return;
    }
    nextQuestion();
  } else {
    nextQuestion();
  }
}
const handleGenerateReport = () => {
  uni.$ie.showLoading();
  const result = getResult();
  if (props.type === 'holland') {
    hollSaveHolland({
      details: result
    }).then(res => {
      uni.$ie.hideLoading();
      transferTo(routes.pageHollandReport, {
        data: {
          code: res.data
        },
        type: 'redirectTo'
      });
    }).catch(err => {
      uni.$ie.hideLoading();
    });
  } else {
    mbtiSave({
      details: result
    }).then(res => {
      uni.$ie.hideLoading();
      transferTo(routes.pageMbtiReport, {
        data: {
          code: res.data
        },
        type: 'redirectTo'
      });
    }).catch(err => {
      uni.$ie.hideLoading();
    });
  }

}
</script>

<style lang="scss" scoped></style>