样式调整

QYF-GitLab1

1 天以前 07b53eedf9771d98485c9d7e310f6126a53af80e

 src/views/personalCenter/myApply.vue

@@ -1,3 +1,333 @@
<!-- 基本信息 -->
<template>
  <div>我的申请</div>
  <div class="personalPage-box">
    <div class="personalPage-title">我的申请</div>
    <div class="personalPage-content">
      <div class="tipsText">
        <div>
          {{ description }}
        </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: flex; align-items: center">
          <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'
import { useRouter } from 'vue-router'
import tool from '@/assets/js/toolClass'
import defaultImg from '@/assets/images/default-book-img.png'
const MG: any = inject('MG')
const config: any = inject('config')
const router = useRouter()
let listData = ref([])
let loading = ref(false)
let paginationData = reactive({
  page: 1,
  limit: 10,
  totalCount: 0,
  totalPage: 0,
})
let inputPage = ref(1)
let description = ref('')

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 = defaultImg
        }
      }
    })
    paginationData.totalCount = res.totalSize
    paginationData.totalPage = Math.ceil(res.totalSize / limit)
    listData.value = res.datas
  })
}

const getType = () => {
  const data = {
    refCodes: ['sampleBook'],
  }
  MG.resource
    .getCmsTypeByRefCode(data)
    .then((res) => {
      if (res?.length) {
        description.value = res[0]?.description
      }
    })
    .catch(() => {
      description.value = ''
    })
}

onMounted(() => {
  getType()
  getTextBookList()
})

const toDetail = (item: any) => {
  router.push({
    path: '/bookdetail',
    query: {
      bookId: item.id,
    },
  })
}
const read = (pItem: any) => {
  // let token = tool.getCookie(config.tokenKey)
  // const url = config.textReaderUrl + '#/home' + '?bookId=' + pItem.id + '&token=' + token
  // debugger
  // window.open(url)
  router.push({
    path: '/bookdetail',
    query: {
      bookId: pItem.id,
    },
  })
}
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 {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.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: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin-right: 60px;
      width: 120px;
      img {
        width: 120px;
        cursor: pointer;
        box-shadow: 0px 0px 20px 1px #ccc;
      }
      .name {
        line-height: 30px;
        font-size: 15px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 5px 0;
        box-sizing: border-box;
      }
    }
  }
}

.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>