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

<template>
	<view class="personal-pet">
		<view v-if="petList.length > 0" class="personal-pet-list">
			<view v-for="(item, index) in petList" :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 || 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/sex/boy.svg' : '../../../static/images/sex/girl.svg'"
										alt="sex" style="width: 16px;height: 16px;" />
								</view>
							</view>
							<view class="personal-pet-info-3" style="width: 100%;">
								<view style="max-width: 35%;">
									{{ item.type || '未知' }}
								</view>
								<view class="personal-pet-info-age" style="max-width: 90px;">
									{{ item.age || '未知' }}
								</view>
								<view style="max-width: 25%;">
									体重{{ item.weight }}kg
								</view>
							</view>
						</view>
					</view>
					<view class="personal-pet-info-disposition ellipsis">
						性格： {{ item.personality }}
					</view>
					<view class="personal-pet-info-btns">
						<view class="personal-pet-info-btn" @click="editPet(item)">
							<u-icon name="edit-pen" color="#7d8196" size="16" style="margin-right: 5px;"></u-icon>
							<view style="margin-left: 5px;">
								编辑
							</view>
						</view>
						<view class="personal-pet-info-btn" @click="deletePet(item)">
							<u-icon name="trash" color="#7d8196" size="16"></u-icon>
							<view style="margin-left: 5px;">
								删除
							</view>
						</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 class="personal-pet-add">
			<button class="personal-pet-add-btn" @click="addPet">
				<view style="font-size: 16px;font-weight: 500;">
					添加宠物
				</view>
			</button>
		</view>

		<view>
			<u-picker :show="show" :columns="petTypes" @confirm="petTypeChange" @cancel="cancel"
				:immediateChange="true"></u-picker>
		</view>

		<u-modal :show="showDel" @confirm="confirmDel" @cancel="cancelDel" ref="uModal" showCancelButton
			:asyncClose="true" :content="delContent"></u-modal>
		<!-- 客服组件 -->
		<CustomerService />
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	// import {
	// 	getDictList
	// } from "@/api/system/user.js"
	import {
		getpetList,
		delByPetId
	} from "@/api/pet/index.js";
	import {
		useRouter
	} from 'vue-router';
	import {
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from "vuex"

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

	const router = useRouter();
	const defaultPhoto = ref('https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png');
	const petList = ref([]);
	const show = ref(false);
	const showDel = ref(false);
	const petTypes = ref([
		[
			'猫咪', '狗狗'
		]
	]);
	const delContent = ref('');
	const deleteId = ref('');
	const petType = ref('');

	const getPetList = async () => {
		petList.value = [];
		try {
			const res = await getpetList({
				userId: userInfo.value.userId
			});
			if (res && res.data) {
				petList.value = res.data;
				showDel.value = false;
			}
		} catch (error) {
			console.error('获取宠物列表失败', error);
		}
	};

	// const getPetTypeList = async () => {
	//   try {
	//     const res = await getDictList('pet_type');
	//     if (res.code === 200) {
	//       const petType = res.data.map(e => e.dictLabel);
	//       petTypes.value = [petType];
	//     } else {
	//       console.error('获取pet type失败');
	//     }
	//   } catch (error) {
	//     console.error('获取pet type列表失败', error);
	//   }
	// };

	const addPet = () => {
		show.value = true;
	};

	const cancel = () => {
		show.value = false;
	};

	const petTypeChange = (e) => {
		petType.value = e.value[0];
		show.value = false;
		if (petType.value === '猫咪') {
			uni.navigateTo({
				url: "/otherPages/userManage/pet/petInfo?petType=0&optionType=add&userId="+userInfo.value.userId
			})
		}
		if (petType.value === '狗狗') {
			uni.navigateTo({
				url: "/otherPages/userManage/pet/petInfo?petType=1&optionType=add&userId="+userInfo.value.userId
			})
		}
	};

	const editPet = (item) => {
		if (item.petType === '猫咪' || item.petType === 0) {
			uni.navigateTo({
				url: `/otherPages/userManage/pet/petInfo?petType=0&optionType=edit&petId=${item.id}`
			})
		}
		if (item.petType === '狗狗' || item.petType === 1) {
			uni.navigateTo({
				url: `/otherPages/userManage/pet/petInfo?petType=1&optionType=edit&petId=${item.id}`
			})
		}
	};

	const deletePet = (item) => {
		delContent.value = "确定要删除" + item.nickName + '?';
		showDel.value = true;
		deleteId.value = item.id;
	};

	const confirmDel = async () => {
		try {
			await delByPetId({
				id: deleteId.value
			});
			getPetList();
		} catch (error) {
			console.error('删除宠物失败', error);
		}
	};

	const cancelDel = () => {
		showDel.value = false;
		deleteId.value = '';
	};

	// onMounted(() => {
	// 	// getPetTypeList();
	// 	getPetList();
	// });

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

	onPullDownRefresh(() => {
		getPetList();
	});
</script>

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

		.personal-pet-add {
			box-sizing: border-box;
			background-color: #FFFFFF;
			padding: 20rpx 20rpx 40rpx 20rpx;
			width: 100%;
			height: 160rpx;
			position: fixed;
			bottom: 0;
			z-index: 100;
			display: flex;

			.personal-pet-add-btn {
				width: 100%;
				height: 90rpx;
				border-radius: 6px;
				background: #FFB13F;
				font-size: 16px;
				color: #FFFFFF;
			}
		}

		.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;
						width: calc(100% - 60px);

						.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-top: 10px;
				}

				.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>