pet-front/otherPages/orderTakingManage/pet/index.vue

<template>
	<view class="personal-pet">
		<view v-if="petLists.length > 0" class="personal-pet-list">
			<view v-for="(item, index) in petLists" :key="index">
				<view
					:class="['personal-pet-list-item', item.sex === 0 ? '.personal-pet-list-item_backgroud_m' : '.personal-pet-list-item_backgroud_f']">
					<view class="personal-pet-info">
						<view>
							<u-avatar :src="item.headImage? item.headImage : defaultPhoto" size="60" shape="circle"></u-avatar>
						</view>
						<view class="personal-pet-info-1">
							<view class="personal-pet-info-2">
								<view class="personal-pet-name">
									{{ item.nickName }}
								</view>
								<view class="personal-pet-sex">
									<img :src="item.sex === 0 ? '../../static/images/details/boy.svg' : '../../static/images/details/girl.svg'"
										alt="sex" style="width: 16px;height: 16px;" />
								</view>
							</view>
							<view class="personal-pet-info-3" style="width: 100%;">
								<view class="ellipsis" style="max-width: 25%;">
									{{ item.type || '未知' }}
								</view>
								<view class="personal-pet-info-age" style="max-width: 90px;">
									{{ item.type || '未知' }}
								</view>
								<view class="ellipsis" style="max-width: 25%;">
									{{ item.weight + 'kg' }}
								</view>
							</view>
						</view>
					</view>
					<view class="personal-pet-info-disposition ellipsis">
						性格： {{ item.personality }}
					</view>
					<view class="view-pets">
						<view @click="toDetail" class="btn">
							查看详细信息
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="personal-pet-none">
			<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png" alt="pet"
				style="width: 149px;height: 124px;" mode="widthFix" />
			<view class="personal-pet-none-text">这里还没有您的宠物,请点击添加吧~</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		petList
	} from "@/api/pet/index.js";
	import {
		onShow,
		onPullDownRefresh
	} from "@dcloudio/uni-app"

	// 定义响应式数据
	const defaultPhoto = ref('https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png');
	const petLists = ref([]);

	// 获取宠物列表
	const getPetListData = async () => {
		petLists.value = [];
		try {
			const res = await petList();
			if (res && res.data) {
				petLists.value = res.data;
			}
		} catch (error) {
			console.error('获取宠物列表失败', error);
		}
	};
	
	// 生命周期钩子
	onMounted(() => {
		getPetListData();
	});

	onShow(() => {
		getPetListData();
	});

	onPullDownRefresh(() => {
		getPetListData();
	});
	
	const toDetail = () => {
		uni.navigateTo({
			url: "/otherPages/orderTakingManage/pet/detail"
		})
	}
</script>

<style lang="scss">
	.personal-pet {
		position: relative;
		height: 100%;
		padding-bottom: 90px;

		.personal-pet-list {
			.personal-pet-list-add {
				width: 100%;
				height: 44px;
				background-color: #FFFFFF;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 15px;

				.personal-pet-list-add-btn {
					font-size: 14px;
					color: #AAA;
					display: flex;
					align-items: center;
				}
			}

			.personal-pet-list-item_backgroud_m {
				background: linear-gradient(179deg, #EDF5FE 0.75%, #FFF 34.11%);
			}

			.personal-pet-list-item_backgroud_f {
				background: linear-gradient(179deg, #FFF4F6 0.75%, #FFF 34.11%);
			}

			.personal-pet-list-item {
				margin: 10px 10px 0 10px;
				border-radius: 5px;
				padding: 20px 10px 10px;

				.personal-pet-info {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.personal-pet-info-1 {
						margin-left: 10px;

						.personal-pet-info-2 {
							display: flex;
							flex-wrap: wrap;

							.personal-pet-name {
								color: #333;
								font-size: 16px;
								margin-right: 10px;
							}
						}

						.personal-pet-info-3 {
							display: flex;
							align-items: baseline;
							font-size: 14px;
							margin-top: 5px;
							color: #7D8196;

							.personal-pet-info-age {
								padding: 0 10px;
								margin: 0 10px;
								border-left: solid 2px #7D8196;
								border-right: solid 2px #7D8196;
							}
						}
					}
				}

				.personal-pet-info-disposition {
					padding: 10px;
					color: #7D8196;
					font-size: 14px;
					background: #f9f9f9;
					border-radius: 5px;
					margin: 10px 0rpx;
				}
				
				.view-pets {
					display: flex;
					justify-content: flex-end;
					
					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 220rpx;
						height: 50rpx;
						border-radius: 25rpx;
						border: 2rpx solid #FFBF60;
						color: #FFBF60;
						font-size: 24rpx;
					}
				}

				.personal-pet-info-btns {
					display: flex;
					justify-content: flex-end;
					margin-top: 10px;

					.personal-pet-info-btn {
						display: flex;
						font-size: 14px;
						color: #7D8196;
						margin-left: 20px;
					}
				}
			}
		}

		.personal-pet-none {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 40%;

			.personal-pet-none-text {
				color: #666;
				text-align: center;
				font-size: 14px;
				width: 100%;
				margin-top: 10px;
			}
		}
	}
</style>