yxy/uniapp/pages/index/index.vue

<template>

	<view class="">
<!-- 		<view class="search">
			<uv-search placeholder="请输入搜索内容" v-model="keyword"></uv-search>
		</view> -->
		<view class="">
		<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
		<z-paging-swiper>
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
			</template>
			<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
			<swiper class="swiper" :current="current" @transition="swiperTransition"
				@animationfinish="swiperAnimationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
					<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
					<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
					<swiper-list-item :tabIndex="index" :currentIndex="current">
						<block v-if="index==0">
							<view class="" style="overflow-y: scroll !important;height: 94vh;">

								<block v-if="data.some(item => item.status==0 || item.status==2 || item.status==6)">
								<block v-for="(items, indexs) in data" :key="indexs">
									<block v-if="items.status==0 || items.status==2 || items.status==6">
										<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==6">
												学院审批</view>
											<view class="jie_card_ztai" v-if="items.status==0">待审批
											</view>
											<view class="jie_card_ztai jie_card_ztai2" v-if="items.status==2 ">待使用
											</view>
										</view>
									</block>
								</block>
								</block>
								<view class=""  v-else>
									<uv-empty text="暂无数据"  icon="https://cdn.uviewui.com/uview/empty/list.png"></uv-empty>
								</view>
								<view style="width: 100%; height: 5vh;">

								</view>
							</view>
						</block>
						<block v-else-if="index==1">
							<view class="" style="overflow-y: scroll !important;height: 90vh;">
								<block v-if="data.some(item => item.status === 3 || item.status === 5)">
								<block v-for="(items, indexs) in data" :key="indexs">
									<block v-if="items.status==3 || items.status==5">
										<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==5">已逾期</view>
											<view class="jie_card_ztai jie_card_ztai2" v-if="items.status==3">使用中</view>
										</view>
									</block>
								</block>
								</block>
								<view class="" v-else>
									<uv-empty text="暂无数据"  icon="https://cdn.uviewui.com/uview/empty/list.png"></uv-empty>
								</view>
								<view style="width: 100%; height: 5vh;">

								</view>
							</view>
						</block>
						<block v-else-if="index==2">
							<view class="" style="overflow-y: scroll !important;height: 90vh;">
								
								<block v-if="data.some(item => item.status==1 || item.status==4 || item.status==7)">
								<block v-for="(items, indexs) in data" :key="indexs">
									<block v-if="items.status==1 || items.status==4 || items.status==7 ">
										<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==1">已驳回</view>
											<view class="jie_card_ztai" v-if="items.status==7">领导驳回</view>
											<view class="jie_card_ztai jie_card_ztai2" v-if="items.status==4">已归还</view>
										</view>
									</block>
								</block>
								</block>
								<view class=""  v-else>
									<uv-empty text="暂无数据"  icon="https://cdn.uviewui.com/uview/empty/list.png"></uv-empty>
								</view>
								<view style="width: 100%; height: 5vh;">
								
								</view>
							</view>
						</block>
					</swiper-list-item>

				</swiper-item>
			</swiper>
		</z-paging-swiper>
		</view>
	</view>
	<view class="">
	        <uni-popup ref="wxpopup" type="bottom">
	            <view class="tihuan_box" style="height: 650rpx;">
	                <view class="" style="text-align: center; margin-bottom: 20rpx; font-size: 35rpx; font-weight: bold;margin-bottom: 30rpx;">
	                    请长按识别二维码关注公众号
	                    <br />
	                    方便信息及时通知
	                </view>
	                <view class="" style="width: 80%; margin: 0 auto;">
	                    <image :show-menu-by-longpress="true" src="../../static/img/erweima.jpg" mode="widthFix" style="width: 100%;"></image>
	                </view>
	            </view>
	        </uni-popup>
	    </view>
		<view class="yiqijie" @click="application">
			<image src="../../static/img/sqi.png" mode="widthFix" style="width: 50rpx;margin-bottom: -12rpx;"></image>
			仪器借用
		</view>
		
			<!-- <web-view v-if="stuts" src="http://yxy.glut.cc/api/xmwechat.Offiaccount/oauth?server=1"></web-view> -->
			<!-- <image :show-menu-by-longpress="true" src="../../static/img/erweima.jpg" mode="widthFix" style="width: 100%;"></image> -->
			<!-- <button @click="wxgz" type="primary" style="background-color: #2d8cf0; margin-bottom: 30rpx;">关注公众号</button> -->
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		requestApi
	} from '@/api/request.js'
	// onShow是uni-app中的一个全局生命周期函数，当页面从后台进入前台显示时会被触发。
	import {
		onShow,
	} from '@dcloudio/uni-app'
	// import {Base64} from 'js-base64'
	let wxpopup = ref(null)
	let userInfo =wx.getStorageSync('userInfos')
	let stuts = ref(false)
	// console.log('w',userInfo)
	// 获取后端需要的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('1',data.value)
		const ress= await requestApi(
		'api/xmwechat.Offiaccount/isBind?server=1',
		{
			id:userInfo.userInfo.id,
		},
		'POST'
		)
		// console.log(ress)
		if(ress.data.isBind=='ture'){
			// console.log(ress)
		}else{
			wxpopup.value.open('top');
		}
	})
	
	// 进详情页
	function detail(id) {
		wx.navigateTo({
			url: '/pages/index/detail?data=' + JSON.stringify(id)
		})
	}
	// 进借单申请页
	function application() {
		wx.navigateTo({
			url: '/pages/teacher/application'
		})
	}
	const paging = ref(null);
	const tabs = ref(null);
	const current = ref(0);
	const tabList = ref(['待审批/待使用', '使用中/逾期', '已驳回/已归还']);

	// tabs通知swiper切换
	const tabsChange = (index) => {
		current.value = index;
	}

	// swiper滑动中
	const swiperTransition = (e) => {
		tabs.value.setDx(e.detail.dx);
	}

	// swiper滑动结束
	const swiperAnimationfinish = (e) => {
		current.value = e.detail.current;
		tabs.value.unlockDx();
	}

</script>

<style lang="less">
	page {
		background-color: #fff;
		overflow: hidden;
	}
	.zp-swiper-super.data-v-bd8ff6a5 {
		background-color: rgb(244, 245, 249);
	}
	.search {
		margin: 20rpx 20rpx 0 20rpx;
	}
	.zp-swiper-container-fixed.data-v-bd8ff6a5 {
		// top: 100rpx !important;
	}

	swiper {
		min-height: 95vh;
		// overflow-y:auto;
	}
	.yiqijie{
    width: 280rpx;
    height: 90rpx;
    background-color: #2d8cf0;
    position: absolute;
    bottom: 80rpx;
    right: 50%;
    transform: translate(50%, 50%);
    border-radius: 50rpx;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
    font-size: 35rpx;
	}
	.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>