| @ -1,226 +1,242 @@ | |||
| <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> | |||
| <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> | |||
| <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> | |||