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

<template>
  <div class="contentBody pageAnswerSpecial">
    <van-nav-bar title="专项答题" left-arrow @click-left="handleBackFun" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <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="createdTime" style="margin-top: 0.5rem">
              {{
              item.createdTime
              ? formateDatesFun(item.createdTime)
              : item.createdTime
              }}
            </div>
            <div v-if="!item.available" style="color: #696969">已作答</div>
            <div class="startAnswerBox" @click="clickAnswer(item)">
              <!-- 此处的div不可以注释，否则样式会变，只需要注释时间即可 -->
              <div class="createdTime">
                <!-- {{ formateDatesFun(item.createdTime) }} -->
              </div>
              <div
                :class="{
                startButtonBox: item.available,
                disableButtonBox: !item.available,
              }"
              >
                <span class="startText">开始答题</span>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Toast } from "vant";
export default {
  name: "page-answer-special",
  components: {},
  data() {
    return {
      specialAnswerList: [],
      loading: false,
      finished: false,
      specialPage: 0,
      specialSize: 10,
      specialFlag: true,
      isLoading: false
    };
  },
  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
      };
      if (this.specialFlag) {
        this.specialFlag = false;
        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;
            this.specialFlag = true;
          })
          .catch(() => {
            this.$store.commit("toggleLoading", false);
          });
      }
    },
    clickAnswer(item) {
      if (!item.available) {
        Toast("已经完成答题");
        return;
      }
      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();
    },
    onRefresh() {
      this.specialPage = 0;
      this.getSpecialAnswerList();
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 500);
    }
  }
};
</script>

<style lang="scss">
.pageAnswerSpecial {
  .van-cell__value {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  }
}
</style>
<style lang="scss" scoped>
.contentBody {
  .vanCell {
    background-color: #f4f4f4;
    .contentItemDiv {
      background-color: #fff;
      padding: 0.5rem 0.5rem;
      border-radius: 0.2rem;
      .contentItemTitle {
        font-size: 0.65rem;
        font-weight: bold;
      }
      .createdTime {
        color: #696969;
      }
      .startAnswerBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
        .startButtonBox {
          border-radius: 2px;
          background-color: #1890ff;
          padding: 2px 8px;
          .startText {
            color: #fff;
          }
        }
        .disableButtonBox {
          border-radius: 2px;
          background-color: gray;
          padding: 2px 8px;
          .startText {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>