JingTieXueTang.H5/src/views/home/answer/page-answer-week.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
        v-for="(item, index) in weekAnswerList"
        :key="index"
      >
        <div slot="default" class="contentItemDiv">
          <div>
            <div class="contentItemTitle">
              {{ item.name}}
            </div>
            <div class="contentItemDescription">
              <!-- <span>{{
                formateDatesFun(item.addedTime)
              }}</span> -->
            </div>
            <div class="startAnswerBox" @click="clickAnswer(item)">
                <div class="startButtonBox">
                    <span class="startText">开始答题</span>
                </div>
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "page-answer-week",
  components: {},
  data() {
    return {
      weekAnswerList: [],
      loading: false,
      finished: false,
      weeklyPage: 0,
      weeklySize: 10
    };
  },
  created() {
    this.getWeekAnswerList();
  },
  destroyed () {
  },
  activated() {
  },
  computed: {
    ...mapState({
      chooseEngneeringWork: state => state.user.chooseEngneeringWork
    })
  },
  methods: {
    getWeekAnswerList() {
      console.log("-------------" + JSON.stringify(this.chooseEngneeringWork));
      this.loading = true;
      let params = {
        page: this.weeklyPage,
        size: this.weeklySize,
        engineertypeid: this.chooseEngneeringWork.id
      };
      this.$_http
        .get(this.$_API.GET_JTXT_WEEKLY_QUESTIONS, { params })
        .then(res => {
          this.weekAnswerList = [...this.weekAnswerList, ...res.data.content];
          console.log("------", +JSON.stringify(this.weekAnswerList));
          this.finished = res.data.last;
          this.weeklyPage++;
          this.loading = false;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    clickAnswer(item) {
      this.$store.commit("updateAnswerItemStore", {
        field: "answerRecruitId",
        value: "weekly-questions"
      });
      this.$store.commit("updateAnswerItemStore", {
        field: "questionId",
        value: item.id
      });
      this.$router.push({ name: "answerRecruit" });
    },
    onLoad() {
      this.getWeekAnswerList();
    },
    // 操作：返回
    handleBackFun() {
      this.$router.back();
    }
  }

};
</script>

<style lang="scss" scoped>
.contentBody {
  background-color: #fff;
  .contentItemDiv {
    .contentItemTitle {
      font-size: 0.65rem;
      font-weight: bold;
    }
    .contentItemDescription {
      margin-top: 0.5rem;
      color: #696969;
      span {
        margin-left: 0.5rem;
      }
    }
   .startAnswerBox {
      width:100%;
      display: flex;
      justify-content: flex-end;
      .startButtonBox{
          border-radius: 2px;
          background-color: #696969;
      }
      .startText{
          margin: 10px 5px;
          color: #fff;
      }
    }

  }
}
</style>