修改取题目的方式和参数3

src/components/mSkillList/index.vue

@@ -0,0 +1,213 @@
+<template>
+    <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-normal 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.title }}
+                    </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) +
+                            '&columnAll=' +
+                            (item.columnId || '')
+                        ">
+                            <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>
+</template>
+
+<script lang="ts">
+import router from '@/router';
+import { message } from 'ant-design-vue';
+import { defineComponent, ref, watch } from 'vue'
+import { useRoute } from 'vue-router';
+import { openApi } from '@/api/open/type';
+import api from '@/api';
+import { string } from 'vue-types';
+export default defineComponent({
+    setup(props, emit) {
+
+        const route = useRoute();
+        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
+
+                }
+            })
+
+
+        }
+        let list = ref<
+            {
+                "createTime": string,
+                "updateTime": null,
+                "id": number,
+                "columnId": number,
+                "sort": number,
+                "model": string,
+                "subject": string,
+                "title": string
+            }[]
+        >([]);
+        api.open
+            .question2InfoGetQuestionColumn({
+                subject: 'k' + (route.query.subject || '1') + '_3',
+                model: props.model
+            })
+            .then((res) => {
+
+                list.value = res.data;
+            });
+
+        return {
+            list,
+            checkLocalWrongList,
+            dialogVisible: ref(false)
+        }
+    },
+    props: {
+        model: {
+            type: String,
+            default: 'cart'
+        },
+        subject:{
+            type:String,
+            default:'1'
+        }
+    },
+    watch: {
+        "$route.query"(nowVal, oldVal) {
+            api.open
+                .question2InfoGetQuestionColumn({
+                    subject: 'k' + (this.$route.query.subject || '1') + '_3',
+                    model: this.model
+                })
+                .then((res) => {
+
+                    this.list = res.data;
+                });
+        },
+        model(nowVal, oldVal) {
+            console.log(nowVal,oldVal)
+            if(nowVal==oldVal){
+                return
+            }
+            api.open
+                .question2InfoGetQuestionColumn({
+                    subject: 'k' + (this.$route.query.subject || '1') + '_3',
+                    model: nowVal
+                })
+                .then((res) => {
+
+                    this.list = res.data;
+                });
+        },
+    },
+
+
+})
+</script>
+
+<style scoped>
+.bg-primary-yellow {
+    background-color: #f9de5b;
+}
+
+a {
+    color: black;
+    text-decoration: none;
+
+}
+
+.select-border1 {
+    border: 1px solid #f9de5b;
+}
+
+.select-border2 {
+    border: 1px solid #f9de5b;
+    color: black;
+    text-decoration: none;
+}
+
+.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;
+}
+</style>

src/router/index.ts

