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>

        <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: () => ({
            vaccineStatus: '',
            dewormingStatus: '',
            sterilization: '',
            doglicenseStatus: '',
            healthStatus: [],
            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.vaccineStatus = e.value[0];
    showVaccine.value = false;
    updatePetHealthInfo();
};

const expellingSelect = (e) => {
    props.petHealthInfo.dewormingStatus = e.value[0];
    showExpelling.value = false;
    updatePetHealthInfo();
};

const sterilizationSelect = (e) => {
    props.petHealthInfo.sterilization = e.value[0];
    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>