ieplus-app/src/pagesStudy/pages/study-history/components/practice-history.vue

<template>
  <view class="flex-1 min-h-1 bg-white">
    <practice-history-student v-if="isStudent" />
    <teacher-class-view v-else>
      <template #default="{ teachClass }">
        <view class="type-wrap">
          <view v-for="item in typeList" :key="item.value" class="type-item"
            :class="{ 'is-active': currentType === item.value }" @click="handleTypeChange(item.value)">{{ item.label }}
          </view>
        </view>
        <view class="mt-30 w-fit mx-auto">
          <ie-tab :options="tabList" v-model="currentSort" />
        </view>
        <view class="mt-30">
          <practice-history-teacher :teach-class="teachClass" :current-type="currentType" :current-sort="currentSort" />
        </view>
      </template>
    </teacher-class-view>
  </view>
</template>
<script lang="ts" setup>
import practiceHistoryStudent from './practice-history-student.vue';
import practiceHistoryTeacher from './practice-history-teacher.vue';
import teacherClassView from '@/pagesStudy/components/teacher-class-view.vue';
import { OPEN_PRACTICE_DETAIL } from '@/types/injectionSymbols';
import { useTransferPage } from '@/hooks/useTransferPage';
import { useUserStore } from '@/store/userStore';
const { transferTo } = useTransferPage();
const currentType = ref('rate');
const typeList = ref([
  {
    label: '按正确率',
    value: 'rate'
  },
  {
    label: '按刷题天数',
    value: 'time'
  },
  {
    label: '按刷题题量',
    value: 'total'
  }
])
const currentSort = ref('asc');
const tabList = ref([
  {
    label: '升序',
    value: 'asc'
  },
  {
    label: '降序',
    value: 'desc'
  }
])
const { isStudent } = storeToRefs(useUserStore());
const handleTypeChange = (value: string) => {
  currentType.value = value;
}
const openPracticeDetail = (recordId: number, name: string) => {
  transferTo('/pagesStudy/pages/study-practice-detail/study-practice-detail', {
    data: {
      recordId,
      name
    }
  });
}
provide(OPEN_PRACTICE_DETAIL, openPracticeDetail);
</script>
<style lang="scss" scoped>
.type-wrap {
  @apply mt-40 mx-auto p-10 bg-white border border-solid border-border rounded-8 w-fit flex gap-x-10;
}

.type-item {
  @apply text-28 text-fore-light px-30 py-8 rounded-5;
}

.is-active {
  @apply bg-back text-fore-title font-bold;
}
</style>