zc_saas_h5/pages2/subject/collect.vue

<template>
  <view class="safeArea">
    <nav-bar title="收藏集" class="nav"></nav-bar>
    <view class="sceenBox" v-if="!isOther">
      <view :class="['item', { active: sceenType === 1 }]" @click="showSceen(1)"
        >全部题库记录<u-icon
          class="icon"
          :class="sceenType === 1 ? 'animals' : ''"
          name="arrow-down"
        ></u-icon
      ></view>
      <view :class="['item', { active: sceenType === 2 }]" @click="showSceen(2)"
        >全部试卷类型<u-icon
          class="icon"
          :class="sceenType === 2 ? 'animals' : ''"
          name="arrow-down"
        ></u-icon
      ></view>
    </view>
    <view class="sceenModel" v-if="sceenType">
      <view class="sceenModelBg" @click="hideSceen"></view>
      <view class="sceenMain">
        <scroll-view scroll-y="true" style="height: 100%">
          <div class="sceenMainContent">
            <template v-if="sceenType === 1">
              <view
                :class="['item', { active: item.checked }]"
                v-for="(item, index) in scennList1"
                :key="index"
                @click="choseRecord(index)"
                >{{ item.goodsName }}</view
              >
            </template>
            <template v-if="sceenType === 2">
              <view
                :class="['item', { active: item.checked }]"
                v-for="(item, index) in scennList2"
                :key="index"
                @click="choseType(index)"
                >{{ item.paperName }}</view
              >
            </template>
          </div>
        </scroll-view>
      </view>
    </view>
    <view :class="isOther ? 'wrap1' : 'wrap'">
      <view class="wrongTab" v-if="!isOther">
        <view class="item" :class="{ active: type == 1 }" @click="selectType(1)"
          >试卷归类</view
        >
        <view class="item" :class="{ active: type == 2 }" @click="selectType(2)"
          >题型归类</view
        >
      </view>
      <view class="wrongHead">
        <view class="title">收藏统计</view>
        <view class="progress">
          <text>{{ total }}</text>
        </view>
      </view>
      <view class="wrongList" v-if="type == 1">
        <view class="item" v-for="(item, index) in testList.rows" :key="index">
          <view class="title">{{ item.examName }}</view>
          <view class="bt">
            <view class="left"
              >收藏数<text class="num">{{ item.questionNum }}</text></view
            >
            <view class="right">
              <navigator
                hover-class="none"
                :url="
                  '/pages2/subject/collectBank?examId=' +
                  item.examId +
                  '&distinction=1' +
                  '&doMode=' +
                  item.doMode
                "
              >
                <view class="btn">重做</view>
              </navigator>
              <navigator
                hover-class="none"
                :url="
                  '/pages2/subject/collectBank?examId=' +
                  item.examId +
                  '&explain=1' +
                  '&distinction=1' +
                  '&doMode=' +
                  item.doMode
                "
              >
                <view class="btn">解析</view>
              </navigator>
              <!-- <view class="btn">解析</view> -->
            </view>
          </view>
        </view>
      </view>

      <view class="wrongList" v-if="type == 2">
        <view class="item" v-for="(item, index) in typeList.rows" :key="index">
          <view class="title">
            <text v-if="item.type == 1">单选题</text>
            <text v-if="item.type == 2">多选题</text>
            <text v-if="item.type == 3">判断题</text>
            <text v-if="item.type == 4">案例题</text>
            <text v-if="item.type == 5">简答题</text>
          </view>
          <view class="bt">
            <view class="left"
              >收藏数<text class="num">{{ item.num }}</text></view
            >
            <view class="right">
              <navigator
                hover-class="none"
                :url="
                  '/pages2/subject/collectBank?type=' +
                  item.type +
                  '&distinction=2' +
                  '&doMode=' +
                  item.doMode
                "
              >
                <view class="btn">重做</view>
              </navigator>
              <navigator
                hover-class="none"
                :url="
                  '/pages2/subject/collectBank?type=' +
                  item.type +
                  '&explain=1' +
                  '&distinction=2' +
                  '&doMode=' +
                  item.doMode
                "
              >
                <view class="btn">解析</view>
              </navigator>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      sceenType: null,
      scennList1: [{ goodsId: "", goodsName: "全部题库记录", checked: true }],
      scennList2: [{ paperId: "", paperName: "全部试卷类型", checked: true }],
      type: 1,
      total: 0,
      testList: [],
      typeList: [],
      goodsid: "",
      orderGoodsId: "",
      paperid: "",
      isOther: 0,
    };
  },
  onPullDownRefresh() {},
  onLoad(option) {
    this.orderGoodsId = option.orderGoodsId || "";
    this.isOther = option.isOther;
    if (!this.isOther) {
      this.listGoodsUserQuestion();
      this.examaperList();
    }
  },
  onShow() {
    this.getData();
  },
  methods: {
    getData() {
      if (this.type == 1) {
        this.goodsCollectExamList();
      } else if (this.type == 2) {
        this.collectQuestionTypeList();
      }
    },
    examaperList() {
      this.$api.examaperList({}).then((res) => {
        this.scennList2 = [...this.scennList2, ...res.data.rows];
      });
    },

    listGoodsUserQuestion() {
      this.$api.listGoodsUserQuestion({ ...this.doMode }).then((res) => {
        this.scennList1 = [...this.scennList1, ...res.data.rows];
      });
    },
    goodsCollectExamList() {
      this.$api
        .goodsCollectExamList({
          paperId: this.paperid,
          goodsId: this.goodsid,
          orderGoodsId: this.orderGoodsId,
          ...this.doMode,
        })
        .then((res) => {
          this.testList = res.data;
          let total = 0;
          this.testList.rows.forEach((item) => {
            total += item.questionNum;
          });

          this.total = total;
        });
    },
    collectQuestionTypeList() {
      // let params = {}
      // this.paperid && (params['paperId'] = this.paperid)
      // this.orderGoodsId && (params['orderGoodsId'])
      this.$api
        .collectQuestionTypeList({
          paperId: this.paperid,
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          this.typeList = res.data;
          let total = 0;
          this.typeList.rows.forEach((item) => {
            total += item.num;
          });

          this.total = total;
        });
    },
    showSceen(type) {
      if (this.sceenType == type) {
        this.sceenType = null;
        return;
      }
      this.sceenType = type;
    },
    /**
     * @param {Object} tab切换
     */
    selectType(type) {
      this.type = type;
      this.getData();
    },
    hideSceen() {
      this.sceenType = null;
    },
    choseRecord(index) {
      this.sceenType = null;
      this.scennList1.forEach((item, idx) => {
        this.$set(item, "checked", false);
        if (index == idx) {
          this.goodsid = item.goodsId;
          this.$set(item, "checked", true);
        }
      });

      this.getData();
    },
    choseType(index) {
      this.sceenType = null;
      this.scennList2.forEach((item, idx) => {
        this.$set(item, "checked", false);
        if (index == idx) {
          this.paperid = item.paperId;
          this.$set(item, "checked", true);
        }
      });
      this.getData();
    },
  },
  computed: {
    doMode() {
      return this.isOther ? { doMode: 4 } : {};
    },
  },
};
</script>
<style lang="scss">
page {
  background: #eaeef1;
}
</style>
<style scoped lang="scss">
.animals {
  transition: all 0.3s;
  transform: rotate(180deg);
}
.sceenBox {
  width: 100%;
  height: 80rpx;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  position: fixed;
  z-index: 999;
  border-bottom: 1px solid #eee;
  .item {
    flex: 1;
    text-align: center;
    &.active {
      color: #333;
      font-weight: bold;
      .icon {
        transform: rotate(180deg);
      }
    }
  }
}
.sceenModel {
  left: 0;
  bottom: 0;
  top: 168rpx;
  width: 100%;
  position: fixed;
  z-index: 998;
  .sceenModelBg {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
  }
  .sceenMain {
    position: relative;
    z-index: 999;
    background: #fff;
    height: 80%;
    .sceenMainContent {
      display: flex;
      flex-wrap: wrap;
      padding: 8rpx;
      justify-content: space-between;

      .item {
        width: 350rpx;
        background: #f5f5f5;
        border-radius: 16rpx;
        padding: 25rpx 19rpx;
        margin: 8rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #666666;
        &.active {
          background: #007aff;
          color: #fff;
        }
        &:first-child {
          width: 100%;
          text-align: center;
        }
      }
    }
  }
}
.wrap {
  padding: 96rpx 16rpx 16rpx;
}
.wrap1 {
  padding: 16rpx;
}
.wrongHead {
  background: #ffffff;
  border-radius: 16px;
  padding: 24rpx;
  .title {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    .sub {
      font-size: 20rpx;
      font-weight: 500;
      color: #999999;
    }
  }
  .progress {
    width: 180rpx;
    height: 180rpx;
    line-height: 140rpx;
    border: 20rpx solid #eeeeee;
    border-radius: 50%;
    margin: 24rpx auto;
    font-size: 50rpx;
    text-align: center;
  }
}
.wrongTab {
  display: flex;
  margin: 24rpx 0;
  .item {
    width: 144rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    margin-left: 15rpx;
    &.active {
      background: #007aff;
      color: #fff;
    }
  }
}
.wrongList {
  margin-top: 20rpx;
  .item {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 0 30rpx;
    margin-bottom: 16rpx;
    overflow: hidden;
    .title {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin: 40rpx 0 17rpx;
    }
    .bt {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 24rpx;
      .left {
        width: 176rpx;
        height: 40rpx;
        background: #ffffff;
        border: 1px solid #eeeeee;
        border-radius: 16rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        display: flex;
        justify-content: center;
        align-items: center;
        .num {
          font-size: 26rpx;
          font-weight: bold;
          color: #ff3b30;
          margin-left: 16rpx;
        }
      }
      .right {
        display: flex;
        .btn {
          width: 100rpx;
          height: 48rpx;
          background: #ffffff;
          border: 1px solid #007aff;
          border-radius: 16px;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #007aff;
          margin-left: 9rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>