个人中心-接口测试

qiyunfeng-create

2 天以前 b15a997e95d715c41df3a76aecbf58ec1141ab53

 src/views/personalCenter/myApply.vue

@@ -1,3 +1,318 @@
<!-- 基本信息 -->
<template>
  <div>我的申请</div>
  <div class="personalPage-box">
    <div class="personalPage-title">我的申请</div>
    <div class="personalPage-content">
      <div class="tipsText">
        <div>
          如您在教材试用申请过程中遇到问题，请于工作时间联系我们。<span class="phone">
            QQ号：3565269931 / 咨询电话010-65778403（工作时间：9:00～17:00）
          </span>
        </div>
      </div>
      <div class="stageBtm" v-for="(item, index) in listData" :key="index">
        <div class="infor">
          <div class="infoBox">
            <div>
              审核状态:
              <span
                :class="{
                  reviewstatus: true,
                  reviewstatusRed: item.state == 'Reject',
                  reviewstatusWait: item.state == 'WaitAudit',
                }"
                >{{
                  item.state == "WaitAudit"
                    ? "审核中"
                    : item.state == "Normal"
                    ? "通过"
                    : "拒绝"
                }}</span
              >
            </div>
            <div
              style="color: orangered"
              v-if="item.state == 'Normal' && item.feedBack && !item.isExpiry"
            >
              试用期限：<span>{{ item.updateDate }}</span> --
              <span>{{ item.feedBack.endDate }}</span>
            </div>
            <div style="color: orangered" v-if="item.isExpiry">
              阅读期限：<span>已过期</span>
            </div>
            <div class="time">申请时间：{{ item.updateDate }}</div>
          </div>
          <div
            class="reasonForFailure"
            style="margin: 10px 0"
            v-if="item.state == 'Reject'"
          >
            <div class="centerVertically">未通过原因:</div>
            <div
              style="flex: 1"
              class="ellipsis-3"
              :title="item.feedBack.reason ? item.feedBack.reason : ' - '"
            >
              {{ item.feedBack.reason ? item.feedBack.reason : " - " }}
            </div>
          </div>
        </div>
        <div class="contentInfoBox">
          <div class="listImg">
            <img @click.stop="toDetail(item.content)" :src="item.content.icon" alt="" />
            <div class="name" :title="item.content.title">
              {{ item.content.title }}
            </div>
            <el-button
              size="mini"
              v-if="item.state == 'Normal' && !item.isExpiry"
              @click="read(item.content)"
              >开始阅读</el-button
            >
          </div>
        </div>
      </div>
      <div
        style="min-height: 100px"
        v-if="listData && listData.length > 0"
        v-loading="loading"
      ></div>
    </div>
    <div v-if="listData && listData.length == 0 && !loading">
      <el-empty :image-size="200" description="暂无内容"></el-empty>
    </div>
    <div class="pageBox" v-if="listData && listData.length > 0">
      <!-- 分页 -->
      <el-pagination
        background
        :current-page="paginationData.page - 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="paginationData.limit"
        layout="total, prev, pager, next, slot"
        :total="paginationData.totalCount"
      >
        <div style="display: inline-block">
          <span class="el-pagination__jump"
            >前往
            <div class="el-input el-pagination__editor is-in-pagination">
              <input
                type="number"
                autocomplete="off"
                min="1"
                :max="paginationData.totalPage"
                v-model="inputPage"
                class="el-input__inner"
                @keyup.enter="jumpFun($event)"
              />
            </div>
            页
          </span>
          <el-button type="primary" class="toBtn" @click="jumpFun">确定</el-button>
        </div>
      </el-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted, inject } from "vue";
import { getPublicImage } from "@/assets/js/middleGround/tool";
const MG: any = inject("MG");
const config: any = inject("config");
const crumbStore = inject("crumbStore");
const router = inject("router");
let listData = ref([]);
let loading = ref(false);
let paginationData = reactive({
  page: 1,
  limit: 10,
  totalCount: 0,
  totalPage: 0,
});
let inputPage = ref(1);

