新增错题移入收藏夹功能

src/views/collection/components/list.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="listcom-box">
+    <div class="list-box">
+      <van-checkbox-group v-model="checked" ref="checkboxGroup">
+        <van-cell-group>
+          <van-pull-refresh v-model="refreshing" @refresh="onLoad">
+            <van-list
+              v-model="loading"
+              :finished="finished"
+              finished-text="没有更多了"
+              @load="onLoad"
+            >
+              <van-swipe-cell
+                v-for="(item, index) in list"
+                :key="index"
+                :disabled="isChoose"
+              >
+                <van-cell
+                  class="cell-box"
+                  clickable
+                  :title="`${item.id}. ${item.issue}`"
+                  @click=""
+                >
+                  <template #icon v-if="isChoose">
+                    <van-checkbox :name="item.id" class="checkbox" />
+                  </template>
+                </van-cell>
+                <template #right>
+                  <van-button
+                    square
+                    style="height: 100%"
+                    type="danger"
+                    text="删除"
+                    @click="deleteClick(item.id)"
+                  />
+                  <van-button
+                    square
+                    style="height: 100%"
+                    type="primary"
+                    text="收藏"
+                    @click="collectionClick(item.id)"
+                    v-if="props.type == 'wrong'"
+                  />
+                </template>
+              </van-swipe-cell>
+            </van-list>
+          </van-pull-refresh>
+        </van-cell-group>
+      </van-checkbox-group>
+    </div>
+    <div class="bottom-cell">
+      <div>
+        <span v-if="!isChoose" @click="isChoose = true">批量选中</span>
+        <div class="choose" v-else>
+          <van-checkbox v-model="isSelectAll">全选</van-checkbox>
+          <span
+            @click="
+              isChoose = false;
+              unSelectAll();
+            "
+            >取消</span
+          >
+        </div>
+      </div>
+      <div>
+        <div class="operate">
+          <van-button
+            round
+            type="danger"
+            size="small"
+            :disabled="checked.length == 0"
+            @click="deletesClick"
+            >删除选中</van-button
+          >
+          <van-button
+            round
+            type="primary"
+            size="small"
+            :disabled="checked.length == 0"
+            @click="collectionClick"
+            v-if="props.type == 'wrong'"
+            >移入收藏夹</van-button
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { CollectionModel } from "@/dataModel/collection";
+import { RouterBus } from "@/hooks";
+/**
+ * 列表hook
+ */
+const useQuestionList = (type: CollectionAndWrongType.type) => {
+  const collectionModel = new CollectionModel(type);
+  const questionList = ref<Test.QuestionInfo[]>([]);
+  const collectionList = ref<CollectionAndWrongType.QuestionRes[]>([]);
+  const {
+    route: { query },
+  } = new RouterBus();
+
+  const total = ref(0);
+  const pageNum = ref(1);
+  const pageSize = ref(20);
+  /** 刷新数据 */
+  const refreshing = ref(false);
+  /**加载中 */
+  const loading = ref(false);
+  /**数据是否全部加载完成 */
+  const finished = ref(false);
+
+  /** 删除已收藏的问题 */
+  const deletes = async (ids: number[]) => {
+    const res = await collectionModel.deletes(ids, collectionList.value);
+    //乐观删除本地数据
+    questionList.value = questionList.value.filter(
+      (item) => !ids.includes(item.id)
+    );
+  };
+
+  /** 加入收藏 */
+  const addsCollection = async (ids: number[]) => {
+    const list = collectionList.value.filter((item) =>
+      ids.includes(item.questionId)
+    );
+    const params = list.map((item) => {
+      return {
+        carType: item.carType,
+        km: item.km,
+        questionId: item.questionId,
+      };
+    });
+    const collectionModel = new CollectionModel("collection");
+    const res = await collectionModel.adds(params);
+    //收藏成功则删除错题
+    // if (res.data == 1) {
+    deletes(ids);
+    // }
+  };
+
+  /**获取下一页数据 */
+  const onLoadData = async () => {
+    if (loading.value) return;
+    loading.value = true;
+    if (refreshing.value) {
+      collectionList.value = [];
+      questionList.value = [];
+      pageNum.value = 1;
+      refreshing.value = false;
+    }
+    const res = await collectionModel.getList({
+      carType: query.vehicle as CollectionAndWrongType.CarType,
+      km: query.name as CollectionAndWrongType.Km,
+      pageNum: pageNum.value,
+      pageSize: pageSize.value,
+    });
+    total.value = res.total;
+    collectionList.value.push(...res.collectionList);
+    questionList.value.push(...res.rows);
+    loading.value = false;
+    finished.value = questionList.value.length >= total.value;
+    pageNum.value++;
+  };
+
+  return {
+    questionList,
+    deletes,
+    finished,
+    loading,
+    onLoadData,
+    refreshing,
+    addsCollection,
+  };
+};
+</script>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+interface Props {
+  type: "wrong" | "collection";
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+//当前视图事务
+const {
+  questionList: list, //题目列表
+  finished, //是否全部加载完成
+  refreshing /** 重载状态 */,
+  loading /**显示加载状态 */,
+  onLoadData: onLoad /**加载数据 */,
+  deletes, //批量删除
+  addsCollection, //加入收藏,移除错题
+} = useQuestionList(props.type);
+
+const isChoose = ref(false); //开启批量选中
+const isSelectAll = ref(false); //是否全选
+const checked = ref([]); //选中内容
+const checkboxGroup = ref(); //多选框组件实例
+const isType = ref(0); //0错题 1收藏
+//选择全选
+watch(isSelectAll, (value) => {
+  if (value) {
+    selectAll();
+  } else {
+    unSelectAll();
+  }
+});
+// //全选状态改变
+watch(checked, (val) => {
+  if (val.length == 0) {
+    isSelectAll.value = false;
+  }
+  if (val.length === list.value.length) {
+    isSelectAll.value = true;
+  }
+});
+//全选
+const selectAll = () => {
+  checkboxGroup.value.toggleAll(true);
+};
+//取消全选
+const unSelectAll = () => {
+  checked.value = [];
+};
+//单个删除
+const deleteClick = (id: number) => {
+  deletes([id]);
+};
+//批量删除
+const deletesClick = () => {
+  deletes(checked.value);
+};
+
+//单个收藏
+const collectionClick = (id: number) => {
+  addsCollection([id]);
+};
+//批量收藏
+const collectionsClick = () => {
+  addsCollection(checked.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.listcom-box {
+  height: calc(100vh - 50px);
+  display: flex;
+  flex-direction: column;
+}
+
+.list-box {
+  flex-grow: 1;
+  overflow-y: auto;
+  .cell-box {
+    min-height: 70px;
+  }
+}
+.checkbox {
+  margin-right: 5px;
+}
+.bottom-cell {
+  flex-shrink: 0;
+  border-top: 1px solid #bdbaba;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100vw;
+  height: 50px;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 400;
+  font-family: PingFang SC;
+  background-color: #ffffff;
+  padding: 10px 15px;
+  .choose {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100px;
+  }
+  .operate {
+    display: flex;
+    justify-content: space-between;
+
+    span {
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #ffffff;
+      border-radius: 15px;
+
+      &:nth-of-type(1) {
+        background-color: #ff4d53;
+      }
+      &:active {
+        filter: brightness(50%);
+      }
+      &:nth-of-type(2) {
+        background-color: #498ef5;
+      }
+    }
+  }
+}
+</style>

src/views/collection/index.vue

@@ -3,233 +3,43 @@
     <van-nav-bar left-arrow @click-left="onClickLeft" placeholder>
       <template #title>
         <div class="title">
-          <span :class="{ active: isType == 0 }" @click="isType = 0"
+          <span
+            :class="{ active: isType == 0 }"
+            @click="
+              isType = 0;
+              swiper.swipeTo(0);
+            "
             >做错题</span
           >
-          <span :class="{ active: isType == 1 }" @click="isType = 1"
-            >收藏题</span
-          >
-        </div>
-      </template>
-    </van-nav-bar>
-    <div class="list-box">
-      <van-checkbox-group v-model="checked" ref="checkboxGroup">
-        <van-cell-group>
-          <van-list
-            v-model="loading"
-            :finished="finished"
-            finished-text="没有更多了"
-            @load="onLoad"
-          >
-            <van-swipe-cell
-              v-for="(item, index) in list"
-              :key="index"
-              :disabled="isChoose"
-            >
-              <van-cell
-                clickable
-                :title="`${item.id}. ${item.issue}`"
-                @click=""
-              >
-                <template #icon v-if="isChoose">
-                  <van-checkbox :name="item.id" class="checkbox" />
-                </template>
-              </van-cell>
-              <template #right>
-                <van-button
-                  square
-                  style="height: 100%"
-                  type="danger"
-                  text="删除"
-                  @click="deleteClick(item.id)"
-                />
-                <van-button
-                  square
-                  style="height: 100%"
-                  type="primary"
-                  text="收藏"
-                  v-if="isType == 0"
-                />
-              </template>
-            </van-swipe-cell>
-          </van-list>
-        </van-cell-group>
-      </van-checkbox-group>
-    </div>
-    <!-- <div style="height: 50px"></div> -->
-    <div class="bottom-cell">
-      <div>
-        <span v-if="!isChoose" @click="isChoose = true">批量选中</span>
-        <div class="choose" v-else>
-          <van-checkbox v-model="isSelectAll">全选</van-checkbox>
           <span
+            :class="{ active: isType == 1 }"
             @click="
-              isChoose = false;
-              unSelectAll();
+              isType = 1;
+              swiper.swipeTo(1);
             "
-            >取消</span
-          >
-        </div>
-      </div>
-      <div>
-        <div class="operate">
-          <van-button
-            round
-            type="danger"
-            size="small"
-            :disabled="checked.length == 0"
-            @click="deletesClick"
-            >删除选中</van-button
-          >
-          <van-button
-            round
-            type="primary"
-            size="small"
-            :disabled="checked.length == 0"
-            >移入收藏夹</van-button
+            >收藏题</span
           >
         </div>
-      </div>
-    </div>
+      </template>
+    </van-nav-bar>
+    <van-swipe ref="swiper" :show-indicators="false" :touchable="false">
+      <van-swipe-item> <listCom type="wrong" /> </van-swipe-item>
+      <van-swipe-item> <listCom type="collection" /> </van-swipe-item>
+    </van-swipe>
   </div>
 </template>
 
-<script lang="ts">
-import { onBeforeMount, computed } from "vue";
-import { CollectionModel } from "@/dataModel/collection";
-
-/**
- * 列表hook
- */
-const useQuestionList = (type: CollectionAndWrongType.type) => {
-  const collectionModel = new CollectionModel(type);
-  const questionList = ref<Test.QuestionInfo[]>([]);
-  const collectionList = ref<CollectionAndWrongType.QuestionRes[]>([]);
-
-  const total = ref(0);
-  const pageNum = ref(1);
-  const pageSize = ref(10);
-  const loading = ref(false);
-  /**数据是否全部加载完成 */
-  const finished = ref(false);
-
-  /** 删除已收藏的问题 */
-  const deletes = async (ids: number[]) => {
-    const res = await collectionModel.deletes(ids, collectionList.value);
-    //乐观删除本地数据
-    questionList.value = questionList.value.filter(
-      (item) => !ids.includes(item.id)
-    );
-  };
-
-  /**获取下一页数据 */
-  const onLoadData = async () => {
-    if (loading.value) return;
-    loading.value = true;
-    const res = await collectionModel.getList({
-      carType: "小车",
-      km: "科目一",
-      pageNum: pageNum.value,
-      pageSize: pageSize.value,
-    });
-    total.value = res.total;
-    collectionList.value.push(...res.collectionList);
-    questionList.value.push(...res.rows);
-    loading.value = false;
-    finished.value = questionList.value.length >= total.value;
-    pageNum.value++;
-  };
-
-  return {
-    questionList,
-    deletes,
-    finished,
-    loading,
-    onLoadData,
-  };
-};
-</script>
-
 <script setup lang="ts">
-import { nextTick, ref, watch } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
+import listCom from "./components/list.vue";
 const router = useRouter();
 const onClickLeft = () => {
   router.back();
 };
 
-const collection = useQuestionList("collection");
-const wrong = useQuestionList("wrong");
-//当前视图事务
-const currentView = computed(() => {
-  if (isType.value == 0) {
-    return collection;
-  } else {
-    return wrong;
-  }
-});
-//题目列表
-const list = computed(() => {
-  return currentView.value.questionList.value;
-});
-
-//是否全部加载完成
-const finished = computed(() => {
-  return currentView.value.finished.value;
-});
-
-/**显示加载状态 */
-const loading = computed(() => {
-  return currentView.value.loading;
-});
-
-/**加载数据 */
-const onLoad = async () => {
-  await currentView.value.onLoadData();
-};
-
-const isChoose = ref(false); //开启批量选中
-const isSelectAll = ref(false); //是否全选
-const checked = ref([]); //选中内容
-const checkboxGroup = ref(); //多选框组件实例
 const isType = ref(0); //0错题 1收藏
-//选择全选
-watch(isSelectAll, (value) => {
-  if (value) {
-    selectAll();
-  } else {
-    unSelectAll();
-  }
-});
-// //全选状态改变
-watch(checked, (val) => {
-  if (val.length == 0) {
-    isSelectAll.value = false;
-  }
-  if (val.length === list.value.length) {
-    isSelectAll.value = true;
-  }
-});
-//全选
-const selectAll = () => {
-  checkboxGroup.value.toggleAll(true);
-};
-//取消全选
-const unSelectAll = () => {
-  checked.value = [];
-};
-//单个删除
-const deleteClick = (id: number) => {
-  currentView.value.deletes([id]);
-};
-//批量删除
-const deletesClick = () => {
-  currentView.value.deletes(checked.value);
-};
-
-//单个收藏
-
-//批量收藏
+const swiper = ref();
 </script>
 
 <style lang="scss" scoped>
@@ -238,11 +48,6 @@ const deletesClick = () => {
   display: flex;
   flex-direction: column;
 }
-
-.list-box {
-  flex-grow: 1;
-  overflow-y: auto;
-}
 .title {
   display: flex;
   width: 130px;
@@ -272,50 +77,4 @@ const deletesClick = () => {
     }
   }
 }
-.checkbox {
-  margin-right: 5px;
-}
-.bottom-cell {
-  border-top: 1px solid #bdbaba;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100vw;
-  height: 50px;
-  box-sizing: border-box;
-  font-size: 13px;
-  font-weight: 400;
-  font-family: PingFang SC;
-  background-color: #ffffff;
-  padding: 10px 15px;
-  .choose {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100px;
-  }
-  .operate {
-    display: flex;
-    justify-content: space-between;
-
-    span {
-      height: 30px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #ffffff;
-      border-radius: 15px;
-
-      &:nth-of-type(1) {
-        background-color: #ff4d53;
-      }
-      &:active {
-        filter: brightness(50%);
-      }
-      &:nth-of-type(2) {
-        background-color: #498ef5;
-      }
-    }
-  }
-}
 </style>