demo-library/library-activity/src/views/myLending/myLending.vue

<template>
	<div class="main">
		<div class="top-header">
			<span class="back" @click="toBack"></span>
			<p>我的借阅</p>
		</div>
		<div class="order-main">
			<van-tabs v-model:active="active" swipeable @click-tab="onClickTab">
				<van-tab v-for="item in tabTitle" :title="item.name">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div v-for="(item,i) in borrowingList" :key="i">
              <div class="order-item">
                <div class="list-top">
                  <div class="top-info">
                    <p class="active-name">
                      {{ item.seleceName }}<i></i>
                    </p>
                  </div>
                  <div :class="['order-status', !item.realityTime && 'jy']">{{ !item.realityTime ? '借阅中' : '已归还' }}</div>
                </div>
                <div class="product-cont lending-cont">
                  <div class="product-img">
                    <img :src="$coverUrl+'/demoOnlineSelect/getBookCover.do?id='+item.bookId" alt="" />
                  </div>
                  <div class="product-txt">
                    <div class="product-info">
                      <h4 class="overflow-txt-only">{{ item.bookName }}</h4>
                      <div class="author-date">
                        <p class="author overflow-txt-only">{{ item.author }}</p>
                        <p class="date overflow-txt-only">{{ item.createdDate }}</p>
                      </div>
                      <div class="intro overflow-txt">{{ item.introduce }}</div>
                    </div>
                  </div>
                </div>
                <div class="mylending-info">
                  <p class="lending-date">借阅开始时间：{{ item.startTime }}</p>
                  <p class="lending-date">最后归还时间：{{ item.returnTime }}</p>
                  <p v-if="item.realityTime" class="actual-date">实际归还时间：{{ item.realityTime }}</p>
                  <div :class="['myLending-status', item.returnBook === 1 && 'lq-status', item.returnBook === 2 && 'zs-status', item.returnBook === 3 && 'yq-status']"></div>
                </div>
              </div>            
            </div>
          </van-list>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
// import { Toast } from 'vant'
import { reactive, computed, onMounted, getCurrentInstance, toRefs  } from 'vue'
export default {
	name: 'Order',
	setup() {
		const { proxy } = getCurrentInstance()
		let data = reactive({
			tabCur: 1,
			active: 0,
      borrowingList:[],
			tabTitle: [
				{
					value: '0',
					name: '全部',
				},
				{
					value: '1',
					name: '借阅中',
				},
				{
					value: '2',
					name: '已归还',
				}
			],
      loading: false,
      finished: false,
      pagetTable: {
        current: 1,
        size: 10,
        total: '',
      }
		})
		onMounted(() => {
      data.active = JSON.parse(proxy.$route.query.tabActive)
      if(data.active){
        onLoad()
      }
    })
    let onClickTab = (item) => {
      data.pagetTable.current = 1
      data.loading = true
      data.finished = false		
      data.active = item.name
      data.borrowingList = []
      onLoad()
    }
    let onLoad = () => {
      let timer = setTimeout(() => {
        getMyBorrowing()
        data.pagetTable.current ++
        data.finished && clearTimeout(timer);//清除计时器
      }, 1000);
    }
    let getMyBorrowing = () => {
			let param = {
        openid: 'ocHu-sysUQ6-xb9knAJ5mATqCOJE',
        status: data.active,
        pageNo: data.pagetTable.current,
        pageSize: data.pagetTable.size,
      }
			proxy.$http
				.get(proxy.$API.MYBORROWING, {
					params: param,
				})
				.then((res) => {
          if(res.data !== null && res.data.length !== 0){
            // data.borrowingList = res.data
            // data.pagetTable.total = res.data.page.totalRows
            data.borrowingList.push(...res.data.myBorrowing)
            data.loading = false
            data.finished = true		
            // if (data.list.length >= res.data.page.totalRows) {
            //   data.finished = true
            // }
            data.borrowingList.forEach(item=>{
              if (item.realityTime) {
                if (item.realityTime <= item.returnTime) {
                  item.returnBook = 2
                  console.log('准时1')
                } else {
                  item.returnBook = 3
                  console.log('逾期')
                }
              } else {
                const currentDate = new Date();
                const remainingDays = Math.ceil((new Date(item.returnTime) - currentDate) / (1000 * 3600 * 24));
                console.log(remainingDays)

                if (remainingDays <= 3) {
                  item.returnBook = 1
                  console.log('临时')
                } else {
                  // item.returnBook = 2
                  console.log('借阅中，还未到临期时间')
                }
              }
            })

          }else{
            data.borrowingList = []
            data.finished = true;
          }
				})
				.catch((res) => {
					console.log(res)
				})
		}
		let toBack = () => {
			proxy.$router.go(-1)
		}
		return {
			...toRefs(data),
			toBack,
      getMyBorrowing,
      onClickTab,
      onLoad
		}
	},
}
</script>

<style scoped lang="scss">
.mylending-info{
  position: relative;
  margin-top: .32rem;
  padding: .25rem;
  font-size: .24rem;
  line-height: .4rem;
  background: rgba(241,241,249,0.4);
  border-radius: 0.08rem;
  border: 0.02rem solid #C6C6E2;
  p.actual-date{
    color: #FF3871;
  }
  .myLending-status{
    position: absolute;
    right: .3rem;
    top: .36rem;
    width: 1.22rem;
    height: 1.07rem;
    &.yq-status{
      background: url('@assets/images/mylending-img1.png') no-repeat;
		  background-size: 100% 100%;
    }
    &.zs-status{
      background: url('@assets/images/mylending-img2.png') no-repeat;
		  background-size: 100% 100%;
    }
    &.lq-status{
      background: url('@assets/images/mylending-img3.png') no-repeat;
		  background-size: 100% 100%;
    }
  }
}

</style>