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

<template>
	<!-- <div>宠物信息页 </div> -->
	<view class="box">
		<view class="top box-size">
			<view class="form-title">
				宠物头像
			</view>
			<view class="img">
				<image :src="petInfo.photo" mode="" style="width: 157rpx;height: 157rpx;"
					:style="{borderRadius:'100rpx'}"></image>
				<!-- <view >
					点击更换头像
					<view class="top_item">
						<image src="/static/images/tabBar/Group 1000001460@2x.png" mode=""
							style="width: 55rpx;height: 55rpx;" :style="{borderRadius:'50rpx'}"></image>
					</view>
				</view> -->
			</view>
		</view>
		<view class="information">
			<view class="form-title">
				宠物基本信息
			</view>
			<view class="information_item box-size margin_top_3%">
				<view class="level name box-size pad_4">
					昵称
					<!-- <input type="text" placeholder="请输入宠物名字" /> -->
					<view class="item_">
						{{ petInfo.name }}
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					性别
					<!-- <view>
						<up-picker :show="show" :columns="columns"></up-picker>
						<up-button @click="show = true">请选择</up-button>
					</view> -->
					<view class="item_">
						<!-- {{ petInfo.sex == 0 ? '男' : '女' }} -->
						{{ petInfo.gender }}
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					品种
					<view class="item_">
						<!-- {{ petInfo.type }} -->
						{{ petInfo.breed }}
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					出生年月
					<view class="item_">
						{{ petInfo.birthDate || '未知' }}
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					体重
					<view class="item_">
						<!-- {{ petInfo.weight }} -->
						{{ petInfo.bodyType || '未知' }}
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					性格
					<view class="item_">
						<!-- {{ petInfo.personality }} -->
						{{ petInfo.personality && petInfo.personality.join ? petInfo.personality.join('，') : petInfo.personality }}
					</view>
				</view>
			</view>
		</view>
		<view class="information">
			<view class="form-title">
				宠物健康情况
			</view>
			<view class="information_item box-size margin_top_3% item">
				<view class="level name box-size pad_4">
					疫苗
					<!-- <input type="text" placeholder="请输入宠物名字" /> -->
					<view class="item_">
						<!-- 有免疫史 -->
						<!-- {{ vaccineText }} -->
						{{ petInfo.vaccineStatus || '未知' }}
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					驱虫
					<!-- <view>
						<up-picker :show="show" :columns="columns"></up-picker>
						<up-button @click="show = true">请选择</up-button>
					</view> -->
					<view class="item_">
						<!-- {{ dewormText }} -->
						<!-- 未驱虫 -->
						{{ petInfo.dewormingStatus || '未知' }}
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					绝育
					<view class="item_">
						<!-- {{ neuteredText }} -->
						<!-- 已绝育 -->
						{{ petInfo.sterilization || '未知' }}
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					健康
				</view>
			</view>
		</view>
		<!-- <view class="container box-size">
			<view class="container_item level">
				<view class="icon" :style="{borderRadius:'30rpx'}">
					<up-icon name="checkbox-mark" color="#FFFFFF" size="40"></up-icon>
				</view>
				身体健康，无异常
			</view>
			<view class="container_item level">
				<view class="icon_" :style="{borderRadius:'30rpx'}">
					<up-icon name="checkbox-mark" color="#FFFFFF" size="40"></up-icon>
				</view>
				近三个月有做过手术
			</view>
			<view class="bottom box-size" :style="{borderRadius:'8rpx'}">
				右腿骨折，右眼有轻微白内障
			</view>
		</view> -->
		
		<view class="container box-size">
			
			<view class="container_item level" v-for="(value, index) in healthData"
			:key="index">
				<view class="icon" :style="{borderRadius:'30rpx'}" v-if="petInfo.healthStatus.includes(value)">
					<up-icon name="checkbox-mark" color="#FFFFFF" size="40"></up-icon>
				</view>
				<view class="icon_" :style="{borderRadius:'30rpx'}" v-else>
					<up-icon name="checkbox-mark" color="#FFFFFF" size="40"></up-icon>
				</view>
				{{ value }}
			</view>
			
			<view class="bottom box-size" :style="{borderRadius:'8rpx'}"
			v-if="petInfo.remark">
				{{ petInfo.remark }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
	} from "vue"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getPetById
	} from "@/api/order/order.js"
	import { getDictList } from "@/api/system/user"

	onLoad((options) => {
		petId.value = options.id || null;
		getPetDetail()
	});
	
	// const

	const healthData = ref([])
	
	const vaccineText = computed(() => {
		const vaccineMap = {
			0: '每年都免疫',
			1: '有免疫史',
			2: '未免疫'
		};
		return vaccineMap[petInfo.value.vaccine] || ''
	});
	const dewormText = computed(() => {
		const dewormMap = {
			0: '未驱虫',
			1: '定期驱虫',
			2: '有驱虫史'
		};
		return dewormMap[petInfo.value.deworm] || ''
	});
	const neuteredText = computed(() => {
		const neuteredMap = {
			0: '已绝育',
			1: '未绝育'
		};
		return neuteredMap[petInfo.value.neutered] || ''
	});
	const petCartText = computed(() => {
		const petCartMap = {
			0: '是',
			1: '否'
		};
		return petCartMap[petInfo.value.petCard] || ''
	});
	
	
	const petId = ref(null);
	const petInfo = ref({})

	const getPetDetail = async () => {
		if (!petId.value) return;
		let response = await getPetById(petId.value)
		if (response.code == 200 && response.data) {
			petInfo.value = response.data;
		}
	}
	
	function getDictListInfo(){
		getDictList('pet_health_status').then(res=>{
			if (res.code == 200) {
				healthData.value = res.data.map(e=>e.dictLabel)
			}
		})
	}
	
	getDictListInfo()
	
