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>
				<van-tab v-for="item in tabTitle" :title="item.name">
					<div v-show="active === 0">
						<div class="order-item">
							<div class="list-top">
								<div class="top-info">
									<p class="active-name">
										你选书，我买单<i></i>
									</p>
								</div>
								<div class="order-status jy">借阅中</div>
							</div>
							<div class="product-cont lending-cont">
								<div class="product-img">
									<img src="" alt="" />
								</div>
								<div class="product-txt">
									<div class="product-info">
										<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4>
										<div class="author-date">
											<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
											<p class="date overflow-txt-only">2023年07月</p>
										</div>
										<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
									</div>
								</div>
							</div>
              <div class="mylending-info">
                <p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p>
                <p class="lending-date">最后归还时间：2023-11-18 10:15:30</p>
              </div>
						</div>

            <div class="order-item">
							<div class="list-top">
								<div class="top-info">
									<p class="active-name">
										你选书，我买单<i></i>
									</p>
								</div>
								<div class="order-status jy">借阅中</div>
							</div>
							<div class="product-cont lending-cont">
								<div class="product-img">
									<img src="" alt="" />
								</div>
								<div class="product-txt">
									<div class="product-info">
										<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4>
										<div class="author-date">
											<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
											<p class="date overflow-txt-only">2023年07月</p>
										</div>
										<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
									</div>
								</div>
							</div>
              <div class="mylending-info">
                <p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p>
                <p class="lending-date">最后归还时间：2023-11-18 10:15:30</p>
                <p class="actual-date">实际归还时间：2023-11-18 10:15:30</p>
                <div class="myLending-status lq-status"></div>
              </div>
						</div>            

            <div class="order-item">
							<div class="list-top">
								<div class="top-info">
									<p class="active-name">
										你选书，我买单<i></i>
									</p>
								</div>
								<div class="order-status">已归还</div>
							</div>
							<div class="product-cont lending-cont">
								<div class="product-img">
									<img src="" alt="" />
								</div>
								<div class="product-txt">
									<div class="product-info">
										<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4>
										<div class="author-date">
											<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
											<p class="date overflow-txt-only">2023年07月</p>
										</div>
										<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
									</div>
								</div>
							</div>
              <div class="mylending-info">
                <p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p>
                <p class="lending-date">最后归还时间：2023-11-18 10:15:30</p>
                <p class="actual-date">实际归还时间：2023-11-18 10:15:30</p>
                <div class="myLending-status zs-status"></div>
              </div>
						</div>

            <div class="order-item">
							<div class="list-top">
								<div class="top-info">
									<p class="active-name">
										你选书，我买单<i></i>
									</p>
								</div>
								<div class="order-status">已归还</div>
							</div>
							<div class="product-cont lending-cont">
								<div class="product-img">
									<img src="" alt="" />
								</div>
								<div class="product-txt">
									<div class="product-info">
										<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4>
										<div class="author-date">
											<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
											<p class="date overflow-txt-only">2023年07月</p>
										</div>
										<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
									</div>
								</div>
							</div>
              <div class="mylending-info">
                <p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p>
                <p class="lending-date">最后归还时间：2023-11-18 10:15:30</p>
                <p class="actual-date">实际归还时间：2023-11-18 10:15:30</p>
                <div class="myLending-status yq-status"></div>
              </div>
						</div>
					</div>

          <div v-show="active === 1">
						<div class="order-item">
							<div class="list-top">
								<div class="top-info">
									<p class="active-name">
										你选书，我买单<i></i>
									</p>
								</div>
								<div class="order-status jy">借阅中</div>
							</div>
							<div class="product-cont lending-cont">
								<div class="product-img">
									<img src="" alt="" />
								</div>
								<div class="product-txt">
									<div class="product-info">
										<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4>
										<div class="author-date">
											<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
											<p class="date overflow-txt-only">2023年07月</p>
										</div>
										<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
									</div>
								</div>
							</div>
              <div class="mylending-info">
                <p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p>
                <p class="lending-date">最后归还时间：2023-11-18 10:15:30</p>
              </div>
						</div>

            <div class="order-item">
							<div class="list-top">
								<div class="top-info">
									<p class="active-name">
										你选书，我买单<i></i>
									</p>
								</div>
								<div class="order-status jy">借阅中</div>
							</div>
							<div class="product-cont lending-cont">
								<div class="product-img">
									<img src="" alt="" />
								</div>
								<div class="product-txt">
									<div class="product-info">
										<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4>
										<div class="author-date">
											<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
											<p class="date overflow-txt-only">2023年07月</p>
										</div>
										<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
									</div>
								</div>
							</div>
              <div class="mylending-info">
                <p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p>
                <p class="lending-date">最后归还时间：2023-11-18 10:15:30</p>
                <p class="actual-date">实际归还时间：2023-11-18 10:15:30</p>
                <div class="myLending-status lq-status"></div>
              </div>
						</div>

            <div class="order-item">
							<div class="list-top">
								<div class="top-info">
									<p class="active-name">
										你选书，我买单<i></i>
									</p>
								</div>
								<div class="order-status jy">借阅中</div>
							</div>
							<div class="product-cont lending-cont">
								<div class="product-img">
									<img src="" alt="" />
								</div>
								<div class="product-txt">
									<div class="product-info">
										<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4>
										<div class="author-date">
											<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
											<p class="date overflow-txt-only">2023年07月</p>
										</div>
										<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
									</div>
								</div>
							</div>
              <div class="mylending-info2">
                <p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p>
                <p class="lending-date">最后归还时间：2023-11-18 10:15:30</p>
                <p class="actual-date">实际归还时间：2023-11-18 10:15:30</p>
                <div class="myLending-status lq-status"></div>
              </div>
						</div>
          </div>

          <div v-show="active === 2">
            <div class="order-item">
							<div class="list-top">
								<div class="top-info">
									<p class="active-name">
										你选书，我买单<i></i>
									</p>
								</div>
								<div class="order-status">已归还</div>
							</div>
							<div class="product-cont lending-cont">
								<div class="product-img">
									<img src="" alt="" />
								</div>
								<div class="product-txt">
									<div class="product-info">
										<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4>
										<div class="author-date">
											<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
											<p class="date overflow-txt-only">2023年07月</p>
										</div>
										<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
									</div>
								</div>
							</div>
              <div class="mylending-info">
                <p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p>
                <p class="lending-date">最后归还时间：2023-11-18 10:15:30</p>
                <p class="actual-date">实际归还时间：2023-11-18 10:15:30</p>
                <div class="myLending-status zs-status"></div>
              </div>
						</div>

            <div class="order-item">
							<div class="list-top">
								<div class="top-info">
									<p class="active-name">
										你选书，我买单<i></i>
									</p>
								</div>
								<div class="order-status">已归还</div>
							</div>
							<div class="product-cont lending-cont">
								<div class="product-img">
									<img src="" alt="" />
								</div>
								<div class="product-txt">
									<div class="product-info">
										<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4>
										<div class="author-date">
											<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
											<p class="date overflow-txt-only">2023年07月</p>
										</div>
										<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
									</div>
								</div>
							</div>
              <div class="mylending-info">
                <p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p>
                <p class="lending-date">最后归还时间：2023-11-18 10:15:30</p>
                <p class="actual-date">实际归还时间：2023-11-18 10:15:30</p>
                <div class="myLending-status yq-status"></div>
              </div>
						</div>

            <div class="order-item">
							<div class="list-top">
								<div class="top-info">
									<p class="active-name">
										你选书，我买单<i></i>
									</p>
								</div>
								<div class="order-status">已归还</div>
							</div>
							<div class="product-cont lending-cont">
								<div class="product-img">
									<img src="" alt="" />
								</div>
								<div class="product-txt">
									<div class="product-info">
										<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4>
										<div class="author-date">
											<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
											<p class="date overflow-txt-only">2023年07月</p>
										</div>
										<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
									</div>
								</div>
							</div>
              <div class="mylending-info2">
                <p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p>
                <p class="lending-date">最后归还时间：2023-11-18 10:15:30</p>
                <p class="actual-date">实际归还时间：2023-11-18 10:15:30</p>
                <div class="myLending-status yq-status"></div>
              </div>
						</div>
          </div>

				</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,
			tabTitle: [
				{
					value: '0',
					name: '全部',
				},
				{
					value: '1',
					name: '借阅中',
				},
				{
					value: '2',
					name: '已归还',
				}
			],
		})
		onMounted(() => {
      console.log(proxy.$route.query.tabActive)
      data.active = JSON.parse(proxy.$route.query.tabActive)
    })
		let toBack = () => {
			proxy.$router.go(-1)
		}
		return {
			...toRefs(data),
			toBack
		}
	},
}
</script>

<style scoped lang="scss">
.mylending-info{
  position: relative;
  padding: .2rem 0 0 0;
  font-size: .24rem;
  line-height: .4rem;
  color: #757676;
  p{
    padding: .04rem 0;
  }
  p.actual-date{
    color: #FF3871;
  }
  .myLending-status{
    position: absolute;
    right: 0;
    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%;
    }
  }
}


.mylending-info2{
  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.07rem;
    height: 1.07rem;
    &.yq-status{
      background: url('@assets/images/mylending-img6.png') no-repeat;
		  background-size: 100% 100%;
    }
    &.zs-status{
      background: url('@assets/images/mylending-img5.png') no-repeat;
		  background-size: 100% 100%;
    }
    &.lq-status{
      background: url('@assets/images/mylending-img4.png') no-repeat;
		  background-size: 100% 100%;
    }
  }
}

</style>