| @ -1,226 +1,242 @@ | |||||
| <template> | <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 === '狗狗'"> | |||||
| <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--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> | |||||
| <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> | </template> | ||||
| <script setup> | <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); | |||||
| }); | |||||
| 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> | </script> | ||||
| <style lang="scss"> | <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> | |||||
| .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> | |||||