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.vaccineStatus`" labelWidth="80" borderBottom
                    @click="showVaccine = true">
                    <u--input v-model="petHealthInfo.vaccineStatus" 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.dewormingStatus`" labelWidth="80" borderBottom
                    @click="showExpelling = true">
                    <u--input v-model="petHealthInfo.dewormingStatus" 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.sterilization`" labelWidth="80" borderBottom
                    @click="showSterilization = true" ref="item1">
                    <u--input v-model="petHealthInfo.sterilization" 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 === '狗狗'">
			        <image class="icon" :src="configList.pet_dog_license.paramValueImage"></image>
                    <view>
                        <up-parse :content="configList.pet_dog_license.paramValueArea" containerStyle="{
                            color: '#A94F20',
                            fontSize: '12px',
                        }"></up-parse>
                    </view>
                </view>
                <u-form-item required label="健康" :prop="`petHealthInfo.healths`" labelWidth="80"
                    @click="healthsSelect">
                    <u--input disabled disabledColor="#ffffff" placeholder="请选择(多选)" :value="petHealthInfo.healthStatus && petHealthInfo.healthStatus.join(',')"
                        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>

		<!-- 赶进度，先注释 -->
		<!-- <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,
		computed,
		onMounted,
	} from 'vue';
	import { useStore } from 'vuex'

	const store = useStore()

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

	// 定义 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;

    .icon {
        width: 12px;
        height: 12px;
        margin-right: 3px;
    }
}
</style>