yxy/uniapp/pages/teacher/index.vue

<template>
		<view class="teacher_box" >
			<view class=""  v-if="data == 0">
				<uv-empty text="暂无数据"  icon="https://cdn.uviewui.com/uview/empty/list.png"></uv-empty>
			</view>
			<block v-for="(items, indexs) in data" :key="indexs">
				<!-- <block v-if="items.status==0 || items.status==2"> -->
				<view class="jie_card" @click="detail(items.id)">
					<view class="jie_card_title">
						<text class="jie_card_title_text">借单号：{{items.encoding}}</text>
						<text class="jie_tags" v-if="items.purpose==1">教学借单</text>
						<text class="jie_tags jie_tags2" v-if="items.purpose==0">科研借单</text>
					</view>
					<uv-line></uv-line>
					<view class="jie_contend">
						<view class="jie_contend_text">
							<text class="jie_contend_text1">借取人：</text>
							<text class="jie_contend_text2">{{items.username}}</text>
						</view>
						<view class="jie_contend_text">
							<text class="jie_contend_text1">联系电话：</text>
							<text class="jie_contend_text2">{{items.mobile}}</text>
						</view>
						<view class="jie_contend_text">
							<text class="jie_contend_text1">申请时间：</text>
							<text class="jie_contend_text2">{{items.create_time}}</text>
						</view>
					</view>
					<view class="jie_card_ztai" v-if="items.status==0">待审批</view>
					<view class="jie_card_ztai jie_card_ztai2" v-else-if="items.status==2">待使用</view>
					<view class="jie_card_ztai" v-else-if="items.status==1">已驳回</view>
					<view class="jie_card_ztai jie_card_ztai2" v-else-if="items.status==4">已归还</view>
					<view class="jie_card_ztai" v-else-if="items.status==5">已逾期</view>
					<view class="jie_card_ztai jie_card_ztai2" v-else-if="items.status==3">使用中</view>
					<view class="jie_card_ztai" v-else-if="items.status==7">领导驳回</view>
				</view>
				<!-- </block> -->
			</block>
			<view style="width: 100%; height:9vh;">
			
			</view>
		</view>
		<view class="yiqijie" @click="application">
			<image src="../../static/img/sqi.png" mode="widthFix" style="width: 50rpx;margin-bottom: -12rpx;"></image>
			仪器借用
		</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		requestApi
	} from '@/api/request.js'
	// onShow是uni-app中的一个全局生命周期函数，当页面从后台进入前台显示时会被触发。
	import {
		onShow,
		onUnload
	} from '@dcloudio/uni-app'
	// import {Base64} from 'js-base64'
	
	// 获取后端需要的token认证
	// 使用wx.getStorageSync('userInfo')从本地存储中获取用户令牌信息并将其赋值给user_Token变量。
	const data = ref([])
	onShow(async () => {
		wx.showLoading({
		  title: '加载中',
		})
		const res = await requestApi('index.php/admin/borrow.borrowApp/apply')
		wx.hideLoading()
		// console.log(res)
		data.value = res.data.list
		console.log(res )
	})
	// 进详情页
	function detail(id) {
		wx.navigateTo({
			url: '/pages/index/detail?data='+ JSON.stringify(id)
		})
	}
	// 进借单申请页
	function application() {
		wx.navigateTo({
			url: '/pages/teacher/application'
		})
	}

</script>

<style lang="less">
	page {
		background-color: rgb(244, 245, 249);
		overflow: hidden;
	}
	.yiqijie{
		width: 280rpx;
		height: 90rpx;
		background-color:#2d8cf0;
		position: absolute;
		bottom: 230rpx;
		right: 50%;
		transform:translate(50%,50%);
		border-radius: 50rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		font-size: 35rpx;
	}
	.yijiey{
		// float: right;
		width: 90%;
		margin: 0 auto;
	}
	
	.jiedanss{
		float: left;
		width: 73%;
	}
	
	.search {
		height: 45px;
		padding: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
	}

	swiper {
		min-height: 95vh;
		// overflow-y:auto;
	}

	
	.teacher_box{
		height: 90vh;
		overflow-y:auto
		
	}
	.jie_card_ztai {
		width: 120rpx;
		height: 120rpx;
		background-color: #F89898;
		border-radius: 50%;
		line-height: 120rpx;
		float: right;
		color: #fff;
		font-size: 25rpx;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 40rpx;
	}
	.yijiey button{
		height: 44px !important;
	}
	.jie_card_ztai2{
		background-color: #A0CFFF;
	}
	.jie_card {
			width: 94%;
			margin: 30rpx auto;
			height: 270rpx;
			border-radius: 20rpx;
			background-color: #fff;
			// padding: 10rpx 0;
		}
		.tihuan_box {
			width: 84%;
			height: 500rpx;
			padding: 30rpx;
			background-color: #fff;
			margin: 30% auto;
			border-radius: 20rpx;
		}
		.jie_card_title {
	width: 100%;
	    height: 84rpx;
	    line-height: 84rpx;
		}
	
		.jie_swiper {
			// min-height: 1000rpx;
			background-color: rgb(244, 245, 249);
		}
	
		.jie_card_title_text {
			margin-left: 15rpx;
			line-height: center;
			// color: #606266;
			font-size: 28rpx;
		}
	
	.jie_tags {
	    float: right;
	    background-color: #E1F3D8;
	    width: 104rpx;
	    height: 42rpx;
	    margin-top: 22rpx;
	    border-radius: 23rpx 0 0 23rpx;
	    font-size: 25rpx;
	    padding-left: 10rpx;
	    line-height: 40rpx;
	    color: #529B2E;
	}
	
		.jie_tags2 {
			color: #B88230;
			background-color: #FAECD8;
		}
	
		.jie_contend {
			margin-left: 15rpx;
			margin-top: 15rpx;
			float: left;
			font-size: 31rpx;
			line-height: 42rpx;
		}
		.jie_contend_text {
			margin-bottom: 10rpx;
		}
	
		.jie_contend_text1 {
			color: #606266;
		}
	
		.jie_contend_text2 {
			color: #000;
		}
	
	.jie_card_ztai {
	    width: 134rpx;
	    height: 134rpx;
	    background-color: #F89898;
	    border-radius: 50%;
	    line-height: 134rpx;
	    float: right;
	    color: #fff;
	    font-size: 32rpx;
	    text-align: center;
	    margin-top: 25rpx;
	    margin-right: 40rpx;
	}
	
		.jie_card_ztai2 {
			background-color: #A0CFFF;
		}
</style>