ErectionPlatform/pagesHome/pages/afterSalesDetails/siginLog.vue

<template>
	<view class="siginLog_container">
		<view class="siginLog_main">
			<block v-for="(item, index) in info">
				<view class="siginLog_item">
					<!-- 标题 -->
					<view class="row title">
						{{item.type === 1 ? '签入' : '签出'}}
					</view>

					<!-- 时间 -->
					<view class="row flex-c-sb">
						<view class="">
							时间
						</view>

						<view class="info">
							{{item.time}}
						</view>
					</view>

					<!-- 名称 -->
					<view class="row flex-c-sb">
						<view class="">
							师傅姓名
						</view>

						<view class="info">
							{{item.username}}
						</view>
					</view>

					<view class="mt20" v-show="item.isShow">
						<view class="imgbox flex">
							<block v-for="item in item.images" :item="item.url">
								<view class="mr20 mb20">
									<image :src="item.url" mode=""></image>
								</view>
							</block>
						</view>

						<view class="remark">
							{{item.remark}}
						</view>
					</view>

					<view class="mt20" @click="item.isShow = !item.isShow">
						<view :class="{'flex-c-c': true, 'tipText': true, 'done': item.isShow}">
							展开
						</view>

						<view :class="{'flex-c-c': true, 'rotateIcon':true, 'rotate': item.isShow}">
							<u-icon name="arrow-right-double" color="#0086F1" size="36"></u-icon>
						</view>

						<view :class="{'flex-c-c': true, 'tipText': true, 'done': !item.isShow}">
							收起
						</view>
					</view>
				</view>

			</block>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, defineProps, computed } from 'vue';
	import type { PropType } from 'vue';

	const props = defineProps({
		/** 页面路由数据 */
		pageInfo: {
			type: Object as PropType<Object>,
			required: true,
		},
		/** 页面数据 */
		info: {
			type: Object as PropType<Object>,
			required: true,
		}
	})

	const pageInfo = computed(() => {
		console.log('props.pageInfo :>> ', props.pageInfo);

		if (props.pageInfo) return props.pageInfo
		else return {}
	})

	const info = computed(() => {
		console.log('props.info :>> ', props.info);

		if (props.info && props.info.signIn) return props.info.signIn
		else return []
	})

	const details = reactive({
		isShow: true
	})
</script>

<style lang="scss" scoped>
	@import url('@/utils/style/common.scss');

	// 最外层
	.siginLog_container {
		background: #f5f5f6;
		padding: 20upx;
	}

	// 主体容器
	.siginLog_main {
		// padding: 20upx;
		border-radius: 10upx;

		.siginLog_item {
			background: #fff;
			padding: 20upx;
			margin-top: 20upx;
			border-radius: 10upx;

			.row {
				padding: 20upx 0;
				border-bottom: 2upx solid #eee;


				&.title {
					color: var(--subjectColor);
				}

			}

			.info {
				// font-size: 0.9rem;
				color: #999;
			}

			.tipText {
				color: #0086F1;
				overflow: hidden;
				transition: all 0.3s;
				height: 1rem;

				&.done {
					height: 0rem;
				}

			}

			.rotateIcon {
				// flex-direction: row;
				transition: all 0.3s;
				transform: rotate(90deg);

				&.rotate {
					transform: rotate(-90deg);
				}
			}
		}

	}

	.imgbox {
		flex-wrap: wrap;

		image {
			width: 160upx;
			height: 160upx;
			border-radius: 10upx;
		}
	}
</style>