FE-lab-xcx/pages_student/views/gasBottle/useGasApply/useGasApply.vue

<!--用气申请-->
<template>
	<view id="transportPerson">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="scroll-box">
			<view class="list">
				<view class="list_li" v-for="(item,index) in  dataList" :key="index" @click="goInfo(item)">
					<img class="for-back-img" :src="imagesUrl('commonality/icon_yqsq_sys.png')">
					<text class="list_li_text">{{item.room}}</text>
					<text
						:class="item.remark=='1'?'list_li_text2':(item.remark=='0'?'colorA':(item.remark=='2'?'colorB':''))">{{item.remark=='1'?'有效期：'+item.startTime+'至'+item.endTime+'':(item.remark=='0'?'审核中':(item.remark=='2'?'审核驳回':''))}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="empty" v-if="pageType==4">
			<img class="for-back-img" :src="imagesUrl('commonality/img_ysrygl_zwsj.png')">
			<view>暂无数据</view>
		</view>
		<view class="sub_btn" @click="subBtn()">申请用气</view>
	</view>
</template>

<script>
	import {
		useAgsApplyList
	} from '@/api/apiDemo/index.js'
	export default {

		name: "transportPerson",
		data() {
			return {

				pageType: 0,
				//列表请求参数
				getData: {
					pageNum: 1,
					pageSize: 20,
				},
				dataList: [],
				status: 0,
			}
		},
		onLoad() {

		},
		onShow() {
			//今天页面返回，清除存储气瓶信息
			uni.removeStorageSync('listDetail');
		},

		methods: {
			subBtn() {
				uni.redirectTo({
					url: '/pages_student/useGasApply/useGasApplyAdd?status=0'
				});
			},
			goInfo(d) {
				uni.redirectTo({
					url: '/pages_student/useGasApply/useGasApplyDetail?item=' + encodeURIComponent(JSON.stringify(d))
				});
			},
			//滚动加载事件
			scrollGet() {
				this.getData.pageNum += 1;
				this.getList();
			},
			//查询实验室
			async getList() {
				const {
					data
				} = await useAgsApplyList(this.getData)
				if (data.code == 200) {
					let _this = this;
					let res = data.rows
					if (_this.getData.pageNum == 1) {
						_this.dataList = res;
						if (res.length > 0) {
							_this.pageType = 0;
						} else {
							_this.pageType = 4;
						}
					} else {
						_this.dataList = _this.dataList.concat(res);
					}
				}
			},

		},
		mounted() {
			this.getList();
		},
	}
</script>

<style lang="stylus" scoped>
	#transportPerson {
		height: auto;
		width: 100%;
		flex: 1;
		display flex;
		flex-direction column overflow hidden;
		padding-bottom: 220rpx;

		.scroll-box {
			// flex:1;
			overflow-y scroll;

			.list {
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 20rpx 20rpx 0;
				padding: 0 20rpx;
				box-sizing: border-box;

				.list_li {
					height: 110rpx;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #f5f5f5;

					>img {
						width: 60rpx;
						height: 60rpx;
					}

					>text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 28rpx;
						display: inline-block;

					}

					.list_li_text {
						margin-left: 30rpx;
						width: 150rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 28rpx;
					}

					.list_li_text2 {
						flex: 1;
						text-align: right;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 24rpx;
					}

					.colorA {
						flex: 1;
						text-align: right;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF8A00;
						line-height: 24rpx;
					}

					.colorB {
						flex: 1;
						text-align: right;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF6F6F;
						line-height: 24rpx;
					}

				}
			}
		}

		.empty {
			text-align: center;
			margin-top: 316rpx;

			>img {
				width: 336rpx;
				height: 222rpx;
				margin-left: 208rpx;
			}

			>view {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #E0E0E0;
				line-height: 30rpx;
				margin-top: 48rpx;
			}
		}

		/* 按钮 */
		.sub_btn {
			width: 650rpx;
			height: 100rpx;
			background: #0183FA;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin-left: 50rpx;
			position: fixed;
			bottom: 30rpx;
			z-index: 1000;
		}
	}
</style>