@@ -74,8 +74,12 @@ const routes: Array<RouteRecordRaw> = [
       path: 'sysconfig',
       component: () => import('../views/home/sysconfig/index.vue')
     }, {
-      path: 'practiseSelect',
-      component: () => import('../views/home/practiseSelect/index.vue')
+      path: 'practiseSelect1',
+      component: () => import('../views/home/practiseSelect1/index.vue')
+    },
+    {
+      path: 'practiseSelect2',
+      component: () => import('../views/home/practiseSelect2/index.vue')
     },
     {
       path: 'markLine',

src/views/home/components/leftTab/index.vue

@@ -88,7 +88,7 @@ export default defineComponent({
             {
               text: "练习技巧",
               isSelect: false,
-              path: "/home/practiseSelect",
+              path: "/home/practiseSelect1",
               query: {
                 subject: 1,
             
@@ -118,7 +118,7 @@ export default defineComponent({
             {
               text: "练习技巧",
               isSelect: false,
-              path: "/home/practiseSelect",
+              path: "/home/practiseSelect1",
               query: {
                 subject: 4,
           
@@ -148,7 +148,7 @@ export default defineComponent({
           children: [
             {
               text: "练习技巧",
-              path: "/home/practiseSelect",
+              path: "/home/practiseSelect2",
               isSelect: false,
               query: {
                 subject: 1,
@@ -179,7 +179,7 @@ export default defineComponent({
           children: [
             {
               text: "练习技巧",
-              path: "/home/practiseSelect",
+              path: "/home/practiseSelect2",
               isSelect: false,
               query: {
                 subject: 4,

src/views/home/practiseSelect/index.vue → src/views/home/practiseSelect1/index.vue

@@ -21,62 +21,7 @@
         货车
       </div>
     </div>
-    <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-normal 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.title }}
-            </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) +
-                '&columnAll=' +
-                (item.columnId || '')
-              ">
-                <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>
+    <mSkillList :model="model"></mSkillList>
     <mProblemAlert v-model:visible="alertVisible" title="开启" content="禁止重复"></mProblemAlert>
     <mProblemDialog @confirm="deleteAllWrong()" v-model:visible="dialogVisible" title="提示" content="是否要清空全部错题">
     </mProblemDialog>
@@ -84,11 +29,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, onMounted, 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 mSkillList from "@/components/mSkillList/index.vue"
 import { message } from "ant-design-vue";
 import router from "@/router";
 import store from "@/store";
@@ -102,18 +48,18 @@ export default defineComponent({
     const model = computed(() => {
       return store.state.model
     })
-    let list = ref<
-      {
-        "createTime": string,
-        "updateTime": null,
-        "id": number,
-        "columnId": number,
-        "sort": number,
-        "model": string,
-        "subject": string,
-        "title": string
-      }[]
-    >([]);
+    // let list = ref<
+    //   {
+    //     "createTime": string,
+    //     "updateTime": null,
+    //     "id": number,
+    //     "columnId": number,
+    //     "sort": number,
+    //     "model": string,
+    //     "subject": string,
+    //     "title": string
+    //   }[]
+    // >([]);
     const deleteAllWrong = () => {
       store.dispatch('ClearDriver' + subject + 'WrongList')
       dialogVisible.value = false;
@@ -138,21 +84,21 @@ export default defineComponent({
 
 
     }
-
-    api.open
-      .question2InfoGetQuestionColumn({
-        subject: 'k'+(route.query.subject||'1')+'_3',
-        model: model.value
-      })
-      .then((res) => {
-
-        list.value = res.data;
-      });
+    
+    // api.open
+    //   .question2InfoGetQuestionColumn({
+    //     subject: 'k'+(route.query.subject||'1')+'_3',
+    //     model: model.value
+    //   })
+    //   .then((res) => {
+
+    //     list.value = res.data;
+    //   });
+     
 
     return {
       dialogVisible,
       alertVisible: ref(false),
-      list: list,
       model,
       deleteAllWrong,
       checkLocalWrongList
@@ -162,40 +108,30 @@ export default defineComponent({
     changeCarModel(model: string) {
       store.commit('SET_MODEL', model)
       
-      api.open
-      .question2InfoGetQuestionColumn({
-        subject: 'k'+(this.$route.query.subject||'1')+'_3',
-        model: this.model
-      })
-      .then((res) => {
-
-        this.list = res.data;
-        message.success({
-          content: '切换成功'
-        })
-      });
-    },
-  },
-  watch: {
-    "$route.query"(nowVal, oldVal) {
-      if (JSON.stringify(nowVal) == "{}") {
-        return;
-      }
-
-      api.open
-        .question2InfoGetQuestionColumn({
-          subject: 'k1_3',
-          model: this.model
-        })
-        .then((res) => {
-          res.data.shift();
-          this.list = res.data;
-        });
+   
     },
   },
+  // watch: {
+  //   "$route.query"(nowVal, oldVal) {
+  //     if (JSON.stringify(nowVal) == "{}") {
+  //       return;
+  //     }
+
+  //     api.open
+  //       .question2InfoGetQuestionColumn({
+  //         subject: 'k1_3',
+  //         model: this.model
+  //       })
+  //       .then((res) => {
+  //         res.data.shift();
+  //         this.list = res.data;
+  //       });
+  //   },
+  // },
   components: {
     mProblemDialog,
     mProblemAlert,
+    mSkillList
   },
 });
 </script>

src/views/home/practiseSelect2/index.vue

@@ -0,0 +1,201 @@
+
+
+<template>
+    <div class="content">
+ 
+      <mSkillList model="mtc"></mSkillList>
+      <mProblemAlert v-model:visible="alertVisible" title="开启" content="禁止重复"></mProblemAlert>
+      <mProblemDialog @confirm="deleteAllWrong()" v-model:visible="dialogVisible" title="提示" content="是否要清空全部错题">
+      </mProblemDialog>
+    </div>
+  </template>
+  
+  <script lang="ts">
+  import { computed, defineComponent, onMounted, 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 mSkillList from "@/components/mSkillList/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);
+      const model = computed(() => {
+        return store.state.model
+      })
+      let list = ref<
+        {
+          "createTime": string,
+          "updateTime": null,
+          "id": number,
+          "columnId": number,
+          "sort": number,
+          "model": string,
+          "subject": string,
+          "title": 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.open
+        .question2InfoGetQuestionColumn({
+          subject: 'k'+(route.query.subject||'1')+'_3',
+          model: model.value
+        })
+        .then((res) => {
+  
+          list.value = res.data;
+        });
+       
+  
+      return {
+        dialogVisible,
+        alertVisible: ref(false),
+        list: list,
+        model,
+        deleteAllWrong,
+        checkLocalWrongList
+      };
+    },
+    methods: {
+      changeCarModel(model: string) {
+        store.commit('SET_MODEL', model)
+        
+        api.open
+        .question2InfoGetQuestionColumn({
+          subject: 'k'+(this.$route.query.subject||'1')+'_3',
+          model: this.model
+        })
+        .then((res) => {
+  
+          this.list = res.data;
+          message.success({
+            content: '切换成功'
+          })
+        });
+      },
+    },
+    // watch: {
+    //   "$route.query"(nowVal, oldVal) {
+    //     if (JSON.stringify(nowVal) == "{}") {
+    //       return;
+    //     }
+  
+    //     api.open
+    //       .question2InfoGetQuestionColumn({
+    //         subject: 'k1_3',
+    //         model: this.model
+    //       })
+    //       .then((res) => {
+    //         res.data.shift();
+    //         this.list = res.data;
+    //       });
+    //   },
+    // },
+    components: {
+      mProblemDialog,
+      mProblemAlert,
+      mSkillList
+    },
+  });
+  </script>
+  
+  <style lang="scss" scoped>
+  .bg-primary-yellow {
+    background-color: #f9de5b;
+  }
+  
+  a {
+    color: black;
+    text-decoration: none;
+  
+  }
+  
+  .select-border1 {
+    border: 1px solid #f9de5b;
+  }
+  
+  .select-border2 {
+    border: 1px solid #f9de5b;
+    color: black;
+    text-decoration: none;
+  }
+  
+  .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>