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.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>