qa-prevention-xgf-app/pages/train_management/sign_information.vue

<template>
	<view class="content">
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in signList" :key="index">
				<view class="sign_item">
					<view class="sign_item_avatar">
            <!-- 用来给图片资源添加前置的统一的访问路径头部: $filePath, 这个将会用在下面的 u-image 组件中的 src 属性中, 示例为: src="$filePath + item.FILEPATH" -->
						<u-image width="200rpx" height="200rpx" model="widthFix" :src="item.useravatarurl" />
					</view>
					<view class="info_body">
						<view class="info_name">
							<text>{{ item.userName }}</text>
						</view>
						<view class="info_raw">
							<text class="content_label">班级名称: </text>
							<text class="content_value">{{ item.name }}</text>
						</view>
						<view class="info_raw">
							<text class="content_label">签到时间: </text>
							<text class="content_value">{{ item.studyStartTime }}</text>
						</view>
						<view class="info_raw">
							<text class="content_label">培训地点: </text>
							<text class="content_value">{{ item.trainingLocation }}</text>
						</view>
						<view class="info_raw flex_layout">
							<text class="content_label">签到状态: </text>
							<text class="tag" :class="studyStateMap[item.studystate].color">{{ studyStateMap[item.studystate].value }}</text>
						</view>
            <view class="info_raw flex_layout">
							<text class="content_label">考试状态: </text>
							<text class="tag" :class="stageexamStateMap[item.stageexamstate].color">{{ stageexamStateMap[item.stageexamstate].value }}</text>
						</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
import { getSignInfo } from '@/api'

export default {
	data() {
		return {
			routeQuery: {},
			pageSize: 10,
			currentPage: 1,
			totalPage: 0,
			signList: [],
      // 签到状态枚举
			studyStateMap: {
        '0': {
          value: '未签到',
          color: 'tag__red'
        },
				'1': {
          value: '已签到',
          color: 'tag__green'
        }
			},
      // 考试状态枚举
      stageexamStateMap: {
        '0': {
          value: '无需考试',
          color: 'tag__orange'
        },
        '1': {
          value: '未签到',
          color: 'tag__red'
        },
        '5': {
          value: '已签到',
          color: 'tag__green'
        },
      },
		}
	},

	onShow() {
		this.resetList()
	},

	onLoad(query) {
		this.routeQuery = query
	},

	methods: {
		async getData() {
			const { classId } = this.routeQuery
			// let resData = await getSignInfo({
			//   showCount: this.pageSize,
			//   currentPage: this.currentPage,
			//   classId
			// });
			// this.signList = [...this.signList, ...resData.page.list]
			// this.totalPage = resData.page.totalPage
			this.signList = [
				{
					userName: '齐天大圣1',
					useravatarurl: 'https://img.alicdn.com/img/i1/131787161/O1CN01z67Qvv22lnCzgPob4_!!0-saturn_solar.jpg_.webp',
					name: '班级名称1班级名称1班级名称1班级名称1',
					studyStartTime: '2025-02-11 09:40',
					trainingLocation: '教三大教室',
					studystate: '0',
          stageexamstate: '0'
				},
			]
			this.totalPage = 2
		},
		resetList() {
			this.pageSize = 10
			this.currentPage = 1
			this.trainList = []
			this.getData()
		},
		scrolltolower() {
			this.currentPage++
			if (this.totalPage >= this.currentPage) this.getData()
		}
	}
}
</script>

<style scoped lang="scss">
.sign_item {
	display: flex;
	gap: 20rpx;
	justify-content: flex-start;
	align-items: center;

	.sign_item_avatar {
		font-size: 0;
	}

	.info_body {
		display: flex;
		flex-direction: column;
		gap: 8rpx;

		.info_name {
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 16rpx;
		}

		.info_raw {
			color: #acafb3;
			font-size: 30rpx;

			.content_label {
				display: inline-block;
				width: 160rpx;
			}

			.content_value {
				display: inline-block;
				vertical-align: bottom;
				padding: 0;
				width: 300rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

    .tag {
      padding: 2rpx 6rpx;
			border-radius: 8rpx;
      color: #fff;
    }

    .tag__orange {
      background: #ff9e43;
    }

		.tag__green {
			background: #5ac725;
		}

    .tag__red {
      background: red;
    }

		.flex_layout {
			display: flex;
		}
	}
}
</style>