ajy/code/ajyApp/pages/my/history/history.nvue

<template>
	<view class="page">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<image src="/static/public/backBlack.png" mode="aspectFill" class="back-img" @click="goBack"></image>
			<text class="nav-title">使用记录</text>
			<view class="nav-right"></view>
		</view>

		<!-- 使用记录列表 -->
		<list class="history-list" v-if="list.length > 0">
			<cell v-for="(itm, index) in list" :key="index">
				<view class="history-item">
					<view class="history-top-line">
						<text class="history-name">{{itm.name || '未知设备'}}</text>
						<text class="history-type">{{itm.type || ''}}</text>
					</view>
					<text class="history-time">{{itm.createTime || ''}}</text>
				</view>
			</cell>
		</list>

		<!-- 空状态 -->
		<view class="empty-wrap" v-else>
			<text class="empty-text">暂无使用记录</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 44,
			list: [],
			page: 1
		}
	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
		this.init()
	},
	onPullDownRefresh() {
		this.page = 1
		this.list = []
		this.init()
	},
	onReachBottom() {
		this.page++
		this.init()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		init() {
			// TODO: 后续对接后台接口获取使用记录
			uni.stopPullDownRefresh()
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	background-color: #FFFFFF;
}
.status-bar {
	background-color: #FFFFFF;
}
.nav-bar {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding-left: 54rpx;
	padding-right: 54rpx;
	background-color: #FFFFFF;
}
.back-img {
	width: 50rpx;
	height: 50rpx;
}
.nav-title {
	font-weight: bold;
	font-size: 32rpx;
	color: #545F71;
}
.nav-right {
	width: 50rpx;
	height: 50rpx;
}
/* 使用记录列表 */
.history-list {
	flex: 1;
	margin-left: 38rpx;
	margin-right: 38rpx;
}
.history-item {
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	border-bottom-width: 1px;
	border-bottom-color: #EEF1F4;
	border-bottom-style: solid;
}
.history-top-line {
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 6rpx;
}
.history-name {
	font-size: 32rpx;
	color: #545F71;
	line-height: 44rpx;
}
.history-type {
	font-size: 26rpx;
	color: #9BA5B7;
	line-height: 44rpx;
}
.history-time {
	font-size: 26rpx;
	color: #9BA5B7;
	line-height: 44rpx;
}
/* 空状态 */
.empty-wrap {
	flex: 1;
	align-items: center;
	padding-top: 200rpx;
}
.empty-text {
	font-size: 28rpx;
	color: #9BA5B7;
}
</style>