163 lines
4.1 KiB
Vue
163 lines
4.1 KiB
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.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> |