pet-front/otherPages/userManage/pet/components/petHealthInfo.vue

<template>
	<view>
		<view class="personal-pet-health-info">
			<view class="personal-pet-info-title border-bottom">
				宠物健康情况
			</view>
			<u--form labelPosition="left" :model="petHealthInfo" ref="uForm">
				<u-form-item required label="疫苗" :prop="`petHealthInfo.vaccine`" labelWidth="80" borderBottom
					@click="showVaccine = true">
					<u--input v-model="petHealthInfo.vaccine" disabled disabledColor="#ffffff" placeholder="请选择"
						placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
				</u-form-item>
				<u-form-item required label="驱虫" :prop="`petHealthInfo.deworm`" labelWidth="80" borderBottom
					@click="showExpelling = true">
					<u--input v-model="petHealthInfo.deworm" disabled disabledColor="#ffffff" placeholder="请选择"
						placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
				</u-form-item>
				<u-form-item label="绝育" :prop="`petHealthInfo.neutered`" labelWidth="80" borderBottom
					@click="showSterilization = true" ref="item1">
					<u--input v-model="petHealthInfo.neutered" disabled disabledColor="#ffffff" placeholder="请选择"
						placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
				</u-form-item>
				<u-form-item v-if="petType === 'dog' || petType === '狗狗' " label="狗证"
					:prop="`petHealthInfo.doglicenseStatus`" labelWidth="80" borderBottom @click="showDog = true"
					ref="item1">
					<u--input v-model="petHealthInfo.doglicenseStatus" disabled disabledColor="#ffffff"
						placeholder="请选择" placeholderStyle="text-align:right;color:#AAA" border="none"
						inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
				</u-form-item>
				<view class="dog-tips" v-if="petType === 'dog' || petType === '狗狗'">
					<u-icon name="info-circle" color="#A94F20" size="12"></u-icon>
					<view style="margin-left: 3px;">
						未办理养犬许可证且需要外出遛狗, 犬只存在被相关单位收缴
						甚至捕杀的可能，请您遵守当地养犬规范，合法文明养犬。具体
						请您查看当地养犬条例
					</view>
				</view>
				<!-- 赶进度，先注释 -->
				<!-- <u-form-item required label="健康" :prop="`petHealthInfo.healths`" labelWidth="80" @click="healthsSelect"> -->
				<u-form-item required label="健康" :prop="`petHealthInfo.health`" labelWidth="80">
					<u--input disabledColor="#ffffff" placeholder="请输入"
						v-model="petHealthInfo.health"
						placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
					<view slot="right">
						<u-icon v-if="showHealths" name="arrow-down" color="#AAA"></u-icon>
						<u-icon v-else name="arrow-right" color="#AAA"></u-icon>
					</view>
				</u-form-item>
			</u--form>
		</view>

		<!-- 赶进度，先注释 -->
		<!-- <view class="health-select" v-show="showHealths">
			<view style="padding: 10px;height: 85%;">
				<u-checkbox-group v-model="petHealthInfo.healthStatus" @change="checkboxChange" placement="column"
					activeColor="#ffbf60">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in healthData" :key="index"
						:label="item" :name="item">
					</u-checkbox>
				</u-checkbox-group>
				<u--input placeholder="请输入其他健康特征"
					:disabled="!(petHealthInfo.healthStatus && petHealthInfo.healthStatus.includes('其他'))"
					border="surround" maxlength='20' :customStyle="{backgroundColor: '#fff'}"
					@change="updatePetHealthInfo()" v-model="petHealthInfo.remark"></u--input>
			</view>
		</view> -->

		<u-picker :show="showVaccine" :showToolbar='false' :columns="vaccineActions" @cancel="showVaccine = false"
			:immediateChange="true" :defaultIndex="defaultVaccine" @change="vaccineSelect"></u-picker>
		<u-picker :show="showExpelling" :showToolbar='false' :columns="expellingActions" @cancel="showExpelling = false"
			:immediateChange="true" :defaultIndex="defaultDeworming" @change="expellingSelect"></u-picker>
		<u-picker :show="showSterilization" :showToolbar='false' :columns="sterilizationActions"
			@cancel="showSterilization = false" :immediateChange="true" :defaultIndex="defaultSterilization"
			@change="sterilizationSelect"></u-picker>
		<u-picker :show="showDog" :showToolbar='false' :columns="dogActions" @cancel="showDog = false"
			:immediateChange="true" :defaultIndex="defaultDoglicense" @change="dogSelect"></u-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';

	// 定义 props
	const props = defineProps({
		petType: {
			type: String,
			default: 'dog'
		},
		petHealthInfo: {
			type: Object,
			default: () => ({
				vaccine: '',
				deworm: '',
				neutered: '',
				doglicenseStatus: '',
				health: [],
				remark: ''
			})
		},
		defaultVaccine: {
			type: Number,
			default: 0
		},
		defaultDeworming: {
			type: Number,
			default: 0
		},
		defaultSterilization: {
			type: Number,
			default: 0
		},
		defaultDoglicense: {
			type: Number,
			default: 0
		}
	});

	// 定义 emits
	const emits = defineEmits(['update:petHealthInfo']);

	// 定义响应式数据
	const showVaccine = ref(false);
	const showExpelling = ref(false);
	const showSterilization = ref(false);
	const showDog = ref(false);
	const showHealths = ref(false);
	const vaccineActions = ref([
		['每年都免疫', '有免疫史', '未免疫']
	]);
	const expellingActions = ref([
		['未驱虫', '定期驱虫', '有驱虫史']
	]);
	const sterilizationActions = ref([
		['已绝育', '未绝育']
	]);
	const dogActions = ref([
		['是', '否']
	]);
	const healthData = ref([]);
	const tempHealths = ref([]);
	const uForm = ref(null);
	const item1 = ref(null);

	// 定义方法
	const getHealthDataList = () => {
		// getDictList('pet_health_status').then(res => {
		//     if (res.code === 200) {
		//         healthData.value = res.data.map(e => e.dictLabel);
		//     } else {
		//         uni.showToast({
		//             title: '获取健康类型失败',
		//             icon: 'none'
		//         });
		//     }
		// });
	};

	const vaccineSelect = (e) => {
		props.petHealthInfo.vaccine = e.index;
		showVaccine.value = false;
		updatePetHealthInfo();
	};

	const expellingSelect = (e) => {
		props.petHealthInfo.deworm = e.index;
		showExpelling.value = false;
		updatePetHealthInfo();
	};

	const sterilizationSelect = (e) => {
		props.petHealthInfo.neutered = e.index;
		showSterilization.value = false;
		updatePetHealthInfo();
	};

	const dogSelect = (e) => {
		props.petHealthInfo.doglicenseStatus = e.value[0];
		showDog.value = false;
		updatePetHealthInfo();
	};

	const healthsSelect = () => {
		showHealths.value = !showHealths.value;
		uni.pageScrollTo({
			scrollTop: 2000,
			duration: 300
		});
	};

	const checkboxChange = (n) => {
		console.log('change', n);
		updatePetHealthInfo();
	};

	const changeRemark = (e) => {
		props.petHealthInfo.remark = e;
		updatePetHealthInfo();
	};

	const updatePetHealthInfo = () => {
		// 触发 update 事件，将修改后的 petHealthInfo 对象发送给父组件
		emits('update:petHealthInfo', props.petHealthInfo);
	};

	// 生命周期钩子
	onMounted(() => {
		// getHealthDataList();
		// defaultVaccine.value = vaccineActions.value[0].indexOf(props.petHealthInfo.vaccineStatus);
		// defaultDeworming.value = expellingActions.value[0].indexOf(props.petHealthInfo.dewormingStatus);
		// defaultSterilization.value = sterilizationActions.value[0].indexOf(props.petHealthInfo.sterilization);
		// defaultDoglicense.value = dogActions.value[0].indexOf(props.petHealthInfo.doglicenseStatus);
	});
</script>

<style lang="scss">
	.personal-pet-health-info {
		background-color: #fff;
		padding: 10px 20px 0 20px;
		margin-top: 10px;
	}

	.health-select {
		background-color: #fffcf2;
		padding: 10px 20px;
	}

	.dog-tips {
		color: #A94F20;
		font-size: 12px;
		display: flex;
		align-items: baseline;
		margin-top: 5px;
	}
</style>