FE-V2-XCX/pages/pages_patrolInspector/chemicalCatalogue.vue

<!-- 化学品目录 -->
<template>
  <view class="examine">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view class="header">化学品目录清单</view>
		<view class="list">
			<view class="list_li" v-for="(item,index) in  dataList" :key="index" @click="handleClick(item,'edit')">
				<view class="list_li_title">柜门名称</view>
				<view class="list_li_li">
					<view class="list_li_li_t">化学品名称</view>
					<view class="list_li_li_b"><text>数量：</text><text>10</text></view>
					<view class="list_li_li_b"><text>CAS号：</text><text>123-1234-12</text></view>
					<view class="list_li_li_b"><text>属性：</text><text>有毒品</text></view>
				</view>
			</view>
		</view>
		<img class="null-img" v-if="!dataList[0]" src="@/images/null-data-1.png">
	</scroll-view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import {checkPlanList} from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
	  pageType:0,
      //列表请求参数
      getData:{
        pageNum:1,
        pageSize:20,
      },
	  total:0,
	  dataList:[{}],
    }
  },
  onLoad(option) {
	  
		
  },
  onShow() {
      this.getList(); 
  },
  mounted(){
	  
  },
  methods: {
	  //滚动事件
	  scrollGet(){
		  let self=this;
	      if(self.total/self.getData.pageSize<=self.getData.pageNum){
	          console.log('没有更多数据!')
	      }else{
			  setTimeout(function(){
				  self.getData.pageNum += 1;
				  self.getList(); 
			  },1000)
			 
		  }
	  },
	  async getList(){
		  let self = this;
		  const {data} = await checkPlanList(this.getData);
		  if(data.code==200){
			  this.dataList=[...this.dataList,...data.data.records]
			  this.total=data.data.total;
		  }
      }
  }
}
</script>

<style lang="stylus" scoped>
.examine{
	height:100%;
	display flex;
	.null-img{
		display block
		width:276rpx;
		height:321rpx;
		margin:100rpx 0 0 274rpx;
	}
	.info-max-box{
		flex: 1;
		overflow: scroll;
		padding-bottom:60rpx;
		box-sizing: border-box;
	}
	.header{
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 100rpx;
		text-align: center;
	}
	/* 切换按钮 */
	.list{
		position: relative;
		.list_li{
			.list_li_title{
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 100rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
			}
			.list_li_li{
				padding: 0 30rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				.list_li_li_t{
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 100rpx;
					border-bottom:1px dotted #D8D8D8;
				}
				.list_li_li_b{
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					>text:nth-of-type(1){
						font-size: 36rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 100rpx;
					}
					>text:nth-of-type(2){
						font-size: 36rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 100rpx;
					}
				}
			}
		}
	}
}
</style>