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.
225 lines
8.2 KiB
225 lines
8.2 KiB
<template>
|
|
<view class="">
|
|
<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"
|
|
@confirm="vaccineSelect"></u-picker>
|
|
<u-picker :show="showExpelling" :showToolbar='false' :columns="expellingActions" @cancel="showExpelling = false" :immediateChange="true"
|
|
:defaultIndex="defaultDeworming"
|
|
@confirm="expellingSelect"></u-picker>
|
|
<u-picker :show="showSterilization" :showToolbar='false' :columns="sterilizationActions" @cancel="showSterilization = false" :immediateChange="true"
|
|
:defaultIndex="defaultSterilization"
|
|
@confirm="sterilizationSelect"></u-picker>
|
|
<u-picker :show="showDog" :showToolbar='false' :columns="dogActions" @cancel="showDog = false" :immediateChange="true"
|
|
:defaultIndex="defaultDoglicense"
|
|
@confirm="dogSelect"></u-picker>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getDictList } from "@/api/system/user"
|
|
export default {
|
|
data() {
|
|
return {
|
|
showVaccine: false,
|
|
showExpelling: false,
|
|
showSterilization: false,
|
|
showDog:false,
|
|
showHealths: false,
|
|
vaccineActions: [[ '每年都免疫','有免疫史','未免疫']],
|
|
expellingActions: [['未驱虫', '定期驱虫', '有驱虫史']],
|
|
sterilizationActions: [['已绝育','未绝育']],
|
|
dogActions: [[ '是','否']],
|
|
healthData: [],
|
|
tempHealths: []
|
|
}
|
|
},
|
|
props: {
|
|
petType: {
|
|
type: String,
|
|
default: 'dog'
|
|
},
|
|
petHealthInfo:{
|
|
type:Object,
|
|
default:()=>({
|
|
vaccineStatus: '',
|
|
dewormingStatus: '',
|
|
sterilization: '',
|
|
doglicenseStatus:'',
|
|
healthStatus: [],
|
|
remark:''
|
|
})
|
|
},
|
|
defaultVaccine:0,
|
|
defaultDeworming:0,
|
|
defaultSterilization:0,
|
|
defaultDoglicense:0
|
|
},
|
|
mounted() {
|
|
this.getHealthDataList()
|
|
this.defaultVaccine=[].push(this.vaccineActions[0].indexOf(this.petHealthInfo.vaccineStatus))
|
|
this.defaultDeworming=[].push(this.expellingActions[0].indexOf(this.petHealthInfo.dewormingStatus))
|
|
this.defaultSterilization=[].push(this.sterilizationActions[0].indexOf(this.petHealthInfo.sterilization))
|
|
this.defaultDoglicense=[].push(this.dogActions[0].indexOf(this.petHealthInfo.doglicenseStatus))
|
|
},
|
|
methods: {
|
|
// getVaccineList(){
|
|
// getDictList('pet_vaccine_status').then(res=>{
|
|
// if (res.code == 200) {
|
|
// let vaccineType = res.data.map(e=>e.dictLabel)
|
|
// this.vaccineActions=[vaccineType]
|
|
// } else {
|
|
// this.$modal.showToast('获取免疫类型失败')
|
|
// }
|
|
// })
|
|
// },
|
|
// getDewormingList(){
|
|
// getDictList('pet_deworming_status').then(res=>{
|
|
// if (res.code == 200) {
|
|
// let dewormingType = res.data.map(e=>e.dictLabel)
|
|
// this.expellingActions=[dewormingType]
|
|
// } else {
|
|
// this.$modal.showToast('获取驱虫情况失败')
|
|
// }
|
|
// })
|
|
// },
|
|
getHealthDataList(){
|
|
getDictList('pet_health_status').then(res=>{
|
|
if (res.code == 200) {
|
|
this.healthData = res.data.map(e=>e.dictLabel)
|
|
} else {
|
|
this.$modal.showToast('获取健康类型失败')
|
|
}
|
|
})
|
|
},
|
|
vaccineSelect(e) {
|
|
this.petHealthInfo.vaccineStatus = e.value[0];
|
|
this.showVaccine = false;
|
|
this.updatePetHealthInfo();
|
|
},
|
|
expellingSelect(e) {
|
|
this.petHealthInfo.dewormingStatus = e.value[0];
|
|
this.showExpelling = false;
|
|
this.updatePetHealthInfo();
|
|
},
|
|
sterilizationSelect(e) {
|
|
this.petHealthInfo.sterilization = e.value[0];
|
|
this.showSterilization = false;
|
|
this.updatePetHealthInfo();
|
|
},
|
|
dogSelect(e){
|
|
this.petHealthInfo.doglicenseStatus = e.value[0];
|
|
this.showDog = false;
|
|
this.updatePetHealthInfo();
|
|
},
|
|
healthsSelect() {
|
|
this.showHealths = !this.showHealths;
|
|
this.$nextTick(() => {
|
|
uni.pageScrollTo({
|
|
scrollTop: 2000,
|
|
duration: 300
|
|
})
|
|
})
|
|
},
|
|
checkboxChange(n) {
|
|
console.log('change', n);
|
|
this.updatePetHealthInfo();
|
|
},
|
|
changeRemark(e){
|
|
debugger;
|
|
this.petHealthInfo.remark=e
|
|
this.updatePetHealthInfo()
|
|
},
|
|
updatePetHealthInfo() {
|
|
// 触发 update 事件，将修改后的 petHealthInfo 对象发送给父组件
|
|
this.$emit('update:petHealthInfo', this.petHealthInfo);
|
|
}
|
|
}
|
|
|
|
}
|
|
</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>
|