const getTextBookList = () => {
  loading.value = true;
  let { page, limit } = paginationData;
  const data = {
    start: limit * page - limit,
    size: limit,
    topicIdOrRefCode: "applyDigitalBook",
    appRefCode: config.appRefCode,
    sort: {
      type: "Desc",
      field: "CreateDate",
    },
  };
  MG.ugc.getTopicMessageList(data).then((res) => {
    loading.value = false;
    res.datas.forEach((item) => {
      item.icon = item.icon ? item.icon : getPublicImage(null);
      item.updateDate = item.updateDate.split("T")[0];
      if (item.feedBack) {
        item.feedBack = JSON.parse(item.feedBack);
        if (item.feedBack.endDate) {
          let times = new Date(item.feedBack.endDate + " 23:59:59").getTime();
          if (times < sessionStorage.currentDate) {
            item.isExpiry = true;
          }
        }
      }
      if (item.content) {
        item.content = JSON.parse(item.content)[0] ?? {};
        if (!item.content?.icon) {
          item.content.icon = require("@/assets/images/default-book-img.png");
        }
      }
    });
    paginationData.totalCount = res.totalSize;
    paginationData.totalPage = Math.ceil(res.totalSize / limit);
    listData.value = res.datas;
  });
};
onMounted(() => {
  getTextBookList();
});

const toDetail = (item: any) => {
  const thisCrumbs = [{ name: "书籍详情", pathName: "digitalTextbooks-textbooksDetail" }];
  MG.store.dispatch("setCrumbs", {
    type: "textbooks",
    data: thisCrumbs,
    callback: (key: string) => {
      MG.router.push({
        name: "digitalTextbooks-textbooksDetail",
        query: {
          id: item.id,
          rootCmsItemId: item.rootCmsItemId,
          crumbsKey: key,
        },
      });
    },
  });
};
const read = (pItem: any) => {
  let token = MG.tool.getCookie(config.tokenKey);
  window.open(config.textReaderUrl + "?bookId=" + pItem.refCode + "&token=" + token);
};
const handleSizeChange = (val: number) => {
  paginationData.limit = val;
  getTextBookList();
};
const handleCurrentChange = (val: number) => {
  paginationData.page = val;
  getTextBookList();
};
const jumpFun = (event: any) => {
  event.target.blur();
  if (inputPage.value <= 0) {
    inputPage.value = 1;
  }
  if (inputPage.value > paginationData.totalPage) {
    inputPage.value = paginationData.totalPage;
  }
  paginationData.page = inputPage.value;
  getTextBookList();
};
</script>
<style scoped lang="less">
.myCarTopPage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom: 1px solid #dcdcdc;
}
.tipsText {
  padding: 10px 15px;
  line-height: 20px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  .phone {
    color: #019e58;
  }
  margin-bottom: 10px;
}

.pageBox {
  background-color: #fff;
  margin-top: 50px;
}
.stageBtm {
  border: 1px solid #dcdcdc;
  .infor {
    border-bottom: 1px solid #dcdcdc;
    padding: 0 15px;
    .infoBox {
      line-height: 45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .time {
        color: #999;
      }
    }
    .reasonForFailure {
      display: flex;
      margin: 10px 0;
      line-height: 1.5;
      .centerVertically {
        width: 80px;
      }
      /* 双行省略 */
      .ellipsis-3 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
  .contentInfoBox {
    padding: 15px;
    box-sizing: border-box;
    .listImg {
      display: inline-block;
      margin-right: 60px;
      width: 120px;
      img {
        width: 120px;
        cursor: pointer;
      }
      .name {
        line-height: 27px;
        font-size: 15px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.reviewstatus {
  color: #0bc266;
}
.reviewstatusWait {
  color: #ffbe00;
}
.reviewstatusRed {
  color: red;
}

.timer {
  color: rgb(240, 67, 67);
}
</style>
<style>
.el-pagination {
  text-align: center;
  margin-top: 15px;
}
</style>