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

<template>
	<view class="content">
    <u-cell-group>
      <u-cell title="头像">
        <template #value>
          <u-image width="200rpx" height="200rpx" model="widthFix" :src="$filePath + signInfo.useravatarurl" />
        </template>
      </u-cell>
      <u-cell title="姓名" :value="signInfo.name"></u-cell>
      <u-cell title="班级名称" :value="signInfo.className"></u-cell>
      <u-cell title="签到时间" :value="signInfo.studyStartTime"></u-cell>
      <u-cell title="培训地点" :value="signInfo.trainingLocationName"></u-cell>
      <u-cell title="签到状态" :value="studyStateMap[signInfo.studystate].value"></u-cell>
      <u-cell title="考试签到" :value="stageexamStateMap[signInfo.stageexamstate].value"></u-cell>
    </u-cell-group>
	</view>
</template>

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

export default {
	data() {
		return {
			routeQuery: {},
      signInfo: {},
      // 签到状态枚举
			studyStateMap: {
        '0': {
          value: '未签到',
          color: 'tag__red'
        },
				'3': {
          value: '已签到',
          color: 'tag__green'
        }
			},
      // 考试状态枚举
      stageexamStateMap: {
        '0': {
          value: '无需考试',
          color: 'tag__orange'
        },
        '1': {
          value: '未签到',
          color: 'tag__red'
        },
        '5': {
          value: '已签到',
          color: 'tag__green'
        },
      },
		}
	},

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

	methods: {
		async getData() {
			const { classId } = this.routeQuery
			let resData = await getSignInfo({
			  showCount: 1,
			  currentPage: 1,
			  classId
			});
			this.signInfo = resData.page.list[0]
		},
	}
}
</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>