nbjk-xcx/src/otherPages/collection/index.vue

<template>
  <div class="collection-box">
    <div>
      <img class="collectionHeader" mode="widthFix" :src="collectionHeader" />
    </div>
    <div class="choose">
      <div class="choose-img" @click="goExercise('wrong')">
        <span class="choose-text1"> 做错题 </span>
        <span class="choose-text2"> 共 {{ wrongListCount }} 题 </span>
        <image mode="widthFix" class="bg" :src="wrongBg" />
        <image mode="widthFix" class="goArrow" :src="goArrow" />
        <view
          :hover-stop-propagation="true"
          data-type="wrong"
          @touchend.stop="clearTopics('wrong')"
          style="color: #498ef5"
          class="clear"
        >
          清空错题
        </view>
      </div>
      <div class="choose-img" @click="goExercise('collect')">
        <span class="choose-text1">收藏题</span>
        <span class="choose-text2"> 共 {{ collectionListCount }} 题 </span>
        <image mode="widthFix" class="bg" :src="collectionBg" />
        <image mode="widthFix" class="goArrow" :src="goArrow" />
        <view
          :hover-stop-propagation="true"
          data-type="collect"
          @touchend.stop="clearTopics('collect')"
          style="color: #01c18d"
          class="clear"
        >
          清空收藏
        </view>
      </div>
    </div>
    <div class="bottom">
      <image mode="widthFix" :src="collectionBottomBg" />
    </div>
    <!-- <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>
import goArrow from "@/assets/img/goArrow.png";
import api from "@/api/index";
import utils from "@/utils/index";
export default {
  data() {
    return {
      wrongBg:
        "https://ct.zzxcx.net/ctjk/mp-wx/collection/wrongBg.png",
      collectionBottomBg:
        "https://ct.zzxcx.net/ctjk/mp-wx/collection/collectionBottomBg.png",
      goArrow,
      collectionBg:
        "https://ct.zzxcx.net/ctjk/mp-wx/collection/collectionBg.png",
      collectionHeader:
        "https://ct.zzxcx.net/ctjk/mp-wx/collection/collectionHeader.png",
      query: {
        questionIds: "",
      },
      gsMap: {
        xc: "小车",
        hc: "货车",
        mtc: "摩托车",
        kc: "客车",
      },
      wrongList: [],
      wrongListCount: 1,
      collectionList: [],
      collectionListCount: 1,
    };
  },
  onLoad(query) {
    this.query = query;
    api.exam
      .studentQuestionWrongWrongCountByUser({
        carType: this.gsMap[query.gs],
        km: query.subject === "1" ? "科目一" : "科目四",
        pageNum: 1,
        pageSize: 10000,
      })
      .then((res) => {
        this.wrongListCount = res.data;
      });
    api.exam
      .studentQuestionCollectionCollectionCountByUser({
        carType: this.gsMap[query.gs],
        km: query.subject === "1" ? "科目一" : "科目四",
        pageNum: 1,
        pageSize: 10000,
      })
      .then((res) => {
        this.collectionListCount = res.data;
      });
  },
  methods: {
    goExercise(type) {
      let query = Object.assign({}, this.query);
      if (type == "wrong" && this.wrongListCount == 0) {
        uni.showToast({
          title: "没有题目了",
          icon: "none",
        });
        return;
      }
      if (type == "collect" && this.collectionListCount == 0) {
        uni.showToast({
          title: "没有题目了",
          icon: "none",
        });
        return;
      }

      if (type == "wrong") {
        uni.navigateTo({
          url: "/otherPages/exerciseWrong/index?" + utils.mapToUrlQuery(query),
        });
      }
      if (type === "collect") {
        uni.navigateTo({
          url:
            "/otherPages/exerciseCollect/index?" + utils.mapToUrlQuery(query),
        });
      }
    },
    clearTopics(type) {
      let that = this;
      if (type === "wrong") {
        uni.showModal({
          title: "是否清空错题",
          success(res) {
            if (res.confirm) {
              api.exam
                .studentQuestionWrongCancelAll({
                  carType: that.gsMap[that.query.gs],
                  km: that.query.subject === "1" ? "科目一" : "科目四",
                })
                .then((res) => {
                  api.exam
                    .studentQuestionWrongWrongCountByUser({
                      carType: that.gsMap[that.query.gs],
                      km: that.query.subject === "1" ? "科目一" : "科目四",
                      pageNum: 1,
                      pageSize: 10000,
                    })
                    .then((res) => {
                      that.wrongListCount = res.data;
                    });
                });
            }
          },
        });
      } else if (type === "collect") {
        uni.showModal({
          title: "是否清空收藏题",
          success(res) {
            if (res.confirm) {
              api.exam
                .studentQuestionCollectionCancelAll({
                  carType: that.gsMap[that.query.gs],
                  km: that.query.subject === "1" ? "科目一" : "科目四",
                })
                .then((res) => {
                  api.exam
                    .studentQuestionCollectionCollectionCountByUser({
                      carType:  that.gsMap[that.query.gs],
                      km: that.query.subject === "1" ? "科目一" : "科目四",
                      pageNum: 1,
                      pageSize: 10000,
                    })
                    .then((res) => {
                      that.collectionListCount = res.data;
                    });
                });
            }
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom {
  bottom: 0;
  image {
    width: 100%;
  }
}
.choose {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: space-between;
  align-items: space-between;
  flex-wrap: wrap;
  transform: translate(0%, -8%);

  .choose-img {
    width: 690rpx;
    position: relative;
    margin-bottom: 25rpx;
    .bg {
      width: 690rpx;
    }
    .clear {
      background: #fff;
      border-radius: 30rpx;
      position: absolute;
      bottom: 40rpx;
      width: 200rpx;
      height: 60rpx;
      left: 40rpx;
      bottom: 40rpx;
      border: 0;
      font-size: 26rpx;
      line-height: 60rpx;
      text-align: center;
    }
    .goArrow {
      position: absolute;
      top: 64rpx;
      right: 40rpx;
      width: 146rpx;
    }
    .choose-text1 {
      position: absolute;
      font-size: 50rpx;
      color: #fff;
      left: 40rpx;
      top: 40rpx;
    }
    .choose-text2 {
      position: absolute;
      top: 112rpx;
      left: 44rpx;
      color: #fff;
    }
    img {
      width: 100%;
    }
  }
}
.collectionHeader {
  width: 100%;
}
.collection-box {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>