uni-app实现下拉或者点击加载更多

骑猪看日落 2023-07-25 08:39 43阅读 0赞

<template>
    	<view>
    		<view class="background-view">
    			<view class="report-view">
    				<view class="date-view">
    					<text>今日 {
       {time}}</text>
    				</view>
    				<view class="frequency-view">
    					<text>进门：{
       {inPeople}}人次</text>
    					<text>出门：{
       {outPeople}}人次</text>
    				</view>
    			</view>
    		</view>
    		<view class="recording-view">
    			<view :class="['recording', itf==0? 'recordingstyle':'' ]" @click="itf=0"><text>本日出入记录</text></view>
    			<view :class="['recording', itf==1? 'recordingstyle':'' ]" @click="itf=1"><text>本月出入记录</text></view>
    		</view>
    		<view class="personnel" :style="style1">
    			<view class="day-view" v-show="itf==0">
    				
    				<view class="day-list" v-for="(item,index) in dayData" :key='index' v-show="day==0">
    					<view class="Avatar" @click="open" :data-url="item.capture_picture">
    					   <image :src="item.capture_picture"></image>
    					</view>
    					<view class="information">
    						<view class="text"><text>用户名: </text>{
       {item.user_name}}</view>
    						<view class="text"><text>出入方式: </text> {
       {item.entry_mode}}</view>
    						<view class="text"><text>{
       {item.sign_time}} {
       {item.direction}}</text></view>
    					</view>
    				</view>
    				<uni-load-more :status="more1"  v-show="day==0" :contentText="contentText1" @clickLoadMore="click1"></uni-load-more>
    				<view class="center" v-show="day==1">今日还没有数据!</view>
    			</view>
    			<view class="month-view" v-show="itf==1">
    				
    				<view class="month-list" v-for="(item,index) in monthData" :key='index' v-show="month==0">
    					<view class="Avatar" @click="open1" :data-url="item.capture_picture">
    						<image :src="item.capture_picture"></image>
    					</view>
    					<view class="information">
    						<view class="text"><text>用户名: </text>{
       {item.user_name}}</view>
    						<view class="text"><text>出入方式: </text> {
       {item.entry_mode}}</view>
    						<view class="text"><text>{
       {item.sign_time}} {
       {item.direction}}</text></view>
    					</view>
    				</view>
    				<uni-load-more :status="more2" v-show="month==0" :contentText="contentText2" @clickLoadMore="click2"></uni-load-more>
    				<view class="center" v-show="month==1">本月还没有数据!</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	import uniPopup from "@/components/uni-popup/uni-popup.vue"
    	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
    	import socket from 'plus-websocket';
    	var that;
    	var page1 = 1,page2 = 1;
    	let Token = uni.getStorageSync('token');
    	export default {
    		components: {uniPopup,uniLoadMore},
    		data() {
    			return {
    				itf: 0,
    				time: new Date().toISOString().slice(0, 10),
    				dayData: [], //当天出入记录
    				monthData: [], //当月出入记录
    				dayImg:[],
    				monthImg:[],
    				style1:{
    					'height':0 + 'rpx'
    				},
    				day:1,  //当天是否有出入记录
    				month:1, //当月是否有出入记录
    				inPeople:0, //当天进入人数
    				outPeople:0,  //当天出去人数
    				more1:'more',
    				more2:'more',
    				contentText1:{
    					contentdown: "点击加载更多",
    					contentrefresh: "正在加载...",
    					contentnomore: "没有更多数据了",
    				},
    				contentText2:{
    					contentdown: "点击加载更多",
    					contentrefresh: "正在加载...",
    					contentnomore: "没有更多数据了",
    				}
    			}
    		},
    		methods: {
                open(e){
    				uni.hideLoading();
    				uni.previewImage({
    				   urls:that.dayImg,
    				   current:e.currentTarget.dataset.url
    				});
                },
    			open1(e){
    				uni.hideLoading();
    				uni.previewImage({
    				   urls:that.monthImg,
    				   current:e.currentTarget.dataset.url
    				});
    			},
    			// 根据时间戳获取11-18 11:00
    			getTime(e) {
    				var n = e * 1000;
    				var date = new Date(n);
    				var Y = date.getFullYear();
    				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
    				var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    				var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
    				var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
    				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    				return Y + '-' + M + "-" + D + " " + h + ":" + m
    			},
    			// 获取每日数据
    			getDayData(){
    				page1 = 1;
    				that.more1 = 'more';
    				uni.request({
    					url:that.$baseURL + '/access/search',
    					method:'GET',
    					header: {
    						'token': Token,
    						'content-type':'application/x-www-form-urlencoded'
    					},
    					data:{
    						page:1,
    						type:1
    					},
    					success: (res) =>{
    						uni.hideLoading();
    						console.log(res)
    						if(res.data.status === 1){
    							let list = res.data.content.data.record_list;
    							if(list.length < 1){
    								that.day = 1
    							}else{
    								that.day = 0
    							}
    							that.dataFor(list)
    							page1 ++;
    							that.dayData = list;
    						}
    					},
    					fail:(err)=>{
    						setTimeout(function () {
    						    uni.hideLoading();
    						}, 3000);
    					}
    				})
    			},
    			// 获取每月数据
    			getMonthData(){
    				page2 = 1;
    				that.more2 = 'more';
    				uni.request({
    					url:that.$baseURL + '/access/search',
    					method:'GET',
    					header: {
    						'token': Token,
    						'content-type':'application/x-www-form-urlencoded'
    					},
    					data:{
    						page:1,
    						type:2
    					},
    					success: (res) =>{
    						uni.hideLoading();
    						console.log(res);
    						if(res.data.status === 1){
    							let list = res.data.content.data.record_list;
    							if(list.length < 1){
    								that.month = 1
    							}else{
    								that.month = 0
    							}
    							that.dataFor(list)
    							page2 ++;
    							that.monthData = list;
    						}
    					},
    					fail:(err)=>{
    						setTimeout(function () {
    						    uni.hideLoading();
    						}, 3000);
    					}
    				})
    			},
    			// 获取每月更多数据
    			getMonthData1(){
    				if(that.more2 !== 'more'){
    					return false;
    				}
    				that.more2 = 'loading';
    				uni.request({
    					url:that.$baseURL + '/access/search',
    					method:'GET',
    					header: {
    						'token': Token,
    						'content-type':'application/x-www-form-urlencoded'
    					},
    					data:{
    						page:page2,
    						type:2
    					},
    					success: (res) =>{
    						uni.hideLoading();
    						console.log(res);
    						if(res.data.status === 1){
    							let list = res.data.content.data.record_list;
    							that.dataFor(list)
    							if(list.length < 1){
    								if(that.monthData.length == res.data.content.total){
    									that.more2 = 'noMore';
    									return;
    								}else{
    									that.month = 1
    								}
    							}else{
    								that.month = 0
    							}
    							page2 ++;
    							that.monthData = that.monthData.concat(list);
    							that.more2 = 'more';
    						}
    					},
    					fail:(err)=>{
    						setTimeout(function () {
    						    uni.hideLoading();
    						}, 3000);
    					}
    				})
    			},
    			// 获取每日更多数据
    			getDayData1(){
    				if(that.more1 !== 'more'){
    					return false;
    				}
    				that.more1 = 'loading';
    				uni.request({
    					url:that.$baseURL + '/access/search',
    					method:'GET',
    					header: {
    						'token': Token,
    						'content-type':'application/x-www-form-urlencoded'
    					},
    					data:{
    						page:page1,
    						type:1
    					},
    					success: (res) =>{
    						uni.hideLoading();
    						console.log(res)
    						if(res.data.status === 1){
    							let list = res.data.content.data.record_list;
    							that.dataFor(list)
    							if(list.length < 1){
    								if(that.dayData.length == res.data.content.total){
    									that.more1 = 'noMore';
    									return;
    								}else{
    									that.day = 1
    								}
    							}else{
    								that.day = 0
    							}
    							page1 ++;
    							that.dayData = that.dayData.concat(list);
    							that.more1 = 'more';
    						}
    					},
    					fail:(err)=>{
    						setTimeout(function () {
    						    uni.hideLoading();
    						}, 3000);
    					}
    				})
    			},
    			click2(e){
    				that.getMonthData1();
    			},
    			click1(e){
    				that.getDayData1();
    			},
    			dataFor(list){
    				for(var i=0;i<list.length;i++){
    					list[i].sign_time = that.getTime(list[i].sign_time)
    					list[i].capture_picture = 'http://192.168.0.112/v1/image/2/' + list[i].capture_picture
    					if(that.dayImg.length < list.length){
    						that.dayImg.push(list[i].capture_picture)
    					}
    					// 判断出入方式
    					if(list[i].entry_mode == 1){
    						list[i].entry_mode = '刷脸'
    					}else if(list[i].entry_mode == 2){
    						list[i].entry_mode = '二维码'
    					}else if(list[i].entry_mode == 3){
    						list[i].entry_mode = '刷卡'
    					}else if(list[i].entry_mode == 4){
    						list[i].entry_mode = '刷脸+刷卡'
    					}else if(list[i].entry_mode == 5){
    						list[i].entry_mode = '刷身份证'
    					}else{
    						list[i].entry_mode = '刷脸且刷身份证'
    					}
    					// 判断出入方向
    					if(list[i].direction == 0){
    						list[i].direction = '默认'
    					}else if(list[i].direction == 1){
    						list[i].direction = '进门'
    					}else{
    						list[i].direction = '出门'
    					}
    				}
    				return list;
    			}
    			
    		},
    		onLoad() {
    			that = this;
    			uni.getSystemInfo({
    			    success: function (res) {
    					that.style1.height = (res.windowHeight * 2 - 400 - 70 - 30 - 100) + 'rpx'
    			    }
    		    })
    			uni.showLoading({
    			    title: '加载中'
    			});
    		    that.getDayData();
    			that.getMonthData();
    		}
    	}
    </script>
    
    <style scoped>
    	* {
    		box-sizing: border-box;
    	}
    
    	.background-view {
    		width: 750rpx;
    		height: 400rpx;
    	}
    
    	.report-view {
    		width: 100%;
    		height: 100%;
    		padding: 100rpx;
    		background-image: url(../../static/images/background.png);
    		background-size: 100% 100%;
    	}
    
    	.report-view text {
    		color: #FFFFFF;
    	}
    
    	.date-view {
    		width: 100%;
    		height: 50%;
    		font-size: 48rpx;
    	}
    
    	.frequency-view {
    		width: 100%;
    		height: 50%;
    		font-size: 28rpx;
    		display: flex;
    		flex-direction: column;
    	}
    
    	.frequency-view text {
    		margin-top: 20rpx;
    	}
    
    	.recording-view {
    		width: 100%;
    		height: 70rpx;
    		display: flex;
    		justify-content: space-between;
    	}
    
    	.recording-view .recording {
    		width: 50%;
    		line-height: 40rpx;
    		text-align: center;
    		color: #999999;
    		font-size: 30rpx;
    	}
    
    	.personnel {
    		padding: 30rpx 60rpx;
    		box-sizing: border-box;
    		overflow:auto;
    	}
    
    	.day-list,
    	.month-list {
    		border-bottom: 1px solid #E5E5E5;
    		padding: 32rpx 0;
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
    	}
    
    	.Avatar {
    		width: 150rpx;
    		height: 150rpx;
    		border-radius: 20rpx;
    		overflow: hidden;
    	}
    
    	.Avatar image {
    		width: 100%;
    		height: 100%;
    	}
    
    	.information {
    		padding: 5rpx 0 0 0;
    		flex-grow: 1;
    		font-size: 28rpx;
    	}
    
    	.information text {
    		color: #999999;
    	}
    
    	.information view {
    		color: #000;
    		text-indent: 1.5em;
    		line-height: 50rpx;
    	}
    	.recordingstyle {
    		color: #1F9C98 !important;
    		position: relative;
    	}
    	.recordingstyle ::after{
    		content: '';
    		width: 23%;
    		height: 10rpx;
    		border-radius: 50rpx;
    		background: #1F9C98;
    		position: absolute;
    		bottom: 0;
    		left: 50%;
    		transform: translate( -50% , 0% );
    		transition:all 1s;
    	}
    	.center{
    		text-align: center;
    		margin:30rpx auto;
    		font-size:30rpx;
    	}
    	.page{
    		margin:30rpx auto;
    	}
    </style>