lanecarford_front/src/views/Workshop/library.vue

<script setup lang="ts">
	import { ref, reactive, onMounted, inject } from 'vue'
	import HeaderTitle from '@/components/HeaderTitle.vue'
	import FooterNavigation from '@/components/FooterNavigation.vue'
	import MyList from '@/components/myList.vue'
	import router from '@/router'
	const emit = defineEmits(['view-type'])

	onMounted(() => {
		emit('view-type', 1)
	})
	const loading = ref(false)
	const finish = ref(false)
	const list = reactive([])

	const onLoad = () => {
		loading.value = true
		setTimeout(() => {
			for (var i = 0; i < 10; i++) {
				list.push({
					id: list.length + 1,
					userID: 10000000 + list.length,
					datetime: '7/22/2025 18:20',
					lastopened: '18:20'
				})
			}
			loading.value = false
			if (list.length >= 50) finish.value = true
		}, 500)
	}
	const onDetailsItem = (v) => {
		// console.log('检索' + i)
		router.push({ name: 'creation', query: { date: v.datetime } })
	}

	const deleteItem = (i: number) => {
		list.splice(i, 1)
	}
</script>

<template>
	<header-title style-type="2" />
	<div class="library">
		<div class="title">Library</div>
		<div class="list">
			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
				<div class="item" v-for="(v, i) in list" :key="v.id">
					<div class="image">
						<img src="@/assets/images/workshop/posture/posture_1.png" />
					</div>
					<div class="content">
						<!-- <span class="userID">User ID: {{ v.userID }}</span> -->
						<span class="datetime">{{ v.datetime }}</span>
						<span class="lastopened">Last opened {{ v.lastopened }}</span>
						<button @click="onDetailsItem(v)">Details</button>
					</div>
					<div class="delete" @click="deleteItem(i)"><SvgIcon name="delete2" size="30" /></div>
				</div>
			</my-list>
		</div>
	</div>
	<footer-navigation is-placeholder />
</template>

<style scoped lang="less">
	.workshop {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.library {
		width: 100%;
		flex: 1;
		overflow: hidden;
		background-color: #fff;
		border-radius: 1rem;
		position: relative;
		color: #000;
		display: flex;
		flex-direction: column;
		&::before {
			content: '';
			position: absolute;
			width: 92rem;
			height: 92rem;
			z-index: 0;
			top: -40rem;
			right: -40rem;
			background: linear-gradient(88.42deg, #ffffff 32.58%, #d9d9d9 94.9%);
			transform: rotate(-45deg);
		}

		> .title {
			font-family: satoshiRegular;
			font-size: 9rem;
			text-align: left;
			line-height: 124%;
			margin: 5rem;
		}
		> .list {
			flex: 1;
			overflow: hidden;
			margin: 0 3rem;
			> .my-list {
				padding: 0 3.8rem;
				--my-list-footer-margin: 2rem 0;
				> .item {
					position: relative;
					padding: 2.8rem;
					width: 100%;
					height: 34.4rem;
					border-radius: 1.88rem;
					background-color: #f3f3f3;
					display: flex;
					align-items: center;
					margin-top: 7.66rem;
					&:first-child {
						margin-top: 0;
					}
					> .image {
						width: 21.4rem;
						height: 100%;
						overflow: hidden;
						border-radius: 2rem;
						background-color: #fff;
						> img {
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}
					> .content {
						margin-left: 5.6rem;
						display: flex;
						flex-direction: column;
						height: 90%;
						> .userID {
							font-family: satoshiRegular;
							font-weight: 500;
							font-size: 3.8rem;
							line-height: 89%;
							color: #000;
						}
						> .datetime {
							margin-top: 1.8rem;
							font-family: satoshiRegular;
							font-weight: 400;
							font-size: 3.2rem;
							line-height: 89%;
							color: #000;
						}
						> .lastopened {
							margin-top: 1rem;
							font-family: satoshiRegular;
							font-weight: 400;
							font-style: Regular;
							font-size: 2.6rem;
							line-height: 89%;
							color: #6f6f6f;
						}
						> button {
							margin-top: auto;
							width: 12.3rem;
							height: 3.8rem;
							border-radius: 0.5rem;
							box-sizing: content-box;
							border: 0.193rem solid #000;
							background: transparent;
							font-family: satoshiRegular;
							font-weight: 400;
							font-size: 2.576rem;
							color: #000;
							margin-right: 5rem;
							&:active {
								opacity: 0.7;
							}
						}
					}
					> .delete {
						position: absolute;
						top: 2.5rem;
						right: 2rem;
						width: 5.5rem;
						height: 5.5rem;
						border: 0.188rem solid #000;
						border-radius: 1.88rem;
						display: flex;
						align-items: center;
						justify-content: center;
						&:active {
							opacity: 0.7;
						}
					}
				}
			}
		}
	}
</style>