JingTieXueTang.H5/src/views/home/answer/page-answer-special.vue

<template>
  <div class="contentBody">
    <van-nav-bar title="专项答题" left-arrow @click-left="handleBackFun" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad()"
    >
      <van-cell
        class="vanCell"
        v-for="(item, index) in specialAnswerList"
        :key="index"
      >
        <div slot="default" class="contentItemDiv">
          <div class="contentItemTitle">
            {{ item.name }}
          </div>
          <div class="startAnswerBox" @click="clickAnswer(item)">
            <!-- 此处的div不可以注释，否则样式会变，只需要注释时间即可 -->
            <div>
              {{ formateDatesFun(item.createdTime) }}
            </div>
            <div class="startButtonBox">
              <span class="startText">开始答题</span>
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "page-answer-special",
  components: {},
  data() {
    return {
      specialAnswerList: [],
      loading: false,
      finished: false,
      specialPage: 0,
      specialSize: 10
    };
  },
  created() {
    this.getSpecialAnswerList();
  },
  destroyed() {},
  activated() {},
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      chooseEngneeringWork: state => state.user.chooseEngneeringWork
    })
  },
  methods: {
    getSpecialAnswerList() {
      this.loading = true;
      this.loading = false;
      let params = {
        page: this.specialPage,
        size: this.specialSize,
        engineertypeid: this.chooseEngneeringWork.id,
        userName: this.userInfo.userName
      };
      this.$_http
        .get(this.$_API.GET_JTXT_SPECIAL_QUESTIONS, { params })
        .then(res => {
          this.specialAnswerList = [
            ...this.specialAnswerList,
            ...res.data.content
          ];
          // 不能上拉了就是加载玩了
          this.finished = res.data.last;
          this.specialPage++;
          this.loading = false;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    clickAnswer(item) {
      this.$store.commit("updateAnswerItemStore", {
        field: "answerRecruitId",
        value: "special-questions"
      });
      this.$store.commit("updateAnswerItemStore", {
        field: "questionId",
        value: item.id
      });
      this.$router.push({ name: "answerRecruit" });
    },
    onLoad() {
      this.getSpecialAnswerList();
    },
    // 操作：返回
    handleBackFun() {
      this.$router.back();
    }
  }
};
</script>

<style lang="scss" scoped>
.contentBody {
  background-color: #f0f0f0;
  .contentItemDiv {
    .contentItemTitle {
      font-size: 0.65rem;
      font-weight: bold;
    }
    .startAnswerBox {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #696969;
      margin-top: 0.5rem;
      .startButtonBox {
        border-radius: 2px;
        background-color: #b3a38c;
        padding: 2px 8px;
      }
      .startText {
        color: #fff;
      }
    }
  }
}
</style>