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>
  			<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 ref="listItem" :tabIndex="index" :currentIndex="current"> 
					</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>
</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)
	let current =ref(0);
	// console.log('w',userInfo)
	// 获取后端需要的token认证
	// 使用wx.getStorageSync('userInfo')从本地存储中获取用户令牌信息并将其赋值给user_Token变量。
	const data = ref([])
	onShow(async () => {
		// reloadCurrentList()
		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');
		}
	})
	const paging = ref(null);
	const dataList = ref([])
	// let pageNo = 1;
	// let pageSize = 30;
	const listItem = ref();
	// const queryList = async (pageNo, pageSize) => {
	// 	console.log("执行力”")
	// 	// 此处请求仅为演示，请替换为自己项目中的请求
	// 	await requestApi('index.php/admin/borrow.borrowApp/apply',{
	// 		page:pageNo,
	// 		limit:pageSize
	// 	}).then(res => {
	// 		// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
 //            paging.value.complete(res.data.list.data);
	// 		console.log(res.data.list.data)
 //        }).catch(res => { 
	// 		console.log(res)
	// 		paging.value.complete(false);
	// 	})
	// }
	// 进详情页
	function detail(id) {
		wx.navigateTo({
			url: '/pages/index/detail?data=' + JSON.stringify(id)
		})
	}
	// 进借单申请页
	function application() {
		wx.navigateTo({
			url: '/pages/teacher/application'
		})
	}
	
	const tabs = ref(null); 
	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();
	}
	const reloadCurrentList = () => {
		listItem.value[current.value].reload();
	}
</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>