MingGaoApp_vue/MingGaoApp/pages/index/components/ClockInRecord.vue

<template>
	<view class="clock-record">
		<view class="clock-record__action" v-if="isEdit">
			<u-button type="primary" :plain="true" text="打卡" size="mini" @click="handleClockIn"></u-button>
		</view>
		<view class="clock-record__body">
			<u-steps current="1" direction="column" dot>
				<u-steps-item :title="item.create_time" v-for="item in dataSource.clock_in_list || []">
					<view slot="desc" class="step-item">
						<view class="step-item__title">
							<view class="text">
								{{item.address || ''}}
							</view>
							<uni-icons type="location-filled" color="#1B76FF"></uni-icons>
						</view>
						<view class="step-item__content">
							<!-- <view v-for="(imgItem,index) in item.img_list" :key="imgItem+index">{{imgItem}}
							</view> -->
							<image v-for="(imgItem,index) in item.img_list" :key="imgItem+index" :src="baseUrl+imgItem"
								mode="aspectFit" class="img"></image>

						</view>
						<view class="step-item__tips">
							签到描述：{{item.message || ''}}
						</view>
					</view>
				</u-steps-item>
			</u-steps>
			<u-empty text="暂无数据" v-if="dataSource.clock_in_list && !dataSource.clock_in_list.length">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataSource: {
				type: Object,
				default: () => ({})
			},
			isEdit: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {};
		},
		methods: {
			handleClockIn() {
				if (!this.dataSource.task_id) {
					return
				}

				uni.navigateTo({
					url: '/pages/index/clockDetail?taskID=' + this.dataSource.task_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.clock-record {
		box-sizing: border-box;
		width: 100%;
		padding: 24rpx 32rpx;

		&__action {
			display: inline-block;
			margin-bottom: 40rpx;
		}

		&__body {
			::v-deep .u-steps-item__content {
				width: 0;
			}
		}

		.step-item {
			&__title {
				display: flex;
				align-items: center;
				font-size: 12px;
				line-height: 18px;
				color: #1B76FF;


				.text {
					text-decoration: underline;
				}
			}

			&__content {
				padding: 16rpx 0;
				display: flex;
				align-items: center;
				margin-left: -40rpx;

				.img {
					width: 64px;
					height: 64px;
					margin-left: 40rpx;
				}
			}

			&__tips {
				padding: 8rpx 16rpx;
				font-size: 12px;
				line-height: 18px;
				color: #1B76FF;
				background: linear-gradient(270deg, #FFFFFF 0%, #E2EFFF 100%);
				@include line;
			}
		}
	}
</style>