lanecarford_front/src/views/Workshop/library.vue

<script setup lang="ts">
	import { ref, reactive, onMounted, inject } from 'vue'
	import MyList from '@/components/MyList.vue'
	import router from '@/router'
	import { FormatDate } from '@/utils/tools'
	import { getCustomerPhotos, deleteCustomerPhoto } from '@/api/workshop'
	const emit = defineEmits(['view-type'])
	import { showConfirmDialog } from 'vant'
	import { useGenerateStore } from '@/stores'
	const generateStore = useGenerateStore()

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

	const onLoad = () => {
		loading.value = true
		getCustomerPhotos(generateStore.customerId)
			.then((data) => {
				data?.forEach((v) => {
					const obj = {
						visitRecordId: v.visitRecordId,
						defaultImageUrl: v.defaultImageUrl,
						datetime: FormatDate(v.visitTime, 'dd/MM/yyyy HH:mm'),
						lastopened: FormatDate(v.visitTime, 'HH:mm')
					}
					list.push(obj)
				})
				loading.value = false
				finish.value = true
			})
			.catch((err) => {
				console.error(err)
				loading.value = false
				finish.value = true
			})
	}
	// 删除项
	const deleteItem = async (obj: any, i: number) => {
		const res = await showConfirmDialog({
			title: 'Delete',
			message: 'Are you sure you want to delete this item?',
			confirmButtonText: 'Yes',
			cancelButtonText: 'Cancel'
		}).catch(() => 0)
		if (res === 0) return
		console.log(obj, i)
		deleteCustomerPhoto(obj.visitRecordId)
			.then(() => {
				list.splice(i, 1)
				console.log('删除成功')
			})
			.catch((err) => {
				console.error(err)
			})
	}
	// 详情项
	const onDetailsItem = (v) => {
		// console.log('检索' + i)
		router.push({ name: 'creation', query: { visitRecordId: v.visitRecordId } })
	}
</script>

<template>
	<div class="library">
		<div class="title">Library</div>
		<div class="list">
			<my-list
				v-model:loading="loading"
				v-model:finish="finish"
				:empty="list.length === 0"
				@load="onLoad"
			>
				<div class="item" v-for="(v, i) in list" :key="v.visitRecordId">
					<div class="image">
						<img v-lazy="v.defaultImageUrl" />
					</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(v, i)"><SvgIcon name="delete2" size="30" /></div>
				</div>
			</my-list>
		</div>
	</div>
</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: satoshiBold;
			font-size: 8.9rem;
			text-align: left;
			line-height: 124%;
			margin: 5rem 9.1rem;
		}
		> .list {
			flex: 1;
			overflow: hidden;
			margin: 0 4.5rem;
			> .my-list {
				padding: 0 4.5rem;
				--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: 22.9rem;
						height: 100%;
						overflow: hidden;
						border-radius: 2rem;
						background-color: #fff;
						> img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							display: block;
						}
					}
					> .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>