jpcj-pc/src/views/home/practiseSelect/index.vue

<template>
  <div class="content">
    <div class="bg-white pl50 pt30">
      <div class="flex items-center">
        <div class="vertical-line mr10"></div>
        <span class="font20 font-bold mr15">技巧练习</span>
        <!-- <div class="lh34 select-border1 round4 pr15 pl15">试听</div> -->
      </div>
      <div class="">
        <div class="flex justify-between flex-wrap w-11/12">
          <div
            v-for="(item, index) in list"
            :key="index"
            class="flex radius4 pt15"
          >
            <div class="lh34 w185 text-left font18">
              {{ index + 1 }}. {{ item.classIssueName }}
            </div>
            <div class="flex">
              <div
                class="w64 lh34 mr15 round4 overflow-hidden select-border3 bg-gray-100 text-gray-500 cursor-not-allowed"
              >
                视频
              </div>
              <router-link
                :to="
                  '/studySkill?subject=' +
                  ($route.query.subject || 4) +
                  '&classIssue=' +
                  (item.classIssue || '')
                "
              >
                <div
                  class="w64 lh34 mr15 round4 overflow-hidden select-border2"
                >
                  练习
                </div>
              </router-link>
           
                <div
                @click="checkLocalWrongList()"
                  class="w64 lh34 mr15 round4 overflow-hidden select-border2"
                >
                  回顾
                </div>
          
            </div>
          </div>
        </div>
      </div>
      <div class="flex items-center pt30 pb30">
        <div class="vertical-line mr10"></div>
        <span class="font20 font-bold mr15">全部错误题回顾</span>
       
          <div @click="checkLocalWrongList()" class="lh34 round4 pr15 pl15 select-border1 mr15">
            错误回顾
          </div>
        <div
          @click="
            () => {
              dialogVisible = true;
            }
          "
          class="lh34 round4 pr15 pl15 select-border1"
        >
          清空全部错题
        </div>
      </div>
    </div>
    <mProblemAlert
      v-model:visible="alertVisible"
      title="开启"
      content="禁止重复"
    ></mProblemAlert>
    <mProblemDialog
      @confirm="deleteAllWrong()"
      v-model:visible="dialogVisible"
      title="提示"
      content="是否要清空全部错题"
    ></mProblemDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import api from "@/api";
import { useRoute } from "vue-router";
import mProblemDialog from "@/components/mProblemDialog/index.vue";
import mProblemAlert from "@/components/mProblemAlert/index.vue";
import { message } from "ant-design-vue";
import router from "@/router";
import store from "@/store";
export default defineComponent({
  name: "practiseSelect",
  setup() {
    const route = useRoute();
    const subject = route.query.subject
    const dialogVisible = ref(false);
    let list = ref<
      {
        createTime?: string;
        updateTime?: string;
        classIssue?: string;
        classIssueName: string;
      }[]
    >([]);
    const deleteAllWrong = () => {
    store.dispatch('ClearDriver'+subject+'WrongList')
     dialogVisible.value = false;
    };
    const checkLocalWrongList=()=>{
      const subject = route.query.subject as string
      let name = 'driverExam'+subject+'_local_wrong_list'
      let list = JSON.parse(window.localStorage.getItem(name)||'[]')
      if(list.length==0){
        message.warn({
          content:'没有对应的错题'
        })
        return
      }
      router.push({
        path:'/reviewDriverError',
        query:{
          subject

        }
      })


    }
    api.question
      .questionInfoSelectFlQuestionInfo({
        subject: Number(route.query.subject),
        liceBus: route.query.liceBus as string,
        liceCar: route.query.liceCar as string,
        liceMoto: route.query.liceMoto as string,
        liceTruck: route.query.liceTruck as string,
      })
      .then((res) => {
        res.data.shift();
        list.value = res.data;
      });

    return {
      dialogVisible,
      alertVisible: ref(false),
      list: list,
      deleteAllWrong,
      checkLocalWrongList
    };
  },
  watch: {
    "$route.query"(nowVal, oldVal) {
      if (JSON.stringify(nowVal) == "{}") {
        return;
      }

      api.question
        .questionInfoSelectFlQuestionInfo({
          subject: Number(this.$route.query.subject),
          liceBus: this.$route.query.liceBus as string,
          liceCar: this.$route.query.liceCar as string,
          liceMoto: this.$route.query.liceMoto as string,
          liceTruck: this.$route.query.liceTruck as string,
        })
        .then((res) => {
          res.data.shift();
          this.list = res.data;
        });
    },
  },
  components: {
    mProblemDialog,
    mProblemAlert,
  },
});
</script>

<style lang="scss" scoped>
.select-border1 {
  border: 1px solid #f9de5b;
}
.select-border2 {
  border: 1px solid #f9de5b;
}
.select-border3 {
  border: 1px solid #d8d8d8;
}
.select-border1:hover {
  border: 1px solid #f9de5b;
  background-color: #f9de5b;
  cursor: pointer;
}
.select-border2:hover {
  border: 1px solid #f9de5b;
  background-color: rgba(255, 247, 204, 1);
  cursor: pointer;
}
.radius4 {
  border-radius: 4px;
}
.bg-primary-yellow {
  background-color: #f9de5b;
}
.bg-light-yellow {
  background: #fff7cc;
}

.w1603 {
  width: 1603px;
}

.content {
  padding: 0 30px;
  padding-top: 21px;
  padding-bottom: 30px;

  .vertical-line {
    width: 5px;
    height: 20px;
    background: #f9de5b;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
  }
}
</style>