project_patrolCheckIn/pages/recordList/recordList.vue

<template>
	<view class="my__order">
		<view class="my__order-content">
			<view class="order_item" v-for="(item,index) in data" :key="index">
				<view class="item-top">
					<view class="top-box-address">
						<u-icon name="map-fill" color="#3D8EFE" size="20"></u-icon>
						<p class="top-box-address-text">{{item.positionName}}</p>
					</view>
					<view class="top-box-time">
						{{item.patrolStartTime}}~{{item.patrolEndTime}}
					</view>
				</view>
				<view class="item-cnetent">
					<view class="order_info">
						<view class="info-1">{{item.signTime}}</view>
						<view class="info-2">签到成功</view>
					</view>
					<view class="order__ok-img">
						<u-avatar :src="item.photo" size="56"></u-avatar>
						<!-- <image :src="item.photo" mode=""></image> -->
					</view>
				</view>
			</view>
		</view>
		<view class="line" style="margin-top: 30px;">
			<u-loadmore loadmoreText="没有更多了" line />
		</view>
		<view class="footer">
		</view>
	</view>
</template>

<script>
	import {
		getRecordList
	} from '@/api/login.js'
	export default {
		onLoad() {
			// this.searchData.pageNumber = 1
			// this.data = []
			// this.fetchData()
		},
		onShow() {
			this.searchData.pageNumber = 1
			this.data = []
			this.fetchData()
		},
		onReachBottom() {
			const {
				total,
				searchData: {
					pageNumber,
					pageSize
				}
			} = this
			if (total <= (pageNumber - 1) * pageSize) {
				return uni.$u.toast('没有更多了')
			}
			if (this.isLoading) return
			this.fetchData()
		},
		data() {
			return {
				isLoading: false,
				searchData: {
					data: {},
					pageNumber: 1, // 页码
					pageSize: 10 // 每页条数
				},
				total: 0,
				data: [],
				src: 'https://img0.baidu.com/it/u=2193304985,460318092&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1715706000&t=0cda76fae9f5a9284e8d2a0d30a92f37'
			};
		},
		methods: {
			// 获取列表
			async fetchData() {
				uni.showLoading({
					title: '加载中...',
					icon: 'loading',
					mask: true
				})
				this.isLoading = true
				try {
					const res = await getRecordList(this.searchData)
					uni.hideLoading()
					if (res.data.records && res.data.records.length > 0) {
						this.data = [...this.data, ...res.data.records]
					}
					this.total = res.data.total
					this.searchData.pageNumber++
				} finally {
					this.isLoading = false
					uni.hideLoading()
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.my__order-content {
		padding: 0 12px;

		.order_item {
			background: #fff;
			padding: 12px 8px;
			margin-top: 14px;

			&:last-child {
				margin-bottom: 40px;
			}

			.item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 7.5px;

				.top-box-address {
					display: flex;
					align-items: center;
					margin-bottom: 10px;
					font-size: 17px;

					.top-box-address-text {
						margin-left: 10px;
					}
				}

				.top-box-time {
					padding: 5px 10px;
					border-radius: 15px;
					background: #F0F8FF;
					height: 20px;
					line-height: 20px;
					font-size: 13px;
				}
			}

			.item-cnetent {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.order_info {
					margin-left: 12px;

					.info-1 {
						font-size: 16px;
						font-weight: 500;
						line-height: 30px;
					}

					.info-2 {
						font-size: 15px;
						color: #5592E8;
						line-height: 22.5px;
					}
				}

				.order__ok-img {
					width: 56px;
					height: 56px;
					border-radius: 50%;
					// overflow: hidden;

					// image {
					// 	width: 100%;
					// 	height: 100%;
					// 	object-fit: contain;
					// }
				}
			}
		}
	}

	.footer {
		height: 40px;
	}
</style>
</view>