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

<template>
  <div class="cell-container">
    <div class="cell-box" :class="{
      'is-row': isRow,
    }">
      <van-cell title-class="uni-app-fontsize-paragraph" class="cell" :title="item.title" is-link center v-for="(item, index) in classDataLeft" :key="index" :border="false" @click="
  () => {
    goExercise({
      excellIssueName: item.excellIssueName,
      sort: 2,

    });
  }
">
        <template #icon>
          <div class="icon-red">{{ index + 1 }}</div>
        </template>
      </van-cell>

      <van-cell title-class="uni-app-fontsize-paragraph" class="cell" :title="
        item.excellIssueName ||
        item.placeIssueName ||
        item.classIssueName ||
        item.sequeIssueName
      " is-link center v-for="(item, index) in classDataSpecial" :key="index" :border="false" @click="
  () => {
    goExercise({
      excellIssueName: item.excellIssueName,
      sort: 2,
    });
  }
">
        <template #icon>
          <div class="icon-red">{{ '新' }}</div>
        </template>
      </van-cell>
      <!-- <van-cell
        v-if="query.title !== '地方专题'"
        @click="
          () => {
            push({
              name: 'classify',
              query: {
                ...query,
                title: '地方专题',
                path: 'selectDfQuestionInfo',
                sort: 4,
              },
            });
          }
        "
        class="cell"
        title="地方专题"
        is-link
        center
        :border="false"
      >
        <template #icon>
          <div class="icon-blue">{{ "地" }}</div>
        </template>
      </van-cell> -->
    </div>
    <div style="padding-right: 0rpx" class="cell-box">
      <van-cell class="cell" :title="
        item.placeIssueName ||
        item.classIssueName ||
        item.excellIssueName ||
        item.sequeIssueName
      " @click="
  () => {
    goExercise({
      excellIssueName: item.excellIssueName,
    });
  }
" is-link center v-for="(item, index) in classDataRight" :key="index" :border="false">
        <template #icon>
          <div class="icon-red">{{ index + 1 }}</div>
        </template>
      </van-cell>

    </div>
    <div style="height: 40rpx; width: 750rpx"></div>
    <m-classify-tip :content="classifyTip"></m-classify-tip>
    <view class="wxad">
      <ad ad-type="video" :ad-intervals="100" unit-id="adunit-8eb44bbd7e3147d4"></ad>
    </view>
   
  </div>
</template>

<script>
import api from "@/api/index";
import utils from "@/utils/index";
export default {
  data() {
    return {
      isRow: false,
      classifyTip: [
        "软件题库已同步更新至车管所最新,左边的红色必学题,每套题必须学完.",
        "模拟考试能连续5次以上达到96分左右,即可参加考试",
        "如果模拟考试达不到要求,请把右边的选学题也学习一遍",
      ],
      classDataSpecial: [],
      classDataRight: [],
      classDataLeft: [],
      query: {
        vehicle: "",
      },
    };
  },
  onLoad(query) {
    this.query = query;
    this.isRow = this.query.vehicle === "摩托车";
    this.getClassData();
  },
  methods: {
    goExercise(extraQuery) {
      let query = Object.assign({}, this.query);
      if (extraQuery) {
        query = {
          ...query,
          ...extraQuery,
        };
      } else {
      }

      uni.navigateTo({
        url: "/otherPages/exercise/index?" + utils.mapToUrlQuery(query),
      });
    },
    getClassData() {
      api.exam.studentQuestion2InfoGetQuestionColumn({
        subject:'k1',
        model:'cart'
      }).then(res=>{
        this.classDataLeft = res.data;
      })
      // if (this.query.vehicle === "摩托车") {
      //   api.exam
      //     .studentQuestionInfoSelectJxQuestionInfo({
      //       ...this.query,
      //     })
      //     .then((res) => {
      //       this.classDataLeft = res.data;
      //     });
      // } else {
      //   api.exam
      //     .studentQuestionInfoSelectJxQuestionInfo({
      //       ...this.query,
      //       excellIssueName: "选学",
      //     })
      //     .then((res) => {
      //       this.classDataRight = res.data;
      //     });
      //   api.exam
      //     .studentQuestionInfoSelectJxQuestionInfo({
      //       ...this.query,
      //       excellIssueName: "必",
      //     })
      //     .then((res) => {
      //       // res.data.shift();
      //       this.classDataLeft = res.data;
      //       api.exam
      //         .studentQuestionInfoSelectJxQuestionInfo({
      //           ...this.query,
      //           excellIssueName: "新",
      //         })
      //         .then((res) => {
      //           this.classDataSpecial = [...res.data];
      //         });
      //     });
      // }
    },
  },
};

// getTopicClass(query.path as string, {
// 	...query,
// 	excellIssueName: "必",
// }).then(({ data }) => {
// 	// res.data.data.shift();
// 	console.log(data);
// 	classDataLeft.value = data.data;
// 	getTopicClass(query.path as string, {
// 		...query,
// 		excellIssueName: "新增",
// 	}).then(({ data }) => {
// 		// data.data.shift();
// 		classDataLeft.value = [...classDataLeft.value, ...data.data];
// 	});
// 	getTopicClass(query.path as string, {
// 		...query,
// 		excellIssueName: "地方",
// 	}).then(({ data }) => {
// 		// data.data.shift();
// 		classDataLeft.value = [...classDataLeft.value, ...data.data];
// 	});

// });

// getTopicClass(query.path as string, {
// 	...query,
// 	excellIssueName: "选学",
// }).then(({ data }) => {
// 	classDataRight.value = data.data;
// });
</script>

<style lang="scss" scoped>
.cell-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 30rpx 30rpx;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.cell-box {
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;

  .cell {
    width: 334rpx;
    margin-bottom: 30rpx;
    box-shadow: 0px 0px 10rpx rgba(124, 129, 136, 0.2);
  }

  .icon-blue {
    width: 40rpx;
    height: 40rpx;
    background: #498ef5;
    border-radius: 50%;
    font-weight: 500;
    font-family: PingFang SC;
    font-size: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-right: 10rpx;
  }

  .icon-red {
    width: 50rpx;
    height: 50rpx;
    background: red;
    border-radius: 50%;
    font-weight: 500;
    font-family: PingFang SC;
    font-size: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-right: 10rpx;
  }
}

.is-row {
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}
</style>