|
@@ -6,7 +6,21 @@
|
|
|
<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="goWrongReview(item.id)">
|
|
|
+ <van-cell
|
|
|
+ class="cell-box"
|
|
|
+ clickable
|
|
|
+ :title="`${item.id}. ${item.issue}`"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ push({
|
|
|
+ name: 'wrongExercise',
|
|
|
+ query: {
|
|
|
+ ...query,
|
|
|
+ questionId:item.id
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ ">
|
|
|
<template #icon v-if="isChoose">
|
|
|
<van-checkbox :name="item.id" class="checkbox" />
|
|
|
</template>
|
|
@@ -46,220 +60,225 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
- import { CollectionModel } from "@/model/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();
|
|
|
+import { CollectionModel } from "@/model/collection";
|
|
|
+import { RouterBus } from "@/hooks";
|
|
|
|
|
|
- const total = ref(0);
|
|
|
- const pageNum = ref(1);
|
|
|
- const pageSize = ref(20);
|
|
|
- /** 刷新数据 */
|
|
|
- const refreshing = ref(false);
|
|
|
- /**加载中 */
|
|
|
- const loading = ref(false);
|
|
|
- /**数据是否全部加载完成 */
|
|
|
- const finished = ref(false);
|
|
|
+/**
|
|
|
+ * 列表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 deletes = async (ids: number[]) => {
|
|
|
- const res = await collectionModel.deletes(ids, collectionList.value);
|
|
|
- //乐观删除本地数据
|
|
|
- questionList.value = questionList.value.filter((item) => !ids.includes(item.id));
|
|
|
- };
|
|
|
+ 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 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 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;
|
|
|
- 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++;
|
|
|
- };
|
|
|
+ /** 加入收藏 */
|
|
|
+ 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);
|
|
|
+ // }
|
|
|
+ };
|
|
|
|
|
|
- return {
|
|
|
- questionList,
|
|
|
- deletes,
|
|
|
- finished,
|
|
|
- loading,
|
|
|
- onLoadData,
|
|
|
- refreshing,
|
|
|
- addsCollection,
|
|
|
- };
|
|
|
+ /**获取下一页数据 */
|
|
|
+ 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";
|
|
|
+import { ref, watch } from "vue";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+const {
|
|
|
+ router: { push },
|
|
|
+} = new RouterBus();
|
|
|
|
|
|
- const { goWrongReview } = new RouterBus();
|
|
|
-
|
|
|
- interface Props {
|
|
|
- type: "wrong" | "collection";
|
|
|
- }
|
|
|
+const { goWrongReview } = new RouterBus();
|
|
|
+const query = useRoute().query;
|
|
|
+interface Props {
|
|
|
+ type: "wrong" | "collection";
|
|
|
+}
|
|
|
|
|
|
- const props = withDefaults(defineProps<Props>(), {});
|
|
|
+const props = withDefaults(defineProps<Props>(), {});
|
|
|
|
|
|
- //当前视图事务
|
|
|
- const {
|
|
|
- questionList: list, //题目列表
|
|
|
- finished, //是否全部加载完成
|
|
|
- refreshing /** 重载状态 */,
|
|
|
- loading /**显示加载状态 */,
|
|
|
- onLoadData: onLoad /**加载数据 */,
|
|
|
- deletes, //批量删除
|
|
|
- addsCollection, //加入收藏,移除错题
|
|
|
- } = useQuestionList(props.type);
|
|
|
+//当前视图事务
|
|
|
+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 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);
|
|
|
- };
|
|
|
+//单个收藏
|
|
|
+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;
|
|
|
- }
|
|
|
+.listcom-box {
|
|
|
+ height: calc(100vh - 50px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
|
|
|
- .list-box {
|
|
|
- flex-grow: 1;
|
|
|
- overflow-y: auto;
|
|
|
- .cell-box {
|
|
|
- min-height: 70px;
|
|
|
- }
|
|
|
+.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;
|
|
|
+}
|
|
|
+.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: 100vw;
|
|
|
- height: 50px;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 400;
|
|
|
- font-family: PingFang SC;
|
|
|
- background-color: #ffffff;
|
|
|
- padding: 10px 15px;
|
|
|
- .choose {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ .operate {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ span {
|
|
|
+ height: 30px;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: center;
|
|
|
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;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 15px;
|
|
|
|
|
|
- &:nth-of-type(1) {
|
|
|
- background-color: #ff4d53;
|
|
|
- }
|
|
|
- &:active {
|
|
|
- filter: brightness(50%);
|
|
|
- }
|
|
|
- &:nth-of-type(2) {
|
|
|
- background-color: #498ef5;
|
|
|
- }
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ background-color: #ff4d53;
|
|
|
+ }
|
|
|
+ &:active {
|
|
|
+ filter: brightness(50%);
|
|
|
+ }
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ background-color: #498ef5;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|