You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
265 lines
9.8 KiB
265 lines
9.8 KiB
<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>
|