tqApp-webView/pagesBase/sysMessage/index.vue

<template>
	<view class="page-container">
		<!-- 头部筛选 -->
		<view class="page-head">
			
			<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>
			
			<u--form label-width="auto" ref="uForm" :model="params" labelAlign="right">
				<u-cell-group customStyle="margin-top: 2px">
					
					<template>
					    <u-cell title="车务类型" :border="true" :isLink="true"
					        @click="$refs.msgTypeListRef.show()">
					        <view slot="value">
					            <u-form-item>
					                <template v-if="params.msgTypeName">
					                    {{ params.msgTypeName }}
									</template>
					                <template v-else></template>
					            </u-form-item>
					        </view>
							
							<view v-if="params.msgTypeName" slot="right-icon"
								@click.stop="() => {
									params.msgType = ''
									params.msgTypeName = ''
									handleQuery()
								}"
							>
							  <u-icon size="16" name="close-circle"></u-icon>
							</view>
					    </u-cell>
						
						<tq-select ref="msgTypeListRef"
							:columns = "msgTypeList"
							@confirm="(e) => {
								params.msgType = e.value
								params.msgTypeName = e.label
								handleQuery()
							}"
						>
						</tq-select>		
					</template>
					
					
					<template>
					    <u-cell title="到期时间" :border="true" :isLink="true"
					        @click="$refs.sortTypeRef.show()">
					        <view slot="value">
					            <u-form-item>
					                <template v-if="params.sortTypeName">
					                    {{ params.sortTypeName }}
									</template>
					                <template v-else></template>
					            </u-form-item>
					        </view>
							
							<view v-if="params.sortTypeName" slot="right-icon"
								@click.stop="() => {
									params.sortType = ''
									params.sortTypeName = ''
									handleQuery()
								}"
							>
							  <u-icon size="16" name="close-circle"></u-icon>
							</view>
					    </u-cell>
						
						<tq-select ref="sortTypeRef"
							:columns = "sortTypeList"
							@confirm="(e) => {
								params.sortType = e.value
								params.sortTypeName = e.label
								handleQuery()
							}"
						>
						</tq-select>		
					</template>
					
				</u-cell-group>
			</u--form>
			
		</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"
							@handleOper="(e) => {
								$refs.operFormRef.show(e)
							}" 
						>
						</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="40" style="margin-top: 0;"/>
					<!-- <u-empty mode="data" v-if="tableList.length === 0" marginTop="200"></u-empty> -->
			</scroll-view>
		</view>
		<operForm ref="operFormRef" @getList="handleQuery"></operForm>
	</view>
</template>

<script>
import {getMobileMsgList} from '@/api/system/sysMessage.js'
import listMixin from '@/utils/mixins/list.js'
import item from './module/item'
import operForm from './module/operForm.vue'

export default {
	mixins: [listMixin],
	components: {
		item,
		operForm,
	},
	data() {
		return {
			params: {
				queryName: '',
				msgType: '',
				msgTypeName: '',
				sortType: 1,
				sortTypeName: '升序',
			},	
			
			msgTypeList: [
				{label: '保险',value: 1},
				{label: '年检',value: 2},
				{label: '保养',value: 3},
				{label: '驾驶证',value: 4},
			],
			sortTypeList: [
				{label: '升序',value: 1},
				{label: '倒序',value: 0},
			],
			
		}
	},
	onLoad() {
		this.handleQuery()
	},
	onShow() {
	
	},
	methods: {
		async handleTableList() {
			
			
			this.loadStatus = 'loading'
			let ajaxData = {
				...this.params,
				page: this.page,
				size: this.pageSize
			}
			
			let {code,data} = await getMobileMsgList(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;
}

.input-wapper {
	padding: 0 0rpx;
	position: relative;
	
	.prefix {
		position: absolute;
		left: 42rpx;
		bottom: 12rpx;
	}
	.suffix {
		position: absolute;
		right: 42rpx;
		bottom: 12rpx;
	}
}


.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% - 240rpx - 20rpx);
		overflow: hidden;
	}
}	


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

::v-deep {
	
	.u-form-item__body {
		padding: 0;
	}
}
</style>