tqApp-webView/pagesBase/materialRecord/index.vue

<template>
	<view class="page-container">
		<!-- 头部筛选 -->
		<view class="page-head">
			
			<u-tabs :list="list" 
				:itemStyle="{
					width: '330rpx',
					height: '80rpx'
				}"
        :activeStyle="{
          color:'#4573FC'
        }"
        lineWidth="40"
        lineColor="#4573FC"
				@click="({index}) => {
					current = index
					handleQuery()
				}"
			>
			</u-tabs>
			
		
			<u-row>
				<u-col :span="12" style="padding: 16rpx 24rpx;">
					<view>
						<view class="input-wapper">
							<u--input
								v-model="params.queryName"
								:disabled="false"
								:clearable="true"
								placeholder="请输入物品名称或者申领单号"
								prefixIcon="search"
								shape="circle"
								prefixIconStyle="font-size: 22px;color: #909399"
								inputAlign="center"
								fontSize="28rpx"
								disabledColor="#F2F2F2"
								border="none"
								:customStyle="{
									height: '62rpx',
									padding: '4rpx 28rpx',
									background: '#F2F2F2'
								}"
								@confirm="handleQuery"
							>
							</u--input>
						</view>
					</view>
				</u-col>
			</u-row>
			
		</view>
		<!-- 内容 -->
		<view class="page-body">
			<scroll-view scroll-y style="height: 100%" enable-back-to-top refresher-enabled
				refresher-background="#F6F6F6" :refresher-triggered="refresher" @refresherrefresh="handleRefresher"
				@scrolltolower="handleScrollLower">
					<template v-for="(e,index) in tableList">

						<item :item="e" @getList="handleQuery"
							:key="index"
						>
						</item>
					</template>
					
					<view class="nodata-warp" v-if="!tableList.length">
					  <image :src="$getImages('/assetsMobile/images/no-data.png')" class="nodata-image"></image>
					</view>
					
					<u-loadmore :status="loadStatus" height="30"/>
					<!-- <u-empty mode="data" v-if="tableList.length === 0" marginTop="200"></u-empty> -->
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
import {materialApplyRec} from '@/api/system/material.js'
import listMixin from '@/utils/mixins/list.js'
import item from './module/item'

export default {
	mixins: [listMixin],
	components: {
		item,
	},
	data() {
		return {
			params: {
				queryName: '',
			},
			list: [
				{ name: '领用记录'},
				{ name: '借用记录'},
			],	
			current: 0,
			
		}
	},
	onLoad() {
		this.handleQuery()
	},
	onShow() {
	
	},
	methods: {
		async handleTableList() {
			
			this.loadStatus = 'loading'
			let ajaxData = {
				...this.params,
				outflowType: this.current==0?2:1,
				page: this.page,
				size: this.pageSize
			}
			let {code,data} = await materialApplyRec(ajaxData)
			
			if (code == "0" ) {
				
				data.list.map((e) => {
					this.tableList.push({
					    ...e,
					});
				})
				
				this.loadStatus = 'loadmore'
				this.total = data.total;
				if (this.page * this.pageSize >= this.total)  {
					this.loadStatus = 'nomore'
				}
				this.refresher = false;
			}
		},
		
	}
}
</script>

<style lang="scss" scoped>

.disflex {
	display: flex;
	justify-content: center;
	align-items: center;
}

.page-container {
	font-size: 28rpx;
	min-height: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	.page-head {
		background: #fff;
	}
	.page-body {
		width: 100%;
		height: calc(100% - 146rpx - 20rpx);
		overflow: hidden;
	}
}	


.nodata-warp{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  .nodata-image{
    width: 218rpx;
    height: 150rpx;
  }
}

::v-deep {

}
</style>