tqApp-webView/pagesBase/driverManage/index.vue

<template>
	<view class="page-container">
		<!-- 头部筛选 -->
		<view class="page-head">
		
			<u-row>
				<u-col :span="!hasHostPlat(['dingH5'])?11:12" style="padding: 16rpx 24rpx;">
					<view>
						<view class="input-wapper">
							<u--input
								v-model="params.nickName"
								: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-col :span="1" style="padding: 0;" v-if="$hasPermi('mobile:index:baseMange:driverManage:add') && !hasHostPlat(['dingH5'])">
					<u-icon name="plus-circle-fill" color="#4573FC" size="22" @click="handleAdd"></u-icon>
				</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 {listDriverManage} from '@/api/system/driverManage.js'
import listMixin from '@/utils/mixins/list.js'
import item from './module/item'

export default {
	mixins: [listMixin],
	components: {
		item,
	},
	data() {
		return {
			params: {
				nickName: '',
			},
			
		}
	},
	onLoad() {
		this.handleQuery()
	},
	onShow() {
	
	},
	methods: {
		handleAdd() {
			uni.navigateTo({
				url: `/pagesBase/driverManage/add`
			})
		},
		async handleTableList() {
			this.loadStatus = 'loading'
			let ajaxData = {
				...this.params,
				page: this.page,
				size: this.pageSize
			}
			let {code,data} = await listDriverManage(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);
		height: calc(100% - 76rpx - 20rpx);
		overflow: hidden;
		padding-bottom: 40rpx;
	}
}	

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

::v-deep {

}
</style>