zc_saas_pc/src/pages/person-center/my-examination/index.vue

<template>
  <div class="my-examination">
    <div class="my-examination__header">
      <el-tabs :value="activeName" @tab-click="tabChange">
        <el-tab-pane label="考试预约" name="1"></el-tab-pane>
        <el-tab-pane label="考试成绩和证书" name="2"></el-tab-pane>
      </el-tabs>
    </div>

    <div class="my-examination__body">
      <!-- 考试预约 -->
      <template v-if="activeName == 1">
        <div class="tabs-list">
          <div
            class="tabs-list__item"
            :class="{ 'tabs-list__item--active': tabIndex == index }"
            v-for="(item, index) in examList"
            :key="index"
            @click="examChange(item, index)"
          >
            {{ item.label }} {{ item.count ? `(${item.count})` : "" }}
          </div>
        </div>

        <template v-if="listData.length == 0">
          <div class="no-data" v-if="listData.length == 0">
            您暂无相关考试预约哦~
          </div>
        </template>

        <template v-else>
          <div class="content-list">
            <div
              class="content-list__item"
              v-for="(item, index) in listData"
              :key="index"
            >
              <div class="content-list__item__header">
                <div class="text">
                  <div class="title">{{ item.goodsName }}</div>
                  <div class="desc">
                    {{ $tools.timestampToTime(item.createTime, false) }}
                  </div>
                </div>
                <el-button
                  v-if="isShowFun(item)"
                  type="primary"
                  plain
                  round
                  class="btn"
                  @click="cancel(item)"
                  >取消预约</el-button
                >
              </div>
              <div class="content-list__item__body clearfix">
                <div class="left-box">
                  <div class="title">报考学员信息</div>
                  <div class="desc-list">
                    <div class="desc-list__item">
                      姓名：<span class="note">{{ item.realname }}</span>
                    </div>
                    <div class="desc-list__item">
                      身份证：<span class="note">{{ item.idCard }}</span>
                    </div>
                    <div class="desc-list__item">
                      考试身份：<span class="note">{{
                        item.studentType == 1
                          ? "非补考学员"
                          : item.studentType == 2
                          ? "补考学员"
                          : ""
                      }}</span>
                    </div>
                  </div>
                </div>
                <div class="center-box">
                  <div class="title">考试预约信息</div>
                  <div class="desc-list">
                    <div class="desc-list__item desc-list__item--red">
                      报名开放时间:
                      {{ $tools.timestampToTime(item.applyStartTime) }} ~
                      {{ $tools.timestampToTime(item.applyEndTime) }}
                    </div>
                    <div class="desc-list__item">
                      报考专业：<span class="note" v-if="item.categoryName"
                        >{{ item.categoryName }}专业</span
                      >
                    </div>
                    <div class="desc-list__item">
                      考试地点：<span class="note">{{
                        item.applySiteAddress
                      }}</span>
                    </div>
                    <div class="desc-list__item">
                      考试时间：<span class="note"
                        >{{ $tools.timestampToTime(item.applySiteExamTime) }}
                        {{ item.applySiteStartTime }} ~
                        {{ item.applySiteEndTime }}</span
                      >
                    </div>
                    <div class="desc-list__item">
                      考前培训地点：<span class="note">{{
                        item.applySiteAddressTrain
                      }}</span>
                    </div>
                    <div
                      class="desc-list__item"
                      v-if="
                        item.applySiteExamTrainTime &&
                        item.applySiteStartTrainTime &&
                        item.applySiteEndTrainTime
                      "
                    >
                      考前培训时间：<span class="note"
                        >{{
                          $tools.timestampToTime(item.applySiteExamTrainTime)
                        }}
                        {{ item.applySiteStartTrainTime }} ~
                        {{ item.applySiteEndTrainTime }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              @current-change="currentChange"
              background
              layout="prev, pager, next"
              :total="total"
              :pager-count="5"
              :page-size="param.pageSize"
            >
            </el-pagination>
          </div>
        </template>
      </template>
      <!-- 考试成绩和证书 -->
      <template v-if="activeName == 2">
        <div class="tabs-list">
          <div
            class="tabs-list__item"
            :class="{ 'tabs-list__item--active': resultIndex == index }"
            v-for="(item, index) in resultList"
            :key="index"
            @click="resultChange(item, index)"
          >
            {{ item.label }}
          </div>
        </div>

        <template v-if="listData.length == 0">
          <div class="no-data" v-if="listData.length == 0">
            您暂无相关考试成绩和证书哦~
          </div>
        </template>

        <template v-else>
          <div class="content-list">
            <div
              class="content-list__item"
              v-for="(item, index) in listData"
              :key="index"
            >
              <div class="content-list__item__header">
                <div class="text">
                  <div class="title">{{ item.goodsName }}</div>
                  <div class="desc">
                    {{ $tools.timestampToTime(item.createTime, false) }}
                  </div>
                </div>
                <!-- <div class="btn">取消预约</div> -->
              </div>
              <div class="content-list__item__body clearfix">
                <div class="left-box">
                  <div class="title">报考学员信息</div>
                  <div class="desc-list">
                    <div class="desc-list__item">
                      姓名：<span class="note">{{ item.goodsName }}</span>
                    </div>
                    <div class="desc-list__item">
                      身份证：<span class="note">{{ item.idCard }}</span>
                    </div>
                    <div class="desc-list__item">
                      考试身份：<span class="note">{{
                        item.studentType == 1
                          ? "非补考学员"
                          : item.studentType == 2
                          ? "补考学员"
                          : ""
                      }}</span>
                    </div>
                  </div>
                </div>
                <div class="center-box">
                  <div class="title">考试预约信息</div>
                  <div class="desc-list">
                    <div class="desc-list__item desc-list__item--red">
                      报名开放时间:
                      {{ $tools.timestampToTime(item.applyStartTime) }} ~
                      {{ $tools.timestampToTime(item.applyEndTime) }}
                    </div>
                    <div class="desc-list__item">
                      报考专业：<span class="note">{{
                        item.categoryName
                      }}</span>
                    </div>
                    <div class="desc-list__item">
                      考试地点：<span class="note">{{
                        item.applySiteAddress
                      }}</span>
                    </div>
                    <div class="desc-list__item">
                      考试时间：<span class="note"
                        >{{ $tools.timestampToTime(item.applySiteExamTime) }}
                        {{ item.applySiteStartTime }} ~
                        {{ item.applySiteEndTime }}</span
                      >
                    </div>
                    <div
                      class="desc-list__item"
                      v-if="item.applySiteAddressTrain"
                    >
                      考前培训地点：<span class="note">{{
                        item.applySiteAddressTrain
                      }}</span>
                    </div>
                    <div
                      class="desc-list__item"
                      v-if="
                        item.applySiteExamTrainTime &&
                        item.applySiteStartTrainTime &&
                        item.applySiteEndTrainTime
                      "
                    >
                      考前培训时间：<span class="note">{{
                        $tools.timestampToTime(item.applySiteExamTrainTime) +
                        " " +
                        item.applySiteStartTrainTime +
                        "~" +
                        item.applySiteEndTrainTime
                      }}</span>
                    </div>
                  </div>
                </div>
                <div class="right-box">
                  <div class="title">考试成绩和证书信息</div>
                  <div class="desc-list">
                    <div class="desc-list__item">
                      考试成绩：<span class="note"
                        >{{ item.performance }}分</span
                      >
                    </div>
                    <div class="desc-list__item">
                      考试结果：<span
                        class="note note--success"
                        v-if="item.result === 1"
                        >通过</span
                      >
                      <span class="note note--error" v-if="item.result === 0"
                        >未通过</span
                      >
                    </div>
                    <div class="desc-list__item" v-if="item.result === 1">
                      证书编号：<span class="note">{{
                        item.certificateCode
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              @current-change="currentChange"
              background
              layout="prev, pager, next"
              :total="total"
              :pager-count="5"
              :page-size="param.pageSize"
            >
            </el-pagination>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyExamination",
  data() {
    return {
      subscribeStatus: 1,
      exceedExamExpend: 2,
      result: "",
      tabIndex: 0,
      resultIndex: 0,
      activeName: "1",
      resultList: [
        {
          label: "通过",
          count: 0,
          result: 1,
        },
        {
          label: "未通过",
          count: 0,
          result: 0,
        },
      ],
      examList: [
        {
          label: "已预约",
          count: 0,
          subscribeStatus: 1,
          exceedExamExpend: 2,
        },
        {
          label: "已取消",
          count: 0,
          subscribeStatus: 2,
          exceedExamExpend: "",
        },
        {
          label: "已过期",
          count: 0,
          subscribeStatus: 1,
          exceedExamExpend: 1,
        },
      ],
      total: 0,
      param: {
        pageNum: 1,
        pageSize: 10,
      },
      listData: [],
    };
  },
  mounted() {
    this.getApplylist();
    this.getCount();
  },
  methods: {
    getCount() {
      this.$request
        .getApplylist({
          pageNum: 1,
          pageSize: 1,
          subscribeStatus: 1,
          exceedExamExpend: 2,
        })
        .then((res) => {
          this.examList[0].count = res.total;
        });

      this.$request
        .getApplylist({
          pageNum: 1,
          pageSize: 1,
          subscribeStatus: 2,
          exceedExamExpend: "",
        })
        .then((res) => {
          this.examList[1].count = res.total;
        });

      this.$request
        .getApplylist({
          pageNum: 1,
          pageSize: 1,
          subscribeStatus: 1,
          exceedExamExpend: 1,
        })
        .then((res) => {
          this.examList[2].count = res.total;
        });
    },
    tabChange(e) {
      if (this.activeName == e.name) {
        return;
      }
      this.activeName = e.name;

      if (this.activeName == "1") {
        this.tabIndex = 0;
        this.result = "";
        this.param.pageNum = 1;
        this.subscribeStatus = 1;
        this.exceedExamExpend = 2;
        this.getApplylist();
      } else {
        this.resultIndex = 0;
        this.result = 1;
        this.param.pageNum = 1;
        this.subscribeStatus = "";
        this.exceedExamExpend = "";
        this.getApplylist();
      }
    },
    resultChange(item, index) {
      if (this.resultIndex == index) return;
      this.resultIndex = index;
      this.result = item.result;
      this.param.pageNum = 1;
      this.subscribeStatus = "";
      this.exceedExamExpend = "";
      this.getApplylist();
    },
    examChange(item, index) {
      if (this.tabIndex == index) return;
      this.tabIndex = index;
      this.subscribeStatus = item.subscribeStatus;
      this.exceedExamExpend = item.exceedExamExpend;
      this.param.pageNum = 1;
      this.getApplylist();
    },
    getApplylist() {
      this.$request
        .getApplylist({
          pageNum: this.param.pageNum,
          pageSize: this.param.pageSize,
          subscribeStatus: this.subscribeStatus,
          exceedExamExpend: this.exceedExamExpend,
          result: this.result,
        })
        .then((res) => {
          this.listData = res.rows;
          this.total = res.total;
        });
    },
    isShowFun(item) {
      var timestamp = parseInt(new Date().getTime() / 1000);
      var newDataAge = parseInt(
        new Date(new Date().toLocaleDateString()).getTime() / 1000
      );
      //报名开放时间”过了“结束时间点”，【取消预约】按钮隐藏
      if (item.applyEndTime <= timestamp) {
        return false;
      } else {
        //报名开放时间-进行中，【前培标记：已开通】，【取消预约】按钮隐藏
        if (item.beforeStatus === 1) {
          console.log(1);
          return false;
        } else if (item.examStatus !== 0) {
          console.log(2);
          return false;
        } else if (item.applySiteExamTime < newDataAge) {
          console.log(3);
          return false;
        } else if (item.applySiteExamTime > newDataAge) {
          console.log(4);
          return true;
        } else if (item.applySiteExamTime == newDataAge) {
          console.log(5);
          var hours = new Date().getHours();
          var mins = new Date().getMinutes();
          var arrays = item.applySiteStartTime.split(":").map(Number);
          if (arrays[0] > hours) {
            return true;
          } else if (arrays[0] < hours) {
            return false;
          } else {
            if (arrays[1] <= mins) {
              return false;
            } else {
              return true;
            }
          }
        } else {
          return true;
        }
      }
    },
    cancel(item) {
      const confirmText = [
        "每次考试均有名额限制，",
        "取消预约后，您可能无法再次预约本次考试。",
        "请慎重考虑。",
        "您确定要取消本次考试预约吗？",
      ];
      const newDatas = [];
      const h = this.$createElement;
      for (const i in confirmText) {
        newDatas.push(h("p", null, confirmText[i]));
      }
      this.$confirm(h("div", null, newDatas), "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        closeOnPressEscape: false,
        distinguishCancelAndClose: false,
        showClose: false,
      })
        .then((_) => {
          var bols = this.isShowFun(item);
          console.log(bols);
          if (!bols) {
            this.$message({
              type: "warning",
              message: "当前已无法取消预约",
            });
            return;
          }
          this.$request
            .editApply({
              subscribeId: item.subscribeId,
              subscribeStatus: 2,
            })
            .then((res) => {
              this.$request
                .getApplylist({ subscribeStatus: 1, exceedExamExpend: 2 })
                .then((res) => {
                  this.listData = res.rows;
                  this.getApplylist();
                  this.getCount();
                });
            });
        })
        .catch((_) => {
          console.log(_);
        });
    },

    currentChange(e) {
      this.param.pageNum = e;
      this.getApplylist();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.my-examination {
  &__header {
    /deep/ .el-tabs__header {
      margin-bottom: 0;
    }
  }
  &__body {
    .tabs-list {
      border-bottom: 1px solid #eee;
      font-size: 0;
      &__item {
        cursor: pointer;
        display: inline-block;
        padding: 0 30px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;

        &--active {
          color: #3f8dfd;
        }
      }
    }

    .content-list {
      margin-top: 10px;

      &__item {
        margin-bottom: 24px;
        height: 320px;
        background: #fafbfc;
        border: 1px solid #eeeeee;
        box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.04);
        border-radius: 8px;
        &__header {
          height: 64px;
          display: flex;
          align-items: center;
          padding: 0 14px;
          border-bottom: 1px solid #eee;

          .text {
            flex: 1;
            .title {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
            }

            .desc {
              margin-top: 8px;
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
            }
          }

          .btn {
            width: 122px;
            height: 32px;
            border-radius: 16px;
            padding: 0;
            text-align: center;
            line-height: 32px;
            font-size: 16px;
          }
        }

        &__body {
          .left-box,
          .center-box,
          .right-box {
            float: left;
            width: 300px;
            padding: 0 14px;

            .title {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #3f8dfd;
              padding: 0 14px;
              margin: 14px 0;
              border-left: 2px solid #3f8dfd;
            }

            .desc-list {
              &__item {
                line-height: 28px;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;

                &--red {
                  color: #ff3b30;
                }

                .note {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #666666;

                  &--success {
                    color: #56dc68;
                  }

                  &--error {
                    color: #ff3b30;
                  }
                }
              }
            }
          }

          .center-box {
            width: 500px;
          }

          .right-box {
            width: 300px;
          }
        }
      }
    }

    .no-data {
      text-align: center;
      padding: 50px 0;
      color: #666;
      font-size: 16px;
    }

    .pagination {
      padding: 30px 0;
      text-align: center;
    }
  }
}
</style>