|
|
@@ -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>
|
