v3-lab-xcx/pages_manage/gasBottle/useRecord/useRecord.vue

<!--气瓶列表-->
<template>
    <view id="gasRecycle">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="scroll-box">
		    <view class="for-big-box" >
		        <view class="for-box" @click="goInfo(item)" v-for="(item,index) in dataList" :key="index">
		        	<view class="for-box_t">{{item.airName}}-{{item.configName}}</view>
		        	<view class="for-box_b">
						<img class="for-back-img" src="@/pages_manage/images/icon_qpgl_syl.png">
						<text>使用量: {{item.pressure==null?'':item.pressure}}Mpa</text>
					</view>
					<view class="for-box_b2">
						<img class="for-back-img" src="@/images/basicsModules/icon_wtzg_sj.png">
						<view>使用时间: {{item.useTimeApp==null?'':item.useTimeApp}}-{{item.backTimeApp==null?'':item.backTimeApp}}</view>
					</view>
		        </view>
		    </view>
		</scroll-view>
	</view>
</template>

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

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

				pageType:0,
				//列表请求参数
				getData:{
				    pageNum:1,
					pageSize:20,
					isCg:0,
					zgStatus:"",
				    getType:true,
				    nullDataType:true,
				},
				userType:uni.getStorageSync('userType'),

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

        },
		mounted(){


		},
        methods: {

			//滚动加载事件
			scrollGet(){
			    if(this.getData.getType){
			        this.getData.pageNum += 1;
			        this.getList();
			    }
			},
			goInfo(d){
				uni.navigateTo({
				    url:'/pages_manage/gasBottle/useRecord/useRecordDetail?item='+encodeURIComponent(JSON.stringify(d))
				});
			},
			//获取列表
			async getList(){
				let _this = this;
				const {data} = await useRecordList({id:this.id})
				if(data.code==200){
					let res=data.rows
					_this.dataList=res
				}
			},

        }
    }
</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-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{
					display: flex;
					>img{
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
					>text{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 26rpx;
						margin-bottom: 20rpx;
					}
					>text:nth-of-type(1){
						width: 190rpx;
					}
				}
				.for-box_b2{
					border-bottom: 1px solid #E0E0E0;
					display: flex;
					>img{
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
					>view{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 26rpx;
						margin-bottom: 20rpx;
					}
					>text:nth-of-type(1){
						width: 190rpx;
					}
				}
			}
		 }
     }
	}
</style>