v3-lab-xcx/pages/views/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-if="item.stockAppletList.length>0" v-for="(item,index) in  dataList" :key="index">
				<view class="list_li_title">{{item.doorName}}</view>
				<view class="list_li_li"  v-for="(item2,index2) in  item.stockAppletList" :key="index2">
					<view class="list_li_li_t">{{item2.chemicalName}}</view>
					<view class="list_li_li_b"><text>数量：</text><text>{{item2.chemicalNum}}</text></view>
					<view class="list_li_li_b"><text>CAS号：</text><text>{{item2.casNum}}</text></view>
					<view class="list_li_li_b"><text>类别：</text><text>{{item2.chemicalCategoryName}}</text></view>
				</view>
			</view>
		</view>
		<img class="null-img" v-if="!dataList[0]" src="@/pages/images/null-data-1.png">
	</scroll-view>
  </view>
</template>

<script>
import { config } from '@/api/request/config.js'
import {chemicalAppletGetCabinetByChemical} from '@/pages/api/index.js'
export default {
  name: "rectifyList",
  components: {

  },
  data() {
    return {
	  pageType:0,
	  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 chemicalAppletGetCabinetByChemical({cabinetId:'1759051159650766849'});
		  if(data.code==200){
			  this.$set(this, 'dataList', data.data);
		  }
      }
  }
}
</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>