pet-front/otherPages/authentication/serve/record.vue

<template>
	<view class="page">
		<view class="flex-rowl tab">
			<view class="size-28 color-ffb fw700 tab-item">
				全部记录
			</view>
		</view>
		<view v-if="list.length">
			<view class="box" v-for="item in list" :key="item.id">
				<view class="flex-rowl box-top">
					<up-avatar :src="userInfo.userImage" size="126rpx"></up-avatar>
					<view class="box-info">
						<view class="row highlight">{{ userInfo.userName }}</view>
						<view class="row">{{ `服务时间：${dayjs(item.createTime).format('YYYY-MM-DD')}` }}</view>
						<view class="row">{{ `宠物：${getTypeDesc(item.typeIds)}` }}</view>
					</view>
					<view class="box-address">
						<text>{{ item.serviceSpot }}</text>
					</view>
				</view>
				<view class="box-text">
					{{ item.text }}
				</view>
				<view class="box-img">
					<view 
						class="box-img-item"
						v-for="(url, imgIdx) in item.images" 
						:key="`${item.id}-img-${imgIdx}`"
					>
						<up-image 
							:src="url" 
							:show-loading="true" 
							width="154rpx" 
							height="164rpx" 
						></up-image>
					</view>
				</view>
				<view class="flex-rowr box-tools">
					<button plain class="box-btn" @click="onEdit(item.id)">
						<view class="flex-rowc">
							<up-icon name="edit-pen" color="#707070" size="22rpx"></up-icon>
							<text>编辑</text>
						</view>
					</button>
					<button plain class="box-btn" @click="onDelete(item.id)">
						<view class="flex-rowc">
							<up-icon name="trash" color="#707070" size="22rpx"></up-icon>
							<text>删除</text>
						</view>
					</button>
				</view>
			</view>
		</view>
		<view v-else class="flex-rowc">
			<image class="img-empty" src="@/static/images/ydd/empy.png" mode="widthFix"></image>
		</view>

		<up-modal 
			:show="deleteModal.show"  
			:showConfirmButton="false"
			:showCancelButton="false"
		>
			<view class="modal">
				<view class="modal-content">确定要删除该条服务信息吗？</view>
				<view>
					<button plain class="modal-btn modal-btn-cancel" @click="onCancelDelete">取消</button>
					<button plain class="modal-btn modal-btn-confirm" @click="onConfirmDelete">确定</button>
				</view>
			</view>
		</up-modal>

		<view class="footer-btn">
			<view class="btn" @click="toUp">
				立即上传
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue'
	import { useStore } from 'vuex'
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { serviceLogList, deleteServiceLog } from '@/api/serviceLog'
	import dayjs from 'dayjs'
	
	const store = useStore()

	const userInfo = computed(() => {
		return store.getters.userInfo
	})

	const petTypeOptions = computed(() => {
		return store.getters.petTypeOptions
	})
	const getTypeDesc = (typeIds) => {
		if (!typeIds.length) {
			return ''
		}

		let descArr = typeIds.map(typeId => {
			return petTypeOptions.value.find(item => item.id == typeId)?.title || typeId
		})

		return descArr.join('、')
	}

	const list = ref([])

	const fetchLogList = async () => {
		try {
			list.value = await serviceLogList({ userId: store.getters.userInfo.userId })
		} catch (err) {

		}
	}
	
	const onEdit = (id) => {
		uni.setStorageSync('serviceLogData', list.value.find(item => item.id === id))

		uni.navigateTo({
			url: `/otherPages/authentication/serve/upload?id=${id}`
		})
	}


	const deleteModal = reactive({
		show: false,
		id: null,
	})
	const onDelete = (id) => {
		deleteModal.id = id
		deleteModal.show = true
	}
	const onCancelDelete = () => {
		deleteModal.show = false
	}
	const onConfirmDelete = async () => {

		try {
			await deleteServiceLog({ id: deleteModal.id })
			fetchLogList()
			deleteModal.show = false
		} catch (err) {

		}

	}

	const toUp = () => {
		uni.navigateTo({
			url: "/otherPages/authentication/serve/upload"
		})
	}

	onShow(async () => {
		await store.dispatch('fetchPetTypeOptions')
		fetchLogList()
	})
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #F5F5F5;

	}

	.tab {
		padding: 9rpx 28rpx 16rpx 28rpx;
		background-color: #fff;

		&-item {
			padding-bottom: 9rpx;
			border-bottom: 4rpx solid #FFBF60;
		}
	}

	.box {
		margin-top: 6rpx;
		padding: 34rpx 43rpx 16rpx 28rpx;
		background-color: #fff;

		.img__view {
			flex-wrap: wrap;
		}

		&-top {
			align-items: start;
		}

		&-info {
			flex: 1;
			padding: 0 20rpx;
			color: rgba($color: #000000, $alpha: 0.5);
			font-size: 28rpx;
			line-height: 37rpx;

			.highlight {
				color: #000000;
				font-size: 30rpx;
				font-weight: 700;
				line-height: 40rpx;
			}

			.row + .row {
				margin-top: 6rpx;
			}
		}

		&-address {
			max-width: 200rpx;
			text-align: right;
			color: #FFBF60;
			font-size: 28rpx;
			line-height: 37rpx;
		}

		&-text {
			padding: 21rpx 32rpx 18rpx 16rpx;
			color: #000000;
			font-size: 30rpx;
			line-height: 40rpx;
		}

		&-img {
			&-item {
				display: inline-block;
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 16rpx;
				margin-left: 16rpx;
			}
		}

		&-btn {
			display: inline-block;
			border: none;
			padding: 0;
			margin: 0;
			color: #707070;
			font-size: 22rpx;
			line-height: 29rpx;

			& + & {
				margin-left: 44rpx;
			}
		}
	}

	.img-empty {
		width: 250rpx;
		margin-top: 20vh;
	}

	.modal {
		&-content {
			text-align: center;
			color: #000000;
			font-size: 30rpx;
			line-height: 40rpx;
			margin-bottom: 35rpx;
		}

		&-btn {
			display: inline-block;
			padding: 20rpx 89rpx;
			border: none;
			margin: 0;
			width: auto;
			height: auto;
			font-size: 30rpx;
			line-height: 40rpx;
			border-radius: 40rpx;

			& + & {
				margin-left: 25rpx;
			}

			&-cancel {
				background-color: #FFF4E6;
				color: #FFBF60;
			}

			&-confirm {
				background-color: #FFBF60;
				color: #FFFFFF;
			}
		}
	}
</style>