<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.FILEPATH" /> </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.className }}</text> </view> <view class="info_raw"> <text class="content_label">签到时间: </text> <text class="content_value">{{ item.signTime }}</text> </view> <view class="info_raw"> <text class="content_label">培训地点: </text> <text class="content_value">{{ item.train }}</text> </view> <view class="info_raw flex_layout"> <text class="content_label">签到状态: </text> <text class="tag_flag">{{ handleCalcSignStatus(item.trainStatus) }}</text> </view> </view> </view> </u-list-item> </u-list> </view> </template> <script> export default { data() { return { pageSize: 10, currentPage: 1, totalPage: 0, signList: [], signStatusMap: { 0: '认证签到', 1: '考试签到' } } }, onShow() { this.resetList() }, methods: { async getData() { // let resData = await getCertificateInformationList({ // showCount: this.pageSize, // currentPage: this.currentPage, // }); this.signList = [ { userName: '齐天大圣1', FILEPATH: 'https://img.alicdn.com/img/i1/131787161/O1CN01z67Qvv22lnCzgPob4_!!0-saturn_solar.jpg_.webp', className: '班级名称1班级名称1班级名称1班级名称1', signTime: '2025-02-11 09:40', train: '教三大教室', trainStatus: 0 // 认证签到 }, { userName: '齐天大圣2', FILEPATH: 'https://img.alicdn.com/img/i1/131787161/O1CN01z67Qvv22lnCzgPob4_!!0-saturn_solar.jpg_.webp', className: '班级名称2', signTime: '2025-02-14 18:00', train: '教一大教室', trainStatus: 1 // 考试签到 } ] this.totalPage = 2 }, resetList() { this.pageSize = 10 this.currentPage = 1 this.trainList = [] this.getData() }, scrolltolower() { this.currentPage++ if (this.totalPage >= this.currentPage) this.getData() }, handleCalcSignStatus(type) { return this.signStatusMap[type] } } } </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; line-height: 1.2; transform: translateY(8rpx); padding: 0; width: 300rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .tag_flag { background: #5ac725; color: #fff; padding: 2rpx 6rpx; border-radius: 8rpx; } .flex_layout { display: flex; margin-top: 8rpx; } } } </style>