</script>

<style lang="scss">
	.box {
		width: 100vw;
		height: 100vh;

		.top {
			width: 100vw;
			height: 300rpx;
			background-color: #FFFFFF;
			padding: 0 1%;


			.img {
				width: 165rpx;
				height: 165rpx;
				// background-color: pink;
				color: #7D8196;
				font-size: 28rpx;
				margin: 1% 39%;
				display: grid;
				jplace-items: center;
				// position: relative;

				// .top_item {
				// 	position: absolute;
				// 	top: 100rpx;
				// 	left: 100rpx;
				// }
			}
		}

		.item {
			height: 360rpx !important;
		}

		.information {
			width: 100vw;
			height: auto;
			background-color: #FFFFFF;
			margin-top: 17rpx;
			padding: 0 1%;

			.information_item {
				width: 100vw;
				height: 550rpx;
				font-size: 30rpx;
				display: grid;
				justify-content: space-around;

				.item_ {
					width: auto;
					height: 40rpx;
				}

				.name {
					width: 100vw;
					height: 40rpx;
					justify-content: space-between;

					// .name input {
					// 	width: 50rpx;
					// 	background-color: #FFFFFF;
					// }
				}

				// .sex {
				// 	width: 200rpx;
				// 	height: 40rpx;
				// 	background-color: #7D8196;
				// }

				.line1 {
					position: relative;
					margin-bottom: 30rpx;

					&::before {
						position: absolute;
						top: 5rpx;
						left: 17rpx;
						content: "";
						width: 706rpx;
						height: 0.5rpx;
						background-color: #EFEFEF;
						// background-color: red;
					}
				}
			}


		}

		.container {
			width: 100vw;
			height: 500rpx;
			background-color: #FFF4E4;
			padding: 3% 3% 5% 5%;
			font-size: 30rpx;

			.container_item {
				width: auto;
				height: 40rpx;
				margin-bottom: 20rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
					background-color: #FFBF60;
					margin-right: 15rpx;
				}

				.icon_ {
					width: 38rpx;
					height: 38rpx;
					border: 1rpx solid gray;
					background-color: #FFF;
					margin-right: 15rpx;
				}
			}

			.bottom {
				width: 680rpx;
				height: 80rpx;
				background-color: #FFFFFF;
				padding-left: 2%;
				border: 1rpx solid #FFBF60;
				line-height: 80rpx;
			}
		}
	}

	.box-size {
		box-sizing: border-box;
	}

	.level {
		display: flex;
	}

	.pad_4 {
		padding: 0 4%;
	}

	.margin_top_3 {
		margin-top: 3%;
	}
</style>