zhgdyunapp/pages/projectEnd/visitorsManage/visitorsManage.vue

<template>
	<view class="projectList">
		<view class="" style="position: fixed; top: 0; left: 0; width: 100%; z-index: 10;background-color: #f4f5fd;">
			<headers class="fixedheader" :themeType="true" :showBack="true">
				<view class="headerName">
					访客管理
				</view>
			</headers>
			<input class="uni-input" name="searchName" v-model="search" placeholder="请搜索访客姓名" @input="handleInput" />
		</view>
		<view v-if="dataList.length > 0" style="padding-top: 90px;">
			<view class="visitors" @click="jobMaterials(item.id)" v-for="item in dataList" :key="item.id">
				<view class="ukashList-what">
					<span>访客姓名: {{item.visitName}}</span>
					<span :class="['ukashList-look',item.isSuccess === 1 ? 'green' : 'red']">{{item.isSuccess===1?'预约成功':'预约失败'}}</span>
				</view>
				<view class="ukashList-time">访客身份证号: {{item.idCard}}</view>
				<view class="ukashList-time">预约人姓名: {{ item.appointmentName }}</view>
				<view class="ukashList-time">预约开始时间: {{ item.beginTime }}</view>
				<view class="ukashList-what" style="font-size: 12px;color: #b9bbc9;">
					<span>预约结束时间: {{ item.endTime }}</span>
					<span :class="['ukashList-look',item.isEnable === 1 ? 'blue' : 'grey']" v-if="item.isSuccess === 1">{{ item.isEnable === 1 ? '预约有效' : '预约已失效' }}</span>
				</view>
			</view>
		</view>
		<view class="no-data" v-else>
			<image class="img" src="/static/noData.png"></image>
			<text class="txt">暂无数据</text>
		</view>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	import headers from '../../../components/headers/headers.vue'

	export default {
		data() {
			return {
				search: '',
				pageNo: 1,
				pageSize: 10,
				isLoadMore: false,
				dataList: [],
				state: 1,
				isBrowsing : 0
			}
		},
		onShow() {
			this.dataList = []
			this.queryList()
		},
		onReachBottom() {
			console.log(99999);
			if (!this.isLoadMore) {
				this.pageNo += 1
				this.isLoadMore = true
				this.queryList()
			}
		},
		onPullDownRefresh() {
			console.log(222);
			this.pageNo += 1
			this.dataList = []
			this.queryList()
		},
		methods: {
			queryList(name = null) {
				let data = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					visitName: name ? name : null
				}
				let _this = this
				this.sendRequest({
					url: 'xmgl/xzVisitorManageRecord/page',
					method: 'post',
					data: data,
					success: res => {
						console.log(res);
						this.dataList = this.dataList.concat(res.result.records)
						// this.dataList = [...this.dataList,...res.result.records]
						if (res.result.records.length < this.pageSize) {
							//判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						} else {
							this.isLoadMore = false
							// that.loadStatus='more'
						}
						uni.stopPullDownRefresh()
						// console.log(res.result)
					}
				})
			},
			jobMaterials(id) {
				uni.navigateTo({
					url: './visitorsDetails?itemS=' + id
				})
			},
			handleInput(e) {
				console.log(e);
				this.dataList = []
				let data = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					visitName: e.detail.value ? e.detail.value : null
				}
				let _this = this
				this.sendRequest({
					url: 'xmgl/xzVisitorManageRecord/page',
					method: 'post',
					data: data,
					success: res => {
						console.log(res);
						this.dataList = this.dataList.concat(res.result.records)
						if (res.result.records.length < this.pageSize) {
							//判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						} else {
							this.isLoadMore = false
							// that.loadStatus='more'
						}
						uni.stopPullDownRefresh()
						// console.log(res.result)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.projectList {
		min-height: 100%;
		background: #f4f5fd;

		.uni-input {
			border-radius: 10px;
			margin: 10px 10px;
			background-color: #e6e7ef;
			height: 35px;
			line-height: 30px;
			padding: 0 20px;
			font-size: 14px;
		}

		.visitors {
			height: 150px;
			background-color: #fff;
			border-radius: 5px;
			margin: 10px;

			.ukashList-what {
				display: flex;
				justify-content: space-between;
				margin: 0 20px;
				padding-top: 10px;

				.ukashList-look {
					// background-color: #5081f7;
					border-radius: 10px;
					padding: 0 4px 2px 4px;
					font-size: 12px;
					text-align: center;
					color: #fff;
				}
			}

			.ukashList-time {
				margin-top: 10px;
				margin-left: 20px;
				font-size: 12px;
				color: #b9bbc9;
			}
		}



		.no-data {
			text-align: center;

			.img {
				display: block;
				height: 200rpx;
				width: 200rpx;
				margin: 0 auto;
				margin-top: 60rpx;
				margin-bottom: 60rpx;
			}

			.txt {
				color: #C0C4CC;
			}
		}
	}

	.green {
		background-color: #10b12a;
	}

	.blue {
		background-color: #5081f7;
		
	}

	.red {
		background-color: #eb3b43;
	}

	.grey {
		background-color: #a3a5b0;
	}
</style>