v3-lab-xcx/pages_student/gasBottle/gasList/gasList.vue

<!--气瓶列表-->
<template>
    <view id="gasRecycle">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="scroll-box">
		    <view class="for-big-box" v-for="(item,index) in dataList" :key="index">
		        <view class="for-time-p">{{item.location}}</view>
		        <img class="for-back-img" src="@/images/basicsModules/for_min_bg.png">
		        <view class="for-box" @click="goInfo(item2)" v-for="(item2,index2) in item.airGoodsConfigRelationVo" :key="index2">
		        	<view class="for-box_t">{{item2.airName}}-{{item2.configName}}</view>
		        	<view class="for-box_b">
						<img class="for-back-img" src="@/pages_student/images/icon_qpgl_syl.png">
						<text>余量: {{item2.pressure==null?'':item2.pressure}}Mpa</text>
						<img class="for-back-img" src="@/images/basicsModules/icon_wtzg_sj.png">
						<text>最近使用时间: {{item2.useTimeApp==null?'':item2.useTimeApp}}</text>
					</view>
		        </view>
		    </view>
			<view class="get-null-box" v-if="noData">暂无更多数据</view>
		</scroll-view>

	</view>
</template>

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

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

				pageType:0,
				//列表请求参数
				getData:{
				    pageNum:1,
					pageSize:20,
					remark:'login',
				},
				userType:uni.getStorageSync('userType'),

                dataList:[],
				noData:false,
            }
        },
        onLoad() {
			 this.getList();
        },
        onShow() {

        },
		mounted(){


		},
        methods: {
			goInfo(d){
				uni.navigateTo({
				    url:'/pages_student/gasList/gasListDetail?item='+encodeURIComponent(JSON.stringify(d))
				});
			},
			//滚动加载事件
			scrollGet(){
			    this.getData.pageNum += 1;
			    this.getList();
			},
			//获取列表数据
				async getList(){
				   let _this = this;

				    const {data} = await gasList(_this.getData);
				    if(data.code==200){
						let res = data.rows;
						if(res && res.length>0){
							if(_this.getData.pageNum==1){
								_this.dataList=res;
							}else{
								_this.dataList=_this.dataList.concat(res);
							}
						}else{
							_this.noData=true;
						}
				    }
				},

        }
    }
</script>

<style lang="stylus" scoped>
    #gasRecycle {
        height: 100%;
        width: 100%;
		flex :1;
        display flex;
        flex-direction column
        overflow hidden;
     .scroll-box{
        // flex:1;
         overflow-y scroll;
		 margin-top: 20rpx;

         .for-big-box:last-child{
             margin-bottom:180rpx;
         }
         .for-big-box{
             margin:0 20rpx 20rpx;
             overflow hidden
             border-bottom-left-radius :20rpx;
             border-bottom-right-radius :20rpx;
             .for-time-p{
                 background #fff
                 line-height:87rpx;
                 font-size:30rpx;
                 padding:0 22rpx;
                 border-top-left-radius:20rpx;
                 border-top-right-radius:20rpx;
             }
             .for-back-img{
                 height:30rpx;
                 width:710rpx;
             }
			.for-box{
				overflow hidden;
				background: #fff;

				padding: 0 20rpx;
				box-sizing: border-box;
				.for-box_t{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 28rpx;
					margin: 28rpx 0 40rpx 0;
				}
				.for-box_b{
					border-bottom: 1px solid #E0E0E0;
					display: flex;
					>img{
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
					>text{
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 26rpx;
						margin-bottom: 20rpx;
					}
					>text:nth-of-type(1){
						width: 190rpx;
					}
				}
			}
		 }
		 /*暂无数据*/
		 .get-null-box{
			 height:100rpx;
			 line-height:100rpx;
			 color:#999;
			 text-align center
		 }
     }
	}
</style>