FE-lab-xcx/pages_supplier/views/gasManage/gasManage.vue

<!-- 气瓶管理 -->
<template>
	<view id="register">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="scroll-box">
			<view class="register_li" @click="goPage(item)" v-for="(item,index) in dataList" :key="index">
				<view class="register_li_min" :style="index2===item.configVos.length-1?'border:none':''"
					v-for="(item2,index2) in item.configVos" :key="index2">
					<view class="register_li_min_t">
						<img class="right-img" :src="imagesUrl('supplier/icon_qpgl_qp.png')">
						<text>{{item.airName}}</text>
					</view>
					<view class="register_li_min_b">
						<text>{{item2.configName}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="empty" v-if="pageType==4">
			<img class="for-back-img" :src="imagesUrl('commonality/img_ysrygl_zwsj.png')">
			<view class="text-null">暂无数据</view>
		</view>

		<view class="sub_btn" @click="subBtn()"><img class="right-img"
				:src="imagesUrl('supplier/icon_gysqpgl_xzqp.png')">新增气瓶</view>
	</view>
</template>

<script>
	import {
		bottleList
	} from '@/api/apiDemo/index.js'
	import {
		config
	} from '@/api/request/config.js'
	export default {
		data() {
			return {
				pageType: 0,
				//列表请求参数
				getData: {
					pageNum: 1,
					pageSize: 20,
				},
				dataList: [],
			}
		},
		onLoad(option) {

		},
		onShow() {



		},

		methods: {
			//滚动加载事件
			scrollGet() {
				this.getData.pageNum += 1;
				this.getList();
			},
			subBtn() {
				uni.redirectTo({
					url: '/pages_supplier/views/gasManage/gasManageAdd?status=0'
				});
			},
			goPage(d) {
				uni.redirectTo({
					url: '/pages_supplier/views/gasManage/gasManageDetail?status=1&id=' + d.id
				});
			},
			//获取列表数据
			async getList() {
				let _this = this;
				const {
					data
				} = await bottleList(this.getData)
				if (data.code == 200) {
					let res = data.data.records
					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>
	#register {
		height: 100%;
		width: 100%;
		display flex;
		flex-direction column;

		.empty {
			.for-back-img {
				margin: auto;
			}
			.text-null {
				text-align: center;
				line-height: 200rpx;
				color:#999;
			}
		}

		.scroll-box {
			// flex:1;
			overflow-y scroll;
			padding-top: 30rpx;
			padding-bottom: 180rpx;

			.register_li {
				overflow: hidden;
				background #fff;
				margin: 20rpx;
				border-radius: 20rpx;

				.register_li_min {
					height: auto;
					margin: 20rpx;
					border-bottom: 1px solid #F5F5F5;

					.register_li_min_t {
						display flex;
						align-items center;

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

						>text {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 28rpx;
							margin-left: 14rpx;
						}
					}

					.register_li_min_b {
						margin-top: 24rpx;
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						margin-bottom: 20rpx;

						>text {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 26rpx;
						}
					}
				}
			}
		}

		/* 按钮 */
		.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;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1000;

			>img {
				width: 28rpx;
				height: 28rpx;
				margin-right: 12rpx;
			}
		}

	}
</style>